/* ==========================================================================
   Section: Hero — "The Campaign"
   Three layers: (1) ivory CSS light, (2) LEID GALLERY lettering,
   (3) the transparent model PNG above the lettering, so letters pass
   behind her hair and neck. Positions are expressed as fractions of the
   rendered image so the overlap holds on every screen.
   WordPress: template-parts/hero.php
   ========================================================================== */

.hero {
  /* ---- geometry (mobile / portrait first) ---- */
  --hero-h: max(100vh, 34rem);
  --img-ratio: 1.5;                                 /* hero-mobile.png is 2:3 */
  --img-h: min(170vw, calc(var(--hero-h) * 0.8));   /* grows past the width on tall phones, cropping empty space at the right */
  --img-w: calc(var(--img-h) / var(--img-ratio));
  --img-top: calc(var(--hero-h) - var(--img-h));
  --hair-line: 0.246;                               /* GALLERY baseline, as a fraction of image height (hair crown) */
  --top-safe: calc(env(safe-area-inset-top) + var(--header-h));

  /* lettering sizes are fitted to the screen width */
  /* LEID and GALLERY are set to the same measure, a justified lockup */
  --measure: calc(100vw - 2 * var(--gutter));
  --gallery-size: min(calc(var(--measure) / 4.62), 11vh);
  --leid-size: min(calc(var(--measure) / 2.29), 20vh);
  --gallery-bottom: calc(var(--img-h) * (1 - var(--hair-line)));

  position: relative;
  block-size: var(--hero-h);
  overflow: hidden;
  isolation: isolate;
  color: var(--c-ink);
}

@supports (height: 100svh) {
  .hero {
    --hero-h: max(100svh, 34rem);
  }
}

/* ---- Layer 1: light ------------------------------------------------------ */
.hero__light {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 70% at 18% 8%, rgb(255 252 246 / 0.9) 0%, rgb(255 252 246 / 0) 60%),
    radial-gradient(90% 60% at 100% 100%, rgb(205 184 156 / 0.28) 0%, rgb(205 184 156 / 0) 70%),
    linear-gradient(180deg, var(--c-ivory) 0%, var(--c-ivory) 55%, var(--c-ivory-deep) 100%);
}

/* very fine grain so the flat ivory reads like paper, not a screen fill */
.hero__light::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .25 0 0 0 0 .21 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layer 2: lettering -------------------------------------------------- */
.hero__title {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-type);
  margin: 0;
  pointer-events: none;
  font-weight: 400;
  line-height: 1;
}

.hero__word {
  position: absolute;
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  line-height: 0.74;           /* line box ≈ cap height, so positions are honest */
  letter-spacing: var(--track-display);
  white-space: nowrap;
  direction: ltr;
  color: var(--c-ink);
}

.hero__word--leid {
  font-size: var(--leid-size);
  left: var(--gutter);
  /* sits on top of GALLERY with a hairline of air */
  bottom: calc(var(--gallery-bottom) + var(--gallery-size) * 1.02);
}

.hero__word--gallery {
  font-size: var(--gallery-size);
  left: var(--gutter);
  /* the lower part of the word slips behind the hair crown */
  bottom: var(--gallery-bottom);
  letter-spacing: 0.035em;
}

/* ---- Layer 3: model ------------------------------------------------------ */
.hero__model {
  position: absolute;
  z-index: var(--z-hero-model);
  /* physical left: her face is cropped by the left edge of the photograph */
  left: 0;
  bottom: 0;
  block-size: var(--img-h);
  inline-size: var(--img-w);
  max-inline-size: none;
  pointer-events: none;
}

.hero__model img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: left bottom;
}

/* ---- Copy ---------------------------------------------------------------- */
.hero__copy {
  position: absolute;
  z-index: var(--z-hero-copy);
  /* the empty column to the right of her hair */
  inset-inline-start: var(--gutter);                       /* physical right */
  inset-block-start: calc(var(--img-top) + var(--img-h) * 0.4);
  inline-size: max(6.5rem, calc(100vw - var(--img-w) * 0.62 - var(--gutter) * 1.5));
  max-inline-size: 15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.hero__rule {
  inline-size: 2.5rem;
  block-size: var(--hairline);
  background: var(--c-ink);
  opacity: 0.6;
}

.hero__tagline {
  font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);   /* fixed: hero keeps its own scale */
  font-weight: var(--w-light);
  line-height: 1.9;
  color: var(--c-ink);
}

