/* ============================================================
FirstPour cinematic hero — ported from landing/hero-mockup.html
@ dae2beb (R14) per docs/superpowers/specs/2026-07-28-hero-
cinematic-design.md. Daglicht tokens come from daglicht.css's
root block (not redeclared here). Default CSS = static document flow
(no-JS / reduced-motion safe); hero.js adds .cine-pin plus
.cine-desktop or .cine-mobile on for the animated layouts
— BOTH breakpoints run the pinned sequence.
============================================================ */
/* ---------- environment: film grain + warm aurora gradient ---------- */
/* NO mix-blend-mode. Blending this layer forces everything beneath it —
the whole animating stage — to be re-composited on the main thread each
frame; measured, it alone pushed the desktop scrub's p90 from 33ms to 50ms.
At 3% opacity the blended and unblended grain are indistinguishable. */
.cine-grain{position:absolute;inset:0;pointer-events:none;z-index:60;opacity:.03;
background:url('data:image/svg+xml;utf8,')}
/* The scrub tweens opacity on THIS container while it holds three 75-80vmax
gradient children. Without its own render surface that one opacity change
re-rasterised the whole subtree every frame — measured, it was worth ~80
dropped frames per pass, more than the drift animation itself.
`contain:paint` gives it that surface (it already clips via overflow:hidden,
so nothing renders differently) and will-change:opacity keeps it there. */
.bg-aura{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint}
html.cine-desktop .bg-aura{will-change:opacity}
/* deliberately NO will-change on the children: a running CSS transform
animation is promoted by the compositor for its own duration anyway, and
pinning three screen-sized layers permanently measured WORSE than letting
them paint into the parent surface. */
.aura{position:absolute;border-radius:50%}
.aura-1{width:75vmax;height:75vmax;left:-22vmax;top:-30vmax;
background:radial-gradient(circle,rgba(247,208,112,.50) 0%,rgba(247,208,112,.18) 38%,rgba(247,208,112,0) 68%)}
.aura-2{width:60vmax;height:60vmax;right:-24vmax;top:4vh;
background:radial-gradient(circle,rgba(240,180,41,.26) 0%,rgba(240,180,41,.09) 40%,rgba(240,180,41,0) 68%)}
.aura-3{width:80vmax;height:80vmax;left:8vw;bottom:-46vmax;
background:radial-gradient(circle,rgba(133,100,8,.14) 0%,rgba(234,223,200,.30) 42%,rgba(250,246,236,0) 70%)}
/* NO aurora drift. The desktop timeline used to scrub xPercent/yPercent/scale
across these three layers for the whole sequence; measured, that was ~120
dropped frames per pass. Re-homing it to a compositor CSS keyframe was tried
and measured too — still ~40 dropped frames, because three 75-80vmax
gradient layers are expensive to keep live at all, animated or merely
promoted. Removing the drift takes the desktop scrub to a clean 0.
Little is actually lost: the drift only ever ran WHILE scrolling, and by
then the card covers the screen. The gradients stay as the warm backdrop —
exactly what mobile has always done. */
/* ---------- hero text materials ---------- */
.t-ink{color:var(--ink);text-shadow:0 10px 30px rgba(27,22,16,.18),0 2px 4px rgba(27,22,16,.08)}
/* rotor: on-brand highlighter band (like the site's .mark), no gradient fill */
.t-rotor{display:inline-block;color:var(--ink);padding:0 .08em;
background:linear-gradient(transparent 55%,var(--gold-light) 55%,var(--gold-light) 92%,transparent 92%);
text-shadow:0 2px 4px rgba(27,22,16,.08)}
/* (gradient-clip text classes removed — owner: flat brand colors only) */
/* ---------- the dark card ---------- */
.cine-card{position:relative;overflow:hidden;
background:
radial-gradient(120% 90% at 50% 0%, rgba(240,180,41,.05) 0%, rgba(240,180,41,.02) 34%, transparent 62%),
linear-gradient(150deg,#2A231B 0%,#1E1913 46%,#16120D 100%);
border:1px solid rgba(240,180,41,.10);border-radius:40px;
box-shadow:0 40px 100px -20px rgba(20,18,16,.55),0 20px 40px -20px rgba(20,18,16,.45),
inset 0 1px 2px rgba(240,180,41,.16),inset 0 -2px 4px rgba(0,0,0,.7)}
/* ---------- tablet hardware ---------- */
.cine-tablet{position:relative;background:#101010;border-radius:22px;padding:14px;
box-shadow:inset 0 0 0 2px #3a352d,inset 0 0 0 6px #000,
0 40px 80px -15px rgba(0,0,0,.85),0 15px 25px -5px rgba(0,0,0,.6);
transform-style:preserve-3d}
.tablet-btn{position:absolute;top:-3px;right:60px;width:56px;height:3px;border-radius:3px 3px 0 0;
background:linear-gradient(180deg,#3a3a3a,#171717);
box-shadow:0 -2px 4px rgba(0,0,0,.7),inset 0 1px 1px rgba(255,255,255,.14)}
.tablet-cam{position:absolute;left:7px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;
background:#000;box-shadow:inset 0 0 2px #2c2c2c,0 0 0 1.5px #1c1c1c}
.tablet-screen{position:relative;border-radius:10px;overflow:hidden;background:#000;
aspect-ratio:1280/800;box-shadow:inset 0 0 12px rgba(0,0,0,1)}
.tablet-screen .cine-shot{position:absolute;inset:0;display:block;width:100%;height:100%}
.cine-shot-x{opacity:0}
.screen-glare{position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(110deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 45%)}
.cine-caps{position:relative;width:100%;height:26px;margin-top:18px;text-align:center}
.cine-cap{position:absolute;left:0;right:0;top:0;color:rgba(247,208,112,.85);
font-size:13.5px;font-weight:600;letter-spacing:.02em}
/* ---------- glass badges ---------- */
.cine-badge{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;
background:linear-gradient(135deg,rgba(250,246,236,.08) 0%,rgba(250,246,236,.01) 100%);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
box-shadow:0 0 0 1px rgba(250,246,236,.10),0 25px 50px -12px rgba(0,0,0,.75),
inset 0 1px 1px rgba(250,246,236,.18),inset 0 -1px 1px rgba(0,0,0,.5)}
.badge-ico{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,rgba(240,180,41,.20),rgba(240,180,41,.04));
border:1px solid rgba(240,180,41,.32);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.badge-ico svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
/* tabular figures: the €-counter ticks per frame — proportional digits would
re-wrap the badge each tick (per-frame layout on the scrub's hot path) */
.cine-badge b{display:block;color:#FAF6EC;font-size:14px;letter-spacing:-.01em;
font-variant-numeric:tabular-nums}
.cine-badge span{display:block;color:rgba(247,208,112,.55);font-size:11.5px;font-weight:500}
/* ---------- buttons: flat Daglicht style, modest lift (de-glossed) ---------- */
.btn-tact{display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:15px 28px;border-radius:10px;text-decoration:none;font-weight:700;font-size:16px;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
min-height:44px}
.btn-tact-gold{background:var(--gold);color:var(--ink);
box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.btn-tact-gold:hover{transform:translateY(-2px);background:var(--gold-light);
box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.btn-tact-gold:active{transform:translateY(0);background:#D9A625;
box-shadow:0 3px 10px -4px rgba(0,0,0,.4)}
.btn-tact-ghost{color:#EDE5D5;background:transparent;font-weight:600;
border:1px solid rgba(250,246,236,.25)}
.btn-tact-ghost:hover{transform:translateY(-2px);background:rgba(250,246,236,.06);
border-color:rgba(250,246,236,.4)}
.btn-tact-ghost:active{transform:translateY(0)}
a.btn-tact:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* ---------- scroll cue: subtle vertical line, only in the pinned layout ---------- */
.cine-scrollcue{display:none}
/* in flow right under the hero statement — anchored to the bottom edge it
drowned between the sticky CTA bar and other chrome on phones */
html.cine-pin .cine-scrollcue{display:block;position:relative;margin:30px auto 0;
width:1px;height:56px;overflow:hidden;
background:rgba(27,22,16,.16)}
html.cine-pin .cine-scrollcue::after{content:"";position:absolute;left:0;top:0;
width:100%;height:20px;background:var(--gold);
animation:cue-drop 2.2s cubic-bezier(.55,0,.35,1) infinite}
@keyframes cue-drop{0%{transform:translateY(-22px)}70%,100%{transform:translateY(58px)}}
@media (prefers-reduced-motion:reduce){html.cine-pin .cine-scrollcue::after{animation:none;top:auto;bottom:0}}
/* ============================================================
DEFAULT LAYOUT — document flow (no-JS / reduced motion base)
============================================================ */
.cine-stage{position:relative}
.cine-intro{position:relative;z-index:1;text-align:center;padding:96px 24px 56px;max-width:1000px;margin:0 auto}
.cine-logo{display:block;margin:0 auto 12px;width:64px;height:64px;
filter:drop-shadow(0 8px 18px rgba(27,22,16,.20))}
/* brand line — mirrors the site header wordmark: FirstPour, Bricolage 300/800 */
.cine-brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:300;font-size:19px;
letter-spacing:-.01em;color:var(--ink);margin:0 0 30px}
.cine-brand b{font-weight:800}
/* Price on screen one (feedback-slice 2026-09-05). Static on purpose: Act 0
animates its siblings individually, so this line is readable at t=0 and
rides the container fade-out that the scrub applies to #cine-intro. */
.cine-price{margin:14px 0 0;font-size:15px;font-weight:500;color:var(--ink-soft)}
.cine-price b{color:var(--gold-text);font-weight:800}
.cine-line1{display:block;font-size:clamp(44px,7.5vw,104px)}
.cine-line2{display:block;font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.03em}
.cine-card-layer{position:relative;z-index:2;padding:0 16px 64px}
.cine-card{max-width:1240px;margin:0 auto;padding:56px 40px}
.cine-card-inner{position:relative;display:grid;grid-template-columns:1fr;gap:40px;align-items:center;max-width:1080px;margin:0 auto}
/* brand wordmark in the card — same lockup, gold-clipped, with the glass mark */
.cine-wordmark{display:flex;align-items:center;justify-content:center;gap:.22em;
font-family:"Bricolage Grotesque",sans-serif;font-weight:300;letter-spacing:-.01em;
font-size:clamp(36px,5vw,72px);line-height:1;margin:0}
.cine-wordmark b{font-weight:800}
/* "First" flat brand gold (like the logo square), "Pour" white — no gradients */
.cw-text{color:#FAF6EC;
filter:drop-shadow(0 12px 24px rgba(0,0,0,.75)) drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.cw-text b{color:var(--gold)}
.cw-logo{width:.95em;height:.95em;display:block;
filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.cine-copy h2{color:#FAF6EC;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;margin:0 0 14px}
.cine-copy p{color:rgba(237,229,213,.72);font-size:16px;line-height:1.65;margin:0;max-width:46ch}
.cine-tabletwrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:1000px}
.cine-tablet{width:min(640px,92%)}
.cine-badge-1,.cine-badge-2{margin-top:18px}
.cine-cta{text-align:center;padding:26px 12px 6px}
.cine-cta h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;
font-size:clamp(30px,4.4vw,56px);margin:0 0 14px}
/* CTA heading: cream-white with a single gold accent word — same rule as the wordmark */
.cta-head{color:#FAF6EC;text-shadow:0 8px 20px rgba(0,0,0,.6)}
/* accent text on dark = Honey Gold #F0B429 per brand doc (gold-light is hover-only) */
.cta-head em{font-style:normal;color:var(--gold)}
.cine-cta .cta-sub{color:rgba(237,229,213,.7);font-size:17px;margin:0 auto 30px;max-width:52ch;font-weight:300}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.cta-micro{color:rgba(237,229,213,.5);font-size:13px;margin-top:22px}
/* ============================================================
PINNED CINEMATIC LAYOUT — html.cine-pin (desktop AND mobile)
============================================================ */
/* The pinned stage paints ABOVE all site chrome (header z50, sticky CTA z60)
on its own opaque paper backdrop: the dark card physically rolls OVER them,
so no cream band can ever peek through — independent of any JS class
timing. Chrome resurfaces only when the hero has scrolled past. */
html.cine-pin .cine-stage{height:100vh;height:100dvh;overflow:hidden;perspective:1500px;
display:flex;align-items:center;justify-content:center;z-index:70;background:var(--paper)}
/* mobile: size the pinned stage to the LARGE viewport (URL bar collapsed).
The pin locks the stage's load-time height; sized to the small viewport it
comes up a bar-height short once scrolling collapses the browser chrome —
the cream strip along the bottom of the sequence. (lvh-less browsers keep
the dvh fallback above.) */
html.cine-mobile .cine-stage{height:100lvh}
/* will-change lists what actually animates: the scrub moves scale+opacity.
`filter` was left over from the scroll-linked blur that has been removed. */
html.cine-pin .cine-intro{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;padding:0 24px;max-width:none;will-change:transform,opacity}
html.cine-pin .cine-card-layer{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
padding:0;pointer-events:none}
/* will-change:width,height was inert — neither is compositable, so it bought
nothing and still pinned a permanent layer. The card's composited property
is its transform (the y ride-in, and the scale expand on mobile). */
html.cine-pin .cine-card{max-width:none;margin:0;padding:0;pointer-events:auto;
display:flex;align-items:center;justify-content:center;will-change:transform}
html.cine-pin .cine-cta{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
align-items:center;justify-content:center;padding:0 32px}
/* desktop card interior: brand row on top, copy left / tablet right */
html.cine-desktop .cine-card{width:85vw;height:85vh}
html.cine-desktop .cine-card-inner{width:100%;height:100%;max-width:1400px;padding:0 64px 28px;
grid-template-columns:1fr 1.55fr;grid-template-rows:auto 1fr;gap:0 56px;align-content:center}
html.cine-desktop .cine-wordmark{grid-column:1/-1;align-self:start;z-index:2;
font-size:clamp(44px,5vw,84px);padding:34px 0 6px;pointer-events:none}
html.cine-desktop .cine-copy{position:relative;z-index:3}
html.cine-desktop .cine-tabletwrap{z-index:2;height:100%;align-items:center}
html.cine-desktop .cine-tablet{width:min(720px,100%);will-change:transform}
html.cine-desktop .cine-badge-1{position:absolute;left:-64px;top:12%;z-index:4;margin:0}
html.cine-desktop .cine-badge-2{position:absolute;right:-56px;bottom:10%;z-index:4;margin:0}
/* mobile pinned card interior: stacked, compact */
html.cine-mobile .cine-card{width:92vw;height:92vh;height:92dvh;border-radius:28px;
will-change:transform}
html.cine-mobile .cine-intro{will-change:transform,opacity}
html.cine-mobile .cine-card-inner{width:100%;height:100%;display:flex;flex-direction:column;
justify-content:space-evenly;align-items:center;padding:30px 18px;gap:0;max-width:none}
html.cine-mobile .cine-wordmark{font-size:clamp(28px,8vw,38px)}
html.cine-mobile .cine-copy{text-align:center;padding:0 10px}
html.cine-mobile .cine-copy h2{font-size:22px;margin:0;line-height:1.3}
html.cine-mobile .cine-copy p{display:none} /* like the template: description hidden on mobile */
html.cine-mobile .cine-tabletwrap{width:100%}
html.cine-mobile .cine-tablet{width:min(88vw,460px);padding:9px;border-radius:16px;will-change:transform}
html.cine-mobile .tablet-screen{border-radius:8px}
/* badges AROUND the tablet on mobile, never on it: badge 1 above-left, badge 2 below-right */
html.cine-mobile .cine-badge-1{position:static;order:-1;align-self:flex-start;margin:0 0 14px 4px}
html.cine-mobile .cine-badge-2{position:static;order:2;align-self:flex-end;margin:12px 4px 0 0}
html.cine-mobile .cine-badge{padding:9px 12px;gap:9px;border-radius:12px}
html.cine-mobile .badge-ico{width:30px;height:30px}
html.cine-mobile .badge-ico svg{width:15px;height:15px}
html.cine-mobile .cine-badge b{font-size:12.5px}
html.cine-mobile .cine-badge span{font-size:10.5px}
html.cine-mobile .cine-caps{margin-top:14px;height:24px}
html.cine-mobile .cine-cap{font-size:12px}
html.cine-mobile .cine-cta h2{font-size:clamp(27px,7.5vw,36px);margin-bottom:16px}
html.cine-mobile .cine-cta .cta-sub{font-size:15px;line-height:1.55;margin-bottom:26px}
html.cine-mobile .btn-tact{padding:14px 22px;font-size:15px}
/* sticky site header yields to the pinned sequence (class toggled by hero.js).
The mobile nav panel is position:fixed OUTSIDE the header's transform, so it
gets its own hide rule — without it an open menu would float over the card. */
header.site{transition:transform .35s ease,opacity .35s ease}
html.cine-hide-header header.site{transform:translateY(-110%);opacity:0;pointer-events:none}
html.cine-hide-header .nav-links{transform:translateY(-110%);opacity:0;pointer-events:none}
/* the mobile sticky CTA sits ABOVE the stage (z70) so it stays visible on the
intro at rest, and slides out of view while the sequence is pinned */
html.cine-pin .cta-sticky{z-index:80;transition:transform .35s ease,opacity .35s ease}
html.cine-hide-header .cta-sticky{transform:translateY(140%);opacity:0;pointer-events:none}
/* anti-flash: base.njk stamps html.js pre-paint on every page; hide the
overlapping card until hero.js opts in (cine-pin) or bails out (cine-static).
Reduced-motion users never get cine-pin, so the media query re-shows it. */
html.js .cine-card-layer{visibility:hidden}
html.cine-pin .cine-card-layer,
html.cine-static .cine-card-layer{visibility:visible}
@media (prefers-reduced-motion: reduce){ html.js .cine-card-layer{visibility:visible} }
@media (max-width:899px){
/* mobile GPU relief: film grain off, glass badges go solid (backdrop-filter
live-blurs per frame and is a major jank source on phones) */
.cine-grain{display:none}
.cine-badge{backdrop-filter:none;-webkit-backdrop-filter:none;
background:rgba(42,35,27,.92)}
.cine-intro{padding:72px 20px 40px}
.cine-card{padding:36px 20px;border-radius:28px}
}