/* 🎬 인트로(js/intro.js) — 여는 한 박자(.cp-splash) · 시작 화면(.cp-intro) · 청크팝 밤보라 세계관 · 방사형 빛살 없음 */
.cp-splash, .cp-intro{ position:fixed; inset:0; z-index:200; overflow:hidden; color:#f6f3ff; font-family:Outfit, Jua, system-ui, sans-serif; word-break:keep-all;
  background:radial-gradient(120% 70% at 50% 18%, #3a2590 0%, #160f40 52%, #08071a 100%); }

/* ① 여는 한 박자 — 방울이 닙을 품고 떠오름(0~45%) → 톡(45%) → 닙 통통 · 로고 팝(55%) → 걷힘 */
.cp-splash{ display:grid; place-items:center; --T:1900ms; }
.cp-splash .sp-orb{ position:absolute; left:50%; top:42%; width:420px; height:420px; margin:-210px 0 0 -210px; border-radius:50%;
  background:radial-gradient(circle at 40% 45%, rgba(255,79,216,.32), transparent 60%), radial-gradient(circle at 62% 55%, rgba(54,224,255,.28), transparent 62%); filter:blur(10px);
  animation:spOrb var(--T) ease-out both; }
@keyframes spOrb{ 0%{ opacity:0; transform:scale(.7) } 40%{ opacity:1 } 100%{ opacity:.9; transform:scale(1.05) } }
.cp-splash .sp-bub{ position:absolute; left:50%; top:42%; width:132px; height:132px; margin:-66px 0 0 -66px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 36% 30%, rgba(190,250,255,.55), rgba(54,200,255,.22) 45%, rgba(42,95,224,.35)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), inset -8px -12px 22px rgba(20,40,140,.45), 0 0 30px rgba(54,224,255,.35);
  animation:spBub var(--T) cubic-bezier(.3,.7,.3,1) both; }
.cp-splash .sp-bub::after{ content:''; position:absolute; left:20%; top:14%; width:30%; height:15%; border-radius:50%; background:rgba(255,255,255,.75); transform:rotate(-28deg); }
.cp-splash .sp-bub img{ width:84px; height:84px; }
@keyframes spBub{ 0%{ transform:translateY(46vh) scale(.6); opacity:0 } 12%{ opacity:1 } 40%{ transform:translateY(0) scale(1) } 44%{ transform:scale(1.12); opacity:1 } 47%{ transform:scale(1.35); opacity:0 } 100%{ opacity:0 } }
.cp-splash .sp-burst{ position:absolute; left:50%; top:42%; width:0; height:0; }
.cp-splash .sp-burst i{ position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--c); opacity:0; animation:spBurst var(--T) ease-out both; }
@keyframes spBurst{ 0%, 44%{ opacity:0; transform:rotate(var(--a)) translateX(0) scale(.4) } 50%{ opacity:1 } 68%{ opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(1) } 100%{ opacity:0 } }
.cp-splash .sp-nib{ position:absolute; left:50%; top:42%; width:112px; height:112px; margin:-56px 0 0 -56px; opacity:0; filter:drop-shadow(0 10px 16px rgba(0,0,0,.45)); animation:spNib var(--T) cubic-bezier(.3,1.6,.5,1) both; }
@keyframes spNib{ 0%, 44%{ opacity:0; transform:scale(.4) } 52%{ opacity:1; transform:scale(1.12) translateY(-10px) } 62%{ transform:scale(.96) translateY(0) } 70%, 100%{ opacity:1; transform:none } }
.cp-splash .sp-logo{ position:absolute; left:50%; top:calc(42% + 78px); width:min(64vw, 270px); transform:translateX(-50%); opacity:0; filter:drop-shadow(0 0 10px rgba(255,79,216,.4));
  animation:spLogo var(--T) cubic-bezier(.3,1.5,.5,1) both; }
