:root {
  color-scheme: dark;
  --orange: #e8650a;
  --ink: #0b0908;
  --paper: #f7f2eb;
  --curve: cubic-bezier(0.22, 0.75, 0.2, 1);
  /* Vertical space reserved above the video: clears the production sticky nav
     (70px) and leaves breathing room so the hero never touches the viewport
     edge. Tune this one value if the nav height changes. */
  --hero-reserve: 66px;
  --hero-fill: url("/assets/hero-linear/ai360-linear-hero-poster.webp");
}

.linear-hero, .linear-hero * { box-sizing: border-box; }

.linear-hero {
  background: var(--ink);
  color: #fff;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
}

.linear-hero {
  display: grid;
  place-items: center;
  /* Side padding is zero by rule: the hero is full-bleed, never letterboxed
     left or right. Only the nav reserve sits above it. */
  padding: var(--hero-reserve) 0 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 45%, #2b1b12 0%, transparent 38%),
    linear-gradient(118deg, #080706, #19100c 52%, #0b0908);
}

.linear-hero-stage {
  position: relative;
  /* Full viewport width, always. Height follows 16:9 but is capped to the
     space under the nav so the hero still occupies exactly one screen. When
     the viewport is wider than 16:9 that cap trims a few percent off the top
     and bottom, which object-position biases away from faces. */
  width: 100%;
  /* Exactly the space under the nav: the hero is always one screen, never
     scrolls, and never crops — see the ::before fill below. */
  height: calc(100vh - var(--hero-reserve));
  height: calc(100dvh - var(--hero-reserve));
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
  background: #120e0c;
}

.linear-hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.linear-hero-poster,
.linear-hero-video {
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;           /* whole frame stretched to every corner: nothing
                                 cropped, no bars. Costs a slight horizontal
                                 widening (~9% at a maximized 1080p window). */
  object-position: center;
  z-index: 1;
  background: #120e0c;
}

.linear-hero-video {
  z-index: 1;
  opacity: 0;
  transition: opacity 200ms var(--curve);
}

.linear-hero-video.is-ready { opacity: 1; }

.linear-hero-matte {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 8, 7, 0.68) 0%, transparent 34%, rgba(10, 8, 7, 0.08) 100%);
}

/* The video has no permanent headline. This local contrast field wakes only
   for the final narrated payoff; it is a gradient, never a logo tile. */
.linear-payoff-backdrop {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 34% 26% at 7% 9%, rgba(8, 6, 5, 0.78), transparent 72%),
    radial-gradient(ellipse 34% 17% at 41% 60%, rgba(8, 6, 5, 0.6), transparent 78%),
    radial-gradient(ellipse 32% 16% at 88% 93%, rgba(8, 6, 5, 0.72), transparent 74%),
    radial-gradient(ellipse at 85% 30%, rgba(232, 101, 10, 0.12), transparent 44%),
    linear-gradient(90deg, transparent 42%, rgba(8, 6, 5, 0.16) 58%, rgba(8, 6, 5, 0.86) 100%);
  transition: opacity 380ms var(--curve);
}

.linear-hero.is-final .linear-payoff-backdrop {
  opacity: 1;
}

/* Balanced payoff: the brand mark owns the top-left, the headline the right,
   the tagline the centre over the subject, and the CTA the bottom-right. The
   container is a passive full-stage layer so each piece places independently. */
.linear-payoff {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.linear-payoff > * { pointer-events: auto; }

.linear-hero-copy {
  position: absolute;
  z-index: 5;
  right: clamp(1.4rem, 4vw, 4rem);
  top: clamp(1.1rem, 5%, 3.2rem);
  width: min(430px, 30%);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  visibility: hidden;
  filter: blur(4px);
  transition: opacity 420ms var(--curve), transform 420ms var(--curve), filter 420ms var(--curve), visibility 0s linear 420ms;
  text-wrap: balance;
}

.reduced-linear-story header > p {
  margin: 0 0 0.9rem;
  color: #f3b38a;
  font-size: clamp(0.7rem, 0.9vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.linear-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, min(2.75vw, 4.3svh), 3.5rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.linear-hero h1 span {
  display: block;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 360ms var(--curve), transform 420ms var(--curve);
}

.linear-hero-punch {
  position: relative;
  margin-top: 0.15em;
  color: #ff9b50;
}

.linear-hero-punch::after {
  content: "";
  position: absolute;
  inset: -0.08em -0.08em;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-115%);
  background: linear-gradient(100deg, transparent 38%, rgba(232, 101, 10, 0.6) 50%, transparent 62%);
}

.linear-hero.is-final .linear-hero-punch {
  color: #ff9b50;
  text-shadow: 0 0 26px rgba(232, 101, 10, 0.28);
}

.linear-hero.is-final .linear-hero-punch::after {
  opacity: 1;
  animation: orange-sweep 900ms var(--curve) both;
}

@keyframes orange-sweep { to { transform: translateX(115%); } }

.linear-hero.is-final .linear-hero-copy {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  filter: blur(0);
  transition-delay: 160ms, 160ms, 160ms, 0s;
}

.linear-hero.is-final h1 span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 240ms, 240ms;
}

.linear-hero.is-final h1 .linear-hero-punch {
  transition-delay: 560ms, 560ms;
}

.linear-hero-support {
  margin: 0.7rem 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.82rem, min(1.15vw, 1.9svh), 1.18rem);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 250ms var(--curve), transform 360ms var(--curve), visibility 0s linear 360ms;
}

