/* first-visit intro (10/30 대표: "다른 홈페이지처럼 로고만 나타나는 것 말고 우리만의 것"). static/js/intro.js
   Shown once per browser (localStorage sb_intro_seen, hidden before paint by the inline language script).
   Tap anywhere = go on, "건너뛰기" = close at once. Sound only after a tap (LP style). No video files: CSS + small images. */
html[data-intro-seen] .intro{display:none!important}
html.intro-lock{overflow:hidden}
.intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .6s ease,transform .7s cubic-bezier(.6,0,.3,1);font-family:var(--font);text-align:center;padding:24px;overflow:hidden}
.intro.bye{opacity:0;transform:translateY(-4%);pointer-events:none}
.intro-skip{all:unset;cursor:pointer;position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.16);color:inherit;letter-spacing:.02em}
.intro-skip{z-index:10}
.intro-c .intro-skip{background:rgba(0,0,0,.28)}
.intro-skip:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.intro-hint{font-size:14px;font-weight:700;letter-spacing:.02em;opacity:.85;animation:in-blink 1.6s ease-in-out infinite}
.intro.go .intro-hint{animation:none;opacity:0;transition:opacity .3s}
@keyframes in-blink{0%,100%{opacity:.35}50%{opacity:.95}}
.intro-logo{width:min(220px,58vw);height:auto;opacity:0;animation:in-up .8s .15s ease forwards}
@keyframes in-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.in-note{position:absolute;font-size:22px;opacity:0;pointer-events:none}
.go .in-note{animation:in-float 1.6s ease-out forwards}
.go .in-note:nth-child(2){animation-delay:.2s}.go .in-note:nth-child(3){animation-delay:.45s}.go .in-note:nth-child(4){animation-delay:.7s}
@keyframes in-float{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1.15) rotate(12deg)}}

