/* IRONFORGE v2 - scroll-driven scene film (replaces the v1 static hero). */
.film { position: relative; background: var(--bg); }
.js .film.film-live { height: 800vh; height: 800svh; }
.film-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.js .film.film-live .film-stage { position: sticky; top: 0; }
.film-stage canvas,
.film-stage .film-poster,
.film-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.film-stage canvas { display: block; }
.film-stage [hidden] { display: none; }

/* scrim so captions stay legible over bright frames */
.film-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,13,13,0.78) 0%, rgba(13,13,13,0.45) 34%, rgba(13,13,13,0) 62%),
              linear-gradient(180deg, rgba(13,13,13,0.35) 0%, rgba(13,13,13,0) 22%, rgba(13,13,13,0) 78%, rgba(13,13,13,0.55) 100%); }

/* captions: one per chapter, left column on desktop */
.film-captions { position: absolute; inset: 0; pointer-events: none; }
.cap { position: absolute; left: var(--gutter-l); right: var(--gutter-r); top: 50%; transform: translateY(calc(-50% + 16px)); max-width: 540px; display: grid; gap: 14px; opacity: 0; transition: opacity .55s ease, transform .55s ease; pointer-events: none; }
.cap.on { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
html:not(.js) .cap:first-child { opacity: 1; transform: translateY(-50%); }
.cap h1, .cap h2 { font-size: clamp(38px, 5.2vw, 68px); font-weight: 700; max-width: 12ch; }
.cap h1 span, .cap h2 span { color: var(--orange); }
.cap p { font-size: clamp(17px, 1.6vw, 21px); color: var(--fg-2); max-width: 44ch; }
.cap .logo { width: min(240px, 50vw); margin-bottom: 6px; }
.cap .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (min-width: 1240px) { .cap { left: calc((100vw - var(--col)) / 2); } }

/* progress line and scroll hint */
.film-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.12); z-index: 2; }
.film-progress i { display: block; height: 100%; background: var(--orange); transform-origin: left center; transform: scaleX(0); }
.film-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; pointer-events: none; }
.film-ticks i { position: absolute; top: -3px; width: 1px; height: 9px; background: rgba(255,255,255,0.35); }
.film-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; gap: 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--fg-2); transition: opacity .4s ease; pointer-events: none; }
.film-hint::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(45deg); animation: nudge 1.6s ease-in-out infinite; }
.film-hint.gone, html:not(.js) .film-hint { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }

/* fallback: plain autoplaying video, captions ride the timeline */
.film.film-static { height: auto; }
.film.film-static .film-stage { position: relative; }
.film.film-static canvas { display: none; }
.film.film-static .film-progress, .film.film-static .film-hint, .film.film-static .film-ticks { display: none; }

/* phones: captions sit at the bottom, scrim from below */
@media (max-width: 700px) {
  .cap { top: auto; bottom: 11vh; max-width: none; transform: translateY(16px); }
  .cap.on, html:not(.js) .cap:first-child { transform: none; }
  .cap h1, .cap h2 { font-size: clamp(34px, 10vw, 48px); max-width: 14ch; }
  .cap p { font-size: 16px; }
  .film-stage::after { background: linear-gradient(180deg, rgba(13,13,13,0.35) 0%, rgba(13,13,13,0) 25%, rgba(13,13,13,0) 45%, rgba(13,13,13,0.9) 100%); }
  .film-hint { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cap { transition: none; } .film-hint::after { animation: none; } }