/* 에이전트 A: 네비 / 히어로 / 카운트다운 / 스크롤 모션 전용. sections.css 보다 뒤에 로드되므로 여기서 덮어쓴다. */
/* 애니메이션은 transform / opacity 만. 색은 tokens.css 의 것만. */

/* ---------- 앵커 이동 시 sticky 네비 아래에서 멈춤 (Lenis 없이 이동할 때) ---------- */
section[id], footer[id] { scroll-margin-top: 72px; }
/* Lenis 가 스크롤을 맡으면 브라우저 자체 smooth 는 끈다 (둘이 겹치면 끌려가는 느낌이 남) */
html.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- NAV: 스크롤이 시작되면 얇아짐 ---------- */
/* 높이는 레이아웃 속성이라 트랜지션 없이 바꾸고, 안쪽 요소만 transform 으로 부드럽게 줄인다 */
.nav.is-scrolled { height: min(72px, var(--nav-h)); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7,5,5,.5), rgba(7,5,5,0)); opacity: 0; transition: opacity .35s ease; }
.nav.is-scrolled::after { opacity: 1; }
.nav__logo, .nav__ticket { transition: transform .35s var(--ease-out); }
.nav.is-scrolled .nav__logo { transform: rotate(-4deg) scale(.86); }
.nav.is-scrolled .nav__ticket { transform: rotate(2deg) scale(.92); }

/* 모바일 메뉴 열림/닫힘 (nav.js 가 hidden 해제 → is-open 추가, 닫을 땐 is-open 제거 후 320ms 뒤 hidden) */
.nav__mobile { transform: translateY(-10px); opacity: 0; transition: transform .3s var(--ease-out), opacity .22s ease; }
.nav__mobile.is-open { transform: translateY(0); opacity: 1; }
.nav__mobile a { transform: translateY(-8px); opacity: 0; transition: transform .4s var(--ease-out), opacity .3s ease; }
.nav__mobile.is-open a { transform: none; opacity: 1; }
.nav__mobile.is-open a:nth-child(1) { transition-delay: .03s; }
.nav__mobile.is-open a:nth-child(2) { transition-delay: .08s; }
.nav__mobile.is-open a:nth-child(3) { transition-delay: .13s; }
.nav__mobile.is-open a:nth-child(4) { transition-delay: .18s; }
.nav__mobile.is-open a:nth-child(5) { transition-delay: .23s; }

/* 햄버거 → X */
.nav__burger svg path { transform-box: fill-box; transform-origin: center; transition: transform .3s var(--ease-out), opacity .2s ease; }
.nav__burger.is-open path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger.is-open path:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav__burger.is-open path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- HERO: 진입 연출 ---------- */
/* index.html 의 인라인 스크립트가 첫 페인트 전에 html.is-intro 를 붙이고(2.5초 안전 타이머), hero.js 가 연출 시작과 함께 뗀다.
   reduced-motion / ?shot 에서는 애초에 붙지 않는다. 그러니 어떤 경우에도 2.5초 뒤엔 무조건 보인다. */
html.is-intro .hero__eyebrow,
html.is-intro .hero__headline > *,
html.is-intro .hero__poster,
html.is-intro .badge,
html.is-intro .countdown__nums,
html.is-intro .hero__right > *,
html.is-intro .ticker { opacity: 0; }
.hero__line { display: inline-block; }

/* ---------- 카운트다운: 공연 중 / 종료 ---------- */
.countdown.is-live .countdown__label { color: var(--mint); opacity: 1; display: inline-flex; align-items: center; gap: 10px; }
.countdown.is-live .countdown__label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(77,190,140,.25); animation: cd-blink 1.1s ease-in-out infinite; }
.countdown.is-live .cl { color: var(--mint); }
.countdown.is-live .badge__l { color: var(--ink); }
.countdown.is-live .badge__disc::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--mint); opacity: 0; animation: cd-pulse 1.8s ease-out infinite; }
.countdown.is-done .badge__disc::after { animation: none; }
.countdown.is-done .countdown__label::before { display: none; }
@keyframes cd-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.22); opacity: 0; } }
@keyframes cd-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 모바일: 배지 그림자(10px + 5px 번짐)가 HOURS 숫자를 덮지 않도록 간격만 조금 벌림 */
@media (max-width: 640px) {
  .countdown { gap: 26px; }
}

/* ---------- 모션 감소 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.is-intro .hero__eyebrow, html.is-intro .hero__headline > *, html.is-intro .hero__poster, html.is-intro .badge,
  html.is-intro .countdown__nums, html.is-intro .hero__right > *, html.is-intro .ticker { opacity: 1; }
  .nav::after, .nav__logo, .nav__ticket, .nav__mobile, .nav__mobile a, .nav__burger svg path { transition: none; }
  .nav__mobile, .nav__mobile a { transform: none; opacity: 1; }
  .countdown.is-live .badge__disc::after, .countdown.is-live .countdown__label::before { animation: none; }
}