:root{ --bg:#0a0a0a; --bg-2:#101214; --panel:rgba(16,18,20,.72); --ink:#e5e4e2; --dim:#9aa5ad; --mute:#7d8a96; --green:#6fc23d; --green-hi:#8fd64e; --green-deep:#3e7c26; --grad:linear-gradient(105deg,#9ade57 0%,#6fc23d 45%,#3e7c26 100%); --line:rgba(229,228,226,.09); --grid:rgba(229,228,226,.045); --slate:#536878; --slate-deep:#35424e; /* Peak Amber — transient states only: live pips, hover peaks, progress bar. Matches the hiC peak-hold color in the hero wave shader. */ --amber:#f2a33c; /* Motion tokens — the named GSAP eases in src/routes/index.tsx mirror these. */ --ease-ride:var(--ease-ride); --ease-peak:cubic-bezier(.16,1.1,.3,1); --ease-cut:cubic-bezier(.7,0,.84,0); --stagger:60ms; --mono:'JetBrains Mono',monospace; --body:'Inter','Archivo',sans-serif; --disp:'Archivo',sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:auto} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} html,body{background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:hidden} ::selection{background:var(--green);color:var(--bg)} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px} .pill:focus-visible,.nav-contact:focus-visible,.sound-toggle:focus-visible{outline-offset:2px;border-radius:999px} /* Native cursor is only hidden once the custom cursor is confirmed running — the script adds .rs-cursor to after its listeners are attached, so a JS failure can never leave the page with no cursor at all. */ @media (hover:hover) and (pointer:fine){ html.rs-cursor body{cursor:none} html.rs-cursor a,html.rs-cursor button{cursor:none} } /* ---------- global grid backdrop ---------- */ .grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:88px 88px; mask-image:linear-gradient(#000 60%,rgba(0,0,0,.4))} /* ---------- grain ---------- */ .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2000;opacity:.045; 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"); animation:grain 8s steps(10) infinite} @keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}} /* ---------- cursor (inversion) ---------- */ .cursor{position:fixed;top:0;left:0;width:24px;height:24px;border-radius:50%;background:#fff; mix-blend-mode:difference;pointer-events:none;z-index:3000; transform:translate(-50%,-50%);transition:width .35s var(--ease-ride),height .35s var(--ease-ride)} .cursor.is-hover{width:92px;height:92px} .cursor.is-down{width:14px;height:14px} .cursor-label{position:fixed;top:0;left:0;pointer-events:none;z-index:3001;font-family:var(--mono); font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--bg);mix-blend-mode:difference; transform:translate(-50%,-50%);opacity:0;transition:opacity .25s} @media (hover:none){.cursor,.cursor-label{display:none}} /* ---------- preloader ---------- */ .preloader{position:fixed;inset:0;background:var(--bg);z-index:5000;display:flex;align-items:flex-end;justify-content:space-between;padding:32px 40px} .preloader .pl-tag{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mute)} .preloader .pl-num{font-family:var(--disp);font-weight:900;font-size:clamp(48px,10vw,150px);line-height:.85;letter-spacing:-.02em;max-width:100%;overflow-wrap:break-word} .preloader .pl-num span:last-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- pill primitives ---------- */ .pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-family:var(--mono); font-size:11px;letter-spacing:.18em;text-transform:uppercase;line-height:1} .pill-solid{background:var(--green);color:#0b0e08;padding:18px 30px;font-weight:500; transition:background .3s} .pill-solid:hover{background:var(--green-hi)} .pill-line{border:1px solid var(--line);color:var(--ink);padding:18px 30px;background:transparent; transition:border-color .3s} .pill-line:hover{border-color:var(--green)} /* Nav styles live in public/site-nav.css (shared by every route). */ /* ---------- sound chip ---------- */ .sound-toggle{position:fixed;left:24px;bottom:24px;z-index:900;display:flex;align-items:center;gap:10px; background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line); border-radius:999px;padding:11px 18px;color:var(--dim);font-family:var(--mono);font-size:10px; letter-spacing:.18em;text-transform:uppercase;transition:border-color .3s,color .3s} .sound-toggle:hover{border-color:var(--green);color:var(--ink)} .eq{display:flex;align-items:flex-end;gap:2px;height:12px} .eq span{width:2px;height:3px;background:var(--mute);transition:background .3s} .sound-toggle.on .eq span{background:var(--green);animation:eqb .9s ease-in-out infinite} .sound-toggle.on .eq span:nth-child(2){animation-delay:.15s} .sound-toggle.on .eq span:nth-child(3){animation-delay:.3s} .sound-toggle.on .eq span:nth-child(4){animation-delay:.45s} @keyframes eqb{0%,100%{height:3px}50%{height:12px}} /* ---------- hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:110px 40px 64px;overflow:hidden;z-index:1} .hero::before{content:'';position:absolute;top:-30%;right:-15%;width:75%;height:110%;pointer-events:none; background:radial-gradient(ellipse at 70% 25%,rgba(111,194,61,.16),transparent 62%)} #wave-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.85} .hero-eyebrow{position:relative;z-index:5;display:inline-flex;align-items:center;gap:10px;align-self:flex-start; border:1px solid var(--line);border-radius:999px;padding:11px 20px;font-family:var(--mono); font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:32px; background:rgba(10,12,9,.4);backdrop-filter:blur(6px)} .hero-eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 10px var(--green)} .hero-title{position:relative;z-index:5;font-family:var(--disp);font-weight:900; font-size:clamp(58px,12.6vw,215px);line-height:.92;letter-spacing:-.025em;text-transform:uppercase} .hero-title .line{display:block;overflow:hidden;padding-bottom:.04em} .hero-title .ch{display:inline-block;will-change:transform} .hero-title .l2w{display:inline-block;font-style:italic;font-weight:900;padding-right:.08em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;will-change:transform} .hero-sub{position:relative;z-index:5;margin-top:36px;max-width:640px} .hero-tag{font-family:var(--mono);font-size:clamp(13px,1.5vw,17px);letter-spacing:.22em;color:var(--dim);text-transform:uppercase} .hero-desc{margin-top:22px;font-size:clamp(16px,1.6vw,21px);line-height:1.6;color:var(--dim);font-weight:400;max-width:34ch} .hero-cta{position:relative;z-index:5;display:flex;gap:16px;margin-top:36px;flex-wrap:wrap} .hero-scroll{position:absolute;right:40px;bottom:36px;z-index:5;font-family:var(--mono);font-size:10px; letter-spacing:.22em;color:var(--mute);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px} .hero-scroll::after{content:'';width:1px;height:44px;background:linear-gradient(var(--green),transparent); animation:drip 1.8s ease-in-out infinite} @keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} @media(max-width:760px){.hero{padding:120px 20px 90px}.hero-scroll{display:none}#wave-canvas{opacity:.35}} /* ---------- marquee ---------- */ .marquee{position:relative;z-index:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line); overflow:hidden;padding:22px 0;background:var(--bg-2)} .marquee-track{display:flex;width:max-content;animation:mq 30s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .mq-item{font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(22px,3vw,38px); letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;padding:0 26px; display:flex;align-items:center;gap:52px} .mq-item i{font-style:normal;color:var(--green);font-size:.42em} .mq-item:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--mute)} @keyframes mq{to{transform:translateX(-50%)}} /* ---------- shared section chrome ---------- */ section{position:relative;padding:150px 40px;z-index:1} @media(max-width:760px){section{padding:100px 20px}} .sec-label{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px; padding:10px 18px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink);margin-bottom:48px} .sec-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)} .sec-label .idx{color:var(--mute)} .sec-title{font-family:var(--disp);font-weight:900;font-size:clamp(44px,7.2vw,110px);line-height:.95; letter-spacing:-.025em;text-transform:uppercase;max-width:14ch} .sec-title .line{display:block;overflow:hidden;padding-bottom:.05em} .sec-title .line>span{display:block;will-change:transform} .accent{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em} .ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--disp);font-weight:900; font-style:italic;font-size:clamp(110px,20vw,340px);letter-spacing:-.02em;white-space:nowrap;color:transparent; -webkit-text-stroke:1px rgba(242,244,238,.05);pointer-events:none;user-select:none;z-index:0;text-transform:uppercase} /* ---------- about ---------- */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;position:relative;z-index:2} .about-copy{align-self:end;max-width:440px} .about-copy p{font-size:17px;line-height:1.75;color:var(--dim);font-weight:400} .about-copy p b{color:var(--ink);font-weight:600} .about-stats{display:flex;gap:48px;margin-top:44px;flex-wrap:wrap} .stat .n{font-family:var(--disp);font-weight:900;font-size:42px;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .l{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:8px} @media(max-width:900px){.about-grid{grid-template-columns:1fr}} /* ---------- services (console channels) ---------- */ .services{background:var(--bg-2);border-top:1px solid var(--line)} .svc-list{margin-top:70px;border-top:1px solid var(--line)} .svc{display:grid;grid-template-columns:110px 1fr auto auto;align-items:center;gap:32px; padding:34px 12px;border-bottom:1px solid var(--line);position:relative;overflow:hidden} .svc::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(111,194,61,.09),transparent 60%); transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-ride)} .svc:hover::before,.svc:focus-within::before{transform:scaleX(1)} /* Hover indent is transform-only (was padding-left, which relaid out all five rows every frame). Only the left columns move — the right-anchored fader and arrow columns never moved in the old padding version either. */ .svc:hover .svc-ch,.svc:focus-within .svc-ch, .svc:hover .svc-name,.svc:focus-within .svc-name{transform:translateX(16px)} .svc-ch{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mute);position:relative;z-index:1; transition:transform .4s var(--ease-ride),color .3s} .svc:hover .svc-ch,.svc:focus-within .svc-ch{color:var(--green)} .svc-name{position:relative;z-index:1;padding-bottom:8px; transition:transform .4s var(--ease-ride)} .svc-name h3{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.8vw,50px);line-height:1; letter-spacing:-.02em;text-transform:uppercase;transition:transform .4s var(--ease-ride)} .svc:hover .svc-name h3,.svc:focus-within .svc-name h3{transform:translateX(8px)} /* Description reveal is absolute + transform/opacity only (was max-height, another per-frame layout trigger). The 8px padding-bottom on .svc-name keeps the resting row height identical to the old collapsed-margin height. */ .svc-name p{font-size:14px;color:var(--dim);font-weight:400;max-width:52ch; position:absolute;top:100%;left:0;margin-top:8px;opacity:0;transform:translateY(8px);pointer-events:none; transition:transform .45s var(--ease-ride),opacity .4s .05s} .svc:hover .svc-name p,.svc:focus-within .svc-name p{opacity:1;transform:translateY(0)} .svc-arrow{position:relative;z-index:1;font-family:var(--mono);font-size:20px;color:var(--mute); transition:transform .4s var(--ease-ride),color .3s} .svc:hover .svc-arrow,.svc:focus-within .svc-arrow{transform:translateX(6px) rotate(-45deg);color:var(--green)} .svc-fader{position:relative;z-index:1;display:flex;align-items:flex-end;gap:3px;height:26px;justify-self:end} .svc-fader span{width:3px;background:var(--line);height:30%;transition:background .3s,height .5s var(--ease-ride)} .svc:hover .svc-fader span,.svc:focus-within .svc-fader span{background:var(--green)} .svc:hover .svc-fader span:nth-child(1),.svc:focus-within .svc-fader span:nth-child(1){height:45%} .svc:hover .svc-fader span:nth-child(2),.svc:focus-within .svc-fader span:nth-child(2){height:90%} .svc:hover .svc-fader span:nth-child(3),.svc:focus-within .svc-fader span:nth-child(3){height:60%} .svc:hover .svc-fader span:nth-child(4),.svc:focus-within .svc-fader span:nth-child(4){height:100%;background:var(--amber);box-shadow:0 0 6px var(--amber)} .svc:hover .svc-fader span:nth-child(5),.svc:focus-within .svc-fader span:nth-child(5){height:70%} @media(max-width:760px){.svc{grid-template-columns:64px 1fr auto;gap:16px}.svc-fader{display:none} .svc-name{padding-bottom:0} .svc-name p{position:static;opacity:1;transform:none;pointer-events:auto;font-size:13px}} /* ---------- products ---------- */ .prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:70px} .prod{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:40px 36px 52px; position:relative;overflow:hidden;min-height:260px;display:flex;flex-direction:column; justify-content:space-between;transition:border-color .4s;transform-style:preserve-3d} .prod:hover{border-color:rgba(111,194,61,.5)} .prod::after{content:'';position:absolute;top:-40%;right:-20%;width:70%;height:80%;pointer-events:none; background:radial-gradient(ellipse,rgba(111,194,61,.12),transparent 65%);opacity:0;transition:opacity .5s} .prod:hover::after{opacity:1} .prod-status{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--mute);display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line); border-radius:999px;padding:8px 14px;align-self:flex-start} .prod-status .pip{width:6px;height:6px;border-radius:50%;background:var(--mute)} .prod-status.live{color:var(--ink)} .prod-status.live .pip{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .prod h3{font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.8vw,50px);letter-spacing:-.02em; text-transform:uppercase;line-height:.95;margin-top:36px;transition:transform .4s var(--ease-ride)} .prod:hover h3{transform:translateY(-4px)} .prod p{font-size:14px;color:var(--dim);font-weight:400;margin-top:12px;line-height:1.6;max-width:44ch} .prod .go{position:absolute;top:36px;right:32px;font-family:var(--mono);color:var(--mute);font-size:18px; transition:transform .4s,color .3s} .prod:hover .go{transform:rotate(-45deg);color:var(--green)} @media(max-width:820px){.prod-grid{grid-template-columns:1fr}} /* ---------- contact ---------- */ .contact{background:var(--bg-2);border-top:1px solid var(--line);overflow:hidden} .contact .sec-title{max-width:none} .contact-cta{display:flex;gap:16px;margin-top:56px;flex-wrap:wrap;align-items:center} .contact-mail{font-family:var(--mono);font-size:clamp(13px,1.8vw,17px);letter-spacing:.06em;color:var(--dim); transition:color .3s} .contact-mail:hover{color:var(--ink)} .contact-meta{margin-top:70px;display:flex;gap:60px;flex-wrap:wrap;font-family:var(--mono);font-size:11px; letter-spacing:.16em;text-transform:uppercase;color:var(--mute)} .contact-meta div span{display:block;color:var(--ink);margin-top:8px} /* ---------- footer ---------- */ footer{position:relative;z-index:1;padding:28px 40px 96px;display:flex;justify-content:space-between;align-items:center;gap:16px; border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--mute);flex-wrap:wrap} footer .ft-r{color:var(--green)} @media(max-width:760px){footer{padding:22px 20px 90px}} /* ---------- progress bar ---------- */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:2500;pointer-events:none} .progress i{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left} /* ---------- footer clock ---------- */ .ft-clock{color:var(--dim)} .ft-clock b{color:var(--ink);font-weight:400} /* ---------- reveal defaults ---------- */ .fade-up{opacity:0;transform:translateY(36px)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .fade-up{opacity:1;transform:none} .preloader{display:none} html{scroll-behavior:auto} } /* Tools dropdown styles live in public/site-nav.css (shared by every route). */ /* ---------- proof ---------- */ .proof{border-top:1px solid var(--line)} .proof-sub{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--mute);margin:70px 0 18px;display:flex;align-items:center;gap:10px} .proof-sub::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green)} .credits{border-top:1px solid var(--line);font-family:var(--mono)} .credits-head,.credit-row{display:grid;grid-template-columns:1.4fr 80px 1fr 130px;gap:24px; padding:15px 12px;align-items:baseline} .credits-head{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute); border-bottom:1px solid var(--line)} .credit-row{border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.05em; text-transform:uppercase;color:var(--dim);transition:color .3s,background .3s} .credit-row:hover{color:var(--ink);background:rgba(111,194,61,.05)} .credit-row .c-artist{color:var(--ink)} .credit-row .c-year{color:var(--mute)} .strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x proximity; scrollbar-width:thin;scrollbar-color:var(--slate-deep) transparent} .strip::-webkit-scrollbar{height:6px} .strip::-webkit-scrollbar-thumb{background:var(--slate-deep);border-radius:3px} .strip::-webkit-scrollbar-track{background:transparent} .shot{flex:0 0 clamp(200px,24vw,320px);aspect-ratio:4/5;border:1px solid var(--line); border-radius:4px;filter:grayscale(.75);background:var(--bg-2);scroll-snap-align:start; display:flex;align-items:flex-end;padding:14px;overflow:hidden;position:relative; transition:filter .4s} .shot:hover{filter:grayscale(0)} .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .shot span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase; color:var(--mute);position:relative;z-index:1} .quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:70px} .quote{border:1px solid var(--line);border-radius:4px;background:var(--bg-2); padding:34px 30px;position:relative} .quote::before{content:'\201C';position:absolute;top:4px;right:22px;font-family:var(--disp); font-weight:900;font-size:84px;line-height:1;color:var(--green);opacity:.25} .quote p{font-size:16px;line-height:1.7;color:var(--ink);font-weight:400;max-width:46ch} .quote .attr{margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--mute)} .quote .attr b{display:block;color:var(--green);font-weight:400;margin-bottom:6px} @media(max-width:900px){.quotes{grid-template-columns:1fr}} @media(max-width:760px){ .credits-head{display:none} .credit-row{grid-template-columns:1fr auto;row-gap:6px}} /* ---------- enquiry form layout (contact) ---------- */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;margin-top:64px} .contact-aside .mail-label{font-family:var(--mono);font-size:10px;letter-spacing:.22em; text-transform:uppercase;color:var(--mute);margin-bottom:14px} .contact-aside .contact-mail{display:inline-block} .contact-aside .contact-meta{margin-top:56px} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:48px}}