/* ========================================================= MALEA · 13 · Cinematic opening DECK --------------------------------------------------------- A wheel/key-triggered, TIME-BASED cinematic chain across the opening screens: INTRO → HERO → IDENTITY on desktop / landscape tablets, and INTRO → HERO only on portrait tablets / mobile. Each forward step: the next screen rises softly from depth while the current one recedes toward the viewer. Reverse is symmetric. After the last deck screen a normal scroll releases to the rest of the page (Philosophy, Live, … are ordinary scroll sections — no cinematic). Adapted from the motion-lab "opening pair" technique, generalised to an N-screen deck and tuned for a deep, expensive, cinematic feel. Architecture: · #intro…#identity are wrapped in
and each carries the `op-layer` class. · By default (no JS / unsupported viewport / reduced-motion) the wrapper is `display: contents` → it vanishes and the three sections behave as the normal sections they always were. Reduced-motion keeps this inert. · Only when js/modules/opening.js sets (desktop/fine pointer OR touch tablet/mobile + motion allowed) does the wrapper become a 1-viewport stage with deck sections as stacked absolute layers, and the JS drives a class-based, time-based chained transition. State classes (set by JS, direction-agnostic): .op-layer → hidden in depth (resting non-current) .op-layer.is-current → fully resolved, visible .op-layer.is-leaving → receding toward the viewer (during a step) html.opening-anim → enables the transition while a step runs Visual model (GPU: transform / opacity / filter only): incoming (rising from depth): opacity 0→1 · scale .94→1 · ty 22→0 · blur 4→0 · veil .58→0 leaving (toward the viewer): opacity 1→0 · scale 1→1.014 · blur 0→1.2 · veil 0→.40 ► TO ROLL BACK: remove this file's in index.html AND the initOpening() call in js/app.js. (Optionally unwrap .opening-stage and drop the op-layer classes.) Removing the link alone already restores the normal section layout — the JS guard checks the CSS. ========================================================= */ /* Inert by default — wrapper has no box; the sections flow as before. */ .opening-stage { display: contents; } /* Tunables (only consumed under .js-opening). */ :root { --op-dur: 1500ms; --op-ease: cubic-bezier(0.33, 0, 0.18, 1); /* symmetric, NOT front-loaded */ } @media (min-width: 1101px), (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse), (orientation: portrait) and (min-width: 700px) and (max-width: 1024px) and (pointer: coarse), (max-width: 760px) and (pointer: coarse) { /* ---- Stage: exactly one viewport, clips the stacked layers ---- */ html.js-opening .opening-stage { display: block; position: relative; height: 100vh; height: 100lvh; overflow: hidden; z-index: 2; } /* ---- Layers: the first three screens stacked absolutely inside the stage ---- */ html.js-opening #opening >.op-layer { position: absolute; inset: 0; min-height: 0; height: 100%; overflow: hidden; transform-origin: 50% 58%; will-change: transform, opacity, filter; backface-visibility: hidden; /* Default = hidden "depth" state (every non-current layer). */ opacity: 0; transform: scale(0.94) translateY(22px); filter: blur(4px); } /* ---- Dark veil → the "emergence from darkness/depth" ---- */ html.js-opening #opening >.op-layer::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0.58; /* non-current = veiled (deep) */ pointer-events: none; z-index: 6; /* above this layer's own content */ will-change: opacity; backface-visibility: hidden; } /* ---- Current (visible, fully resolved) layer ---- */ html.js-opening #opening >.op-layer.is-current { opacity: 1; transform: none; filter: none; z-index: 4; } html.js-opening #opening >.op-layer.is-current::after { opacity: 0; } /* ---- Leaving layer: recedes toward the viewer (scale up + soft blur) ---- */ html.js-opening #opening >.op-layer.is-leaving { opacity: 0; transform: scale(1.014); filter: blur(1.2px); z-index: 3; } html.js-opening #opening >.op-layer.is-leaving::after { opacity: 0.40; } /* ---- Enable transitions only while a step is running ---- */ html.js-opening.opening-anim #opening >.op-layer { transition: transform var(--op-dur) var(--op-ease), opacity var(--op-dur) var(--op-ease), filter var(--op-dur) var(--op-ease); } html.js-opening.opening-anim #opening >.op-layer::after { transition: opacity var(--op-dur) var(--op-ease); } /* ======================================================= Per-screen fit: each layer must read as a full screen. INTRO / HERO already fill & centre themselves. IDENTITY is a content (pad-block) section — centre it vertically inside the 1-viewport layer and drop the block padding. ======================================================= */ html.js-opening #opening >#identity.op-layer { display: grid; place-content: center; padding-block: 0; } /* IDENTITY's portrait drives its height; cap it so the composition always fits one viewport (it otherwise overflows on ~768px-tall desktops). */ html.js-opening #opening >#identity.op-layer .identity__portrait { max-height: 76vh; } } /* Portrait tablets + mobile: the cinematic deck ends on HERO. IDENTITY must return to normal page flow directly after the one-viewport opening stage. */ @media ((max-width: 760px) and (pointer: coarse)), ((orientation: portrait) and (min-width: 700px) and (max-width: 1024px) and (pointer: coarse)) { html.js-opening .opening-stage { height: auto; min-height: 0; padding-top: 100vh; padding-top: 100lvh; padding-top: 100dvh; overflow: hidden; overscroll-behavior: none; } html.js-opening #opening >#intro.op-layer, html.js-opening #opening >#hero.op-layer { height: 100vh; height: 100lvh; height: 100dvh; } html.js-opening #opening >#identity.op-layer { position: relative; inset: auto; display: block; height: auto; min-height: 0; overflow: visible; opacity: 1; transform: none; filter: none; z-index: 1; padding-block: var(--vr-standard); } html.js-opening #opening >#identity.op-layer::after { display: none; } html.js-opening #opening >#identity.op-layer .identity__inner { align-items: center; } } /* ---- Accessibility: never run the cinematic if motion is reduced ---- */ @media (prefers-reduced-motion: reduce) { .opening-stage { display: contents; } }