/* Hero, owner mockup B (DESIGN.md 9, owner override 2026-10-25): one full-bleed photo poster with a
   Ken Burns drift, left shade, champagne light sweep, twinkling sparks, gold-flowing second H1 line,
   rotating text badge and bottom marquee, plus a one-shot intro (veil, line draw, tracking-in eyebrow,
   line-by-line rise). Every infinite layer starts paused and runs only while hero-poster.js reports
   [data-vely-poster-motion="playing"] (visible, tab shown, not paused by the one control, no reduced
   motion or saveData). The intro exists only under .js[data-vely-intro] (boot.js, before first paint). */
:root {
  --hero-gold: #e8c9a0;
  --hero-gold-light: #fff3dd;
  --hero-gold-deep: color-mix(in srgb, var(--hero-gold) 82%, var(--copper));
  --hero-shade: linear-gradient(90deg, color-mix(in srgb, var(--magnetic-stage) 86%, transparent) 0%, color-mix(in srgb, var(--magnetic-stage) 72%, transparent) 45%, color-mix(in srgb, var(--magnetic-stage) 14%, transparent) 100%);
  /* Local scrim behind the copy column only (inside .hero__inner, above the sweep and sparks), so every
     glyph keeps AA over the brightest photo pixel at any Ken Burns scale, parallax offset or sweep
     position. Desktop: fades out right of the column; phones: the whole column. */
  --hero-scrim: linear-gradient(90deg, color-mix(in srgb, var(--magnetic-stage) 45%, transparent) 0, color-mix(in srgb, var(--magnetic-stage) 38%, transparent) calc(max(var(--page-gutter), (100% - 75rem) / 2) + 36rem), transparent calc(max(var(--page-gutter), (100% - 75rem) / 2) + 52rem));
  --hero-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hero-veil-duration: 1.4s;
  --hero-veil-delay: 0.1s;
  --hero-intro-duration: 1s;
  --hero-line-duration: 1.1s;
  --hero-kenburns-duration: 24s;
  --hero-sweep-duration: 7s;
  --hero-twinkle-duration: 3.2s;
  --hero-gold-duration: 5s;
  --hero-badge-duration: 18s;
  --hero-marquee-duration: 30s;
  --hero-parallax-x: 0.875rem;
  --hero-parallax-y: 0.625rem;
  --hero-badge-size: 8rem;
}

main > section.hero--poster { width: 100%; padding: 0; }
.hero__poster {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(40rem, calc(100svh - 4.5rem));
  /* clip, not hidden: a hidden box is still a scroll container, so focus or scrollIntoView could
     scroll the poster and expose the photo's parallax bleed and the sweep's overhang. */
  overflow: hidden;
  overflow: clip;
  background: var(--magnetic-stage);
  color: var(--stage-ink);
}

/* Photo: Ken Burns on the image, mouse parallax on its wrapper, so the two transforms never collide. */
.hero__photo { position: absolute; inset: calc(-1 * var(--space-4)); z-index: 0; margin: 0; }
.hero__photo-move { width: 100%; height: 100%; }
.hero--poster .hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 45%;
  animation: hero-kenburns var(--hero-kenburns-duration) ease-in-out infinite alternate;
  animation-play-state: paused;
}
.hero__shade { position: absolute; inset: 0; z-index: 1; background: var(--hero-shade); pointer-events: none; }

/* Champagne light sweep: one skewed band crossing the poster, off-canvas at rest. */
.hero__sweep {
  position: absolute;
  inset: -20% auto -20% 0;
  z-index: 2;
  width: 13.75rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-gold) 28%, transparent), transparent);
  transform: translate3d(-30vw, 0, 0) skewX(-18deg);
  animation: hero-sweep var(--hero-sweep-duration) ease-in-out infinite;
  animation-play-state: paused;
}

/* Sparks: four decorative glyphs at fixed spots over the photo side. */
.hero__sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__spark {
  position: absolute;
  color: var(--hero-gold);
  font-size: 1.125rem;
  line-height: 1;
  opacity: 0.55;
  text-shadow: 0 0 0.75rem color-mix(in srgb, var(--hero-gold) 90%, transparent);
  animation: hero-twinkle var(--hero-twinkle-duration) ease-in-out infinite;
  animation-play-state: paused;
}
.hero__spark:nth-child(1) { top: 24%; left: 56%; }
.hero__spark:nth-child(2) { top: 38%; left: 68%; font-size: 0.875rem; animation-delay: -1.1s; }
.hero__spark:nth-child(3) { top: 62%; left: 48%; font-size: 0.8125rem; animation-delay: -2s; }
.hero__spark:nth-child(4) { top: 18%; left: 78%; font-size: 0.875rem; animation-delay: -0.6s; }

