/* =====================================================================
   intro.css — 컷 편집식 타이포 인트로 (약 3.6초)
   흐름: 큰 단어가 짧은 컷으로 위치·모양(채움/외곽선/흐림)·배경(어둡게/밝게/보라)을
        바꾸며 빠르게 지나감 → 슬로건이 가운데 튀어 오름 → 첫 화면 제목 자리로 미끄러져 들어감
   ===================================================================== */
#intro{display:none}
#intro{--ink:#F2EFF7}
html.intro-on #intro{display:block;position:fixed;inset:0;z-index:100;cursor:pointer;overflow:hidden;color:var(--ink)}
#intro.gone{display:none!important}
/* 스크롤·클릭하면 부드럽게 사라짐 */
#intro.fading{opacity:0;pointer-events:none;transition:opacity .6s ease}
html.i-fade .hero h1{visibility:visible}
.i-bg{position:absolute;inset:0;background:#0E0C14;transition:opacity .7s cubic-bezier(.4,0,.2,1)}
/* 컷마다 배경이 바뀜 (전환 없이 툭툭) */
html.intro-on #intro[data-bg="light"]{--ink:#14111B}
#intro[data-bg="light"] .i-bg{background:#F3F0F8}
html.intro-on #intro[data-bg="acc"]{--ink:#14111B}
#intro[data-bg="acc"] .i-bg{background:#C3A3EE}
#intro.p-slogan .i-bg{background:var(--bg)}
html.intro-on #intro.p-slogan{--ink:var(--text)}
#intro.p-fly .i-bg{opacity:0}


/* 컷 하나 */
.cut{position:absolute;inset:0;display:flex;padding:9vh 5vw;opacity:0;pointer-events:none}
.cut.on{opacity:1}
.cut .tx{display:block;font-weight:900;font-size:var(--fs,20vw);line-height:.92;letter-spacing:-.06em;white-space:nowrap;color:var(--ink)}
/* 자리 */
.p-bl{align-items:flex-end;justify-content:flex-start}
.p-br{align-items:flex-end;justify-content:flex-end}
.p-tl{align-items:flex-start;justify-content:flex-start}
.p-tr{align-items:flex-start;justify-content:flex-end}
.p-l{align-items:center;justify-content:flex-start}
.p-r{align-items:center;justify-content:flex-end}
.p-c{align-items:center;justify-content:center}
.crop-r .tx{margin-right:-14vw}
.crop-l .tx{margin-left:-12vw}
/* 모양 */
.s-out .tx{color:transparent;-webkit-text-stroke:2px var(--ink)}
.s-acc .tx{color:#C3A3EE}
/* 컷이 보이는 동안 계속 움직임 */
.cut.on.m-zoom .tx{animation:mZoom .5s cubic-bezier(.16,1,.3,1) both}
.cut.on.m-left .tx{animation:mLeft .5s cubic-bezier(.16,1,.3,1) both}
.cut.on.m-right .tx{animation:mRight .5s cubic-bezier(.16,1,.3,1) both}
.cut.on.m-up .tx{animation:mUp .45s cubic-bezier(.16,1,.3,1) both}
.cut.on.m-blur .tx{animation:mBlur .45s cubic-bezier(.16,1,.3,1) both}
@keyframes mZoom{from{transform:scale(1.18)}to{transform:none}}
@keyframes mLeft{from{transform:translateX(9vw)}to{transform:none}}
@keyframes mRight{from{transform:translateX(-9vw)}to{transform:none}}
@keyframes mUp{from{transform:translateY(12vh)}to{transform:none}}
@keyframes mBlur{from{filter:blur(16px);transform:scale(1.06)}to{filter:none;transform:none}}

/* 슬로건: 첫 화면 제목과 같은 글꼴·크기 (sections.css .hero h1 과 같이 묶여 있음) */
.i-slogan{position:fixed;margin:0;opacity:0;color:var(--text)}
#intro.p-slogan .i-slogan{opacity:1}
.i-slogan .sl-in{display:block;transform-origin:30% 50%}
#intro.p-slogan .sl-in{animation:punch .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes punch{from{transform:scale(1.14)}to{transform:none}}
.i-slogan .ln{overflow:hidden}
.i-slogan .ln>span{display:block;transform:translateY(110%) skewY(7deg)}
#intro.p-slogan .i-slogan .ln>span{transform:none;transition:transform .45s cubic-bezier(.2,1.15,.35,1)}
#intro.p-slogan .i-slogan .ln.l2>span{transition-delay:.07s}
#intro.p-fly .i-slogan{transition:transform .75s cubic-bezier(.7,0,.2,1)}


/* 움직임 줄이기 설정: 컷은 그대로, 움직임·흐림 없이 */
#intro.calm *{animation:none!important}
html.intro-on #intro.calm[data-bg]{--ink:#F2EFF7}
#intro.calm[data-bg] .i-bg{background:#0E0C14}
#intro.calm .i-slogan .ln>span{transform:none!important;transition:none!important}
#intro.calm.p-fly .i-slogan{transition:opacity .5s!important}

/* ── 맨 처음 슬레이트: 들어옴 → 딱! (위 막대가 닫히며 흔들림 + 번쩍) → 빠짐 ── */
#iSlate{position:absolute;inset:0;z-index:2;display:none;place-items:center;pointer-events:none}
#intro.s-on #iSlate{display:grid}
#intro.s-on .i-bg{background:#0E0C14}
.sl-wrap{position:relative;width:min(560px,82vw);animation:slIn .42s cubic-bezier(.2,1.2,.4,1) both}
#intro.s-clap .sl-wrap{animation:slHit .26s ease-out both}
#intro.s-out .sl-wrap{animation:slOut .26s cubic-bezier(.6,0,.9,.4) both}
@keyframes slIn{from{transform:translateY(60px) rotate(-6deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes slHit{0%{transform:none}30%{transform:translate(-4px,5px) rotate(-.8deg)}60%{transform:translate(3px,-2px) rotate(.5deg)}100%{transform:none}}
@keyframes slOut{from{transform:none;opacity:1}to{transform:translateY(-40px) scale(1.06);opacity:0}}
.sl-stick{height:min(54px,9vw);border-radius:6px;background:repeating-linear-gradient(-55deg,#F2EFF7 0 22px,#14111B 22px 44px);border:3px solid #F2EFF7}
.sl-top{position:relative;transform-origin:6px 100%;transform:rotate(-24deg);transition:transform .09s cubic-bezier(.7,0,1,.6);margin-bottom:4px}
#intro.s-clap .sl-top{transform:rotate(0)}
.sl-top i{position:absolute;left:-6px;bottom:-9px;width:14px;height:14px;border-radius:50%;background:#C3A3EE;border:3px solid #F2EFF7}
.sl-board{margin-top:4px;border:3px solid #F2EFF7;border-radius:8px;background:#14111B;color:#F2EFF7;font-variant-numeric:tabular-nums}
.sl-prod{padding:14px 18px;font-weight:900;font-size:min(34px,6vw);letter-spacing:.12em;border-bottom:3px solid #F2EFF7}
.sl-row{display:grid;grid-template-columns:repeat(3,1fr)}
.sl-row>div{padding:10px 16px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sl-row>div+div{border-left:3px solid #F2EFF7}
.sl-row small{font-size:min(12px,2.6vw);font-weight:700;letter-spacing:.2em;color:#C3A3EE}
.sl-row b{font-size:min(52px,10vw);font-weight:900;line-height:1;letter-spacing:-.03em}
.sl-meta{grid-template-columns:1.3fr 1fr;border-top:3px solid #F2EFF7}
.sl-meta span{font-size:min(20px,3.6vw);font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 딱! 칠 때 번쩍 */
#intro.s-clap::after{content:"";position:absolute;inset:0;z-index:3;background:#fff;pointer-events:none;animation:slFlash .22s ease-out both}
@keyframes slFlash{from{opacity:.5}to{opacity:0}}