.linear-hero.is-final .linear-hero-support {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 880ms, 880ms, 0s;
}

.linear-era {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px 10px 14px;
  border-radius: 10px;
  background: rgba(10, 8, 7, 0.55);
  backdrop-filter: blur(8px);
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
  transition: opacity 500ms ease, transform 500ms ease;
}

.linear-era.is-hidden { opacity: 0; transform: translateY(-6px); }

.linear-era::before {
  width: 4px;
  height: 22px;
  content: "";
  border-radius: 2px;
  background: var(--orange);
}

.linear-era-label {
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.linear-hero-actions {
  position: absolute;
  z-index: 7;
  left: clamp(1.4rem, 3.5vw, 3.5rem);
  right: auto;
  bottom: clamp(1.4rem, 4vw, 3.5rem);
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.64rem;
  padding: 0.82rem 1.1rem 0.82rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(12, 9, 7, 0.68);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
  transition: background 180ms var(--curve), border-color 180ms var(--curve), transform 180ms var(--curve), opacity 180ms var(--curve);
}

.sound-toggle:hover { background: rgba(232, 101, 10, 0.9); border-color: var(--orange); }
.sound-toggle:active { transform: scale(0.97); }
.sound-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sound-toggle-icon { font-size: 1rem; transform: translateX(1px); }

.linear-endcard {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: auto;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 400ms var(--curve), transform 400ms var(--curve), filter 400ms var(--curve);
  filter: blur(4px);
}

.linear-endcard.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  filter: blur(0);
}

.linear-endcard img {
  position: absolute;
  top: clamp(1.1rem, 5%, 3.2rem);
  left: clamp(1.4rem, 4vw, 4rem);
  display: block;
  width: auto;
  height: clamp(58px, min(7.5vw, 12svh), 132px);
  margin-bottom: 0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 34px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 18px rgba(232, 101, 10, 0.2));
}

