/* ============================================================
   solutions/individuals.html, ko/solutions/individuals.html — first
   section (#hero, .iv-hero). Built to bar-iv-hero.md (feeld.co's first
   section) under design-system.md §9.3.2 (amended 2026-10-06):
   - Fit first: exactly one first screen, 100svh with a 560px floor; the
     bottom row (cue, CTA, pause) always visible with ≥ 24px below it.
   - full-bleed photo, radius 0; tint and pause fill from --color--black;
   - three staggered lines at ≥960 (§10.3), a centred stack below;
   - 300 for the light lines, 600 for the rotating word (never 700);
   - ≥960: jumbo by width, capped by height on short screens (note a);
     ≤959: ladder tokens (headline at 861–959, h1 at ≤860 with a width
     fit on the narrowest phones);
     EN line-height 1.1 / −0.024em; KO §4.1.2 (1.2 / −0.016em), same size;
   - the word changes with Feeld's vertical blur roll (note b);
   - pause on the content edge; nav transparent while over the photo;
   - one white button (btn--light, btn--lg; on phones a centred pill of at
     least 260px, §9.3.2's recorded exception to full width);
   - bottom row at ≥960: pause left edge, cue centre, CTA right edge.

   Notes that are this file's own:
   a. Height cap (§9.3.2 priority: fit → faces → jumbo → bottom space).
      size = min(jumbo, --iv-cap), with
        --iv-cap = min(--iv-fit, max(--iv-face, --iv-clear))
      --iv-fit    the row stays on screen: (height − nav, gaps, CTA) / rise
                  of three lines (3.4em EN, 3.6em KO).
      --iv-face   line 1 stays under the eyes and mouths: a plane in height
                  and width, fitted to a search at 246 viewports per language
                  (960–2560 × 560–1100, faces boxed, type drawn alone) and
                  kept at or under the search everywhere. One plane for EN,
                  two for KO (split at 760px tall), plus one for ultrawide
                  windows (≥ 3:1).
      --iv-clear  on wide windows (16:9–3:1) line 1 may instead end before
                  the left face (x = 34% of the photo), whatever the height.
      It binds only on short screens; bottom space takes only the slack.
   b. Motion (§9.3.2's recorded exception to §8.1's 300ms): Feeld's roll,
      650ms, all on the Global curve, no clip box. Out: fades and blurs to
      8px over 90–240ms while it rises 0.9em (120–420ms), so it is ≤ 0.3
      before it reaches line 2's ink. In: from 0.7em below, rising over
      120–650ms; it fades in and un-blurs together over 140–220ms, by when
      it is above the CTA. The two cross at ~0.2 opacity with their
      baselines ~0.83em apart, so they never print on the same spot; the
      only frames with neither word ≥ 0.5 are the crossover and its
      neighbours (~36ms). The row sits 0.6em below line 3 to make that room.
      Timings came from a frame-by-frame model of the Global curve and were
      then measured in the browser. Each word holds ~2.2s.
   c. Staircase (§9.3.2): line 1 flush left, line 3 flush right, line 2
      centred. CSS centres it; JS (js/individuals-hero.js) then moves it by
      as little as needed, within ±10% of the content width, so that like
      edges (start–start, end–end) align exactly or sit ≥ 60px apart in
      ink for every rotating word, and so it never starts right of the
      longest line-3 word (where it would, it aligns with that start).
   d. Focus over the photo keeps the §10.1 ring (2px accent, 3px offset)
      with a 3px white halo in the offset so it reads on the photo.
   e. The photo keeps round 1's framing with the round-2 colour grade
      baked into the export; the tint is only the last step to 4.5:1.
   ============================================================ */

