/* ═══════════════════════════════════════════════════════════════════════════ SideWRK trade-page cinema layer — shared styles for the pinned scroll-film hero + the mid-page Multi-Trade morph chapter. Injected on every trade page by scripts/sync-trade-cinema.js (between markers) together with /cinematic/cinema.js, which adds `cin-on` to when it runs. LAW: cinema is a LAYER. Without JS no .cin-wrap is ever visible and the page reads exactly as it always did (the injected scaffold is display:none by default; the hero section only MOVES into the film at runtime). Perf rules carried over from the homepage engine: transform/opacity only, no will-change stacks, DPR-capped canvases, static SVG grain (one paint). Tokens mirror the homepage cinematic palette; --cin- prefix so nothing in styles.css is ever touched. ═══ */ .cin-wrap{display:none} html.cin-on #landing .cin-wrap{ --cin-pit:#08090b; --cin-bone:#cfccc5; --cin-bone-dim:#9a968c; --cin-amber:#f5a524; --cin-amber-hot:#ffb000; --cin-display:'Anton','Arial Narrow',sans-serif; display:block;position:relative;width:100vw;left:50%;margin-left:-50vw; height:220vh;background:var(--cin-pit)} html.cin-on #landing .cin-morph{height:260vh} /* the pin is a
inside #landing — undo the generic section chrome */ html.cin-on #landing .cin-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden; margin:0;padding:0;border-top:0} html.cin-on #landing .cin-film{position:absolute;inset:0;z-index:1} html.cin-on #landing .cin-film canvas{display:block;width:100%;height:100%} html.cin-on #landing .cin-scrim{position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(8,9,11,.55),transparent 30%,transparent 72%,rgba(8,9,11,.85))} html.cin-on #landing .cin-grain{position:absolute;inset:-40px;z-index:3;pointer-events:none;opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")} /* ── hero: the page's existing .trade-hero section is MOVED into .cin-slot at runtime and restyled into a bottom-left overlay. Same words, same h1, same CTA hrefs — only the frame around them changes. ── */ html.cin-on #landing .cin-slot{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column; justify-content:flex-end;padding:0 6vw 12vh} html.cin-on #landing .cin-slot .lp-hero.trade-hero{position:static;width:auto;left:auto;margin:0;padding:0; overflow:visible;text-align:left} html.cin-on #landing .cin-slot .lp-hero.trade-hero::before{display:none} html.cin-on #landing .cin-slot .trade-hero .lp-eyebrow{margin-left:0;margin-right:0} html.cin-on #landing .cin-slot .trade-hero h1{margin:0;max-width:15em;font-size:clamp(34px,5.4vw,72px); line-height:1.04;text-shadow:0 2px 26px rgba(0,0,0,.5)} html.cin-on #landing .cin-slot .trade-hero .lp-sub{margin:16px 0 24px;max-width:40em; font-size:clamp(15px,1.7vw,19px);text-shadow:0 1px 14px rgba(0,0,0,.5)} html.cin-on #landing .cin-slot .trade-hero .lp-cta{justify-content:flex-start} html.cin-on #landing .cin-slot .trade-hero .lp-trust{margin-top:16px} html.cin-on #landing .cin-cue{position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);z-index:6; margin:0;font-size:11px;letter-spacing:.3em;color:var(--cin-bone-dim);text-transform:uppercase} html.cin-on #landing .cin-cue::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0; background:linear-gradient(var(--cin-amber),transparent)} /* ── morph chapter beats — homepage beat style ── */ html.cin-on #landing .cin-beat{position:absolute;left:6vw;bottom:13vh;z-index:4;max-width:80vw;opacity:0} html.cin-on #landing .cin-beat h2{font-family:var(--cin-display);font-weight:400;text-transform:uppercase; margin:0;text-align:left;max-width:none;font-size:clamp(32px,5.8vw,88px);line-height:.98; color:var(--cin-bone)} html.cin-on #landing .cin-beat h2 em{font-style:normal;color:var(--cin-amber-hot)} html.cin-on #landing .cin-beat p{margin:10px 0 0;font-size:clamp(14px,1.5vw,18px);color:#a6afbd;text-align:left} html.cin-on #landing .cin-beat p a{color:#f0f2f6;text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(245,165,36,.6)} html.cin-on #landing .cin-beat p a:hover{color:var(--cin-amber-hot)} html.cin-on #landing .cin-tick{position:absolute;top:14vh;right:6vw;z-index:3;width:min(160px,20vw);height:2px; background:rgba(255,255,255,.14)} html.cin-on #landing .cin-tick b{display:block;height:100%;width:100%;background:var(--cin-amber); transform:scaleX(0);transform-origin:0 50%} html.cin-on #landing .cin-chix{position:absolute;top:14vh;left:6vw;z-index:3;margin:0;font-size:11px; letter-spacing:.24em;color:var(--cin-bone-dim);text-transform:uppercase;text-align:left;max-width:none} html.cin-on #landing .cin-chix i{color:var(--cin-amber);font-style:normal} @media (max-width:767px){ html.cin-on #landing .cin-wrap{height:200vh} html.cin-on #landing .cin-morph{height:230vh} html.cin-on #landing .cin-pin{height:100svh} html.cin-on #landing .cin-slot{padding:0 20px 9vh} html.cin-on #landing .cin-cue{display:none} html.cin-on #landing .cin-beat{left:20px;right:20px;bottom:9vh;max-width:none} html.cin-on #landing .cin-beat h2{font-size:clamp(30px,9vw,44px)} html.cin-on #landing .cin-tick{top:12vh;right:20px} html.cin-on #landing .cin-chix{top:12vh;left:20px} } /* reduced motion: no pin, no scrub — one static frame (the film's final frame, drawn by cinema.js), copy fully visible, beat B resolved. */ html.cin-still #landing .cin-wrap,html.cin-still #landing .cin-morph{height:auto} html.cin-still #landing .cin-pin{position:relative;height:100svh;min-height:540px} html.cin-still #landing .cin-cue{display:none} html.cin-still #landing .cin-tick{display:none} html.cin-still #landing .cin-beat.cin-a{display:none} html.cin-still #landing .cin-beat.cin-b{opacity:1}