/* Copy column. */
.hero__inner {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100% - 2 * var(--page-gutter), 75rem);
  margin-inline: auto;
  padding-block: var(--space-6) calc(var(--space-8) + var(--space-3));
  box-sizing: border-box;
}
/* The scrim spans the poster from its left edge (no visible start line) and sits above the sweep and
   sparks (same layer, later in the DOM) but below the copy column. */
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: var(--hero-scrim); pointer-events: none; }
.hero__vline {
  display: block;
  width: 1px;
  height: 4.5rem;
  margin: 0 0 var(--space-4) 2px;
  background: linear-gradient(var(--hero-gold), transparent);
  transform-origin: top;
}
.hero__eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.5;
  color: var(--hero-gold);
  transform-origin: left center;
}
.hero--poster .hero__title {
  margin-top: var(--space-3);
  font-family: var(--serif);
  font-size: clamp(2.625rem, 6.4vw, 4.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__line > span { display: inline-block; }
.hero__gold { color: var(--hero-gold); }
/* Gold flow: the gradient clipped to the glyphs drifts across them (owner mockup). Without
   background-clip:text support the line stays solid gold. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__gold {
    color: transparent;
    background-image: linear-gradient(100deg, var(--hero-gold), var(--hero-gold-light), var(--hero-gold), var(--hero-gold-deep));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: hero-gold-flow var(--hero-gold-duration) linear infinite;
    animation-play-state: paused;
  }
}
.hero__sub { max-width: 30rem; margin: var(--space-4) 0 var(--space-5); font-size: var(--step-1); line-height: 1.6; color: var(--stage-ink); }
.hero__ctas { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.hero__reach { margin: 0; font-size: var(--step--1); color: var(--stage-muted); }
.hero__reach a { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; min-height: var(--target-min); min-inline-size: var(--target-min); color: var(--stage-ink); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--stage-ink) 35%, transparent); text-underline-offset: 0.25em; }
.hero__reach a:hover { color: var(--hero-gold); text-decoration-color: currentColor; }
.hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-3) 0; margin: var(--space-6) 0 0; padding: 0; list-style: none; font-size: var(--step--1); color: var(--stage-ink); }
.hero__stats li { padding-inline: var(--space-5); border-left: 1px solid color-mix(in srgb, var(--stage-ink) 25%, transparent); }
.hero__stats li:first-child { padding-left: 0; border-left: 0; }
.hero__stat-value { display: block; color: var(--stage-ink); font-size: var(--step-0); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero__stat-label { display: block; }

/* Rotating text badge (decorative). */
.hero__badge { position: absolute; inset: auto 2.75rem 7.5rem auto; z-index: 3; width: var(--hero-badge-size); height: var(--hero-badge-size); pointer-events: none; }
.hero__badge svg { width: 100%; height: 100%; animation: hero-badge-spin var(--hero-badge-duration) linear infinite; animation-play-state: paused; }
.hero__badge text { font-family: var(--sans); font-size: 0.65625rem; font-weight: 700; letter-spacing: 0.16em; fill: color-mix(in srgb, var(--stage-ink) 85%, transparent); }
.hero__badge-core { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.625rem; color: var(--hero-gold); }

/* Bottom marquee (decorative): two identical halves, the track moves by one half. */
.hero__marquee {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  overflow: hidden;
  white-space: nowrap;
  padding-block: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--stage-ink) 18%, transparent);
  background: color-mix(in srgb, var(--magnetic-stage) 35%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.hero__marquee-track { display: inline-flex; animation: hero-marquee var(--hero-marquee-duration) linear infinite; animation-play-state: paused; }
.hero__marquee-track span { padding-right: 2.75rem; font-size: 0.75rem; letter-spacing: 0.3em; color: color-mix(in srgb, var(--stage-ink) 72%, transparent); }

/* The one motion control: always visible once JS runs, same place in every state. */
/* The control sits over the bright, uncovered side of the photo, so it carries the same stage wash as the
   film play control (a media control, not a call to action) to keep its label at AA contrast. */
.hero__motion-toggle { position: absolute; inset: var(--space-3) var(--page-gutter) auto auto; z-index: 4; padding-inline: var(--space-2); border-radius: var(--radius-s); background: color-mix(in srgb, var(--magnetic-stage) 78%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); --text-button-ink: var(--stage-ink); --text-button-line: color-mix(in srgb, var(--stage-ink) 40%, transparent); --text-button-hover: var(--hero-gold); }
.hero__poster :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper-raised); }

/* Running state: the one place where the hero's infinite layers move. */
.hero--poster[data-vely-poster-motion="playing"] :is(.hero__photo img, .hero__sweep, .hero__spark, .hero__gold, .hero__badge svg, .hero__marquee-track) { animation-play-state: running; }
/* Reduced motion or Save-Data (set by hero-poster.js): a still poster, no light band. */
.hero--poster[data-vely-poster-static] .hero__sweep { display: none; }