@keyframes spLogo{ 0%, 52%{ opacity:0; transform:translateX(-50%) scale(.7) } 64%{ opacity:1; transform:translateX(-50%) scale(1.06) } 72%, 100%{ opacity:1; transform:translateX(-50%) } }
.cp-splash .sp-by{ position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 42px); text-align:center; font:800 11px Outfit, sans-serif; letter-spacing:.32em; color:rgba(207,198,255,.6); opacity:0; animation:spBy var(--T) ease-out both; }
@keyframes spBy{ 0%, 60%{ opacity:0 } 80%, 100%{ opacity:1 } }
/* 같은 날 두 번째부터 — 방울 없이 닙과 로고만 짧게 */
.cp-splash.short .sp-bub, .cp-splash.short .sp-burst{ display:none; }
.cp-splash.short .sp-nib{ animation-name:spNibS; } .cp-splash.short .sp-logo{ animation-name:spLogoS; } .cp-splash.short .sp-by{ animation-name:spByS; }
@keyframes spNibS{ 0%{ opacity:0; transform:scale(.7) } 35%{ opacity:1; transform:scale(1.06) } 55%, 100%{ opacity:1; transform:none } }
@keyframes spLogoS{ 0%, 15%{ opacity:0; transform:translateX(-50%) scale(.85) } 45%, 100%{ opacity:1; transform:translateX(-50%) } }
@keyframes spByS{ 0%, 30%{ opacity:0 } 60%, 100%{ opacity:1 } }
.cp-splash.rm *{ animation:none !important; } .cp-splash.rm .sp-bub, .cp-splash.rm .sp-burst{ display:none; } .cp-splash.rm .sp-nib, .cp-splash.rm .sp-logo, .cp-splash.rm .sp-by{ opacity:1; }
.cp-splash.out{ opacity:0; transform:scale(1.04); transition:opacity .45s ease, transform .45s ease; pointer-events:none; }

/* ② 시작 화면 */
.cp-intro{ display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 14px) 22px calc(env(safe-area-inset-bottom,0px) + 22px); opacity:0; transition:opacity .4s ease; }
.cp-intro.in{ opacity:1; }
.cp-intro .in-amb i{ position:absolute; border-radius:50%; filter:blur(40px); }
.cp-intro .in-amb .a{ left:-20%; top:8%; width:70vw; height:70vw; max-width:420px; max-height:420px; background:rgba(255,79,216,.22); animation:inAmb 9s ease-in-out infinite alternate; }
.cp-intro .in-amb .b{ right:-25%; top:30%; width:80vw; height:80vw; max-width:460px; max-height:460px; background:rgba(54,224,255,.16); animation:inAmb 11s ease-in-out infinite alternate-reverse; }
@keyframes inAmb{ to{ transform:translate(6%, -5%) scale(1.08) } }
/* 뒤로 떠오르는 말 덩어리 방울 — 흐릿한 것은 멀리 */
.cp-intro .in-drift{ position:absolute; inset:0; pointer-events:none; }
.cp-intro .cb{ position:absolute; bottom:-60px; padding:8px 14px; border-radius:999px; white-space:nowrap; font:800 calc(14px * var(--s)) Outfit, sans-serif; color:rgba(240,236,255,.82);
  background:radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); backdrop-filter:blur(2px); filter:blur(var(--blur));
  opacity:0; animation:inRise var(--dur) linear var(--del) infinite; }
