/* 히어로 교체판 (10/21) — 지금 사이트의 색·서체·칩·버튼은 site.css 그대로, 여기는 등장 효과와 홈 반반 배치만 */

/* ── 제목이 하나씩 날아와 박힘 (AI FILM · AI IDOL · 홈 공통) ── */
.slx{opacity:0;transform-origin:30% 60%;animation:h2In .48s cubic-bezier(.6,0,.85,.3) var(--t) forwards,h2Shake .42s linear calc(var(--t) + .48s)}
.hero-t .slx,h1 .slx,h2 .slx{display:block}
.hero-ko .slx{display:inline-block}
@keyframes h2In{0%{opacity:0;transform:scale(3.2);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes h2Shake{0%{transform:scale(1.05)}15%{transform:translate(-7px,3px)}30%{transform:translate(6px,-3px)}48%{transform:translate(-4px,2px)}66%{transform:translate(3px,-1px)}84%{transform:translate(-1px,0)}100%{transform:none}}
.h2boom{position:fixed;z-index:40;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%) scale(.4);background:radial-gradient(closest-side,#ffffffe0,#FFE7A055 40%,transparent 72%);mix-blend-mode:screen;animation:h2Boom .5s ease-out forwards}
body.idol .h2boom{background:radial-gradient(closest-side,#ffffffe0,#C9BDFF66 40%,transparent 72%)}
.h2boom.r{background:none!important;border:3px solid #ffffffc8;animation:h2Ring .7s ease-out forwards}
@keyframes h2Boom{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes h2Ring{0%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9);border-width:1px}}
.hero-txt.h2hit,.hx .copy.h2hit{animation:h2Copy .38s linear}
@keyframes h2Copy{0%,100%{translate:0 0}20%{translate:-6px 3px}40%{translate:6px -2px}60%{translate:-3px 2px}80%{translate:2px -1px}}
.h2logo{width:clamp(84px,9vw,120px);height:auto}

/* ── 큰 문구: 작게 → 크게 날아와 유리창에 '쾅' ── */
.slam{position:relative;display:inline-block;white-space:nowrap;--st:.7s}
.slam b{display:block;font-family:var(--head);font-weight:900;font-size:clamp(40px,5.6vw,104px);line-height:1.08;letter-spacing:-.02em;
  background:linear-gradient(90deg,#E39A1E 0%,#FFCB4F 22%,#FFF1B0 42%,#FFFFFF 52%,#C9BDFF 70%,#B59CFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #0008) drop-shadow(0 0 22px #000c) drop-shadow(0 10px 40px #0009);
  transform-origin:50% 55%;opacity:0;animation:h2Slam 1.15s cubic-bezier(.55,0,.75,.2) var(--st) forwards,h2SlamShake .62s linear calc(var(--st) + 1.15s)}
.slam.gold b{background:linear-gradient(90deg,#B9772A 0%,#FFF1B0 42%,#FFCB4F 70%,#E39A1E 100%);-webkit-background-clip:text;background-clip:text;font-size:clamp(30px,3.6vw,56px);line-height:1.25}
.slam.left b{transform-origin:20% 55%}
@keyframes h2Slam{0%{opacity:0;transform:scale(.12)}25%{opacity:1}88%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes h2SlamShake{0%{transform:none}10%{transform:translate(-9px,4px)}22%{transform:translate(8px,-3px)}34%{transform:translate(-6px,2px)}46%{transform:translate(5px,-2px)}58%{transform:translate(-3px,1px)}70%{transform:translate(2px,0)}100%{transform:none}}
.slam .flash{position:absolute;left:50%;top:50%;width:140%;height:340%;transform:translate(-50%,-50%) scale(.6);pointer-events:none;opacity:0;background:radial-gradient(closest-side,#ffffffe6,#ffffff40 35%,transparent 70%);mix-blend-mode:screen;animation:h2Flash .55s ease-out calc(var(--st) + 1.15s)}
@keyframes h2Flash{0%{opacity:.95;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.slam .ring{position:absolute;left:50%;top:50%;width:60%;aspect-ratio:3/1;border:3px solid #ffffffcc;border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;animation:h2Ring2 .8s ease-out calc(var(--st) + 1.15s)}
@keyframes h2Ring2{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.1);border-width:1px}}
.slam svg{position:absolute;left:50%;top:50%;width:120%;height:260%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;animation:h2Crack 1.9s ease-out calc(var(--st) + 1.15s) forwards}
.slam svg path{fill:none;stroke:#ffffffd9;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:h2Draw .28s ease-out calc(var(--st) + 1.15s) forwards}
@keyframes h2Draw{to{stroke-dashoffset:0}}
@keyframes h2Crack{0%{opacity:1}55%{opacity:.7}100%{opacity:.14}}
.slam.left svg,.slam.left .flash,.slam.left .ring{left:32%}

/* ── AI IDOL: 댄서가 오른쪽에 오게 ── */
.h2i>video{object-position:72% 20%}

/* ── 홈: 영화 · AI IDOL 반반 ── */
.hx{--split:50%;display:grid!important;grid-template-columns:var(--split) 1fr;min-height:calc(100svh - 72px)!important;height:calc(100svh - 72px);max-height:1100px;transition:grid-template-columns .7s cubic-bezier(.2,.7,.2,1)}
.hx.lf{--split:56%}.hx.ri{--split:44%}
.hx .half{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:0 clamp(20px,3.6vw,60px) clamp(96px,13vh,132px)}
.hx .half>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx .film>video{object-position:50% 50%}
.hx .idol>video{object-position:70% 20%}
.hx .half::after{content:"";position:absolute;inset:0;pointer-events:none}
.hx .film::after{background:linear-gradient(90deg,rgba(5,5,5,.94) 0%,rgba(5,5,5,.6) 38%,rgba(5,5,5,.15) 80%),linear-gradient(0deg,var(--bg) 0%,rgba(5,5,5,0) 50%)}
.hx .idol::after{background:linear-gradient(270deg,rgba(7,6,14,.94) 0%,rgba(7,6,14,.55) 38%,rgba(7,6,14,.12) 80%),linear-gradient(0deg,var(--vbg) 0%,rgba(7,6,14,0) 50%)}
.hx .idol{justify-content:flex-end;text-align:right}
.hx .copy{position:relative;z-index:2;max-width:560px;display:flex;flex-direction:column;gap:12px}
.hx .idol .copy{align-items:flex-end}
.hx .kicker{font-size:15px}
.hx .idol .kicker{color:var(--violet2)}
.hx .logo{height:clamp(52px,5.2vw,78px);width:auto;align-self:flex-start}
.hx .idol .logo{align-self:flex-end}
.hx .hero-t{font-size:clamp(46px,5.6vw,96px)}
.hx .hero-ko{font-size:clamp(20px,1.7vw,26px)}
.hx .row{display:flex;flex-wrap:wrap;gap:10px}
.hx .idol .row{justify-content:flex-end}
.hx .chip{padding:10px 14px;font-size:16px}
.hx .idol .chip{border-color:rgba(201,189,255,.6);background:rgba(7,6,14,.6)}
.hx .idol .chip b{color:var(--violet2)}
.hx .over{position:absolute;z-index:6;top:clamp(26px,5vh,60px);left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:min(96vw,1700px)}
.hx .over .hero-slogan{margin:0;color:#fff;letter-spacing:.3em;text-shadow:0 2px 12px #000}
.hx .over-ko{margin:6px 0 0;font-family:var(--head);font-weight:900;font-size:clamp(22px,2.3vw,32px);text-shadow:0 2px 18px #000}
.hx .over .slam{margin-top:clamp(8px,1.6vh,18px)}
.hx .seam{position:absolute;z-index:5;left:var(--split);top:0;bottom:0;width:0;transition:left .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hx .seam::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,transparent,#EFC75E 30%,#B59CFF 70%,transparent);opacity:.55}
.hx .moon{position:absolute;left:0;top:56%;transform:translate(-50%,-50%);width:clamp(190px,16vw,250px);aspect-ratio:1;border-radius:50%;
  background:linear-gradient(90deg,#FFE7A0 0 50%,#D9D2F0 50% 100%);box-shadow:0 0 60px rgba(239,199,94,.4),0 0 90px rgba(181,156,255,.4),inset 0 0 30px #00000030;display:grid;place-items:center;text-align:center;animation:h2Breathe 5s ease-in-out infinite}
.hx .moon::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid #ffffff30}
.hx .moon div{font:700 14px/1.25 var(--font);color:#2a1f10;letter-spacing:.08em}
.hx .moon b{display:block;font-family:var(--cine);font-weight:400;font-size:clamp(32px,3vw,46px);line-height:1;letter-spacing:.02em;color:#1a1020}
.hx .moon .venue{display:block;font-family:var(--head);font-weight:900;font-size:clamp(28px,2.6vw,39px);line-height:1.05;letter-spacing:-.02em;color:#1a1020;margin-top:4px}
@keyframes h2Breathe{50%{box-shadow:0 0 80px rgba(239,199,94,.6),0 0 120px rgba(181,156,255,.6),inset 0 0 30px #00000030}}
.hx .mseam{display:none}
.hx .hbar{position:absolute;z-index:7;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:10px 16px;border-radius:14px;background:rgba(5,5,5,.72);border:1px solid rgba(239,199,94,.35);backdrop-filter:blur(8px);width:max-content;max-width:calc(100vw - 32px)}
.hx .hbar span{font-size:15px;font-weight:600;color:var(--text2);white-space:nowrap}
.hx .hbar span+span::before{content:"·";margin-right:10px;color:#ffffff55}
.hx .hero-pause{bottom:24px;right:20px}
.hx.h2hit{animation:h2Copy .5s linear}

/* 휴대폰: 위아래로 반반 */
@media (max-width:820px){
  .hx{grid-template-columns:1fr!important;grid-template-rows:auto auto;height:auto;max-height:none;min-height:0!important}
  .hx .half{min-height:60svh;padding:40px 16px 64px}
  .hx .idol{min-height:96svh;padding-top:46svh;padding-bottom:110px}
  .hx .idol{justify-content:flex-start;text-align:left}
  .hx .idol .copy{align-items:flex-start}
  .hx .idol .logo{align-self:flex-start}
  .hx .idol .row{justify-content:flex-start}
  .hx .idol>video{object-position:74% 0;height:72%;bottom:auto}
  .hx .idol::after{background:linear-gradient(0deg,var(--vbg) 30%,rgba(7,6,14,.2) 55%,rgba(7,6,14,.15) 80%,rgba(7,6,14,.7))!important}
  .hx .film::after{background:linear-gradient(0deg,var(--bg) 8%,rgba(5,5,5,.45) 55%,rgba(5,5,5,.75))}
  .hx .idol::after{background:linear-gradient(0deg,var(--vbg) 8%,rgba(7,6,14,.4) 55%,rgba(7,6,14,.7))}
  .hx .seam{display:none}
  .hx .mseam{display:flex;justify-content:center;position:relative;z-index:6;height:0}
  .hx .mseam .moon{left:50%;top:0;width:150px}
  .hx .moon div{font-size:12px}.hx .moon b{font-size:28px}.hx .moon .venue{font-size:26px}
  .hx .over{position:relative;order:-1;top:auto;left:auto;transform:none;width:auto;padding:22px 16px 6px;background:var(--bg)}
  .hx .over-ko{font-size:20px}
  .slam{white-space:normal}
  .hx .slam b{font-size:clamp(32px,10vw,50px)}
  .slam.gold b{font-size:clamp(26px,7.4vw,38px)}
  .hx .hbar{position:relative;left:auto;bottom:auto;transform:none;margin:-44px auto 16px}
  .hx .hbar span{font-size:14px;white-space:normal}
  .hx .film>video{transition:object-position .5s ease}
  .hx .film>video.sing{object-position:80% 50%}
  .h2i>video{height:58%;bottom:auto;object-position:74% 0}
  .h2i .hero-in{padding-top:40svh}
  body.idol .h2i .shade{background:linear-gradient(0deg,var(--vbg) 48%,rgba(7,6,14,.15) 68%,rgba(7,6,14,.1) 85%,rgba(7,6,14,.6))}
}
@media (prefers-reduced-motion: reduce){.slx,.slam b{opacity:1;animation:none}.slam .flash,.slam .ring,.slam svg{display:none}.hx .moon{animation:none}}

/* AI IDOL 배경 두 영상 번갈아 (페이드) */
.hero video.bgr{opacity:0;transition:opacity 1.1s ease}
.hero video.bgr.on{opacity:1}
/* 흑인 댄서 영상을 옅게 겹침 (PC만 — 휴대폰은 데이터 아끼려고 숨김) */
.hero video.ghost{opacity:.2;mix-blend-mode:screen;pointer-events:none}
@media (max-width:820px){.hero video.ghost{display:none}}
/* 홈 '두 개의 글로벌 무대' — 투명도 영향 없음(확인), 글자색 문제라 '작품'의 '품'과 같은 밝은 금색 단색으로 */
.hx .over-ko{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.hx .over-ko .gold{background:none!important;-webkit-background-clip:border-box;background-clip:border-box;color:#FFD54F;filter:none;text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 18px rgba(255,213,79,.35)}
/* 다른 언어: 글자가 길어도 넘치지 않게 */
:root[data-lang]:not([data-lang=ko]) .slam{white-space:normal;max-width:min(92vw,1200px)}
:root[data-lang]:not([data-lang=ko]) .slam b{font-size:clamp(30px,4.2vw,76px);line-height:1.12}
:root[data-lang]:not([data-lang=ko]) .slam.gold b{font-size:clamp(24px,2.8vw,44px)}
:root[data-lang]:not([data-lang=ko]) .hx .moon .venue{font-size:clamp(17px,1.5vw,22px);letter-spacing:0}
:root[data-lang]:not([data-lang=ko]) .hx .hbar span{white-space:normal}
:root[dir=rtl] .hx .moon div{direction:ltr}
/* 키비주얼 장면이 나올 때 AI IDOL 글자 그라데이션을 핑크 쪽으로 살짝 옮김 */
.hero .violet{background-image:linear-gradient(90deg,#C9BDFF 0%,#FFFFFF 22%,#B59CFF 48%,#FBEAFF 62%,#FFB8EC 80%,#FF5FD2 100%);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;transition:background-position 1.4s ease}
.pink .violet{background-position:100% 0}
.hero .hero-ko [style*="#C9BDFF"]{transition:color 1.4s ease}
.pink .hero-ko [style*="#C9BDFF"]{color:#FF9BE8!important}
/* 키비주얼 장면은 천천히 들고 남 */
.hero video.bgr[data-kv]{transition-duration:2.2s}
.hx .film>video[data-kv]{object-position:50% 40%}