/* CINEMATIC DECKS · the opening film: three frames, two transitions, driven by the scroll.
   1. an ordinary PowerPoint slide · it shatters, only its bars survive and turn to gold
   2. the same data as a Cinematic slide · the frame folds into the middle tablet, two more slide out
   3. the hero itself (the real DOM underneath, revealed) */
.film { position: relative; height: calc(100vh + 360vh); height: calc(100svh + 360vh); }
.film > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film > .stage > .hero-a { min-height: calc(100svh - 100px); }

.film-fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.film-bg { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, #fffaf3 0%, #f6f1ea 60%, #efe6da 100%); }
.film-box { position: absolute; background: radial-gradient(70% 70% at 60% 40%, #fffdf8, #f4ece1 75%, #ede2d3); left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; overflow: hidden; will-change: transform, clip-path, opacity; }
.film-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.film-cap { position: absolute; left: 0; right: 0; text-align: center; margin: 0; color: #6b635b; font: 500 clamp(15px, 1.5vw, 20px)/1.3 var(--body); letter-spacing: .01em; will-change: opacity, transform; }
.film-cap b { color: #1d1a17; font-weight: 700; }
.film-title { position: absolute; margin: 0; color: #1d1a17; text-align: right; will-change: opacity; }
.film-title small { display: block; font: 500 12px var(--lat); letter-spacing: .34em; color: #C2622A; direction: ltr; text-align: right; margin-bottom: 14px; }
.film-title span { display: block; overflow: hidden; padding-bottom: .08em; }
.film-title span i { display: block; font: 300 clamp(40px, 5.4vw, 92px)/1.02 var(--display); font-style: normal; letter-spacing: -.02em; will-change: transform; }
.film-title span:last-child i { font-weight: 700; background: linear-gradient(180deg, #F2893A, #A3481A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.film-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; opacity: 0; filter: drop-shadow(0 3px 6px rgb(40 26 14 / .35)); will-change: transform, opacity; }
.film-cursor svg { display: block; width: 100%; height: 100%; }
.film-cursor i { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgb(194 98 42 / .8); opacity: 0; }

.film-hint { position: absolute; left: 50%; bottom: max(28px, 4vh); translate: -50% 0; display: grid; justify-items: center; gap: 10px; color: #6b635b; font: 500 13px var(--body); letter-spacing: .06em; }
.film-hint::after { content: ""; width: 1.5px; height: 38px; background: linear-gradient(#F2893A, transparent); transform-origin: 50% 0; animation: filmHint 1.8s ease-in-out infinite; }
@keyframes filmHint { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.film-skip { all: unset; position: absolute; left: max(18px, 2vw); bottom: max(22px, 3.4vh); z-index: 21; pointer-events: auto; cursor: pointer; font: 600 13px/1 var(--body);
  color: #1d1a17; padding: 10px 16px; border-radius: 999px; background: rgb(255 253 250 / .7); box-shadow: 0 0 0 1px rgb(29 26 23 / .14) inset; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s, opacity .3s; }
.film-skip:hover { background: #fffdfa; }
.film-skip:focus-visible { outline: 3px solid #F2893A; outline-offset: 3px; }

/* the two side tablets come out from behind the middle one: --e runs 0..1 */
.film .hero-a .fan.screens .ls:nth-child(1) { transform: translate(calc(var(--sw-n) * .42px * var(--e, 1)), calc(var(--sw-n) * -.18px * var(--e, 1))) rotate(calc(5deg * var(--e, 1))) scale(calc(.82 + .18 * var(--e, 1))); opacity: calc(.96 * var(--o, 1)); }
.film .hero-a .fan.screens .ls:nth-child(3) { transform: translate(calc(var(--sw-n) * -.42px * var(--e, 1)), calc(var(--sw-n) * -.18px * var(--e, 1))) rotate(calc(-5deg * var(--e, 1))) scale(calc(.82 + .18 * var(--e, 1))); opacity: calc(.96 * var(--o, 1)); }

/* during the film the middle tablet's screen is the folded frame itself */
.film:not(.off) .hero-a .fan.screens .ls:nth-child(2) .scr > :not(button) { visibility: hidden; }

/* no film: reduced motion, the accessibility menu, or a skip */
.film.off { height: auto; }
.film.off > .stage { position: relative; height: auto; overflow: visible; }
.film.off .film-fx { display: none; }