@keyframes inRise{ 0%{ transform:translateY(0); opacity:0 } 10%{ opacity:.9 } 80%{ opacity:.75 } 100%{ transform:translateY(-118vh); opacity:0 } }
.cp-intro .in-top{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; }
.cp-intro .in-by{ font:800 10.5px Outfit, sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(207,198,255,.6); }
.cp-intro .in-lang{ display:flex; padding:3px; border-radius:999px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.cp-intro .in-lang button{ border:0; padding:6px 11px; border-radius:999px; background:none; color:rgba(207,198,255,.75); font:800 12px Outfit, Jua, sans-serif; cursor:pointer; }
.cp-intro .in-lang button.on{ background:rgba(255,255,255,.16); color:#fff; }
/* 가운데 — 닙과 고리 · 시작을 누르면 닙이 뛰고 방울이 톡 */
.cp-intro .in-hero{ position:relative; z-index:1; flex:1; min-height:170px; display:grid; place-items:center; }
.cp-intro .in-hero .ring{ position:absolute; width:min(58vw, 240px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, rgba(190,250,255,.22), rgba(54,200,255,.06) 50%, rgba(42,95,224,.12)); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28), 0 0 40px rgba(54,224,255,.18); animation:inRing 4s ease-in-out infinite; }
.cp-intro .in-hero .ring::after{ content:''; position:absolute; left:18%; top:13%; width:28%; height:13%; border-radius:50%; background:rgba(255,255,255,.4); transform:rotate(-28deg); }
@keyframes inRing{ 50%{ transform:scale(1.04) } }
.cp-intro .in-nib{ position:relative; width:min(36vw, 150px); filter:drop-shadow(0 14px 22px rgba(0,0,0,.45)); animation:inNib 2.6s ease-in-out infinite; }
@keyframes inNib{ 50%{ transform:translateY(-10px) rotate(-2deg) } }
.cp-intro .in-pop{ position:absolute; left:50%; top:50%; width:0; height:0; }
.cp-intro .in-pop i{ position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--c); opacity:0; }
.cp-intro.play .in-hero .ring{ animation:inRingPop .45s ease-out forwards; }
@keyframes inRingPop{ 40%{ transform:scale(1.12); opacity:1 } 100%{ transform:scale(1.5); opacity:0 } }
.cp-intro.play .in-pop i{ animation:inBurst .6s .12s ease-out both; }
@keyframes inBurst{ 0%{ opacity:1; transform:rotate(var(--a)) translateX(0) } 100%{ opacity:0; transform:rotate(var(--a)) translateX(120px) } }
.cp-intro.play .in-nib{ animation:inJump .65s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes inJump{ 30%{ transform:translateY(-34px) scale(1.06) } 100%{ transform:translateY(0) scale(1) } }
/* 글 — 왼쪽 맞춤(언더튠과 같은 결) */
.cp-intro .in-copy{ position:relative; z-index:2; }
.cp-intro .ey{ font:900 11px Outfit, sans-serif; letter-spacing:.2em; color:#7ef0b0; }
.cp-intro .wm{ display:block; height:46px; width:auto; margin:10px 0 0; filter:drop-shadow(0 0 10px rgba(255,79,216,.35)); }
.cp-intro .hd{ margin:12px 0 0; font:900 30px/1.22 Outfit, Jua, sans-serif; color:#fff; letter-spacing:-.01em; }
.cp-intro .sb{ margin:10px 0 0; font:600 14px/1.6 Outfit, Jua, sans-serif; color:rgba(207,198,255,.85); }
.cp-intro .in-act{ position:relative; z-index:2; margin-top:22px; }
.cp-intro .in-go{ display:block; width:100%; height:56px; border:0; border-radius:18px; cursor:pointer; font:900 18px Outfit, Jua, sans-serif; color:#3a1d00;
  background:linear-gradient(180deg,#fff0a8,#ffcb57 45%,#ff9f2e); box-shadow:0 6px 0 #b55e12, 0 0 24px rgba(255,203,87,.35); }
.cp-intro .in-go:active{ transform:translateY(3px); box-shadow:0 3px 0 #b55e12; }
.cp-intro .in-or{ display:flex; align-items:center; gap:10px; margin:18px 0 12px; font:700 12px Outfit, Jua, sans-serif; color:rgba(207,198,255,.6); }
.cp-intro .in-or::before, .cp-intro .in-or::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.12); }
.cp-intro .in-sso{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cp-intro .in-sso button{ display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border:0; border-radius:14px; cursor:pointer; font:800 14.5px Outfit, sans-serif; color:#fff; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.cp-intro .in-sso svg{ width:18px; height:18px; }
.cp-intro .in-toast{ margin:12px 0 0; text-align:center; font:700 12.5px/1.5 Outfit, Jua, sans-serif; color:#cfc6ff; }
.cp-intro .in-toast[hidden]{ display:none; }
.cp-intro.leave{ opacity:0; transform:translateY(-3%); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.cp-intro.rm *{ animation:none !important; } .cp-intro.rm .cb{ display:none; }
@media (min-height:760px){ .cp-intro .hd{ font-size:34px; } }
@media (max-height:640px){ .cp-intro .in-hero{ min-height:120px; } .cp-intro .in-nib{ width:110px; } .cp-intro .hd{ font-size:26px; } .cp-intro .in-or{ margin:12px 0 8px; } }
/* 떠오르는 말 방울은 위쪽(닙 둘레)에서만 — 글과 단추 위로는 안 지나간다 */
.cp-intro .in-drift{ inset:0 0 44% 0; z-index:0; overflow:hidden; -webkit-mask:linear-gradient(180deg, transparent 0, #000 14%, #000 72%, transparent 100%); mask:linear-gradient(180deg, transparent 0, #000 14%, #000 72%, transparent 100%); }
.cp-intro .cb{ bottom:-40px; color:rgba(240,236,255,.7); }
@keyframes inRise{ 0%{ transform:translateY(0); opacity:0 } 12%{ opacity:.8 } 80%{ opacity:.6 } 100%{ transform:translateY(-62vh); opacity:0 } }
.cp-intro .in-top, .cp-intro .in-hero{ z-index:1; }
.cp-intro .hd u{ text-decoration:none; background:linear-gradient(90deg,#ff6fd8,#36e0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cp-intro .sb b{ font-weight:800; color:#8ff0ff; } .cp-intro .sb em{ font-style:normal; font-weight:800; color:#ff9ce8; }