/* Live titles and the bottom bar of a page-top film (homepage and expertise page).
   film-titles.js sets every title's state from the film's current time; home-film.js
   drives playback and sound. Tokens: design/home-film.tokens.json. */
/* Live titles: one beat per shot, all stacked in the same frame. */
[data-home-film] .film-titles { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; color: var(--film-ink); }
[data-home-film] .film-beat { position: absolute; inset: 0; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + var(--sp-6)) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--film-bar-space); }
[data-home-film] .film-scrim { position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--film-scrim-beat); }
[data-home-film] .film-scrim--center { background: var(--film-scrim-mark); }
[data-home-film] .film-stack { display: grid; justify-items: start; gap: var(--sp-4); max-width: 100%; }
[data-home-film] .film-titles p { margin: 0; }
/* A masked line: its text rises into view from below its own baseline. */
[data-home-film] .film-line { overflow: hidden; padding: .14em .06em .1em; margin: 0 -.06em -.24em; }
[data-home-film] .film-line > span { display: inline-block; max-width: 100%; transform: translateY(160%); will-change: transform; }
[data-home-film] .film-display { font: 800 var(--film-display) / .95 var(--signal-font-display); letter-spacing: -.045em; text-shadow: 0 6px 40px rgba(2, 10, 24, .5); }
[data-home-film] .film-sub { color: var(--film-ink-soft); font: 400 var(--film-sub) / 1.25 var(--signal-font-body); text-wrap: balance; text-shadow: 0 3px 24px rgba(2, 10, 24, .8); }
[data-home-film] .film-sub + .film-sub { margin-top: calc(-1 * var(--sp-3)); }
[data-home-film] .film-title { font: 800 var(--film-heading) / 1.02 var(--signal-font-display); letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 6px 40px rgba(2, 10, 24, .5); }
/* A practice beat: its number, its name, then its three steps one after another. */
[data-home-film] .film-number { color: var(--film-accent); font: 500 var(--fs-sm) var(--signal-font-mono); letter-spacing: .14em; }
[data-home-film] .film-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); }
[data-home-film] .film-step { color: var(--film-ink-soft); font: 500 var(--film-sub) / 1.25 var(--signal-font-body); text-shadow: 0 3px 24px rgba(2, 10, 24, .8); }
[data-home-film] .film-step + .film-step > span::before { content: ''; display: inline-block; width: .32em; height: .32em; margin-right: var(--sp-5); border-radius: 50%; background: var(--film-accent); vertical-align: middle; }
[data-home-film] .film-rule { display: block; width: var(--sp-20); height: 5px; margin-bottom: var(--sp-2); background: var(--film-accent); transform: scaleX(0); transform-origin: left; }
[data-home-film] .film-slam { display: flex; flex-direction: column; align-items: flex-start; opacity: 0; transform-origin: 0 60%; }
[data-home-film] .film-slam b { font: 800 var(--film-heading) / 1 var(--signal-font-display); letter-spacing: -.04em; color: color-mix(in srgb, var(--film-ink) calc(100% - var(--dim, 0) * 100%), var(--film-accent)); text-shadow: 0 6px 40px rgba(2, 10, 24, .55); }
[data-home-film] .film-slam i, [data-home-film] .film-year i { color: var(--film-ink-soft); font: 400 var(--film-sub) / 1.2 var(--signal-font-body); font-style: normal; text-shadow: 0 3px 24px rgba(2, 10, 24, .8); }
[data-home-film] .film-year > span { display: inline-flex; align-items: baseline; gap: .35em; }
[data-home-film] .film-year b { font: 800 var(--film-year) / .9 var(--signal-font-display); letter-spacing: -.05em; text-shadow: 0 8px 48px rgba(2, 10, 24, .5); }
/* The path from framing to production: a line that draws itself, arrow last. */
[data-home-film] .film-path { position: relative; display: block; width: min(30rem, 70%); height: 14px; background: linear-gradient(var(--film-accent), var(--film-accent)) left center / calc(100% - 3px) 2px no-repeat; clip-path: inset(-50% 100% -50% 0); }
[data-home-film] .film-path::after { content: ''; position: absolute; right: 2px; top: 50%; width: 10px; height: 10px; border-top: 2px solid var(--film-accent); border-right: 2px solid var(--film-accent); transform: translateY(-50%) rotate(45deg); }
/* Closing logo. */
[data-home-film] .film-beat--mark { align-items: center; justify-content: center; gap: var(--sp-6); text-align: center; }
[data-home-film] .film-emblem { position: relative; width: var(--film-mark-size); aspect-ratio: 1; }
[data-home-film] .film-mark { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
[data-home-film] .film-mark [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-home-film] .film-mark [data-head] { opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-home-film] .film-glow { position: absolute; inset: -35%; opacity: 0; background: radial-gradient(closest-side, rgba(63, 147, 255, .5), rgba(63, 147, 255, .16) 55%, transparent); }
[data-home-film] .film-shine { position: absolute; inset: 0; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%) 100% 0 / 250% 100% no-repeat; -webkit-mask: url(../logo/moderne-dark.svg) center / contain no-repeat; mask: url(../logo/moderne-dark.svg) center / contain no-repeat; }
[data-home-film] .film-wordmark { font: 700 var(--film-wordmark) / 1.1 var(--signal-font-display); letter-spacing: -.03em; }
[data-home-film] .film-veil { position: absolute; inset: 0; opacity: 0; background: var(--film-night); }