.iv-hero {
  --iv-ink: var(--color--black);
  --iv-pause: 2.4rem;
  --iv-gap-b: max(24px, var(--sp-16));            /* ≥ 24px below the row */
  /* ≥960: as much room under the row as the fit allows, 24 → 72px. It only
     grows above ~820px of height, where the stack has room to spare, so it
     never costs type size (note a's caps bind at ≤820). */
  /* note a: the face/fit limit for this language at this viewport */
  --iv-fit:   calc((100svh - 3.6rem - clamp(56px, 3.2rem, 60px) - 25px) / 4);
  --iv-face:  calc(22.6svh - 1.4vw - 30.6px);
  --iv-clear: 0px;
  --iv-cap:   min(var(--iv-fit), max(var(--iv-face), var(--iv-clear)));
  --iv-size:  min(var(--fs-jumbo), var(--iv-cap));
  /* bottom space grows from 24px toward 72px only out of the slack between
     that limit and jumbo (less a 6px margin, since the fitted plane runs a
     little above the true limit where jumbo just fits), so it never costs
     type size or the faces */
  --iv-pb: clamp(24px, calc(24px + 2.5 * (var(--iv-cap) - var(--fs-jumbo) - 6px)), 72px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Under the sticky nav: its height plus its 1px bottom border. */
  margin-top: calc(-1 * var(--nav-h) - 1px);
  height: max(560px, 100vh);
  height: max(560px, 100svh);
  display: flex;
  color: var(--color--white);
  background: var(--color--black);       /* shows before the photo paints */
}

:lang(ko) .iv-hero {
  --iv-fit:  calc((100svh - 3.6rem - clamp(56px, 3.2rem, 60px) - 25px) / 4.2);
  --iv-face: calc(18.6svh - 0.8vw - 26.5px);
}
@media (min-height: 760px) {
  :lang(ko) .iv-hero { --iv-face: calc(19.6svh - 1.2vw - 28.4px); }
}
@media (min-aspect-ratio: 16/9) and (max-aspect-ratio: 2999/1000) {
  .iv-hero { --iv-clear: calc((34vw - max(40px, (100vw - 1680px) / 2)) / 6.032); }
  :lang(ko) .iv-hero { --iv-clear: calc((34vw - max(40px, (100vw - 1680px) / 2)) / 5.457); }
}
@media (min-aspect-ratio: 3/1) {          /* ultrawide */
  .iv-hero { --iv-face: calc(10.2svh - 2.2vw + 66.1px); }
  :lang(ko) .iv-hero { --iv-face: calc(10.4svh - 2.8vw + 81.4px); }
}
@media (min-aspect-ratio: 3/1) and (min-height: 700px) {
  .iv-hero { --iv-face: calc(24.2svh - 1.4vw - 42.3px); }
  :lang(ko) .iv-hero { --iv-face: calc(20.2svh - 2.6vw + 2.8px); }
}

/* ---- Photo + tint ---------------------------------------------------- */
.iv-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.iv-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 30%;            /* round-1 framing */
}
.iv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* the nav band, in px so a short screen gets the same cover as a tall one */
    linear-gradient(180deg,
      color-mix(in srgb, var(--iv-ink) 22%, transparent) 0,
      color-mix(in srgb, var(--iv-ink) 18%, transparent) calc(var(--nav-h) + 0.4rem),
      transparent calc(var(--nav-h) * 2.2)),
    /* left edge: sea and path behind line 1, clear of the faces */
    linear-gradient(90deg,
      color-mix(in srgb, var(--iv-ink) 30%, transparent) 0,
      color-mix(in srgb, var(--iv-ink) 12%, transparent) 26%,
      transparent 42%),
    /* top: the nav; middle: the faces; lower half: headline and row */
    linear-gradient(180deg,
      color-mix(in srgb, var(--iv-ink) 42%, transparent) 0,
      color-mix(in srgb, var(--iv-ink) 30%, transparent) 7%,
      color-mix(in srgb, var(--iv-ink) 8%, transparent) 17%,
      color-mix(in srgb, var(--iv-ink) 8%, transparent) 29%,
      color-mix(in srgb, var(--iv-ink) 34%, transparent) 42%,
      color-mix(in srgb, var(--iv-ink) 40%, transparent) 62%,
      color-mix(in srgb, var(--iv-ink) 48%, transparent) 100%);
}

/* ---- Content column -------------------------------------------------- */
/* Same edge as the nav on this page (individuals.css: the nav's .wrap reads
   --stage-edge, as on the homepage hero-slider). */
.iv-hero__inner.wrap {
  max-width: none;
  padding-inline: var(--stage-edge);
}
.iv-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding-top: calc(var(--nav-h) + var(--sp-12));
  padding-bottom: var(--iv-pb);
}

/* ---- Headline -------------------------------------------------------- */
.iv-hero__title {
  margin: 0;
  color: var(--color--white);
  font-size: var(--iv-size);                               /* note a */
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: var(--kern-headline);                    /* −0.024em */
  text-wrap: initial;
}
.iv-hero__line { display: block; width: fit-content; position: relative; white-space: nowrap; }
/* note c: line 2 steps in to 34%, or less when that would bring its right
   end within 0.25em of line 3's longest word */
