/* cine.css: the site hero (cine4, approved Oct 16, 2026), on every site page except decks/, talks/,
   the business cards, and the payment page. Markup: tools/hero_markup.py. Behavior: /cine.js.
   A full-bleed real photo crossfade (slow zoom) under a navy gradient, a faint light particle field,
   the ivory crest above the headline, and white type. Headline size per page: --cine-h1 on the
   section. Motion timing comes from the motion tokens in css/pro.css (gentler values under Reduce Motion,
   never none: MOTION2-BRIEF). */

/* ---------- Media layers ----------
   Three real photos per page (tools/hero_markup.py), each a <picture> (AVIF, WebP, JPEG; 1600px is the largest
   original, see HERO-RES.md). Per-slot vars: --d (cycle delay), --r (aspect), --px (desktop focus x), phone/tablet
   pan stops --pa/--pb (1 = right edge), --ps (still frame), --pym (focus y).
   Crossfade: each photo holds --xf-hold and fades into the next over --xf-fade (3 photos: a 3 x hold cycle);
   slot --i starts at i x hold - fade, so photo 1 is fully in at load.
   Ken Burns: continuous and independent of the crossfade (--kb-dur, ease-in-out, back and forth).
   Desktop: the photo is right-anchored at the hero's height (no upscaling past cover), its left edge melting into
   the navy behind the copy; it pushes in and pans with each photo (scale 1 to --kb-scale, 1.12 max, see HERO2 below:
   1600px sources). transform-origin is the left edge, so the right overhang (scale - 1) always covers the drift.
   Phones/tablets: the photo sits in a band under the nav (copy below) and pans right to left with a slow zoom.
   Reduce Motion: the same, gentler (tokens), with a slower crossfade; nothing is switched off. */
/* the nav's height, so the photo starts under it from the first paint (cine.js refines it to the pixel) */
/* the nav is sticky and in the flow, so the hero (and its photo) starts right under it */
section.cine-hero { --cine-top: 0px; }
.cine-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0B1A4A; container-type: size; }
.cine-media { top: var(--cine-top, 0px); }
.cine-slide { --pa: var(--pa-m, 1); --pb: var(--pb-m, .5); --ps: var(--ps-m, .5); }
.cine-slide { position: absolute; inset: 0; opacity: 0; }
.cine-slide:first-child { opacity: 1; }
.cine-slide picture { display: contents; }
.cine-slide img { position: absolute; top: 0; right: 0; height: 100%; width: min(calc(100cqh * var(--r, 1.5)), 82cqw); max-width: none;
  object-fit: cover; object-position: var(--px, 75%) 30%; transform-origin: 0% 50%; transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent var(--mk0, 0%), rgba(0, 0, 0, .35) calc(var(--mk0, 0%) + 16%), #000 calc(var(--mk0, 0%) + 42%)); mask-image: linear-gradient(90deg, transparent 0, transparent var(--mk0, 0%), rgba(0, 0, 0, .35) calc(var(--mk0, 0%) + 16%), #000 calc(var(--mk0, 0%) + 42%));
  backface-visibility: hidden; }
.cine-media.is-live .cine-slide img { will-change: transform; }

.cine-media.n-3.is-cycling .cine-slide, .cine-caps.n-3.is-cycling span {
  animation: cine-fade calc(3 * var(--xf-hold, 6s)) linear infinite both;
  animation-delay: calc(var(--i, 0) * var(--xf-hold, 6s) - var(--xf-fade, 1.4s)); }
/* 18s cycle: fade in 1.4s (7.78%), hold to 6s (33.33%), fade out by 7.4s (41.11%) while the next fades in */
@keyframes cine-fade { 0% { opacity: 0; } 7.78% { opacity: 1; } 33.33% { opacity: 1; } 41.11% { opacity: 0; } 100% { opacity: 0; } }
/* Reduce Motion, 21s cycle: fade in 2.2s (10.48%), hold to 7s, fade out by 9.2s (43.81%) */
@keyframes cine-fade-r { 0% { opacity: 0; } 10.48% { opacity: 1; } 33.33% { opacity: 1; } 43.81% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cine-media.n-3.is-cycling .cine-slide, .cine-caps.n-3.is-cycling span { animation-name: cine-fade-r; } }

/* Ken Burns on the img itself (the slide wrapper only fades); each slot starts at a different point of the swing */
.cine-media.is-live .cine-slide img { animation: cine-kb-d var(--kb-dur, 20s) var(--ease-io, ease-in-out) infinite alternate both;
  animation-delay: calc(var(--i, 0) * -7s); }