.linear-endcard-copy { position: absolute; inset: 0; }
.linear-endcard p { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.92), 0 0 50px rgba(0, 0, 0, 0.75); position: absolute; left: 41%; top: 60%; transform: translate(-50%, -50%); width: max-content; max-width: 58%; text-align: center; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, min(3.4vw, 5.4svh), 3.3rem); line-height: 1.04; }
.linear-endcard strong { color: #ff9b50; }
.linear-endcard a,
.reduced-linear-final a { color: #fff; font-size: 0.86rem; font-weight: 700; text-decoration: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); }
.linear-endcard p .tagline-a,
.linear-endcard p .tagline-b { display: inline-block; opacity: 0; transition: opacity 340ms var(--curve) 1240ms, transform 520ms var(--curve) 1240ms; }
.linear-endcard p .tagline-a { transform: translateX(-64px); }
.linear-endcard p .tagline-b { transform: translateX(64px); }
.linear-endcard.is-visible p .tagline-a,
.linear-endcard.is-visible p .tagline-b { opacity: 1; transform: translateX(0); }
.linear-endcard a { position: absolute; right: clamp(1.4rem, 4.5vw, 4.6rem); bottom: clamp(3rem, 12%, 5.6rem); font-size: clamp(0.86rem, 1.1vw, 1rem); display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 260ms var(--curve) 1640ms, transform 320ms var(--curve) 1640ms; }
.linear-endcard.is-visible a { opacity: 1; transform: translateY(0); }
.linear-endcard a span,
.reduced-linear-final a span { color: #ff9b50; transition: transform 180ms var(--curve); }
.linear-endcard a:hover span,
.reduced-linear-final a:hover span { display: inline-block; transform: translateX(4px); }

.reduced-linear-story { display: none; }

.preview-tail { min-height: 40vh; display: grid; place-items: center; background: var(--paper); color: #31231b; }
.preview-tail p { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

@media (max-width: 768px) {
  /* Fixed nav measures ~85px at this width; clear it so the video is never
     covered. The reduced-motion block below still hides this hero entirely. */
  .linear-hero { display: block; min-height: 0; padding: 92px 0 0; }
  /* Preserve the actual player as a true 16:9 frame on portrait devices.
     The surrounding matte handles remaining space; footage is never stretched
     or cropped to fill the taller screen. */
  .linear-hero-stage {
    width: 100%;
    height: auto;
    padding-top: 56.25vw;
    aspect-ratio: auto;
    max-height: none;
    overflow: visible;
  }
  .linear-hero-video, .linear-hero-poster { object-fit: contain; }
  .linear-hero-video,
  .linear-hero-poster,
  .linear-hero-matte,
  .linear-payoff-backdrop { inset: 0 0 auto; height: 56.25vw; }
  .linear-hero-matte { background: linear-gradient(0deg, rgba(10, 8, 7, 0.6), rgba(10, 8, 7, 0.1)); }
  .linear-payoff { position: static; display: block; width: auto; max-height: none; inset: auto; right: auto; top: auto; transform: none; }
  .linear-endcard { position: relative; inset: auto; }
  .linear-endcard img { position: relative; top: auto; left: auto; margin-bottom: 0.9rem; }
  .linear-endcard-copy { position: relative; inset: auto; }
  .linear-endcard p { position: relative; left: auto; top: auto; transform: none; width: auto; max-width: none; text-align: left; margin: 0 0 0.8rem; }
  .linear-endcard a { position: relative; right: auto; bottom: auto; }
  .linear-hero-copy { top: auto; }
  .linear-hero-copy { position: relative; right: auto; top: auto; width: auto; padding: 0 1.25rem 2rem; transform: none; background: #120e0c; }
  .linear-hero:not(.is-final) .linear-hero-copy { display: none; }
  .linear-hero.is-final .linear-hero-copy { display: block; transform: none; filter: none; }
  .linear-hero h1 { font-size: clamp(2.1rem, 9.6vw, 3.35rem); }
  .linear-hero-punch { color: #ff9b50; }
  .linear-hero-support { color: rgba(255, 255, 255, 0.82); }
  .linear-era { top: 12px; left: 12px; padding: 8px 14px 8px 10px; }
  .linear-era-label { font-size: 0.72rem; }
  .linear-hero-actions { right: 1rem; left: auto; bottom: auto; top: calc(56.25vw + 0.85rem); }
  .sound-toggle { padding: 0.65rem 0.85rem; font-size: 0.76rem; }
  .linear-endcard { position: relative; right: auto; top: auto; bottom: auto; width: auto; margin: 0; padding: 1.5rem 1.25rem 1rem; transform: none; background: #120e0c; filter: none; }
  .linear-endcard.is-visible { transform: none; }
  .linear-endcard img { height: clamp(72px, 22vw, 96px); }
  .linear-hero:not(.is-final) .linear-endcard { display: none; }
  .linear-hero-video { background: #120e0c; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hero stays. Motion is removed, not the content. */
  .linear-hero *, .linear-hero *::before, .linear-hero *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .linear-hero.is-final .linear-hero-punch::after { animation: none !important; opacity: 0 !important; }
  .reduced-linear-story { display: none; padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 5vw, 5rem); background: #11100f; }
  .reduced-linear-story header { width: min(900px, 100%); margin: 0 auto clamp(2.5rem, 7vw, 6rem); }
  .reduced-linear-story h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.35rem, 6vw, 5.8rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.05em; }
  .reduced-linear-story ol { width: min(1120px, 100%); margin: 0 auto; padding: 0; list-style: none; }
  .reduced-linear-story li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.72fr); align-items: center; gap: clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(3rem, 9vw, 8rem); }
  .reduced-linear-story li:nth-child(even) img { order: 2; }
  .reduced-linear-story img { width: 100%; height: auto; border-radius: 0.4rem; }
  /* Brand mark in the final static panel: transparent asset, never stretched to
     the panel width like the era stills above, and never boxed. */
  .reduced-linear-story .reduced-final-logo { width: auto; height: clamp(72px, 9vw, 110px); margin: 0.35rem 0 0.9rem; border-radius: 0; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55)); }
  .reduced-linear-story li span { color: #f3b38a; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; }
  .reduced-linear-story h3 { margin: 0.38rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 4vw, 3.9rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
  .reduced-linear-final { padding: clamp(1rem, 3vw, 2.5rem); background: #20160f; box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.5); }
  .reduced-linear-final p { color: #ff9b50; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .reduced-linear-story li { grid-template-columns: 1fr; gap: 1rem; }
  .reduced-linear-story li:nth-child(even) img { order: initial; }
}

/* ?motion=on override - forces the film to play even when the OS or browser
   reports prefers-reduced-motion, so the preview can always be reviewed. */
html.force-motion .reduced-linear-story { display: none !important; }