.iv-hero__line--2 { margin-inline: auto; }          /* centred; note c */
.iv-hero__line--3 { margin-left: auto; font-weight: 600; }
/* No local veil behind the lines (client, 2026-10-06: the round shape read as
   a dark blob behind line 1). Legibility comes from the full-frame tint only. */

/* The rotating word (note b): Feeld's vertical blur roll, no clip box. */
.iv-hero__rot {
  display: inline-grid;
  justify-items: end;
  vertical-align: top;
}
.iv-hero__word {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.iv-hero__word.is-enter,
.iv-hero__word.is-leave {
  opacity: 0;
  filter: blur(8px);
}
/* in (note b): from 0.7em below, transparent and blurred; it fades in and
   un-blurs together (blur hits 0 as opacity hits 1) once it is clear of the
   CTA, and rises into place by 650ms */
.iv-hero__word.is-enter { transform: translateY(0.7em); }
.iv-hero__word.is-in {
  transition:
    transform 530ms var(--ease-global) 120ms,
    opacity 80ms var(--ease-global) 140ms,
    filter 80ms var(--ease-global) 140ms;
}
/* out: blurs and fades (90–240ms) as it starts to rise 0.9em (120–420ms) */
.iv-hero__word.is-leave {
  transform: translateY(-0.9em);
  transition:
    opacity 150ms var(--ease-global) 90ms,
    filter 150ms var(--ease-global) 90ms,
    transform 300ms var(--ease-global) 120ms;
}
.iv-hero__word.is-instant { transition: none; }

/* ---- Bottom row ------------------------------------------------------ */
.iv-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-16);
  /* 0.6em of the headline: the incoming word starts 0.7em below its line
     and must stay faint while it is over the CTA (note b) */
  margin-top: calc(0.6 * var(--iv-size));
}

/* Scroll cue */
.iv-hero__cue {
  grid-column: 2; /* the tutors/languages proof was removed (user, 2026-10-05) */
  justify-self: center;
  display: inline-grid;
  place-items: center;
  width: max(44px, var(--iv-pause));       /* hit area */
  height: max(44px, var(--iv-pause));
  border-radius: 50%;
  color: var(--color--white);
  transition: background 300ms var(--ease-global), transform 300ms var(--ease-global);
}
.iv-hero__cue svg { width: 18px; height: 18px; }
.iv-hero__cue:hover { background: rgb(255 255 255 / 0.12); transform: translateY(2px); }

/* CTA + pause: the right end of the row, the pause on the content edge
   (the same edge as the nav's button). The CTA is the round-1 white button
   (client, 2026-10-05: "흰색 깔끔하게"), with a real destination. */
.iv-hero__act {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
}
.iv-hero__cta {
  gap: var(--sp-8);
  /* scaled to the headline (§9.3.2 Action, recorded exception to §9.5) */
  min-height: clamp(56px, 3.2rem, 60px);
  padding-inline: 1.6rem;
  font-size: 18px;
}
.iv-hero__cta svg { width: 0.9em; height: 0.9em; flex: none; }
/* No destination for now (client, 2026-10-06): the button stays, inert,
   with no hover change that suggests it goes somewhere. */
.iv-hero__cta[aria-disabled="true"]:hover { background: var(--color--white); }

.iv-hero__pause {
  grid-column: 1;                     /* left content edge, §9.3.2 bottom row */
  justify-self: start;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--iv-pause);
  height: var(--iv-pause);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--iv-ink) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55);
  color: var(--color--white);
  cursor: pointer;
  transition: background 300ms var(--ease-global);
}
.iv-hero__pause:hover { background: color-mix(in srgb, var(--iv-ink) 80%, transparent); }
.iv-hero__pause[hidden] { display: none; }
.iv-hero__pause svg { width: 0.9rem; height: 0.9rem; }
.iv-hero__pause .iv-hero__icon-play { display: none; }
.iv-hero__pause[aria-pressed="true"] .iv-hero__icon-play { display: block; }
.iv-hero__pause[aria-pressed="true"] .iv-hero__icon-pause { display: none; }

/* Focus — note d. */
.iv-hero__cta:focus-visible,
.iv-hero__cue:focus-visible,
.iv-hero__pause:focus-visible {
  outline: 2px solid var(--color--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color--white);
}
.iv-hero__cue:focus-visible,
.iv-hero__pause:focus-visible { border-radius: 50%; }
.iv-hero__cta:focus-visible { border-radius: var(--radius-button-hero); }