@keyframes cine-kb-d { from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(var(--kb-tx, -3%), var(--kb-ty, -1.5%), 0) scale(var(--kb-scale, 1.07)); } }

/* captions: above the shade, crossfading with their photo */
.cine-caps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.cine-caps span { position: absolute; right: clamp(16px, 4vw, 56px); bottom: 14px; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 8px rgba(8, 15, 38, .6); opacity: 0; }
.cine-caps span:first-child { opacity: 1; }
.cine-caps i { font-style: normal; }

/* ---------- Phones and tablets: photo band under the nav, copy below, right-to-left pan ---------- */
@media (max-width: 900px) {
  .cine-media { --band: clamp(300px, 48svh, 460px); top: var(--cine-top, 0px); bottom: auto; height: var(--band); container-type: inline-size; }
  .cine-slide img { left: 0; right: auto; width: auto; min-width: 122%; height: 100%; object-position: 50% var(--pym, 22%);
    -webkit-mask-image: none; mask-image: none;
    transform-origin: 50% 40%; transform: translate3d(calc((100cqw - 100%) * var(--pa, 1)), 0, 0); }
  .cine-media.is-live .cine-slide img { animation-name: cine-kb-m; }
  .cine-caps span { bottom: auto; top: calc(var(--cine-top, 0px) + clamp(300px, 48svh, 460px) - 26px); right: 16px; font-size: 11px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .cine-slide { --pa: var(--pa-t, 1); --pb: var(--pb-t, .8); --ps: var(--ps-t, .8); }
}
@keyframes cine-kb-m { from { transform: translate3d(calc((100cqw - 100%) * var(--pa)), 0, 0) scale(1); }
  to { transform: translate3d(calc((100cqw - 100%) * var(--pb)), 0, 0) scale(var(--kb-scale, 1.07)); } }

.cine-shade { position: absolute; inset: 0; top: var(--cine-top, 0px); z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 15, 38, .5) 0%, rgba(8, 15, 38, .2) 42%, rgba(8, 15, 38, 0) 60%),
              linear-gradient(0deg, rgba(8, 15, 38, .45) 0%, transparent 30%); }
/* Dot texture (DOTS-BRIEF, Oct 16): copied from the ACAMIS deck's photo divider slides (.p6-dots in
   decks/2026-10-acamis-tech-workshop/src/css/s99z...-p6.css): light dots 1px on a 22px grid, screen-blended over the
   photo and navy shade, fading toward the photo's bright side. Static (the deck drifts it; the site does not).
   Above the photo and shade, below the captions and text; tokens --tex-* in css/pro.css. */
.cine-dots { position: absolute; inset: 0; top: var(--cine-top, 0px); z-index: 1; pointer-events: none;
  opacity: var(--tex-dots-o, .22); mix-blend-mode: screen;
  background: radial-gradient(var(--tex-dots-c, rgba(201, 214, 242, .9)) 1px, transparent 1.6px) 0 0 / var(--tex-dots-s, 22px) var(--tex-dots-s, 22px);
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%); mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%); }
/* phones and tablets: the photo is a band above the copy; quieter and wider so faces stay clean */
@media (max-width: 900px) { .cine-dots { --tex-dots-o: .14; --tex-dots-s: 26px; bottom: auto; height: clamp(300px, 48svh, 460px); } }
.cine-crest { width: clamp(72px, 7vw, 104px); aspect-ratio: 1; margin: 0 0 20px; opacity: .88; filter: drop-shadow(0 6px 24px rgba(8, 15, 38, .45)); }
.cine-crest img { width: 100%; height: 100%; display: block; }
.cine-crest.is-centered { margin-inline: auto; }

