/* ============================================================ CYBER FILES — design system Typography: Bricolage Grotesque (display) / Inter (body) / JetBrains Mono (meta, case numbers, labels) ============================================================ */ @import url("fonts.css"); :root{ --bg:#05060a; --bg2:#080b12; --panel:#0b0f18; --ink:#eef2ff; --muted:#8792ad; --faint:#5a6480; --amber:#ffb43a; --red:#ff3b52; --line:rgba(255,255,255,.075); --line2:rgba(255,255,255,.14); --glass:rgba(16,20,32,.5); --ease:cubic-bezier(.16,1,.3,1); --font:'Inter',system-ui,-apple-system,sans-serif; --disp:'Bricolage Grotesque','Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } *{box-sizing:border-box;margin:0;padding:0} /* Overflow containment lives on , not : setting overflow-x on body propagates to the viewport and makes body a scroll container, which silently breaks every position:sticky descendant. `clip` contains without that effect. */ html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip} body{ background:var(--bg);color:var(--ink);font-family:var(--font); line-height:1.65;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Scroll lock is OPT-IN: JS adds .loading, JS removes it. Never gate scrolling on JS succeeding — the old `body:not(.ready)` form meant any script error left the page permanently unscrollable. */ body.loading{overflow:hidden} ::selection{background:var(--amber);color:#05060a} img{max-width:100%;display:block} /* ---------- LAYERS ---------- */ /* HERO FOOTAGE — real stock clip of a hooded figure (Mixkit, free licence). Sits at the very back; every other layer grades and masks it. */ .hero-media{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none; background:#05060a} .hero-media video,.hero-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 34%; /* keep the head in frame, not cropped */ /* translate (not object-position) is what reliably slides the figure into the right third — object-fit:cover barely crops a 16:9 source on a 16:10 box */ transform:translate(19%,4%) scale(1.0); animation:pushin 30s ease-in-out infinite alternate; /* NO css filter here: filtering a *playing* video forces the compositor to re-grade every decoded frame, which was the single biggest cost on the page. The grade is baked into the file instead (see build notes). */ will-change:transform} @keyframes pushin{ from{transform:translate(19%,4%) scale(1.00)} to {transform:translate(16%,2%) scale(1.07)}} /* warm/cool grade pass + readability masks */ .hero-media::before{content:"";position:absolute;inset:0; background:radial-gradient(55% 50% at 72% 38%,rgba(255,180,58,.20),transparent 70%), linear-gradient(180deg,rgba(255,59,82,.10),transparent 45%); mix-blend-mode:screen} .hero-media::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,var(--bg) 2%,rgba(5,6,10,.93) 24%,rgba(5,6,10,.55) 48%,rgba(5,6,10,.12) 100%), linear-gradient(180deg,rgba(5,6,10,.72) 0%,transparent 24%,transparent 58%,var(--bg) 98%)} @media(max-width:860px){ /* on narrow screens the figure has nowhere to hide, so darken harder */ .hero-media video,.hero-media img{transform:none;animation:none;object-position:center 30%; opacity:.62} /* opacity is compositor-cheap; filter is not */ .hero-media::after{background:linear-gradient(180deg,rgba(5,6,10,.86) 0%,rgba(5,6,10,.58) 42%,var(--bg) 96%)} } canvas#gl{position:fixed;inset:0;z-index:1;display:block;width:100vw;height:100vh; pointer-events:none} .aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .has-gl .aurora{opacity:.22} .has-media .aurora{opacity:.12} .aurora i{position:absolute;display:block;border-radius:50%;filter:blur(100px); opacity:.5;will-change:transform} .aurora i:nth-child(1){width:62vw;height:62vw;left:-16vw;top:-22vw; background:radial-gradient(circle,rgba(255,59,82,.22),transparent 65%)} .aurora i:nth-child(2){width:56vw;height:56vw;right:-18vw;top:28vh; background:radial-gradient(circle,rgba(255,180,58,.17),transparent 65%)} .aurora i:nth-child(3){width:72vw;height:72vw;left:8vw;bottom:-32vw; background:radial-gradient(circle,rgba(80,110,220,.15),transparent 65%)} .grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045; background-image:radial-gradient(circle,#fff 1px,transparent 1px); background-size:3px 3px;mix-blend-mode:overlay} .scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.3; background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.32) 2px 4px); mix-blend-mode:multiply} .wrap{position:relative;z-index:3} /* ---------- PRELOADER ---------- */ #pre{position:fixed;inset:0;z-index:200;background:#04050a; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px; transition:opacity .9s var(--ease),visibility .9s; /* CSS failsafe: clears itself even if JS never runs, so a script error can never leave a full-screen black overlay covering the site. */ animation:preFailsafe 1s linear 5s forwards} @keyframes preFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}} #pre.gone{opacity:0;visibility:hidden;pointer-events:none} #pre .pre-brand{font-family:var(--mono);font-size:11px;letter-spacing:6px;color:var(--faint)} #pre .pre-num{font-family:var(--disp);font-size:clamp(64px,13vw,180px);font-weight:800; letter-spacing:-6px;line-height:1; background:linear-gradient(120deg,#fff 15%,var(--amber) 55%,var(--red) 90%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} #pre .pre-bar{width:min(320px,60vw);height:1px;background:var(--line2);overflow:hidden} #pre .pre-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--amber),var(--red));box-shadow:0 0 14px var(--amber)} #pre .pre-cap{font-family:var(--mono);font-size:10px;letter-spacing:4px;color:var(--faint)} /* ---------- CURSOR ---------- */ .has-cursor,.has-cursor a,.has-cursor button,.has-cursor [data-cursor]{cursor:none} .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:190;pointer-events:none; border-radius:50%;will-change:transform;transition:opacity .3s} .cur-dot{width:6px;height:6px;background:var(--amber);box-shadow:0 0 12px var(--amber)} .cur-ring{width:36px;height:36px;border:1px solid rgba(255,180,58,.5); display:flex;align-items:center;justify-content:center; transition:width .45s var(--ease),height .45s var(--ease), background .45s var(--ease),border-color .45s var(--ease),opacity .3s} .cur-ring.on{width:56px;height:56px;background:rgba(255,180,58,.1);border-color:var(--amber)} .cur-ring.lbl-on{width:86px;height:86px;background:rgba(255,180,58,.14)} .cur-lbl{font-family:var(--mono);font-size:9px;letter-spacing:1.5px;color:var(--amber); opacity:0;transition:opacity .3s;white-space:nowrap;text-transform:uppercase} .cur-ring.lbl-on .cur-lbl{opacity:1} /* ---------- PROGRESS + NAV ---------- */ .prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:100; background:linear-gradient(90deg,var(--amber),var(--red)); transform:scaleX(0);transform-origin:0 50%;will-change:transform; box-shadow:0 0 18px rgba(255,180,58,.65)} nav{position:fixed;top:0;left:0;right:0;z-index:90; display:flex;align-items:center;justify-content:space-between; padding:20px 5vw;backdrop-filter:blur(18px); background:linear-gradient(180deg,rgba(5,6,10,.88),rgba(5,6,10,0)); transition:padding .5s var(--ease),background .5s var(--ease)} nav.tight{padding:12px 5vw;background:rgba(5,6,10,.86);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp); font-weight:800;letter-spacing:1px;font-size:16px;color:var(--ink);text-decoration:none} .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--red); box-shadow:0 0 14px var(--red);animation:pulse 1.9s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}} .brand span.f{color:var(--amber)} nav .links{display:flex;gap:32px;align-items:center;font-family:var(--mono);font-size:11px} nav .links a{color:var(--faint);text-decoration:none;letter-spacing:2px; position:relative;padding:4px 0;transition:color .3s} nav .links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:var(--amber);transform:scaleX(0);transform-origin:100% 50%; transition:transform .5s var(--ease)} nav .links a:hover{color:var(--ink)} nav .links a:hover::after{transform:scaleX(1);transform-origin:0 50%} .navmeta{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--faint)} @media(max-width:900px){nav .links,.navmeta{display:none}} /* ---------- BUTTONS ---------- */ .btn{position:relative;display:inline-flex;align-items:center;gap:10px; padding:14px 28px;border-radius:40px;font-family:var(--mono);font-weight:700; letter-spacing:1.5px;font-size:12px;cursor:pointer;border:none;text-decoration:none; background:linear-gradient(135deg,var(--amber),var(--red));color:#080a11; will-change:transform;overflow:hidden; box-shadow:0 10px 34px rgba(255,59,82,.3);transition:box-shadow .5s var(--ease)} .btn:hover{box-shadow:0 18px 54px rgba(255,180,58,.45)} .btn::after{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%);transition:transform .9s var(--ease)} .btn:hover::after{transform:translateX(120%)} .btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);box-shadow:none} .btn.ghost:hover{border-color:var(--amber);background:rgba(255,180,58,.07);box-shadow:none} /* ---------- TEXT MASK REVEAL ---------- */ .wm{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em; margin-bottom:-.08em} .w{display:inline-block;transform:translateY(110%) rotate(4deg);opacity:0; will-change:transform,opacity; transition:transform 1s var(--ease),opacity 1s var(--ease)} .w.in{transform:none;opacity:1} .rv{opacity:0;transform:translateY(38px);filter:blur(7px);will-change:transform,opacity,filter; transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease); /* Failsafe: anything starting at opacity:0 reveals itself after 6s even if the JS reveal never runs. Content must never be permanently invisible. */ animation:rvFailsafe 1ms linear 6s forwards} /* Release the compositor layer once revealed — will-change held on dozens of elements permanently is a real memory and paint cost for no benefit. */ .rv.in{opacity:1;transform:none;filter:none;animation:none;will-change:auto} @keyframes rvFailsafe{to{opacity:1;transform:none;filter:none}} [data-hero]{opacity:0;transform:translateY(30px);filter:blur(6px); transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)} [data-hero].in{opacity:1;transform:none;filter:none} [data-stagger] > *{opacity:0;transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-stagger] > *.in{opacity:1;transform:none} /* ---------- TYPE ---------- */ h1,h2,h3,.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:.98} h1{font-size:clamp(44px,8.2vw,132px)} h2{font-size:clamp(32px,5.4vw,74px);line-height:1.02} h3{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em;line-height:1.16} .grad,.grad .w{background:linear-gradient(115deg,#fff 8%,var(--amber) 48%,var(--red) 88%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* split() wraps each word in its own span; without the rule above those children inherit transparent fill with no gradient of their own and vanish entirely. */ .kicker{display:inline-flex;align-items:center;gap:11px;padding:9px 18px; border:1px solid var(--line);border-radius:40px;font-family:var(--mono); font-size:10px;letter-spacing:3px;color:var(--amber); background:var(--glass);backdrop-filter:blur(10px);width:fit-content} .kicker .live{width:7px;height:7px;border-radius:50%;background:var(--red); box-shadow:0 0 10px var(--red);animation:pulse 1.5s infinite} .tag{font-family:var(--mono);font-size:10px;letter-spacing:4px;color:var(--red); text-transform:uppercase} .lead{max-width:640px;font-size:clamp(16px,1.6vw,20px);color:var(--muted);line-height:1.7} /* ---------- MARQUEE ---------- */ .mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:22px 0;background:rgba(8,11,18,.5);backdrop-filter:blur(8px)} .mq-track{display:flex;gap:56px;width:max-content;will-change:transform} .mq-track span{font-family:var(--mono);font-size:12px;letter-spacing:4px;color:var(--faint); white-space:nowrap;display:flex;align-items:center;gap:56px;text-transform:uppercase} .mq-track span::after{content:"◆";color:var(--amber);font-size:8px} /* ---------- SECTIONS ---------- */ section{padding:130px 5vw;position:relative} .sec-head{margin-bottom:70px;max-width:900px} .sec-head h2{margin-top:16px} .sec-head p{color:var(--muted);max-width:580px;margin-top:20px;line-height:1.7} /* ---------- CASE CARDS ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px} .card{position:relative;border:1px solid var(--line);border-radius:20px;padding:30px; /* No backdrop-filter: 9 blurred cards meant 9 separate backdrop snapshots per frame. Over a near-black page an opaque panel is visually identical. */ background:#0d1119;overflow:hidden; min-height:250px;display:flex;flex-direction:column;text-decoration:none;color:inherit; will-change:transform;transition:border-color .5s var(--ease),background .5s var(--ease)} .card:hover{border-color:rgba(255,180,58,.45);background:rgba(22,27,42,.6)} .card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,180,58,.16),transparent 62%)} .card:hover::before{opacity:1} .card .cid{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--amber); font-weight:700;display:flex;align-items:center;gap:9px} .card h3{margin:16px 0 12px} .card p{color:var(--muted);font-size:14.5px;line-height:1.65;flex:1} .card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:22px; font-family:var(--mono);font-size:10px;letter-spacing:2px} .card .foot .cat{color:var(--red);text-transform:uppercase} .card .foot .play{color:var(--ink);opacity:.6;transition:opacity .3s,transform .5s var(--ease)} .card:hover .foot .play{opacity:1;transform:translateX(6px)} .card .num-ghost{position:absolute;bottom:-34px;right:-10px;font-family:var(--disp); font-size:160px;font-weight:800;color:rgba(255,255,255,.022);line-height:1;pointer-events:none} .card .badge{padding:3px 10px;border-radius:20px;font-size:9px;letter-spacing:1.5px; background:var(--amber);color:#0a0d16;font-weight:800} .card.locked{opacity:.82} .card.locked .foot .play{color:var(--faint)} .mq-track{will-change:transform} /* ---------- FOOTER ---------- */ footer{padding:90px 5vw 56px;border-top:1px solid var(--line);text-align:center} footer .brand{justify-content:center;display:inline-flex;margin-bottom:18px} footer p{color:var(--faint);font-size:13px;line-height:1.8} footer a{color:var(--amber);text-decoration:none} /* ---------- LOW-FX MODE ---------- Applied automatically when the measured frame rate can't keep up (see bootPerfGuard). Strips the costly compositing, keeps the design intact. */ .lowfx .hero-media video,.lowfx .hero-media img{animation:none} /* no ken-burns */ .lowfx nav,.lowfx .kicker,.lowfx .mq{backdrop-filter:none} .lowfx nav{background:rgba(5,6,10,.92)} .lowfx .aurora i{filter:blur(60px)} /* cheaper blur */ .lowfx .card,.lowfx .plan{transition:border-color .3s} /* drop transform anims */ .lowfx .card::before{display:none} /* no spotlight gradient */ .lowfx .cur-dot,.lowfx .cur-ring{display:none} /* ...and give the real cursor back, or the page would have no pointer at all */ .lowfx.has-cursor,.lowfx.has-cursor a,.lowfx.has-cursor button, .lowfx.has-cursor [data-cursor]{cursor:auto} .lowfx *{will-change:auto!important} /* ---------- REDUCED MOTION ---------- */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important} .rv,[data-hero],[data-stagger] > *{opacity:1!important;transform:none!important;filter:none!important} .w{transform:none;opacity:1} #pre{display:none} }