/* Art-directed cover using the user's finished paper collage. */
@font-face { font-family:'Cover Fraunces'; src:url('outputs/intro/fonts/fraunces-soft-black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
.intro { padding:0; background:#c3d2df url('outputs/intro/cover-background.png') center/cover no-repeat; overflow:auto; }
.intro::before { display:none; }
.intro .intro-hero { position:relative; flex:none; width:78%; margin:clamp(70px,16vh,180px) auto 30px; padding:0; min-height:0; align-items:center; }
.intro .intro-title { width:100%; font-family:'Cover Fraunces',Georgia,serif; font-weight:900; font-size:min(9.6vw,16vh); letter-spacing:0; margin:0; line-height:1; }
.intro .intro-letter[data-word="come"] .intro-char { color:#e5a52b; }
.intro .intro-letter[data-word="sit"] .intro-char { color:#294b63; }
.intro .intro-letter[data-word="by"] .intro-char { color:#f2e8d4; }
.intro .intro-letter[data-word="my"] .intro-char { color:#294b63; }
.intro .intro-letter[data-word="desk"] .intro-char { color:#e5a52b; }
.intro #intro-letters { flex-direction:column; gap:.15em; width:100%; }
.intro .intro-title-line { height:1.4em; }
.intro .intro-char { font-size:1.16em; text-shadow:.012em .018em .012em rgba(46,57,66,.23),.035em .05em .04em rgba(46,57,66,.17); }
.intro .intro-letter[data-word="by"] .intro-char { text-shadow:.008em .012em .008em rgba(41,65,82,.42),.025em .035em .018em rgba(41,65,82,.27),.045em .06em .045em rgba(41,65,82,.16); }
.intro .intro-space { width:.34em; }
.intro .intro-greeting { font:clamp(21px,2.6vw,40px)/1.2 'Nanum Pen Script',cursive; color:#36536c; margin:24px 0 20px; text-align:center; }
.intro .intro-enter { position:relative; display:block; padding:10px 27px; color:#294b63; font:clamp(25px,2.5vw,38px)/1.1 'Nanum Pen Script',cursive!important; border:1px solid #c2b49d; outline:1px dashed #52718a; outline-offset:-7px; background:#f3ecdb; border-radius:2px; box-shadow:2px 4px 5px #36485b28; transform:rotate(-3deg); transition:transform .35s,box-shadow .35s; }
.intro .intro-enter::before { content:''; position:absolute; width:9px; height:9px; border-radius:50%; top:3px; left:3px; background:radial-gradient(circle at 30% 25%,#f6e5a9,#a97d35 65%,#634b2b); box-shadow:1px 2px 2px #0003; }
.intro .intro-enter:hover { transform:translateY(-3px) rotate(-1deg); box-shadow:3px 7px 10px #36485b25; }
.intro .intro-enter { outline-color:#c74c3c; }
.intro .intro-enter .cover-entry-arrow { display:inline; color:#c74c3c; width:auto; height:auto; border:0; border-radius:0; background:none; margin-left:6px; }
.intro .intro-instruction { margin:20px 0 0; font-size:10px; color:#627887; }
.cover-replay { position:absolute; bottom:8%; left:19%; background:none; border:0; font-size:11px!important; color:#627887!important; }
.cover-signature { position:absolute; bottom:10%; right:14%; font:27px 'Nanum Pen Script',cursive; color:#36536c; transform:rotate(-7deg); }
@media(max-width:700px) { .intro { background-size:auto 100%; } .intro .intro-hero { width:88%; margin-top:23vh; } .intro .intro-title { font-size:12.5vw; } .intro .intro-title-line { height:1.5em; } .intro .intro-greeting { max-width:90%; margin-top:28px; font-size:23px; } .cover-replay { left:12%; bottom:6%; } .cover-signature { right:10%; bottom:6%; font-size:23px; } }
@media(max-height:550px) and (min-width:701px) { .intro .intro-hero { margin-top:10vh; margin-bottom:50px; } .intro .intro-title { font-size:15vh; } .intro .intro-greeting { margin:10px 0; font-size:24px; } .intro .intro-instruction { margin-top:10px; } }