/* ---------- The section (beats the template and pro.css hero rules) ---------- */
html body main section.cine-hero:not(#cine) {
  position: relative; overflow: hidden; isolation: isolate; background: #0B1A4A !important; background-image: none !important; border-bottom: 0;
  min-height: min(calc(86vh - 75px), 705px) !important; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(56px, 8vh, 104px) !important; padding-bottom: clamp(48px, 7vh, 88px) !important;
}
html body main section.cine-hero:not(#cine) > :is(.container, .el-wrap, .hero-riso-grid) { position: relative; z-index: 3; width: 100%; }
html body main section.cine-hero:not(#cine) .hero-riso-grid { grid-template-columns: minmax(0, 1fr) !important; padding-block: 0 !important; }
html body main section.cine-hero :is(.hero-art, .pro-hero-bg, .hero-bg, .hero-scrim, .hero-more, .pro-hero-media) { display: none !important; }
html body .nav:not(#cine) { background: rgba(255, 255, 255, .97) !important; -webkit-backdrop-filter: saturate(1.2) blur(10px) !important; backdrop-filter: saturate(1.2) blur(10px) !important; border-bottom: 1px solid #E2E6EE !important; }

/* type */
html body main section.cine-hero :is(h1, .display, .cs-h1, .hero-riso-h1, .el-h1):not(#cine):not(#cine-h1) {
  font-size: var(--cine-h1, clamp(36px, 1.2rem + 2.8vw, 60px)) !important; max-width: 18ch; color: #FFFFFF !important; text-shadow: 0 1px 24px rgba(8, 15, 38, .35) !important;
}
html body main section.cine-hero :is(h1, .display) :is(em, .rh, .hr-rot, .hr-rot *, .hw-key) { color: #C9D6F2 !important; }
html body main section.cine-hero :is(.lede, .sub, .el-lede, .thesis, .pc-intro, .hero-copy > p, .hero-riso-copy > p) { color: rgba(255, 255, 255, .88) !important; max-width: 56ch; text-shadow: 0 1px 16px rgba(8, 15, 38, .35); }
/* desktop: the copy keeps to the left ~42% so the faces in the photo stay clear of it */
@media (min-width: 901px) {
  html body main section.cine-hero :is(.lede, .sub, .el-lede, .pc-intro, .hero-copy > p, .hero-riso-copy > p) { max-width: min(42ch, 40vw) !important; }
  html body main section.cine-hero :is(h1, .display, .cs-h1, .hero-riso-h1, .el-h1):not(#cine):not(#cine-h1):not(#cine-w) { max-width: min(16ch, 41vw) !important; }
}
/* wide screens: the container is centered, so the same right edge (~44% of the width) needs a narrower column */
@media (min-width: 1300px) {
  html body main section.cine-hero :is(.lede, .sub, .el-lede, .pc-intro, .hero-copy > p, .hero-riso-copy > p) { max-width: min(42ch, 32vw) !important; }
  html body main section.cine-hero :is(h1, .display, .cs-h1, .hero-riso-h1, .el-h1):not(#cine):not(#cine-h1):not(#cine-w) { max-width: min(16ch, 33vw) !important; }
}
html body main section.cine-hero :is(.lede, .sub) a { color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 3px; }
html body main section.cine-hero .eyebrow { color: #C9D6F2 !important; }
html body main section.cine-hero .btn-primary { background: #FFFFFF !important; color: #0B1A4A !important; border-color: #FFFFFF !important; }
html body main section.cine-hero .btn-ghost { background: transparent !important; color: #FFFFFF !important; border-color: rgba(255, 255, 255, .55) !important; }
html body main section.cine-hero .tlink { color: #FFFFFF !important; }

/* facts and routes on the photo */
/* on phones the phone layer turns these into its own white rows, so the glass panel is desktop and tablet only */
@media (min-width: 761px) {
  html body main section.cine-hero :is(.pc-facts, .pp-glance) { background: rgba(8, 15, 38, .42); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 4px 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 860px; }
  html body main section.cine-hero :is(.pc-facts, .pp-glance) li { border-color: rgba(255, 255, 255, .16) !important; }
  html body main section.cine-hero :is(.pc-facts, .pp-glance) b { color: rgba(255, 255, 255, .7) !important; }
  html body main section.cine-hero :is(.pc-facts, .pp-glance) span { color: #FFFFFF !important; }
}
html body main section.cine-hero .el-facts { background: rgba(255, 255, 255, .95); border-color: transparent; }
html body main section.cine-hero .el-hero-grid { align-items: end; }
/* desktop: the facts card leaves the right column (where the photo's people are) and sits under the
   actions in the left column as a compact two-column strip */
@media (min-width: 901px) {
  html body main section.cine-hero .el-hero-grid:not(#cine) { grid-template-columns: minmax(0, 1fr); }
  html body main section.cine-hero .el-hero-side { max-width: min(520px, 38vw); }
  html body main section.cine-hero .el-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: rgba(8, 15, 38, .42); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html body main section.cine-hero .el-facts li { grid-template-columns: 1fr; align-content: start; gap: 2px; padding: 10px 16px; border-color: rgba(255, 255, 255, .16) !important; border-bottom: 1px solid rgba(255, 255, 255, .16); color: #FFFFFF; font-size: 14px; }
  html body main section.cine-hero .el-facts li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .16); }
  html body main section.cine-hero .el-facts li:nth-last-child(-n + 2):nth-child(odd), html body main section.cine-hero .el-facts li:last-child { border-bottom: 0; }
  html body main section.cine-hero .el-facts li:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; }
  html body main section.cine-hero .el-facts li b { color: rgba(255, 255, 255, .7) !important; font-size: 10.5px; padding: 0; }
}
@media (min-width: 1300px) { html body main section.cine-hero .el-hero-side { max-width: min(520px, 33vw); } }
html body main section.cine-hero .pg-route { background: rgba(255, 255, 255, .95) !important; border-color: transparent !important; }
html body main section.cine-hero .zl-hero-hosted-label { color: rgba(255, 255, 255, .72) !important; }
html body main section.cine-hero .zl-hero-hosted img { filter: brightness(0) invert(1) !important; opacity: .9 !important; }

@media (max-width: 900px) {
  html body main section.cine-hero .el-hero-side { display: none; }
}
@media (max-width: 900px) {
  html body main section.cine-hero:not(#cine) { min-height: 0 !important; justify-content: flex-start;
    padding-top: calc(var(--cine-top, 0px) + clamp(300px, 48svh, 460px) + 14px) !important; padding-bottom: 44px !important; }
  .cine-shade { top: var(--cine-top, 0px); bottom: auto; height: clamp(300px, 48svh, 460px);
    background: linear-gradient(180deg, rgba(8, 15, 38, .12) 0%, rgba(8, 15, 38, 0) 30%, rgba(8, 15, 38, .25) 70%, #0B1A4A 100%); }
  html body main section.cine-hero :is(h1, .display, .cs-h1, .hero-riso-h1, .el-h1):not(#cine):not(#cine-h1) { max-width: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  /* Reduce Motion on phones: a short pan around the faces-centered frame instead of the full sweep */
  .cine-slide { --pa: var(--ps) !important; --pb: max(0, calc(var(--ps) - .08)) !important; }
}

/* ---------- Rotating audience word (homepage) ----------
   hero-rotator.js sets the slot's width to the current word and animates it (400ms ease-in-out) between
   words, so the following text glides with no gap. Sequence: old word fades out, the slot resizes, the new
   word fades in, so two words never show at once. */
html body main section.cine-hero .hr-rot { display: inline-grid !important; overflow: visible !important; vertical-align: bottom; transition: width .4s ease-in-out !important; }
html body main section.cine-hero .hr-rot > span { grid-area: 1 / 1; white-space: nowrap; justify-self: start; }
html body main section.cine-hero .hr-rot.is-live > span { visibility: visible; opacity: 0; transform: none !important; transition: opacity .25s ease !important; }
html body main section.cine-hero .hr-rot.is-live > span.is-on { opacity: 1; }
html body main section.cine-hero .hr-rot.is-live > span.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html body main section.cine-hero .hr-rot { transition: none !important; } }
/* the word ends its line (and on phones, where the line is centered, sits on a line of its own), so when the
   slot resizes no visible text moves: no layout shift */
html body main section.cine-hero .hero-riso-h1 .hr-lb { display: block; }
@media (max-width: 760px) { html body main section.cine-hero .hero-riso-h1 .m-br { display: block; } }
/* EN: the rotating word always sits on its own line, at every width. At about 1100-1300px a short word
   ("families") fitted next to "Empowering" and a long one did not, so the headline changed between 3 and 4
   lines with each word and moved everything below it (found when the film section went under the hero). */
html body main section.cine-hero .hero-riso-h1:lang(en) .m-br { display: block; }
/* No flash on load: the hidden words start at opacity 0, so switching them from hidden to visible
   (.is-live) never shows all four words overlapping while the fade runs */
html body main section.cine-hero .hr-rot > span:not(.is-on) { opacity: 0; }

/* Hero rotating word: true crossfade (XFADE, Oct 17, 2026; hero-rotator.js). All words share one grid cell, so
   the slot is fixed at the widest word: no layout shift. The outgoing word fades out (slight lift and blur) while
   the incoming one fades in from 4px below, both over --xfade (700ms), with the motion-token easing. Reduce
   Motion: opacity only. At 390 the headline is centered and the word sits alone on its line, so it centers too. */
html body main section.cine-hero .hr-rot.is-xfade { --xfade: 700ms; width: auto !important; transition: none !important; overflow: visible !important; }
html body main section.cine-hero .hr-rot.is-xfade > span { grid-area: 1 / 1; justify-self: start; visibility: visible !important; opacity: 0;
  transform: translateY(4px) !important; filter: blur(2px);
  transition: opacity var(--xfade) var(--ease-io), transform var(--xfade) var(--ease), filter var(--xfade) var(--ease) !important; }
html body main section.cine-hero .hr-rot.is-xfade > span.is-on { opacity: 1; transform: none !important; filter: none; }
html body main section.cine-hero .hr-rot.is-xfade > span.is-out { opacity: 0; transform: translateY(-4px) !important; filter: blur(2px); }
@media (max-width: 760px) { html body main section.cine-hero .hr-rot.is-xfade > span { justify-self: center; } }
@media (prefers-reduced-motion: reduce) {
  html body main section.cine-hero .hr-rot.is-xfade > span,
  html body main section.cine-hero .hr-rot.is-xfade > span:is(.is-on, .is-out) { transform: none !important; filter: none; transition: opacity var(--xfade) linear !important; }
}

/* ---------- HERO2-BRIEF B (Oct 17, 2026): faster, clearly visible photo motion ----------
   Tokens (css/pro.css): a change every --xf-hold (3.5s) with a --xf-fade (1s) crossfade; Reduce Motion 6s and 1.5s.
   Ken Burns is now locked to each photo's own crossfade cycle (same duration, 3 x hold, and the same delay), so
   every photo starts its push as it fades in: scale 1 to --kb-scale (1.12; Reduce Motion 1.05) and a pan in its
   own direction (--kx/--ky below, x --kb-pan) over --kb-dur = 2 x hold (66.67% of the cycle), easing out, so about
   95% of the push happens while the photo is on screen. The reset to the start happens while it is invisible. */
.cine-slide:nth-child(1) { --kx: -5%; --ky: -2.5%; }   /* left and up */
.cine-slide:nth-child(2) { --kx: 4.5%; --ky: 2%; }     /* right and down */
.cine-slide:nth-child(3) { --kx: -6%; --ky: 2.5%; }    /* left and down */
.cine-media.n-3.is-cycling .cine-slide, .cine-caps.n-3.is-cycling span { animation-name: cine-fade2; }
/* 10.5s cycle: fade in 1s (9.52%), hold to 3.5s (33.33%), fade out by 4.5s (42.86%) while the next fades in */
@keyframes cine-fade2 { 0% { opacity: 0; } 9.52% { opacity: 1; } 33.33% { opacity: 1; } 42.86% { opacity: 0; } 100% { opacity: 0; } }
/* Reduce Motion, 18s cycle: fade in 1.5s (8.33%), hold to 6s, fade out by 7.5s (41.67%) */
@keyframes cine-fade2-r { 0% { opacity: 0; } 8.33% { opacity: 1; } 33.33% { opacity: 1; } 41.67% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cine-media.n-3.is-cycling .cine-slide, .cine-caps.n-3.is-cycling span { animation-name: cine-fade2-r; } }
.cine-media.is-live.is-cycling .cine-slide img {
  animation: cine-kb2 calc(3 * var(--xf-hold, 3.5s)) linear infinite both;
  animation-delay: calc(var(--i, 0) * var(--xf-hold, 3.5s) - var(--xf-fade, 1s)); }
@keyframes cine-kb2 {
  0% { transform: translate3d(0, 0, 0) scale(1); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  66.67%, 100% { transform: translate3d(calc(var(--kx, -5%) * var(--kb-pan, 1)), calc(var(--ky, -2%) * var(--kb-pan, 1)), 0) scale(var(--kb-scale, 1.12)); } }
@media (max-width: 900px) {
  .cine-media.is-live.is-cycling .cine-slide img { animation-name: cine-kb2-m; }
}
@keyframes cine-kb2-m {
  0% { transform: translate3d(calc((100cqw - 100%) * var(--pa)), 0, 0) scale(1); animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  66.67%, 100% { transform: translate3d(calc((100cqw - 100%) * var(--pb)), calc(var(--ky, -2%) * var(--kb-pan, 1)), 0) scale(var(--kb-scale, 1.12)); } }