/* ---- Hangul — §4.1.2 ------------------------------------------------- */
:lang(ko) .iv-hero__title {
  line-height: var(--lh-heading);                            /* 1.2 */
  letter-spacing: var(--kern-heading);                       /* −0.016em */
  word-break: keep-all;
}

/* ---- Below 960 (§10.3): one centred stack, ladder sizes -------------- */
@media (max-width: 959.98px) {
  .iv-hero,
  :lang(ko) .iv-hero { --iv-size: var(--fs-headline); }
  .iv-hero__inner {
    align-items: center;
    text-align: center;
    padding-bottom: var(--iv-gap-b);
  }
  .iv-hero__line,
  .iv-hero__line--2,
  .iv-hero__line--3 { margin-inline: auto; }
  .iv-hero__rot { justify-items: center; }
  .iv-hero__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-20);
    margin-top: var(--sp-24);
  }
  .iv-hero__act { order: 1; }
  /* the chevron (and the pause beside it) sit at the foot; the room above
     them lifts the headline and CTA to mid-screen, as on Feeld's phone */
  .iv-hero__cue { order: 2; margin-top: clamp(var(--sp-16), calc(10svh - 50px), 7rem); }
  .iv-hero__cta { min-width: 260px; min-height: 48px; font-size: 16px; }
  /* The pause sits on the left content edge, level with the chevron. */
  .iv-hero__pause {
    position: absolute;
    left: var(--stage-edge);           /* left edge, mirroring the desktop row */
    bottom: var(--iv-gap-b);
  }
}
@media (max-width: 860px) {
  /* h1 (≈47px at 375); the width fit is a recorded exception that only
     bites where the widest line would not fit at h1: EN line 1 "A language
     app" 6.03em; KO line 3 "친구한테 건넬 말." 6.51em (measured). It does
     not bite at 375 (h1 47.7px); at 320 it gives EN 45.5px, KO 42.4px. */
  .iv-hero { --iv-size: min(var(--fs-h1), calc((100vw - 2 * var(--stage-gutter)) / 6.15)); }
  :lang(ko) .iv-hero { --iv-size: min(var(--fs-h1), calc((100vw - 2 * var(--stage-gutter)) / 6.6)); }
}
@media (max-width: 640px) {
  .iv-hero__media img { object-position: 55% 0; }   /* round-1 framing */
  .iv-hero::before {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--iv-ink) 40%, transparent) 0,
        color-mix(in srgb, var(--iv-ink) 10%, transparent) 11%,
        color-mix(in srgb, var(--iv-ink) 6%, transparent) 30%,
        color-mix(in srgb, var(--iv-ink) 36%, transparent) 46%,
        color-mix(in srgb, var(--iv-ink) 42%, transparent) 70%,
        color-mix(in srgb, var(--iv-ink) 50%, transparent) 100%);
  }
}

/* ---- Reduced motion — §10.4: nothing rotates, so no pause control. ---- */
@media (prefers-reduced-motion: reduce) {
  .iv-hero__pause { display: none; }
  .iv-hero__word { transition: none; }
}

/* ============================================================
   The nav while it sits over the photo (§9.3.2).
   ============================================================ */
.nav {
  transition: background-color 300ms var(--ease-nav), border-color 300ms var(--ease-nav);
}
.nav.iv-nav--over:not(:has(.nav__item.is-open, .nav__mobile:not([hidden]))) {
  --_theme---nav--link: var(--color--white);
  --_theme---nav--link-hover: var(--color--white);
  background: transparent;
  border-bottom-color: transparent;
}
.nav.iv-nav--over:not(:has(.nav__item.is-open, .nav__mobile:not([hidden]))) .logo {
  filter: brightness(0) invert(1);
}
.nav.iv-nav--over:not(:has(.nav__item.is-open, .nav__mobile:not([hidden]))) .nav__link:hover {
  background: rgb(255 255 255 / 0.14);
}
.nav.iv-nav--over:not(:has(.nav__item.is-open, .nav__mobile:not([hidden]))) .nav__toggle {
  color: var(--color--white);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55);
}
.nav.iv-nav--over:not(:has(.nav__item.is-open, .nav__mobile:not([hidden]))) .nav__toggle:hover {
  background: rgb(255 255 255 / 0.14);
}
.nav.iv-nav--over :focus-visible { box-shadow: 0 0 0 3px var(--color--white); }