/* Four scene captions, optically fitted to the supplied 6 September references.
   Keep this home-only: navigation, Pictures and project typography are unchanged. */
@font-face {
  font-family: "Evolve Scene";
  src: url("assets/fonts/anton-latin-v27.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  ascent-override: 100%;
  descent-override: 0%;
  line-gap-override: 0%;
}

body[data-page="home"] {
  --scene-display: "Evolve Scene", Impact, "Arial Narrow", sans-serif;
  --scene-mint: #aff5f4;
  --scene-ivory: #f6f2e7;
}

.hero-caption {
  --scene-title-size: min(6.4vw, 11.75svh);
  --scene-lead-size: min(3.58vw, 6.56svh);
  --scene-line-gap: min(0.41vw, 0.75svh);
  left: max(3.3vw, env(safe-area-inset-left));
  right: max(3vw, env(safe-area-inset-right));
  bottom: max(8.42svh, calc(env(safe-area-inset-bottom) + 38px));
  color: #fefaf0;
  text-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

.hero-caption__title,
.scene-type-manifesto {
  max-width: none;
  margin: 0;
  font-family: var(--scene-display);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  font-size: var(--scene-title-size);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* The scroll/reveal controller owns the outer line. Optical compression belongs
   to this inner ink span, so neither animation can overwrite the type fitting.
   Normalised font metrics give a predictable 0.876em cap box on every device. */
.scene-type-line {
  display: block;
  height: 0.876em;
  line-height: 1;
  white-space: nowrap;
}

.scene-type-ink {
  display: block;
  width: max-content;
  line-height: 1;
  transform: translateY(-0.132em) scaleX(var(--scene-width, 1));
  transform-origin: left top;
}

.scene-type-line--lead {
  margin-bottom: var(--scene-line-gap);
  font-size: var(--scene-lead-size);
  color: #fffdf7;
}

[data-hero-caption="human"] .scene-type-line--lead { --scene-width: 0.812; }
[data-hero-caption="human"] .scene-type-line--hero { --scene-width: 0.863; }

[data-hero-caption="machine"] {
  left: max(3.38vw, env(safe-area-inset-left));
  bottom: max(7.3svh, calc(env(safe-area-inset-bottom) + 38px));
  color: #fdf8eb;
}
[data-hero-caption="machine"] .scene-type-line--lead { --scene-width: 0.827; }
[data-hero-caption="machine"] .scene-type-line--hero { --scene-width: 0.831; }

.hero-caption--intro {
  --scene-title-size: min(5.52vw, 10.11svh);
  --scene-line-gap: min(0.4vw, 0.733svh);
  left: max(2.88vw, env(safe-area-inset-left));
  bottom: max(9.06svh, calc(env(safe-area-inset-bottom) + 42px));
  color: var(--scene-ivory);
}

.hero-caption__eyebrow {
  margin: 0 0 min(0.71vw, 1.3svh);
  color: var(--scene-mint);
  font-size: min(1.18vw, 2.16svh);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
}

.scene-type-line--services {
  --scene-width: 0.74;
  margin-bottom: var(--scene-line-gap);
  font-size: 0.963em;
}
.scene-type-line--experiences { --scene-width: 0.726; }

/* Preserve punctuation through the existing entrance mask, including the comma
   below the first baseline; negative margin keeps the measured cap-to-cap gap. */
.hero-caption--intro [data-entry-reveal="title"],
.hero-caption--intro [data-entry-reveal="title-next"] {
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}

.campaign-intro__manifesto {
  --scene-mint: #b6f2f0;
  --scene-title-size: min(9.79vw, 18.58svh);
  position: absolute;
  left: max(3.92vw, env(safe-area-inset-left));
  right: max(3vw, env(safe-area-inset-right));
  bottom: max(5.4svh, calc(env(safe-area-inset-bottom) + 36px));
  display: block;
  width: auto;
  max-width: none;
  gap: 0;
  color: #fcf2de;
  font-size: var(--scene-title-size);
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  text-shadow: 0 1px 3px rgb(0 0 0 / 12%);
  transform: none;
}

.campaign-intro__manifesto > p { text-wrap: nowrap; }
.campaign-intro__manifesto > .scene-type-kicker {
  margin: 0 0 min(0.35vw, 0.665svh);
  color: var(--scene-mint);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: min(1.48vw, 2.81svh);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-transform: none;
}
.scene-type-line--direction {
  --scene-width: 0.581;
  margin-bottom: min(0.23vw, 0.437svh);
}
.scene-type-line--matter { --scene-width: 0.645; }

/* A portrait screen crops the film, not the typography. Preserve the reference
   line breaks and hierarchy while giving the longest line safe horizontal room. */
@media (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .hero-caption {
    --scene-title-size: clamp(2.8rem, 15vw, 6.6rem);
    --scene-lead-size: clamp(1.5rem, 8.4vw, 3.65rem);
    --scene-line-gap: 5px;
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    bottom: max(10svh, calc(env(safe-area-inset-bottom) + 70px));
  }
  .hero-caption--intro {
    --scene-title-size: clamp(2rem, 11.9vw, 5.3rem);
    --scene-line-gap: 5px;
  }
  .hero-caption__eyebrow {
    margin-bottom: 10px;
    font-size: clamp(0.75rem, 3.5vw, 1.1rem);
    line-height: 1.15;
  }
  [data-hero-caption="machine"] {
    left: max(18px, env(safe-area-inset-left));
    bottom: max(10svh, calc(env(safe-area-inset-bottom) + 70px));
  }
  .campaign-intro__manifesto {
    --scene-title-size: clamp(3.4rem, 19.8vw, 8.8rem);
    left: max(18px, env(safe-area-inset-left));
    right: max(18px, env(safe-area-inset-right));
    bottom: max(10svh, calc(env(safe-area-inset-bottom) + 60px));
  }
  .campaign-intro__manifesto > .scene-type-kicker {
    margin-bottom: 10px;
    font-size: clamp(0.875rem, 4.25vw, 1.4rem);
    line-height: 1.1;
  }
  .scene-type-line--direction { margin-bottom: 4px; }
}

@media (max-height: 600px) and (min-aspect-ratio: 1/1) {
  .hero-caption,
  [data-hero-caption="machine"],
  .hero-caption--intro { bottom: max(54px, calc(env(safe-area-inset-bottom) + 38px)); }
  .hero-caption__eyebrow { font-size: max(0.75rem, min(1.18vw, 2.16svh)); }
  .campaign-intro__manifesto { bottom: max(52px, calc(env(safe-area-inset-bottom) + 36px)); }
  .campaign-intro__manifesto > .scene-type-kicker { font-size: max(0.8125rem, min(1.48vw, 2.81svh)); }
}