/* Mouse parallax: fine pointers only, while the poster plays. */
@media (hover: hover) and (pointer: fine) {
  .js [data-vely-parallax][data-vely-poster-motion="playing"] .hero__photo-move {
    transform: translate3d(calc(var(--hero-px, 0) * -1 * var(--hero-parallax-x)), calc(var(--hero-py, 0) * -1 * var(--hero-parallax-y)), 0);
    transition: transform var(--motion-base) var(--ease-out);
  }
}

/* One-shot intro, only under .js[data-vely-intro]; without it every element is simply visible. */
.hero__veil { display: none; }
.js[data-vely-intro] .hero__veil {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--magnetic-stage);
  opacity: 0;
  pointer-events: none;
  animation: hero-veil-out var(--hero-veil-duration) ease var(--hero-veil-delay) both;
}
.js[data-vely-intro] .hero__vline { animation: hero-line-draw var(--hero-line-duration) var(--hero-ease) 0.5s both; }
.js[data-vely-intro] .hero__eyebrow { animation: hero-track-in 1.2s ease 0.6s both; }
.js[data-vely-intro] .hero__line > span { animation: hero-rise var(--hero-intro-duration) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js[data-vely-intro] .hero__line + .hero__line > span { animation-delay: 0.18s; }
.js[data-vely-intro] .hero__sub { animation: hero-fade-up var(--hero-intro-duration) ease 0.9s both; }
.js[data-vely-intro] .hero__ctas { animation: hero-fade-up var(--hero-intro-duration) ease 1.05s both; }
.js[data-vely-intro] .hero__stats { animation: hero-fade-up var(--hero-intro-duration) ease 1.2s both; }
.js[data-vely-intro] .hero__badge { animation: hero-fade-up var(--hero-intro-duration) ease 1.35s both; }

/* Below the poster: the earlier heading and lead, kept word for word. */
.hero__after { width: min(100% - 2 * var(--page-gutter), var(--content-max)); margin-inline: auto; padding-block: var(--space-6) 0; display: grid; gap: var(--space-3); }
.hero__intro { max-width: var(--text-max); font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; }
.hero__context { display: block; margin-bottom: var(--space-1); font: 600 var(--step--1)/1.5 var(--sans); color: var(--ink-muted); }
.hero__heading { display: block; }
.hero--poster .hero__lead { max-width: var(--text-max); font-size: var(--step-0); line-height: 1.65; color: var(--ink-muted); }

@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes hero-sweep {
  0% { transform: translate3d(-30vw, 0, 0) skewX(-18deg); }
  55%, 100% { transform: translate3d(115vw, 0, 0) skewX(-18deg); }
}
@keyframes hero-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.25) rotate(20deg); }
}
@keyframes hero-gold-flow { to { background-position: 220% 0; } }
@keyframes hero-badge-spin { to { transform: rotate(360deg); } }
@keyframes hero-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes hero-veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hero-line-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes hero-track-in { from { opacity: 0; transform: scaleX(1.35); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes hero-fade-up { from { opacity: 0; transform: translate3d(0, 1.375rem, 0); } to { opacity: 1; transform: none; } }

@media (max-width: 47.5rem) {
  :root {
    --hero-shade: linear-gradient(180deg, color-mix(in srgb, var(--magnetic-stage) 70%, transparent) 0%, color-mix(in srgb, var(--magnetic-stage) 78%, transparent) 40%, color-mix(in srgb, var(--magnetic-stage) 90%, transparent) 100%);
    --hero-scrim: color-mix(in srgb, var(--magnetic-stage) 45%, transparent);
  }
  .hero__badge { display: none; }
  /* Phones: the copy spans the full width, so the sparks twinkle beneath the shade and can never sit
     bright behind a glyph (a peak spark under the eyebrow measured 2.66:1 at 320). */
  .hero__shade { z-index: 2; }
  .hero__sparks { z-index: 1; }
  .hero__inner { padding-block: var(--space-7) calc(var(--space-7) + var(--space-3)); }
  .hero__vline { height: 3rem; margin-bottom: var(--space-3); }
  .hero__stats { margin-top: var(--space-5); }
  .hero__stats li { padding-inline: var(--space-3); }
}
/* Phones: the three stats stay on one row; a long label breaks between its own phrase units instead. */
@media (max-width: 30rem) { .hero__stats { flex-wrap: nowrap; } }
@media (max-width: 22rem) {
  .hero__eyebrow { letter-spacing: 0.14em; }
  .hero__stats li { padding-inline: var(--space-2); }
  /* The Kakao link takes its own line rather than leaving a separator at a line end. */
  .hero__reach .hero__sep-last { display: none; }
  .hero__reach a:last-child { display: flex; width: fit-content; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__veil { display: none !important; }
  .hero__sweep { display: none; }
  .hero--poster :is(.hero__photo img, .hero__spark, .hero__gold, .hero__badge svg, .hero__marquee-track) { animation: none !important; }
}