/* A. LP record: tap = needle down, record spins, first bars of the title song (sound starts only after the tap) */
.intro-a{background:radial-gradient(120% 90% at 50% 10%,#5d4f82 0%,#3a3459 45%,#1f1c33 100%);color:#fff}
.lp-wrap{position:relative;width:min(300px,74vw);aspect-ratio:1;margin-top:8px}
.lp{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#111 0 17%,transparent 17.5%),repeating-radial-gradient(circle,#1b1a1f 0 2px,#26242c 2.5px 4px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,255,255,.04)}
.lp::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 10%,rgba(255,255,255,.12) 14%,transparent 20% 60%,rgba(255,255,255,.08) 64%,transparent 70%)}
.lp-label{position:absolute;inset:31%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px rgba(0,0,0,.4)}
.lp-label img{width:100%;height:100%;object-fit:cover;display:block}
.lp-label::after{content:"";position:absolute;left:50%;top:50%;width:9%;height:9%;margin:-4.5% 0 0 -4.5%;border-radius:50%;background:#1f1c33}
.go .lp{animation:lp-spin 1.8s linear infinite}
@keyframes lp-spin{to{transform:rotate(360deg)}}
.lp-arm{position:absolute;right:-6%;top:-4%;width:14%;height:70%;transform-origin:50% 8%;transform:rotate(-28deg);transition:transform .7s cubic-bezier(.5,0,.3,1.3)}
.lp-arm::before{content:"";position:absolute;left:50%;top:0;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(circle,#e9e3dc 0 35%,#b8b0a8 36% 60%,#8e867f 61%);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.lp-arm::after{content:"";position:absolute;left:50%;top:14px;width:6px;height:calc(100% - 14px);margin-left:-3px;border-radius:3px;background:linear-gradient(90deg,#d9d2ca,#a29a92);box-shadow:0 4px 10px rgba(0,0,0,.4)}
.lp-head{position:absolute;left:50%;bottom:-6px;width:20px;height:30px;margin-left:-10px;border-radius:4px;background:#E8505B;z-index:1;box-shadow:0 4px 8px rgba(0,0,0,.4)}
.go .lp-arm{transform:rotate(-4deg)}
.intro-a .intro-title{font-family:"SB Title",var(--font);font-weight:700;font-size:22px;opacity:.95}
.intro-a .in-note{color:#ffd2b0;left:50%;top:44%}
.intro-a .in-note:nth-child(2){left:28%}.intro-a .in-note:nth-child(3){left:66%}.intro-a .in-note:nth-child(4){left:42%}

/* B. envelope (B3, 10/30 대표 "좀 끊긴다, 움직임 자연스럽게"): only transform/opacity move. No filter/box-shadow/size
   animation, paper grain is a tiny pre-made PNG (no SVG noise), 6 light dots, phases overlap with one easing family.
   Tap = seal cracks (tiny "tok", after the tap only) -> flap folds open in 3D -> card rises -> card grows into the page. */
@font-face{font-family:"SB Hand";src:url("/fonts/sb-hand-sub.woff2") format("woff2");font-display:swap}
.intro-b{--ease:cubic-bezier(.45,.05,.25,1);--out:cubic-bezier(.22,1,.36,1);background:linear-gradient(165deg,#3b3760 0%,#5f507e 34%,#9a6a86 70%,#c27b78 100%);color:#fff;gap:26px}
.intro-b::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 50%,rgba(255,226,200,.26),transparent 70%);pointer-events:none}
.intro-b::before{content:"";position:absolute;inset:0;background:#FBF6EE;opacity:0;transition:opacity .55s var(--ease);pointer-events:none;will-change:opacity}
.zoom::before{opacity:1}
.intro-b.bye{transform:none;transition:opacity .4s ease}
.intro-b .intro-skip{background:rgba(255,255,255,.16);color:#fff}
.intro-b .intro-hint{font-family:"SB Hand",var(--font);font-size:22px;letter-spacing:0;color:#ffe9d6;position:relative;z-index:2;transition:opacity .25s}
.go .intro-hint{opacity:0}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden;transition:opacity .3s}
.dust i{position:absolute;bottom:0;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,214,.95) 0 22%,rgba(255,220,180,.35) 40%,transparent 70%);opacity:0;will-change:transform,opacity;animation:dust 8s linear infinite}
@keyframes dust{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:.85}85%{opacity:.45}100%{opacity:0;transform:translate3d(16px,-92vh,0)}}
.zoom .dust{opacity:0}
.env{position:relative;z-index:1;width:min(320px,80vw);aspect-ratio:1.5;perspective:1100px;will-change:transform;animation:env-bob 3.2s ease-in-out infinite}
.go .env{animation-play-state:paused}
@keyframes env-bob{0%,100%{transform:translate3d(0,0,0) rotate(-.5deg)}50%{transform:translate3d(0,-6px,0) rotate(.5deg)}}
.env-back,.env-front,.flap-out{background:url("/img/intro/paper.png") 0 0/96px 96px,linear-gradient(160deg,#fff7f0 0%,#fbe6dc 55%,#f6d6cb 100%)}
.env-back{position:absolute;inset:0;border-radius:10px;box-shadow:0 30px 50px -24px rgba(30,20,50,.6)}
.env-front{position:absolute;inset:0;border-radius:10px;z-index:3;clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-front::before{content:"";position:absolute;inset:7px;border-radius:6px;border:1px solid #d8b46a;opacity:.85;clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%)}
.env-to{position:absolute;left:9%;bottom:12%;font-family:"SB Hand",var(--font);font-size:clamp(24px,7vw,30px);color:#6b4a52;transform:rotate(-4deg)}
.env-flap{position:absolute;left:2px;right:2px;top:0;height:56%;z-index:1;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform;transform:rotateX(0deg) translateZ(0);animation:flap-peek 4s ease-in-out 1.2s infinite}
/* B4 (10/30): while waiting the flap now and then lifts a hair ("open me"); on tap it lifts a little (들썩),
   opens in about 1 s with ease-in-out, swings a few degrees past open and settles back (작은 되튐). transform only. */
@keyframes flap-peek{0%,62%,100%{transform:rotateX(0deg) translateZ(0)}70%{transform:rotateX(14deg) translateZ(0)}76%{transform:rotateX(2deg) translateZ(0)}81%{transform:rotateX(7deg) translateZ(0)}88%{transform:rotateX(0deg) translateZ(0)}}
@keyframes flap-open{
  0%{transform:rotateX(0deg) translateZ(0);animation-timing-function:cubic-bezier(.3,0,.4,1)}
  13%{transform:rotateX(22deg) translateZ(0);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  21%{transform:rotateX(11deg) translateZ(0);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
  82%{transform:rotateX(188deg) translateZ(0);animation-timing-function:cubic-bezier(.3,0,.5,1)}
  92%{transform:rotateX(177deg) translateZ(0);animation-timing-function:ease-in-out}
  100%{transform:rotateX(180deg) translateZ(0)}}
.flap-out,.flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-out::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 6px,#d8b46a 6px 7px,transparent 7px);clip-path:polygon(7px 7px,calc(100% - 7px) 7px,50% calc(100% - 9px));opacity:.6}
.flap-out::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(120,70,70,.12))}
.flap-in{transform:rotateX(180deg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),linear-gradient(#f6d2c9,#eeb9ae)}
.go .env-flap{transform:rotateX(180deg) translateZ(0);animation:flap-open 1.25s .12s both}
.env-card{position:absolute;left:6%;right:6%;top:5%;height:90%;z-index:2;border-radius:8px;background:#FBF6EE;box-shadow:0 8px 20px -8px rgba(90,50,60,.35);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:9%;gap:6px;will-change:transform,opacity;transform:translate3d(0,0,0);opacity:0;transition:transform .95s var(--out) .78s,opacity .2s ease .7s}
.env-card img{width:58%;height:auto}
.env-hand{margin:2px 0 0;font-family:"SB Hand",var(--font);font-size:clamp(20px,5.6vw,24px);color:#5b3d48;line-height:1.1}
.go .env-card{transform:translate3d(0,-70%,0);opacity:1}
.zoom .env-card{transform:translate3d(0,-38%,0) scale(4.2);opacity:0;transition:transform .95s var(--ease),opacity .5s ease .4s}
.zoom .env-back,.zoom .env-front,.zoom .env-flap,.zoom .env-seal{opacity:0;transition:opacity .35s ease}
.spark{position:absolute;color:#E8505B;font-size:13px;opacity:0;will-change:transform,opacity}
.spark:nth-of-type(1){left:12%;top:16%}.spark:nth-of-type(2){right:12%;top:22%;color:#d8b46a}.spark:nth-of-type(3){left:20%;bottom:16%;color:#d8b46a}.spark:nth-of-type(4){right:16%;bottom:12%}
.go .spark{animation:twinkle .8s ease-in-out 1.3s 2 alternate}
.go .spark:nth-of-type(2){animation-delay:1.45s}.go .spark:nth-of-type(3){animation-delay:1.55s}.go .spark:nth-of-type(4){animation-delay:1.4s}
@keyframes twinkle{from{opacity:0;transform:scale(.4) rotate(0)}to{opacity:1;transform:scale(1.2) rotate(25deg)}}
/* wax seal: the shadow is its own blurred dot (static), only the halves move */
.env-seal{position:absolute;left:50%;top:54%;width:62px;height:62px;margin:-31px 0 0 -31px;z-index:5}
.env-seal::before{content:"";position:absolute;inset:4px -2px -6px;border-radius:50%;background:radial-gradient(closest-side,rgba(110,25,35,.45),transparent);transition:opacity .2s}
.env-seal .half{position:absolute;inset:0;border-radius:50% 46% 52% 48%;background:radial-gradient(circle at 34% 30%,#ff8a8f 0%,#E8505B 42%,#b8343f 80%,#9c2834 100%);will-change:transform,opacity;transition:transform .42s var(--out),opacity .38s ease .04s}
.env-seal .half.l{clip-path:polygon(0 0,54% 0,44% 30%,56% 52%,42% 76%,52% 100%,0 100%)}
.env-seal .half.r{clip-path:polygon(54% 0,100% 0,100% 100%,52% 100%,42% 76%,56% 52%,44% 30%)}
.env-seal img{position:absolute;inset:22%;width:56%;height:56%;opacity:.88;transition:opacity .15s}
.env-seal::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid rgba(120,20,30,.35);transition:opacity .15s}
.go .env-seal::after,.go .env-seal::before,.go .env-seal img{opacity:0}
.go .env-seal .half.l{transform:translate3d(-14px,10px,0) rotate(-24deg);opacity:0}
.go .env-seal .half.r{transform:translate3d(14px,12px,0) rotate(22deg);opacity:0}
.intro-b .in-note{display:none}
@media (min-width:900px){.env{width:clamp(380px,30vw,520px)}.env-to{font-size:clamp(32px,2.6vw,42px)}.env-hand{font-size:clamp(26px,2vw,32px)}.env-seal{transform:scale(1.25)}.intro-b .intro-hint{font-size:26px}}

/* C. stage: Bokhee runs across, the curtain opens, Soon and Bi wave hello (plays by itself, about 3 s) */
.intro-c{background:#2a1a24;color:#fff;justify-content:flex-end;padding-bottom:16vh}
.stage-back{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 45%,#fff6ec 0%,#fbe3d0 55%,#f0c6b0 100%)}
.stage-back .intro-logo{position:absolute;left:50%;top:22%;transform:translateX(-50%);animation:none;opacity:1}
.cast{position:absolute;left:50%;top:44%;width:max-content;transform:translateX(-50%);display:flex;gap:14px;align-items:flex-end}
.cast img{width:min(110px,27vw);aspect-ratio:1;object-fit:cover;object-position:50% 12%;border-radius:50%;border:4px solid #fff;box-shadow:0 10px 24px -10px rgba(120,60,50,.6)}
.cast img:nth-child(2){width:min(84px,21vw)}
.on-stage .cast img{animation:wave .5s ease-in-out 2.2s 4 alternate}
.on-stage .cast img:nth-child(3){animation-delay:2.35s}
@keyframes wave{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.stage-hello{position:absolute;left:0;right:0;top:calc(44% + min(130px,32vw));font-family:"SB Title",var(--font);font-weight:700;font-size:clamp(20px,5.4vw,26px);color:var(--ink);opacity:0;transition:opacity .5s 2s}
.on-stage .stage-hello{opacity:1}
.curtain{position:absolute;top:0;bottom:0;width:51%;background:repeating-linear-gradient(90deg,#b8323f 0 18px,#d9424f 18px 30px,#a42a37 30px 44px);box-shadow:inset 0 -40px 60px rgba(0,0,0,.25);transition:transform 1.1s cubic-bezier(.6,0,.2,1) 1.25s}
.curtain.l{left:0;border-right:3px solid #8e2230}
.curtain.r{right:0;border-left:3px solid #8e2230}
.on-stage .curtain.l{transform:translateX(-96%)}
.on-stage .curtain.r{transform:translateX(96%)}
.valance{position:absolute;left:0;right:0;top:0;height:9vh;background:radial-gradient(circle at 50% 0,#c93f4a 0 60%,transparent 61%) 0 0/60px 100%,#a42a37;z-index:2}
.runner{position:absolute;left:0;bottom:14vh;width:min(96px,24vw);z-index:3;transform:translateX(-140%);animation:run 1.35s cubic-bezier(.4,0,.6,1) .2s forwards}
.runner img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 10px 22px -8px rgba(0,0,0,.6);animation:hop .27s ease-in-out .2s 5 alternate}
@keyframes run{to{transform:translateX(calc(100vw + 40%))}}
@keyframes hop{to{transform:translateY(-16px) rotate(6deg)}}
.intro-c .intro-hint{position:relative;z-index:3;color:#fff}
@media (prefers-reduced-motion:reduce){.intro *{animation-duration:.01s!important;transition-duration:.2s!important}}