/* ==========================================================================
   hero-scroll.css — P1 히어로(.ps-shero__*) + P2 제품관통(.ps-punch__*)
   단일 진실: ../DESIGN-SPEC.md (섹션 번호 주석으로 대조 가능)
   ========================================================================== */

/* ---------- §9 디자인 토큰 (DESIGN-SPEC 그대로) ---------- */
:root {
  /* 코어 (브랜드 표준) */
  --hsl-ink: #0a0a0a;
  --hsl-paper: #f5f4f0;
  --hsl-white: #fafafa;
  --hsl-steel: #c0c0c0;
  --hsl-warm-gray: #8a8a8a;
  /* orbit 무드 (블루아워) */
  --hsl-blue-deep: #121826;
  --hsl-blue-mid: #2f4258;
  --hsl-blue-dusk: #4a6076;
  /* 001 BEAM 앰버 발광 (제품 = 생명·빛) */
  --hsl-amber: #e8873a;
  --hsl-amber-hot: #ff9d4d;
  --hsl-amber-soft: rgba(232, 135, 58, 0.28);
  /* 텍스트 계층 */
  --hsl-text-on-dark: rgba(250, 250, 250, 0.92);
  --hsl-text-on-dark-mut: rgba(250, 250, 250, 0.6);
  /* 세이프 스크림 (§1.2-2) */
  --hsl-scrim: linear-gradient(180deg, transparent 40%, rgba(10, 10, 10, 0.28) 100%);
  /* 모션 */
  --hsl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hsl-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --hsl-dur-fast: 150ms;
  --hsl-dur: 300ms;
  --hsl-dur-slow: 600ms;
  --hsl-dur-cine: 900ms;
  /* 간격 (4px 베이스) */
  --hsl-gutter: clamp(20px, 5vw, 80px);

  /* 확장 토큰 (프로토타입 구현용, §9 코어 확장) */
  --ps-font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- 리셋 · 베이스 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--hsl-ink);
  font-family: var(--ps-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }

/* focus-visible 전역 세이프 (§7 키보드) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--hsl-amber);
  outline-offset: 2px;
}

/* ==========================================================================
   P1 — .ps-shero__* (DESIGN-SPEC §1~§3)
   구조: .ps-shero(300vh, scroll 길이) > .ps-shero__stage(sticky, 100vh)
   z0 canvas / z1 scrim / z2 type / z3 hud / z4 scroll
   ========================================================================== */

.ps-shero {
  position: relative;
  height: 300vh;
  background: var(--hsl-ink);
}

.ps-shero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  /* 첫 orbit 프레임을 CSS 배경으로 선표시(LCP·JS 실패 대비 그레이스풀 폴백). js/ps-shero.js ORBIT_FRAMES[0]과 동일 경로 유지. */
  background: var(--hsl-ink) url('../assets/orbit-frames/f000.webp') center / cover no-repeat;
}

/* z0 — orbit canvas (JS가 프레임 시킹으로 그림) */
.ps-shero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

/* reduced-motion 폴백 정지 이미지 (기본 숨김 — §7) */
.ps-shero__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* z1 — 세이프존 scrim (§1.2-2) */
.ps-shero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hsl-scrim);
  pointer-events: none;
}

/* z2 — 색반전 타이포 (§1, §2) */
.ps-shero__type {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 8%; /* 하단 40% 세이프존 안에 앵커 (§1.2-1) */
  padding: 0 var(--hsl-gutter);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
  will-change: transform, opacity;
  pointer-events: none;
}

.ps-shero__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 1.4vw, 1.2rem);
  margin: 0 0 clamp(0.4rem, 1vw, 0.8rem);
  padding: 0;
  list-style: none;
}

.ps-shero__keyword {
  font: 500 clamp(0.68rem, 1vw, 0.82rem) / 1.4 var(--ps-font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transform: translateY(1.1em);
}

/* 초대형 헤드라인 — difference 고정 (§1.1) */
.ps-shero__headline {
  margin: 0;
  font: 600 clamp(2.6rem, 11vw, 11rem) / 0.98 var(--ps-font-sans);
  letter-spacing: -0.02em;
  color: #fff;
  mix-blend-mode: difference;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(0.28rem, 1.4vw, 0.6rem);
}

.ps-shero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(1.1em);
}

/* 브랜드 시그니처 — 앰버 점은 difference 블렌드에서 제외해 순색 유지 (§1.3) */
.ps-shero__dot {
  color: var(--hsl-amber);
  mix-blend-mode: normal;
  isolation: isolate;
}

