/* hero.css — scroll-linked background film with one block of type per scene.
   Values come from tokens.css / brand.css.

   Two frame sets, chosen by screen shape (the same query is used in index.html <picture>
   and js/hero.js, so only one set is ever downloaded):
     mobile  (max-aspect-ratio: 1/1)       4:5 frame, full width, glued to the bottom of the screen
     desktop (min-aspect-ratio: 1001/1000) 16:9 frame covering the whole screen

   Base styles = static hero (no JS, reduced motion, or GSAP missing): poster still, all
   three text blocks readable at once. js/hero.js adds .hero--scroll for the sticky,
   scroll-scrubbed version. */

/* ---------- Adjustable values: positions per part, per screen ----------
   x / y are percentages of the film frame (the 4:5 box on mobile, the screen on desktop).
   Only used in scroll mode. */

.hero {
  /* Part 1: "Studio Gosan" — left, a little below the middle of the hair */
  --hero-p1-x: 5%;
  --hero-p1-y: 40%;
  /* Part 2: intro — right, narrow and tall */
  --hero-p2-x: 5%;
  --hero-p2-y: 24%;
  --hero-p2-w: 40%;
  /* Part 3: byline + film link — left, lower middle */
  --hero-p3-x: 6%;
  --hero-p3-top: 68%;
  --hero-p3-bottom: auto;

  --hero-logo-size: var(--text-2xl);   /* logo height = 0.8em of this */
  --hero-intro-size: var(--text-sm);
  /* Timings (type shift, rise in / out, end fade, scrub) live in tokens.css */

  /* Edge fade, per side (same on mobile and desktop) */
  --hero-fade-l: 7%;
  --hero-fade-r: 7%;
  --hero-fade-t: 8%;
  --hero-fade-b: 8%;
}

/* Scene 1: the subject leaves the frame right and bottom, keep those edges */
.hero[data-scene="1"] {
  --hero-fade-r: 0%;
  --hero-fade-b: 0%;
}

@media (min-aspect-ratio: 1001/1000) {
  .hero {
    --hero-p1-x: 6%;
    --hero-p1-y: 40%;
    --hero-p2-x: 6%;
    --hero-p2-y: 42%;
    --hero-p2-w: 62%;      /* one or two long lines */
    --hero-p3-x: 6%;
    --hero-p3-top: auto;
    /* bottom left, just above the AI label; at least 64px so short screens (phone landscape) keep a gap */
    --hero-p3-bottom: max(8%, var(--space-8));

    --hero-logo-size: var(--text-4xl);
    --hero-intro-size: var(--text-lg);
  }
}

/* ---------- Static hero (base) ---------- */

.hero {
  position: relative;
  /* Hero type matches the logo's ink; the AI label keeps its muted gray */
  color: var(--color-logo-ink);
}

.hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Room for the header row that sits on top */
  padding-top: 64px;
}

.hero__box {
  display: flex;
  flex-direction: column;
}

/* Mobile: text first, then the 4:5 still */
.hero__type {
  order: -1;
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--container-pad) var(--space-7);
}

.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--hero-fade-l), #000 calc(100% - var(--hero-fade-r)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--hero-fade-t), #000 calc(100% - var(--hero-fade-b)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--hero-fade-l), #000 calc(100% - var(--hero-fade-r)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--hero-fade-t), #000 calc(100% - var(--hero-fade-b)), transparent 100%);
  mask-composite: intersect;
}

.hero__poster,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__poster {
  object-fit: cover;
}

/* Shown by js/hero.js once the first frame is drawn; the poster stays underneath */
.hero__canvas {
  opacity: 0;
}

.hero__canvas.is-ready {
  opacity: 1;
}

/* Mobile: top left, level with the header links (the film fills the bottom) */
.hero__label {
  position: absolute;
  top: 0;
  left: var(--container-pad);
  display: flex;
  align-items: center;
  min-height: 64px;
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

@media (min-aspect-ratio: 1001/1000) {
  /* Desktop static: the still covers the screen, text stacked in its wide left margin */
  .hero__stage {
    height: 100vh;
    height: 100dvh;
    padding-top: 0;
    overflow: hidden;
  }

  .hero__box,
  .hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .hero__type {
    position: absolute;
    top: 50%;
    left: var(--hero-p1-x);
    width: 36%;
    padding: 0;
    transform: translateY(-50%);
  }

  .hero__label {
    top: auto;
    bottom: var(--space-4);
    min-height: 0;
  }
}

/* ---------- Type ---------- */

.hero__part > :first-child {
  margin-top: 0;
}

.hero__title {
  margin: 0;
  font-size: var(--hero-logo-size);
  line-height: 1;
}

/* Logo artwork replaces the title text; sized from the title's font size */
.hero__logo {
  display: block;
  height: 0.8em;
  width: auto;
  max-width: 100%;
}

.hero__intro {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--hero-intro-size);
  line-height: var(--leading-snug);
}

.hero__by {
  margin: 0;
  font-size: var(--hero-intro-size);
}

.hero__film {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}

.hero__film:hover {
  color: var(--color-text-muted);
}

/* ---------- Scroll mode (added by js/hero.js) ---------- */

/* The header stays over scene 1 and leaves with its type (js/hero.js) */
.has-hero-scroll .site-header {
  position: fixed;
}

.hero--scroll {
  /* One screen to show the first frame + --hero-scroll screens of scrubbing.
     svh, not dvh: the scroll length must not change when the iPhone address bar
     shows or hides, or the look book's pinned range below goes stale. */
  height: calc((var(--hero-scroll) + 1) * 100vh);
  height: calc((var(--hero-scroll) + 1) * 100svh);
}

.hero--scroll .hero__stage {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
  overflow: hidden;
}

/* Mobile: the 4:5 frame sits on the bottom edge, white space above */
.hero--scroll .hero__box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  aspect-ratio: 4 / 5;
}

.hero--scroll .hero__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* Type layer = the frame, so part positions follow the film */
.hero--scroll .hero__type {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  padding: 0;
  transform: none;
}

.hero--scroll .hero__part {
  position: absolute;
}

.hero--scroll .hero__part--1 {
  left: var(--hero-p1-x);
  top: var(--hero-p1-y);
}

.hero--scroll .hero__part--2 {
  right: var(--hero-p2-x);
  top: var(--hero-p2-y);
  width: var(--hero-p2-w);
}

.hero--scroll .hero__part--2 .hero__intro {
  max-width: none;
}

.hero--scroll .hero__part--3 {
  left: var(--hero-p3-x);
  top: var(--hero-p3-top);
  bottom: var(--hero-p3-bottom);
}

@media (min-aspect-ratio: 1001/1000) {
  .hero--scroll .hero__box {
    top: 0;
    aspect-ratio: auto;
  }
}