/* The platform's film (site/partials/film.blade.php, site-film.js). Each moving part («.a») plays its
   animation only in the active scene, from its own start (--d) minus where the clock entered the scene
   (--t0), so a seek lands mid-motion. Without animation every part rests in its final place. */

.film { position: relative; max-width: 1080px; margin: 0 auto; outline: none; }
.film-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; background: #1e1446;
    box-shadow: 0 40px 80px -40px rgb(46 16 101 / .55), 0 0 0 1px rgb(var(--p-rgb) / .18); isolation: isolate; }
.film:focus-visible .film-stage { outline: 3px solid rgb(var(--p-rgb) / .5); outline-offset: 4px; }
.film-svg { display: block; width: 100%; height: 100%; font-family: 'Cairo', sans-serif; }
@media (max-width: 767px) { .film-stage { aspect-ratio: 4 / 3; border-radius: 20px; } }
.film-stage:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.film-stage:fullscreen .film-svg { object-fit: contain; }

/* Colours (follow light / dark) */
.film .amb-bg { fill: #efeafd; } :root[data-theme="dark"] .film .amb-bg { fill: #151033; }
.film .sky-top { stop-color: #8ec9f2; } .film .sky-mid { stop-color: #cfe8fa; } .film .sky-bottom { stop-color: #fdf0d5; }
:root[data-theme="dark"] .film .sky-top { stop-color: #1b2150; } :root[data-theme="dark"] .film .sky-mid { stop-color: #33306a; } :root[data-theme="dark"] .film .sky-bottom { stop-color: #8a5a6e; }
.film .far { fill: #c9d6e6; opacity: .9; } :root[data-theme="dark"] .film .far { fill: #2d2b5a; }
.film .walkway { fill: #d9d2c3; } .film .street { fill: #5b616e; }
.film .night { fill: #0b0a24; opacity: 0; pointer-events: none; } :root[data-theme="dark"] .film .night { opacity: .3; }
.film .wall-top { stop-color: #ffffff; } .film .wall-bottom { stop-color: #f1ecff; }
:root[data-theme="dark"] .film .wall-top { stop-color: #2a2450; } :root[data-theme="dark"] .film .wall-bottom { stop-color: #1f1a3f; }
.film .bg-in { stop-color: #f5f2ff; } .film .bg-out { stop-color: #d9d0fa; }
:root[data-theme="dark"] .film .bg-in { stop-color: #241c4f; } :root[data-theme="dark"] .film .bg-out { stop-color: #0f0b24; }
.film .hill { fill: #e9e2ff; } :root[data-theme="dark"] .film .hill { fill: #251d4d; }
.film .ground { fill: #ddd6fe; } :root[data-theme="dark"] .film .ground { fill: #2c2652; }
.film .path { fill: #ede9fe; } :root[data-theme="dark"] .film .path { fill: #362e66; }
.film .cloud { fill: #fff; opacity: .9; } :root[data-theme="dark"] .film .cloud { opacity: .1; }
.film .band { fill: rgb(var(--p-rgb) / .25); } .film .door { fill: #6d28d9; }
.film .fx-tag rect { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.film .fx-screen, .film .fx-card, .film .notice { fill: var(--surface); }
.film .fx-card, .film .notice { stroke: rgb(var(--p-rgb) / .14); stroke-width: 2; }
.film .fx-row { fill: var(--bg-soft); }
.film .avatar { fill: rgb(var(--p-rgb) / .16); } .film .bar { fill: var(--line); } .film .bar.soft { opacity: .6; }
.film .sep { stroke: var(--line); stroke-width: 2; }
.film .pill-green, .film .ok { fill: #16a34a; } .film .pill-red { fill: #e11d48; }
.film .cell { fill: var(--surface-2); } .film .qr { fill: var(--text); } .film .scan { fill: #22c55e; }
.film .block { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.film .park { fill: #86efac; } .film .park.dark { fill: #4ade80; }
.film .river { stroke: #bae6fd; stroke-width: 34; stroke-linecap: round; } :root[data-theme="dark"] .film .river { stroke: #1e3a5f; }
.film .road { stroke: var(--line); stroke-width: 32; stroke-linecap: round; stroke-linejoin: round; }
.film .road-line { stroke: var(--surface); stroke-width: 3; stroke-dasharray: 14 14; stroke-linecap: round; }
.film .route { stroke: #8b5cf6; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; filter: drop-shadow(0 0 6px rgb(139 92 246 / .6)); }
.film .house { fill: #fb923c; }
/* The map (scene 4), light and dark like a maps app */
.film .map-base, .film .map-block { fill: #f1eee8; } .film .map-house { fill: #e2dccf; }
.film .map-minor { stroke: #fff; stroke-width: 12; }
.film .map-park { fill: #cde9c5; } .film .map-bridge { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 2; } :root[data-theme="dark"] .film .map-bridge { fill: #3a4560; stroke: #4b5675; }
.film .map-water { stroke: #a8d4f5; stroke-width: 44; stroke-linecap: round; }
.film .map-road-case { stroke: #fff; stroke-width: 34; stroke-linejoin: round; stroke-linecap: round; }
.film .map-road { stroke: #fbe39a; stroke-width: 24; stroke-linejoin: round; stroke-linecap: round; }
.film .map-label { fill: #6b7280; } .film .map-label.area { fill: #a8a29e; letter-spacing: 2px; } .film .map-label.green { fill: #3f7d3a; } .film .map-label.blue { fill: #2b7bc0; }
:root[data-theme="dark"] .film .map-base, :root[data-theme="dark"] .film .map-block { fill: #1e2433; } :root[data-theme="dark"] .film .map-house { fill: #273044; }
:root[data-theme="dark"] .film .map-minor { stroke: #323b50; } :root[data-theme="dark"] .film .map-park { fill: #1f3b2c; } :root[data-theme="dark"] .film .map-water { stroke: #1d3f63; }
:root[data-theme="dark"] .film .map-road-case { stroke: #3a4560; } :root[data-theme="dark"] .film .map-road { stroke: #6b5a2a; } :root[data-theme="dark"] .film .map-label { fill: #9ca3af; }
.film .busping { transform-box: fill-box; transform-origin: center; animation: fBusPing 1.6s ease-out infinite; }
@keyframes fBusPing { from { transform: scale(.8); opacity: .5; } to { transform: scale(1.9); opacity: 0; } }
.film.paused .busping { animation-play-state: paused; }
.film .busmark { transform: translate(930px, 250px); transform-box: view-box; transform-origin: 0 0; }
.film .scene.on .a.busmark { animation-name: fBusMark; animation-timing-function: linear; } /* linear like the route line, which it rides */
@keyframes fBusMark { 0% { transform: translate(200px, 640px); } 20.5% { transform: translate(200px, 410px); } 52.7% { transform: translate(560px, 410px); } 67% { transform: translate(560px, 250px); } 100% { transform: translate(930px, 250px); } }
.film .trail { stroke: #a78bfa; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; opacity: .55; }
.film .link { stroke: rgb(255 255 255 / .3); stroke-width: 2.5; stroke-dasharray: 1; }
.film .t-strong { fill: var(--text); font-weight: 800; } .film .t-muted { fill: var(--muted); font-weight: 600; }
.film .t-accent { fill: #7c3aed; font-weight: 800; } :root[data-theme="dark"] .film .t-accent { fill: #c4b5fd; }
.film .ico { font-family: 'Material Symbols Outlined'; font-weight: normal; }

/* Ambient light: always drifting (paused with the film) */
.film .bokeh { animation: fBokeh 9s ease-in-out infinite alternate; animation-delay: var(--delay); transform-box: fill-box; transform-origin: center; }
@keyframes fBokeh { from { transform: translate(-30px, 20px) scale(.9); opacity: .5; } to { transform: translate(30px, -20px) scale(1.15); opacity: 1; } }
.film .rays { transform-box: fill-box; transform-origin: center; animation: fSpin 30s linear infinite; }
@keyframes fSpin { to { transform: rotate(360deg); } }
.film .flag { transform-box: fill-box; transform-origin: 0 50%; animation: fFlag 1.4s ease-in-out infinite alternate; }
@keyframes fFlag { from { transform: skewY(-4deg) scaleX(.94); } to { transform: skewY(4deg) scaleX(1); } }
.film .palm { transform-box: view-box; animation: fPalm 3.2s ease-in-out infinite alternate; }
@keyframes fPalm { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.film.paused .bokeh, .film.paused .rays, .film.paused .flag, .film.paused .palm { animation-play-state: paused; }

/* Scenes: fade in and out over their own length, with a slow camera push */
.film .scene { opacity: 0; visibility: hidden; }
.film .scene.on { opacity: 1; visibility: visible; animation: filmScene var(--len, 8s) linear both; animation-delay: calc(0s - var(--t0, 0s)); }
@keyframes filmScene { 0% { opacity: 0; } 5% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } }
.film .cam { transform-box: view-box; transform-origin: 600px 375px; }
.film .scene.on .cam { animation: fCam var(--len, 8s) linear both; animation-delay: calc(0s - var(--t0, 0s)); }
@keyframes fCam { from { transform: scale(1); } to { transform: scale(1.07); } }
.film .a { transform-box: fill-box; transform-origin: center; }
.film .scene.on .a { animation-duration: var(--dur, .8s); animation-delay: calc(var(--d, 0s) - var(--t0, 0s));
    animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .75, .25, 1); }
.film.paused .scene.on, .film.paused .scene.on .a, .film.paused .scene.on .cam { animation-play-state: paused; }

/* Parts that end hidden (they passed through) */
.film .flyoff, .film .walk, .film .fly, .film .orbit, .film .draw-in, .film .scan, .film .spark, .film .tap, .film .caret, .film .confetti, .film .ping, .film .burst, .film .sweep { opacity: 0; }

/* Springy entrances */
.film .scene.on .pop, .film .scene.on .mark-on, .film .scene.on .stamp, .film .scene.on .logo, .film .scene.on .logo-in { animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

.film .scene.on .rise { animation-name: fRise; }
@keyframes fRise { from { transform: translateY(240px); opacity: 0; } }
.film .scene.on .drift { animation-name: fDrift; animation-timing-function: linear; }
.film .scene.on .drift.slow { animation-direction: reverse; }
@keyframes fDrift { from { transform: translateX(-50px); } to { transform: translateX(50px); } }
.film .scene.on .peck { animation-name: fPeck; animation-iteration-count: 4; animation-timing-function: ease-in-out; }
@keyframes fPeck { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg) translateY(2px); } 50% { transform: rotate(0); } 70% { transform: translateY(-5px); } }
.film .scene.on .flyoff { animation-name: fFlyOff; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
@keyframes fFlyOff { 0% { transform: translate(0, 0); opacity: 1; } 15% { transform: translate(0, -6px); } 25% { transform: translate(0, 0); } 100% { transform: translate(-320px, -260px) scale(.5) rotate(-12deg); opacity: 0; } }
.film .scene.on .bird { animation-name: fBird; animation-timing-function: linear; }
@keyframes fBird { from { transform: translate(-120px, 20px); opacity: 0; } 15% { opacity: .9; } to { transform: translate(220px, -60px); opacity: .9; } }
.film .scene.on .pop-up { animation-name: fPopUp; }
@keyframes fPopUp { from { transform: translateY(60px) scale(.94); opacity: 0; } }
.film .scene.on .lit { animation-name: fLight; animation-duration: .5s; }
@keyframes fLight { from { opacity: .3; } }
.film .ring { transform-origin: 50% 15%; }
.film .scene.on .ring { animation-name: fRing; }
@keyframes fRing { 0% { transform: rotate(0); } 15% { transform: rotate(-20deg); } 35% { transform: rotate(16deg); } 55% { transform: rotate(-10deg); } 75% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
.film .scene.on .pop, .film .scene.on .mark-on { animation-name: fPop; }
@keyframes fPop { from { transform: scale(.5); opacity: 0; } }
.film .scene.on .walk { animation-name: fWalk; animation-timing-function: ease-in-out; }
@keyframes fWalk {
    0% { transform: translateX(var(--from)) translateY(0); opacity: 0; } 8% { opacity: 1; }
    20% { transform: translateX(calc(var(--from) * .8)) translateY(-7px); } 40% { transform: translateX(calc(var(--from) * .6)) translateY(0); }
    60% { transform: translateX(calc(var(--from) * .4)) translateY(-7px); } 80% { transform: translateX(calc(var(--from) * .2)) translateY(0); opacity: 1; }
    100% { transform: translateX(0) scale(.9); opacity: 0; }
}
.film .scene.on .slide-l { animation-name: fSlideL; animation-duration: 1s; }
@keyframes fSlideL { from { transform: translateX(90px) rotate(2deg); opacity: 0; } }
.film .scene.on .slide-r { animation-name: fSlideR; animation-duration: 1s; }
@keyframes fSlideR { from { transform: translateX(-90px) rotate(-2deg); opacity: 0; } }
.film .scene.on .mark-red { animation-name: fMarkRed; }
@keyframes fMarkRed { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(1); } }
.film .scene.on .tap, .film .scene.on .ping { animation-name: fTap; animation-timing-function: ease-out; }
@keyframes fTap { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.film .scene.on .fly { animation-name: fFly; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
@keyframes fFly {
    0% { transform: translate(720px, 410px) scale(.3); opacity: 0; } 12% { transform: translate(705px, 360px) scale(1); opacity: 1; }
    50% { transform: translate(600px, 190px) scale(1.15); } 88% { transform: translate(478px, 296px) scale(1); opacity: 1; }
    100% { transform: translate(470px, 340px) scale(.4); opacity: 0; }
}
.film .scene.on .draw, .film .scene.on .check { animation-name: fDraw; }
.film .scene.on .route { animation-timing-function: linear; } /* keeps pace with the bus */
@keyframes fDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.film .check { stroke-dasharray: 1; }
.film .scene.on .shake { animation-name: fShake; }
@keyframes fShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px) rotate(-2.5deg); } 40% { transform: translateX(10px) rotate(2.5deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
.film .scene.on .drop { animation-name: fDrop; animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
@keyframes fDrop { from { transform: translateY(-40px) scale(.92); opacity: 0; } }
.film .scene.on .caret { animation-name: fCaret; animation-timing-function: steps(2); }
@keyframes fCaret { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
.film .scene.on .type { animation-name: fType; }
@keyframes fType { from { transform: translateY(10px) scale(.8); opacity: 0; } }
.film .grow { transform-origin: 50% 100%; }
.film .scene.on .grow { animation-name: fGrow; animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
@keyframes fGrow { from { transform: scaleY(0); } }
.film .scene.on .flip { animation-name: fFlip; }
@keyframes fFlip { 0% { transform: perspective(900px) rotateY(80deg) scale(.9); opacity: 0; } 60% { transform: scaleX(1.03); opacity: 1; } 100% { transform: scaleX(1); } }
.film .scene.on .scan { animation-name: fScan; animation-timing-function: ease-in-out; }
@keyframes fScan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(124px); } 90% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.film .scene.on .stamp { animation-name: fStamp; }
@keyframes fStamp { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.film .scene.on .confetti { animation-name: fConfetti; animation-timing-function: cubic-bezier(.15, .7, .3, 1); }
@keyframes fConfetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 80px)) rotate(var(--r)); opacity: 0; } }
.film .scene.on .bounce { animation-name: fBounce; }
@keyframes fBounce { 0% { transform: translateY(-80px); opacity: 0; } 55% { transform: translateY(10px); opacity: 1; } 75% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
.film .bus { transform: translate(930px, 250px); transform-box: view-box; transform-origin: 0 0; }
.film .scene.on .bus { animation-name: fBus; animation-timing-function: linear; }
@keyframes fBus {
    0% { transform: translate(200px, 640px) rotate(-90deg); } 19% { transform: translate(200px, 422px) rotate(-90deg); } 22% { transform: translate(212px, 410px) rotate(0); }
    51% { transform: translate(548px, 410px) rotate(0); } 54% { transform: translate(560px, 398px) rotate(-90deg); } 64% { transform: translate(560px, 262px) rotate(-90deg); }
    67% { transform: translate(572px, 250px) rotate(0); } 100% { transform: translate(930px, 250px) rotate(0); }
}
.film .scene.on .beat { animation-name: fBeat; animation-timing-function: ease-in-out; }
@keyframes fBeat { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.25); opacity: 1; } 45% { transform: scale(1); } 65% { transform: scale(1.18); } 100% { transform: scale(1); } }
.film .scene.on .orbit { animation-name: fOrbit; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
@keyframes fOrbit {
    0% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } 12% { transform: translate(var(--x), var(--y)) scale(1.1); opacity: 1; }
    18% { transform: translate(var(--x), var(--y)) scale(1); } 70% { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
    100% { transform: translate(0, 0) scale(.3); opacity: 0; }
}
.film .scene.on .draw-in { animation-name: fDrawIn; animation-duration: 2.4s; }
@keyframes fDrawIn { 0% { stroke-dashoffset: 1; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.film .scene.on .logo, .film .scene.on .logo-in { animation-name: fLogo; }
@keyframes fLogo { 0% { transform: scale(0) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }
.film .scene.on .halo { animation-name: fHalo; animation-timing-function: ease-out; }
@keyframes fHalo { from { transform: scale(.3); opacity: 0; } }
.film .scene.on .burst { animation-name: fBurst; animation-timing-function: ease-out; }
@keyframes fBurst { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.film .scene.on .sweep { animation-name: fSweep; animation-timing-function: ease-in-out; }
@keyframes fSweep { 0% { transform: translateX(-200px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(560px); opacity: 0; } }
.film .scene.on .rise-t { animation-name: fRiseT; }
.film .scene.on .paper { animation-name: fPaper; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1); }
@keyframes fPaper { from { transform: translateY(-120px) rotate(-8deg) scale(1.05); opacity: 0; } }
.film .scene.on .rise-p { animation-name: fRiseP; }
@keyframes fRiseP { from { transform: translateY(260px); opacity: 0; } }
.film .steam { transform-box: fill-box; animation: fSteam 2.1s ease-in-out infinite; }
@keyframes fSteam { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .55; } 100% { transform: translateY(-22px); opacity: 0; } }
.film.paused .steam { animation-play-state: paused; }
@keyframes fRiseT { from { transform: translateY(30px); opacity: 0; } }
.film .scene.on .word { animation-name: fWord; }
@keyframes fWord { from { fill-opacity: 0; } }
.film .scene.on .spark { animation-name: fSpark; animation-timing-function: ease-out; }
@keyframes fSpark { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)); opacity: 0; } }

/* The wipe between scenes */
.film-wipe { position: absolute; inset: -10% -30%; z-index: 4; pointer-events: none; background: linear-gradient(100deg, transparent 0 30%, #6d28d9 38%, #8b5cf6 50%, #c084fc 62%, transparent 70% 100%);
    transform: translateX(120%) skewX(-14deg); }
.film-wipe.go { animation: fWipe .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes fWipe { from { transform: translateX(120%) skewX(-14deg); } to { transform: translateX(-120%) skewX(-14deg); } }

/* The chapter title in the frame */
.film-lower { position: absolute; left: 50%; bottom: 12%; z-index: 3; display: flex; align-items: center; gap: 12px; max-width: 80%; white-space: nowrap;
    padding: 10px 18px 10px 14px; border-radius: 18px; background: rgb(255 255 255 / .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 34px -16px rgb(46 16 101 / .45); border: 1px solid rgb(255 255 255 / .7); opacity: 0; transform: translate(-50%, 14px); pointer-events: none; }
:root[data-theme="dark"] .film-lower { background: rgb(24 20 51 / .78); border-color: rgb(255 255 255 / .1); }
.film-lower.in { animation: fLower var(--len, 8s) ease both; animation-delay: calc(0s - var(--t0, 0s)); }
.film.paused .film-lower.in, .film.paused .film-wipe.go { animation-play-state: paused; }
/* The title opens the chapter, then leaves the stage to the action. */
@keyframes fLower { 0%, 7% { opacity: 0; transform: translate(-50%, 14px); } 12%, 40% { opacity: 1; transform: translate(-50%, 0); } 47%, 100% { opacity: 0; transform: translate(-50%, -8px); } }
.film-num { font-weight: 800; font-size: 1.5rem; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.film-lower-text { display: flex; flex-direction: column; line-height: 1.35; }
.film-label { font-size: .78rem; color: var(--p); font-weight: 800; letter-spacing: .02em; }
:root[data-theme="dark"] .film-label { color: #c4b5fd; }
.film-caption { font-weight: 800; font-size: clamp(.9rem, .75rem + .6vw, 1.25rem); color: var(--text); }
.film[data-scene="0"] .film-lower, .film[data-scene="5"] .film-lower { display: none; }
@media (max-width: 575px) { .film-lower { bottom: 16%; padding: 4px 10px; gap: 6px; max-width: 94%; border-radius: 12px; } .film-num { font-size: .95rem; } .film-label { display: none; } .film-caption { font-size: .74rem; overflow: hidden; text-overflow: ellipsis; } }

/* Overlays */
.film-cta { position: absolute; left: 50%; bottom: 13%; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: all .5s ease; z-index: 3; }
.film[data-scene="5"].cta .film-cta { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.film-big-play { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border-radius: 50%; border: 0; z-index: 5;
    background: rgb(255 255 255 / .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 20px 50px -14px rgb(0 0 0 / .5); cursor: pointer; transition: transform .25s, opacity .25s; }
.film-big-play::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); animation: fPulse 2s ease-out infinite; }
@keyframes fPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.film-big-play .ms { font-size: 3.2rem; vertical-align: 0; }
.film-big-play:hover { transform: scale(1.06); }
.film.playing .film-big-play { opacity: 0; transform: scale(.8); pointer-events: none; }
@media (max-width: 575px) { .film-big-play { width: 70px; height: 70px; } .film-big-play .ms { font-size: 2.4rem; } .film-cta { bottom: 20%; padding: .55rem 1rem; font-size: .9rem; } }

/* Controls over the frame (hidden while playing and the pointer rests) */
.film-bar { position: absolute; inset-inline: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 34px 18px 14px;
    background: linear-gradient(transparent, rgb(13 9 33 / .72)); color: #fff; transition: opacity .35s, transform .35s; }
.film.playing.idle .film-bar { opacity: 0; transform: translateY(8px); }
.film.playing.idle .film-stage { cursor: none; }
.film-toggle, .film-full { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: rgb(255 255 255 / .14); color: #fff; cursor: pointer; display: grid; place-items: center; }
.film-toggle:hover, .film-full:hover { background: rgb(255 255 255 / .26); }
.film-toggle .ms, .film-full .ms { vertical-align: 0; }
.film-track { position: relative; flex: 1; height: 6px; border-radius: 99px; background: rgb(255 255 255 / .25); cursor: pointer; transition: height .2s; }
.film-track:hover { height: 9px; }
.film-track:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.film-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, #c084fc, #fff); }
.film-tick { position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgb(255 255 255 / .8); }
.film-time { font-size: .82rem; font-weight: 700; min-width: 78px; text-align: center; opacity: .92; }
@media (max-width: 575px) { .film-bar { gap: 8px; padding: 26px 10px 8px; } .film-toggle, .film-full { width: 34px; height: 34px; } .film-time { min-width: 64px; font-size: .74rem; } }

.film-chapters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.film-chapter { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .95rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface);
    color: var(--muted); font-weight: 700; font-size: .88rem; cursor: pointer; transition: all .25s; }
.film-chapter .ms { color: var(--p); }
.film-chapter:hover { color: var(--p); border-color: var(--p2); }
.film-chapter.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgb(var(--p-rgb) / .9); }
.film-chapter.active .ms { color: #fff; }
@media (max-width: 575px) { .film-chapters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; padding-bottom: 4px; } .film-chapter { flex: none; } }

/* Less motion: still frames, stepped by the chapters (no autoplay) */
@media (prefers-reduced-motion: reduce) {
    .film .scene.on, .film .scene.on .a, .film .scene.on .cam, .film .bokeh, .film .rays, .film .flag, .film-lower.in, .film-wipe.go, .film-big-play::before { animation: none !important; }
    .film-lower.in { opacity: 1; transform: translate(-50%, 0); }
    .film .bus, .film .busmark { transform: translate(930px, 250px) !important; }
}