.hero__tagline span {
  display: block;
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-inline-size: 44px;
  min-block-size: 44px;
  margin-block-start: var(--s-5);
  color: var(--c-ink-muted);
}

.hero__scroll-line {
  position: relative;
  inline-size: var(--hairline);
  block-size: 3.25rem;
  background: rgb(17 17 17 / 0.15);
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 40%;
  background: var(--c-ink);
  animation: hero-scroll 2.6s var(--ease-in-out) infinite;
}

@keyframes hero-scroll {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}

/* ==========================================================================
   Landscape / desktop composition
   The model sits left, full height; lettering runs across the empty right
   and tucks behind her hair (LEID) and neck (GALLERY).
   ========================================================================== */
@media (min-width: 48em) and (min-aspect-ratio: 5/4) {
  .hero {
    --hero-h: max(100vh, 36rem);
    --img-ratio: 0.6667;                       /* hero-desktop.png is 3:2 */
    --img-h: var(--hero-h);
    --img-w: calc(var(--img-h) * 1.5);
    /* GALLERY starts just inside her neck; LEID starts inside the bun */
    --gallery-start: calc(var(--img-w) * 0.272);
    --leid-start: calc(var(--img-w) * 0.372);
    --gallery-size: min(calc((100vw - var(--gallery-start) - var(--gutter) * 2) / 4.62), 26vh);
    --leid-size: calc(var(--gallery-size) * 1.04);
  }

  @supports (height: 100svh) {
    .hero {
      --hero-h: max(100svh, 36rem);
    }
  }

  .hero__light {
    background:
      radial-gradient(70% 90% at 72% 20%, rgb(255 252 246 / 0.95) 0%, rgb(255 252 246 / 0) 62%),
      radial-gradient(50% 60% at 100% 100%, rgb(205 184 156 / 0.26) 0%, rgb(205 184 156 / 0) 70%),
      linear-gradient(180deg, var(--c-ivory) 0%, var(--c-ivory) 60%, var(--c-ivory-deep) 100%);
  }

  .hero__word--leid {
    inset-inline-end: auto;
    left: var(--leid-start);
    inset-block-start: auto;
    bottom: calc(var(--hero-h) * 0.585);
  }

  .hero__word--gallery {
    inset-inline: auto;
    left: var(--gallery-start);
    text-align: left;
    bottom: calc(var(--hero-h) * 0.385);
  }

  .hero__copy {
    inset-block-start: auto;
    inset-block-end: calc(var(--hero-h) * 0.11);
    inset-inline-start: calc(var(--gutter) * 1.5);
    inline-size: auto;
    max-inline-size: 22rem;
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
  }

  .hero__rule {
    inline-size: 4rem;
  }

  .hero__tagline {
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  }

  .hero__tagline span {
    display: inline;
  }

  .hero__scroll {
    position: absolute;
    inset-block-start: calc(100% + var(--s-6));
    inset-inline-start: 0;
    margin: 0;
  }
}

/* ==========================================================================
   Entrance (main.js adds .is-ready to <html> once the model image decoded)
   ========================================================================== */
.js .hero__word,
.js .hero__copy {
  opacity: 0;
}

.js .hero__model {
  opacity: 0;
  transform: translateY(2.5%);
}

.js.is-ready .hero__model {
  opacity: 1;
  transform: none;
  transition:
    opacity 1600ms var(--ease-out),
    transform 2200ms var(--ease-out);
}

.js.is-ready .hero__word {
  opacity: 1;
  animation: hero-letters 2000ms var(--ease-out) both;
}

.js.is-ready .hero__word--gallery {
  animation-delay: 180ms;
}

.js.is-ready .hero__copy {
  opacity: 1;
  transition: opacity 1200ms var(--ease-out) 900ms;
}

@keyframes hero-letters {
  from {
    opacity: 0;
    letter-spacing: 0.16em;
    filter: blur(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__model {
    transform: none;
  }

  .js.is-ready .hero__model,
  .js.is-ready .hero__copy {
    transition: opacity 200ms linear;
  }

  .js.is-ready .hero__word {
    animation: none;
    transition: opacity 200ms linear;
  }

  .hero__scroll-line::after {
    animation: none;
    transform: translateY(75%);
  }
}