/* The live titles replace the static copy only while the film may play. */
@media (prefers-reduced-motion: no-preference) {
  .signal-js:not([data-motion=off]) [data-home-film]:not([data-film-state=still]) .film-titles { display: block; }
  .signal-js:not([data-motion=off]) [data-home-film]:not([data-film-state=still]) .film-static { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Bottom bar, as on the AI Guard film: Discover centred, play and sound right. */
[data-home-film] .film-next { position: absolute; left: 50%; bottom: var(--film-next-bottom); z-index: var(--film-control-layer); display: grid; justify-items: center; padding: var(--sp-2) var(--sp-4) 0; transform: translateX(-50%); color: color-mix(in srgb, var(--signal-hero-text) 72%, transparent); font: 500 var(--fs-xs) / 1 var(--signal-font-mono); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: color var(--signal-normal) var(--signal-ease); }
[data-home-film] .film-next:hover { color: var(--signal-hero-text); }
[data-home-film] .film-chevron { display: block; width: var(--signal-touch); height: var(--signal-touch); fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--signal-normal) var(--signal-ease); }
[data-home-film] .film-next:hover .film-chevron { transform: translateY(var(--sp-1)); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion=off]) [data-home-film] .film-chevron { animation: film-nudge 2.4s var(--signal-ease) infinite; }
}
@keyframes film-nudge {
  0%, 60%, 100% { translate: 0 0; }
  30% { translate: 0 var(--sp-2); }
}
[data-home-film] .film-controls { position: absolute; right: var(--gutter); bottom: var(--sp-5); z-index: var(--film-control-layer); display: flex; gap: var(--sp-2); }
[data-home-film] .film-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--signal-touch); min-width: var(--signal-touch); height: var(--signal-touch); min-height: var(--signal-touch); padding: 0; border: var(--signal-border) solid var(--film-border); border-radius: var(--r-md); color: var(--signal-hero-text); background: var(--film-control-bg); opacity: var(--film-control-opacity); cursor: pointer; transition: opacity var(--signal-normal) var(--signal-ease), background var(--signal-normal) var(--signal-ease); }
[data-home-film] .film-toggle[hidden] { display: none; }
[data-home-film] .film-toggle:hover, [data-home-film] .film-toggle:focus-visible { background: var(--signal-hero-bg); opacity: var(--film-control-opacity-active); }
[data-home-film] .film-icon { width: var(--sp-4); height: var(--sp-4); fill: currentColor; }
[data-home-film] .film-icon--line { width: var(--sp-5); height: var(--sp-5); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-home-film] .film-toggle[data-film-action=play] .film-icon--pause,
[data-home-film] .film-toggle[data-film-action=pause] .film-icon--play,
[data-home-film] .film-sound[data-film-sound=off] .film-icon--sound,
[data-home-film] .film-sound[data-film-sound=on] .film-icon--muted { display: none; }
@media (max-width: 699px) {
  [data-home-film] .film-beat { padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--film-bar-space-mobile); }
  [data-home-film] .film-scrim { background: var(--film-scrim-beat-mobile); }
  [data-home-film] .film-scrim--center { background: var(--film-scrim-mark); }
  [data-home-film] .film-stack { gap: var(--sp-3); }
  [data-home-film] .film-display { font-size: var(--film-display-mobile); }
  [data-home-film] .film-sub, [data-home-film] .film-slam i, [data-home-film] .film-year i, [data-home-film] .film-step { font-size: var(--film-sub-mobile); }
  [data-home-film] .film-title, [data-home-film] .film-slam b { font-size: var(--film-heading-mobile); }
  [data-home-film] .film-year b { font-size: var(--film-year-mobile); }
  [data-home-film] .film-emblem { width: var(--film-mark-mobile); }
}
@media (prefers-reduced-motion: reduce) {
  [data-home-film] .film-next, [data-home-film] .film-chevron { transition: none; }
}