.ps-shero__slogan {
  margin: 0;
  font: 500 clamp(0.8rem, 1.4vw, 1rem) / 1.4 var(--ps-font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity var(--hsl-dur-slow) var(--hsl-ease-out), transform var(--hsl-dur-slow) var(--hsl-ease-out);
  transition-delay: 260ms;
}

/* 키네틱 등장 시퀀스 (§1.4) — IO가 .is-visible 부여 */
.ps-shero.is-visible .ps-shero__keyword,
.ps-shero.is-visible .ps-shero__word {
  animation: pssWordIn 460ms var(--hsl-ease-out) forwards;
}
.ps-shero.is-visible .ps-shero__keyword:nth-child(1) { animation-delay: 0ms; }
.ps-shero.is-visible .ps-shero__keyword:nth-child(2) { animation-delay: 90ms; }
.ps-shero.is-visible .ps-shero__keyword:nth-child(3) { animation-delay: 180ms; }
.ps-shero.is-visible .ps-shero__keyword:nth-child(4) { animation-delay: 270ms; }
.ps-shero.is-visible .ps-shero__keyword:nth-child(5) { animation-delay: 360ms; }
.ps-shero.is-visible .ps-shero__word:nth-child(1) { animation-delay: 480ms; }
.ps-shero.is-visible .ps-shero__word:nth-child(2) { animation-delay: 550ms; }
.ps-shero.is-visible .ps-shero__word:nth-child(3) { animation-delay: 620ms; }
.ps-shero.is-visible .ps-shero__slogan { opacity: 1; transform: translateY(0); }

@keyframes pssWordIn {
  from { opacity: 0; transform: translateY(1.1em); }
  to   { opacity: 1; transform: translateY(0); }
}

/* z3 — 로고 HUD (항상 factor 0 고정, §2) */
.ps-shero__hud {
  position: absolute;
  z-index: 3;
  top: var(--hsl-gutter);
  left: var(--hsl-gutter);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.ps-shero__logo {
  height: clamp(28px, 3.2vw, 40px);
  width: auto;
  display: block;
  /* HUD는 항상 또렷해야 함(blend 미적용, §2) — 원본 스크롤 마크가 옅은 회색이라
     밝기 보정 + 이중 drop-shadow(타이트 다크 헤일로 + 소프트 그림자)로 어떤 배경 프레임 위에서도 가독성 확보 */
  filter: brightness(1.35) drop-shadow(0 0 3px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.5));
}

.ps-shero__meta {
  margin: 0;
  font: 500 clamp(0.6rem, 0.9vw, 0.72rem) / 1.4 var(--ps-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hsl-text-on-dark-mut);
}

/* z4 — SCROLL 인디케이터 */
.ps-shero__scroll {
  position: absolute;
  z-index: 4;
  bottom: var(--hsl-gutter);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--hsl-text-on-dark-mut);
  pointer-events: none;
}

.ps-shero__scroll-label {
  font: 500 0.65rem / 1 var(--ps-font-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.ps-shero__scroll-chevron {
  width: 14px;
  height: 8px;
  animation: pssScrollBounce 1.6s ease-in-out infinite;
}

@keyframes pssScrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* 모바일 — 스크롤 호흡 축소 (§3.3) */
@media (max-width: 640px) {
  .ps-shero { height: 250vh; }
}

/* ==========================================================================
   P2 — .ps-punch__* (DESIGN-SPEC §4) — 다크 배경 확정(§0.4)
   z1 type--back(.9) / z2 product(1.05) / z3 type--front(.9) / z4 cta
   ========================================================================== */

.ps-punch {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(72px, 12vh, 140px) 0;
  background: linear-gradient(160deg, var(--hsl-ink) 0%, var(--hsl-blue-deep) 100%);
}

/* 옵션 5c — 앰버 앰비언트 글로우 (생성 자산 불요, CSS로 충분) */
.ps-punch__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 52% 44% at 50% 52%, var(--hsl-amber-soft), transparent 70%);
}

.ps-punch__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--hsl-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ps-punch__eyebrow {
  margin: 0 0 clamp(1rem, 3vw, 2rem);
  font: 500 0.72rem / 1.4 var(--ps-font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hsl-amber); /* 상태 라벨 — 앰버는 CTA·상태 전용(§9) */
  text-align: center;
}

/* z축 교차 스택 — 3개 레이어가 같은 grid 셀에 겹침 (기법 B, §4.3) */
.ps-punch__interleave {
  display: grid;
  width: 100%;
  place-items: center;
}
.ps-punch__interleave > * {
  grid-column: 1;
  grid-row: 1;
}

.ps-punch__type--back,
.ps-punch__type--front {
  margin: 0;
  text-align: center;
  font: 600 clamp(3rem, 15vw, 15rem) / 0.92 var(--ps-font-sans);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: exclusion; /* P2 대형 카피 A안(§1.1) — 부드러운 반전 */
}

.ps-punch__type--back { z-index: 1; }

.ps-punch__type--front {
  z-index: 3;
  pointer-events: none;
  /* 제품 실루엣이 지나가는 수평 밴드만 남기고 나머지는 투명 처리 → "관통" 착시.
     🚨 튜닝 포인트 — 실사 컷아웃(투명 PNG) 도착 시 mask-image(제품 알파채널) 기반으로 교체 권장. */
  --ps-punch-band-x1: 32%;
  --ps-punch-band-x2: 68%;
  clip-path: inset(0 calc(100% - var(--ps-punch-band-x2)) 0 var(--ps-punch-band-x1));
}

