/* ============================================================================= film.css — the scroll-film stage (home page only) ----------------------------------------------------------------------------- NEW FILE (visual rebuild). Everything here is chrome for the one continuous shot: the sticky stage, the copy beats that ride over it, the pressure-gauge HUD, and the grain/vignette that sell "one take". Content styling is in site.css. ========================================================================== */ /* ---------- Loader ------------------------------------------------------ */ /* Hidden by default and shown only under html.js (set by an inline script before first paint). Without JavaScript nothing ever removes this overlay, so it must never be painted in the first place. */ .loader{ display:none; } .js .loader{ position:fixed; inset:0; z-index:300; background:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; transition: opacity .6s var(--ease), visibility .6s; } .loader.gone{ opacity:0; visibility:hidden; pointer-events:none; } .loader img{ height:52px; width:auto; } .loader .track{ width:min(300px,58vw); height:2px; background:rgba(255,255,255,.13); overflow:hidden; } .loader .track i{ display:block; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s linear; } .loader .lbl{ font:500 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--steel-500); display:flex; gap:.9em; } .loader .lbl b{ color:var(--steam); font-weight:500; } /* ---------- Stage ------------------------------------------------------- */ /* The sticky child is the viewport-sized stage the film is painted into. */ /* 7 chapters x 190vh. Raised from 170vh: at the tighter spacing the copy beats went past faster than they could be read. */ .film{ position:relative; height:100vh; background:var(--ink); } .js .film{ height:1330vh; } .stage{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; --fx: 1; /* grain + vignette strength (constant) */ /* The opening frame doubles as a no-JS hero backdrop and as an instant poster before the canvas takes its first paint. */ background:var(--ink) url("../../frames/f_0001.jpg") center/cover no-repeat; } .stage canvas#filmCanvas{ position:absolute; inset:0; width:100%; height:100%; } .stage canvas#ambient{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* Vignette + a hair of top/bottom scrim so overlaid copy always has contrast */ .stage .vig{ position:absolute; inset:0; pointer-events:none; opacity:var(--fx); background: radial-gradient(118% 88% at 50% 46%, transparent 42%, rgba(3,5,8,.62) 100%), linear-gradient(to bottom, rgba(2,5,10,.50) 0%, rgba(2,5,10,0) 24%, rgba(2,5,10,0) 50%, rgba(2,5,10,.30) 70%, rgba(2,5,10,.70) 86%, rgba(2,5,10,.92) 100%); } /* Narrow viewports put the readout closer to the frame's bright lower edge, so the lower third needs to carry more weight there. */ @media (max-width:760px){ .stage .vig{ background: radial-gradient(118% 88% at 50% 46%, transparent 42%, rgba(3,5,8,.62) 100%), linear-gradient(to bottom, rgba(2,5,10,.52) 0%, rgba(2,5,10,0) 22%, rgba(2,5,10,0) 44%, rgba(2,5,10,.42) 66%, rgba(2,5,10,.80) 84%, rgba(2,5,10,.95) 100%); } } /* Film grain: one tiny SVG-noise tile, scaled. Cheap, no image request. */ .stage .grain{ position:absolute; inset:-60px; pointer-events:none; opacity:calc(.16 * var(--fx)); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); animation: grainshift 1.1s steps(3) infinite; } @keyframes grainshift{ 0%{ transform:translate3d(0,0,0); } 33%{ transform:translate3d(-14px,9px,0); } 66%{ transform:translate3d(11px,-12px,0); } 100%{ transform:translate3d(0,0,0); } } /* ---------- Copy beats over the film ----------------------------------- */ .beats{ position:absolute; inset:0; pointer-events:none; } /* --drift is written by film.js each tick; CSS composes it with the centring translate so JS never has to know about layout. */ .beat{ position:absolute; left:0; right:0; padding-inline: var(--gut); --drift: 0px; transform: translate3d(0, var(--drift), 0); will-change: opacity, transform; } /* Only the hero beat exists without JS; film.js owns the rest. */ .beat:not(.beat--hero){ display:none; } .js .beat{ opacity:0; visibility:hidden; } .js .beat:not(.beat--hero){ display:block; } /* The scrim is sized to the STAGE, not to the beat's own content box. Anchoring it to the beat meant the radial falloff was clipped by that box partway through the frame, leaving a visible rectangular band edge across the footage. At exactly stage size any residual darkness lands on the viewport edge, where the existing vignette already sits, so there is no edge to see. */ .beat::before{ content:""; position:absolute; z-index:-1; pointer-events:none; /* --scrim-a is written by film.js and leads/lags the copy's own opacity, so the scrim is at full strength for the whole time the copy is readable. */ opacity:calc(var(--scrim-a, 1) * var(--fx, 1)); left:50%; top:50%; width:100vw; height:100vh; transform:translate(-50%,-50%); background: radial-gradient(64% 58% at 50% 50%, rgba(2,5,10,.96) 0%, rgba(2,5,10,.94) 34%, rgba(2,5,10,.88) 54%, rgba(2,5,10,.70) 70%, rgba(2,5,10,.40) 85%, rgba(2,5,10,.10) 96%, rgba(2,5,10,0) 100%); } /* Statement beats: one composition, centred, generous measure. */ .beat--center .inner.wide{ max-width:min(940px, 92%); } .beat > .inner{ width:100%; max-width:var(--maxw); margin-inline:auto; position:relative; opacity:var(--beat-a, 1); } .beat--center{ top:50%; transform: translate3d(0, calc(-50% + var(--drift)), 0); text-align:center; } .beat--center .inner{ max-width:min(1100px, 92%); margin-inline:auto; } .beat--center.beat--hero .inner{ padding-bottom:clamp(46px,8vh,86px); } @media (max-width:640px){ .beat--center.beat--hero .inner{ padding-bottom:clamp(120px,20vh,180px); } } /* Hero */ .hero-kick{ justify-content:center; margin-bottom:clamp(18px,2.6vw,32px); color:rgba(233,238,242,.82); } .hero-kick::before{ display:none; } .hero-name{ margin:0; font-size:clamp(2.25rem, 9vw, 8.2rem); font-variation-settings:"wdth" 122,"wght" 700; line-height:.86; letter-spacing:-.03em; text-shadow: 0 8px 60px rgba(0,0,0,.55); } .hero-name span{ display:block; } /* The middle word carries the red hairline that ties the type to the mark */ .hero-name span:nth-child(2){ position:relative; } .hero-rule{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px); margin-top:clamp(18px,2.6vw,34px); } .hero-rule i{ display:block; height:1px; width:clamp(28px,8vw,110px); background:rgba(233,238,242,.42); } .hero-rule .tagline{ font-size:clamp(.98rem,1.6vw,1.42rem); white-space:nowrap; } .scrollcue{ transition:opacity .3s var(--ease); position:absolute; left:50%; bottom:clamp(24px,4.4vh,46px); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:11px; font:500 10.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:rgba(233,238,242,.66); } .scrollcue .bar{ width:2px; height:clamp(36px,6vh,62px); background:linear-gradient(to bottom, rgba(233,238,242,.6), transparent); position:relative; overflow:hidden; } .scrollcue .bar::after{ content:""; position:absolute; inset:0; background:var(--red); animation: cue 2.1s var(--ease) infinite; } @keyframes cue{ 0%{ transform:translateY(-100%); } 55%,100%{ transform:translateY(100%); } } /* The 1958 beat — a date card struck over the blackout between chapters 1 and 2 */ .datecard{ display:flex; flex-direction:column; align-items:center; gap:clamp(12px,1.8vw,22px); } .datecard .yr{ font-family:var(--display); font-variation-settings:"wdth" 125,"wght" 700; font-size:clamp(4.4rem,17vw,15rem); line-height:.82; letter-spacing:-.045em; color:var(--steam); } .datecard .yr em{ font-style:normal; color:var(--red); } .datecard p{ max-width:52ch; color:var(--steel-200); font-size:clamp(.95rem,1.24vw,1.16rem); } /* Statement beats — big pull-quotes of the page's own body copy */ .statement{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 106,"wght" 600; font-size:clamp(1.5rem, 3.5vw, 3.4rem); line-height:1.06; letter-spacing:-.022em; max-width:22ch; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.72), 0 10px 50px rgba(0,0,0,.55); } .statement--wide{ max-width:30ch; } /* Unifying device across every statement beat: the chapter slate above the type. No beat gets a card; the scrim does the contrast work. */ .beat--center .statement{ margin-inline:auto; } .beat--center .statement small{ margin-inline:auto; } .statement small{ display:block; width:fit-content; margin-bottom:clamp(14px,2vw,22px); padding:7px 12px 6px; background:var(--red); color:#fff; font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; } /* Inside the plated (side-anchored) beats the plate already supplies contrast, so the slate can stay lighter-weight there. */ /* Markets beat — the industries named in the body paragraph, made scannable */ .marketbeat{ text-align:center; } .marketbeat .chips{ justify-content:center; } .marketbeat .chip{ background:transparent; border-color:rgba(233,238,242,.30); color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.85); font-size:clamp(11px,.82vw,12.8px); padding:10px 16px; letter-spacing:.13em; max-width:23ch; text-align:center; line-height:1.5; } /* The red bullet belongs to the content-section chips; on the film it adds visual noise to an otherwise minimal, large-type language. */ .marketbeat .chip::before{ display:none; } .marketbeat .kicker{ color:rgba(233,238,242,.86); margin-bottom:clamp(16px,2.4vw,26px); display:block; text-align:center; max-width:min(62ch, 92%); margin-inline:auto; line-height:1.6; text-wrap:balance; } .marketbeat .kicker::before{ display:none; } /* Finale */ .finale{ display:flex; flex-direction:column; gap:clamp(22px,3vw,36px); align-items:center; max-width:min(860px,94%); margin-inline:auto; } .finale .statement{ max-width:24ch; font-size:clamp(1.4rem,3vw,2.9rem); } .finale .acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; pointer-events:auto; } .finale .acts .btn{ color:var(--steam); border-color:rgba(233,238,242,.42); backdrop-filter:blur(5px); } /* ---------- HUD: the plant pressure gauge ------------------------------ */ /* Doubles as scroll progress and wayfinding — you always know which part of the plant you are looking at. */ .hud{ position:absolute; left:var(--gut); bottom:clamp(22px,4vh,42px); z-index:4; pointer-events:none; opacity:0; transition: opacity .4s var(--ease); display:flex; flex-direction:column; gap:9px; min-width:min(330px, 62vw); text-shadow:0 2px 14px rgba(0,0,0,.7); } .hud .row{ display:flex; align-items:baseline; gap:.9em; font:500 11.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:rgba(233,238,242,.62); } .hud .row .n{ color:var(--red); } .hud .ch{ font-family:var(--display); font-variation-settings:"wdth" 104,"wght" 600; font-size:clamp(1.06rem,1.55vw,1.44rem); letter-spacing:-.008em; line-height:1.15; color:var(--steam); } .hud .track{ height:3px; background:rgba(233,238,242,.20); overflow:hidden; } .hud .track i{ display:block; height:100%; background:linear-gradient(to right, var(--chill), var(--flame) 62%, var(--red)); transform:scaleX(0); transform-origin:left; } .hud .psi{ display:flex; align-items:baseline; gap:.6em; font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(233,238,242,.5); } .hud .psi b{ font-weight:500; font-size:13.5px; color:var(--steam); letter-spacing:.04em; } @media (max-width:640px){ .hud{ min-width:0; width:min(calc(100% - var(--gut) * 2), 300px); } /* Sit above the readout rather than on top of it. */ .scrollcue{ bottom:clamp(158px, 25vh, 210px); } } /* ---------- Landing zone (film -> content) ----------------------------- */ /* Starts at the sampled seam colour and melts to the section background, so the handoff reads as the same continuous space. */ /* Content opens in the site's own dark, matching every other page. */ .landing{ position:relative; background:var(--plant); } /* Reduced motion: no grain animation, no ambient particles, no scroll cue pulse. The film still scrubs (it is the page's structure) but nothing self-animates. */ @media (prefers-reduced-motion: reduce){ .stage .grain{ animation:none; } .scrollcue .bar::after{ animation:none; opacity:.5; } #ambient{ display:none !important; } } /* Standalone chapter slate (the 1958 date card, which has no .statement to hang a off). Identical treatment to .statement small so every beat's slate is visually the same object. */ .datecard .slate{ display:block; width:fit-content; margin:0 auto clamp(24px,3.4vw,40px); padding:7px 12px 6px; background:var(--red); color:#fff; font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; } /* ---------- Interlude band (content sections) -------------------------- */ /* The content sections below the film are deliberately calmer than the film, but running four light blocks back to back made the craft visibly drop off the moment the footage ended. One full-bleed still from the film, carrying the company's own tagline, keeps that world present in the page body. */ .interlude{ position:relative; isolation:isolate; overflow:hidden; min-height:clamp(260px,42vh,420px); display:flex; align-items:center; justify-content:center; background:var(--ink); } .interlude img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 42%; } .interlude::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(58% 70% at 50% 50%, rgba(3,5,8,.86) 0%, rgba(3,5,8,.66) 44%, rgba(3,5,8,.22) 76%, rgba(3,5,8,0) 100%), linear-gradient(to bottom, rgba(7,9,12,.55), rgba(7,9,12,.28) 40%, rgba(7,9,12,.62)); } .interlude p{ margin:0; text-align:center; color:#fff; font-family:var(--display); font-variation-settings:"wdth" 108,"wght" 600; font-size:clamp(1.4rem,3.2vw,2.9rem); line-height:1.1; letter-spacing:-.02em; font-style:normal; text-shadow:0 2px 12px rgba(0,0,0,.7), 0 10px 48px rgba(0,0,0,.55); padding-inline:var(--gut); } .interlude p em{ font-style:italic; font-family:var(--body); font-weight:400; }