.ps-punch__product-wrap {
  z-index: 2;
  height: min(76vh, 640px);
  /* width는 height에서 파생(아래 aspect-ratio) — 컷아웃 실사 비율과 박스를 일치시켜
     object-fit:contain 여백을 없애고 제품 세로높이를 박스 높이에 최대한 근접시킨다
     (QA P1 리젝 — 세로높이 미달, DESIGN-SPEC §11.1 목표 ≥55%vh). */
  aspect-ratio: 484 / 837; /* beam-45-render-cutout-tight.png 실측 비율 */
  width: auto;
  overflow: hidden;
  border-radius: 2px;
  --ps-punch-entrance: 4%;
  --ps-punch-drift: 0px;
  opacity: 0;
  transform: translateY(calc(var(--ps-punch-entrance) + var(--ps-punch-drift)));
  transition: opacity var(--hsl-dur-cine) var(--hsl-ease-out), transform var(--hsl-dur-cine) var(--hsl-ease-out);
}
.ps-punch.is-visible .ps-punch__product-wrap {
  opacity: 1;
  --ps-punch-entrance: 0%;
}

.ps-punch__product {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 투명 컷아웃 — 제품 전체 실루엣 중앙에 크게 (DESIGN-SPEC §4.3) */
  object-position: center;
  display: block;
}

/* 카피 아래 좌측 배치 컨테이너(§4.5) — 전체는 중앙 정렬, 내부는 좌측 정렬 */
.ps-punch__footer {
  width: 100%;
  max-width: 640px;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.2rem, 3vw, 2rem);
  text-align: left;
}

.ps-punch__body {
  margin: 0;
  max-width: 42ch;
  font: 400 clamp(0.95rem, 1.6vw, 1.15rem) / 1.7 var(--ps-font-sans);
  color: var(--hsl-text-on-dark); /* blend 없음(§4.5) */
}

.ps-punch__cta {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  flex-wrap: wrap;
}

.ps-punch__btn {
  font: 500 0.78rem / 1 var(--ps-font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  transition: color var(--hsl-dur-fast) ease-out,
              border-color var(--hsl-dur-fast) ease-out,
              opacity var(--hsl-dur-fast) ease-out,
              transform var(--hsl-dur-fast) ease-out;
}

/* Primary — 아웃라인 버튼 (default/hover/active/focus-visible 상태, §4.5) */
.ps-punch__btn--primary {
  padding: 0.95em 1.8em;
  border: 1px solid rgba(250, 250, 250, 0.7);
  border-radius: 2px;
  color: var(--hsl-text-on-dark);
}
.ps-punch__btn--primary:hover {
  border-color: var(--hsl-amber);
  color: var(--hsl-amber);
}
.ps-punch__btn--primary:active { transform: scale(0.98); }

/* Secondary — 텍스트 버튼, 밑줄 hover */
.ps-punch__btn--secondary {
  padding: 0.5em 0;
  color: var(--hsl-text-on-dark-mut);
  border-bottom: 1px solid transparent;
}
.ps-punch__btn--secondary:hover {
  color: var(--hsl-text-on-dark);
  border-bottom-color: currentColor;
}

/* 모바일 — height를 55%vh 목표 역산(62vh × contain 92.6% ≈ 57%vh, qa 재검증 처방).
   max-width는 aspect-ratio(0.578) 정상 도출값(390뷰포트 기준 ≈303px)을 침범하지 않는 여유값만
   (극단적으로 좁은 폭에서 폭 과대만 방지 — 58vw였던 이전 캡이 aspect-ratio를 깨서 재발). */
@media (max-width: 480px) {
  .ps-punch__product-wrap { height: 62vh; max-width: 85vw; }
}

/* ==========================================================================
   §7 접근성 — prefers-reduced-motion 폴백
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* P1: sticky·패럴랙스 해제, 일반 문서 흐름 + 정지 프레임 */
  .ps-shero { height: auto; }
  .ps-shero__stage { position: relative; height: 100vh; background-image: none; }
  .ps-shero__canvas { display: none; }
  .ps-shero__fallback { display: block; }

  /* P1 타이포: blend 유지, 등장 애니메이션만 제거(즉시 표시) */
  .ps-shero__keyword,
  .ps-shero__word,
  .ps-shero__slogan {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ps-shero__type { transform: none !important; opacity: 1 !important; }
  .ps-shero__scroll { display: none; }

  /* P2: y-drift 제거, 정적 관통 레이아웃 유지 */
  .ps-punch__product-wrap {
    transition: none !important;
    opacity: 1 !important;
    --ps-punch-entrance: 0%;
    --ps-punch-drift: 0px;
  }
  .ps-punch__type--back,
  .ps-punch__type--front {
    transform: none !important;
  }
}