@media(max-width:768px){ #mobile-works{overflow:hidden} .mw-carousel{overflow:hidden} .mw-track{padding:4px 12vw;box-sizing:content-box;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* ============================================================ INFINITE UNION — MOBILE STYLESHEET Loaded AFTER main.css, BEFORE assets/js/mobile-animations.js runs. Scope: <=900px for the nav/menu, <=768px for layout, hero & scroll reveals. --------------------------------------------------------------- TWO MOTION ENGINES SHARE THIS FILE --------------------------------------------------------------- 1) A pure-CSS fallback (keyframes/transitions) — plays when GSAP isn't available (blocked, slow 3G, JS disabled) or the visitor has prefers-reduced-motion. 2) GSAP (assets/js/mobile-animations.js) — plays when it loads. As soon as it initialises on a <=768px viewport it adds `ga` to . Every fallback rule that would otherwise fight a GSAP tween (same element, same property, both trying to drive motion every frame) is namespaced under `html:not(.ga)` so it simply doesn't exist once GSAP is in charge — GSAP then owns that element's inline opacity/transform outright. The one exception is anywhere main.css forces opacity/transform with `!important` on mobile (`.rev` killer, `.gs-card`) — plain inline styles from GSAP cannot win against `!important` no matter the selector. For exactly those elements we redirect through CSS custom properties instead (`opacity:var(--ga-o,1) !important`) and have GSAP tween the *variable* — var() always resolves live regardless of who set it or how "important" the declaration referencing it is. Base "hidden" values (plain opacity:0 / transform:translateY(..), no !important) are left UNGATED on purpose: they're exactly the resting state both engines want pre-reveal, and GSAP's inline styles beat any non-important stylesheet rule automatically. main.css is intentionally left untouched (project rule) — see the mobile-css-gotchas note for the killer rules this works around. ============================================================ */ /* Keep the overlay fully hidden on desktop (main.css has no .mob rule) */ .mob{display:none} /* ============================================================ 1 · BURGER MENU — slide-in panel from the right + blurred backdrop ============================================================ */ @media (max-width:900px){ /* ---- container: always fixed full-screen, right-aligned panel ---- */ .mob{ position:fixed!important; inset:0!important; z-index:10000!important; display:flex!important; justify-content:flex-end!important; pointer-events:none; } .mob.open{pointer-events:auto;} /* top hairline — cheap, identical in both engines, left ungated */ .mob::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,#D40000 40%,#D40000 60%,transparent); z-index:2;opacity:0;transition:opacity .3s ease .12s; } .mob.open::before{opacity:1;} /* backdrop layer — separate element so GSAP can fade it independently of the sliding panel (main.css cannot target this: new class) */ .mob-backdrop{ position:absolute;inset:0; background:rgba(6,3,3,0.55); -webkit-backdrop-filter:blur(14px) saturate(118%); backdrop-filter:blur(14px) saturate(118%); pointer-events:none; opacity:0; } /* ---- sliding panel: off-screen by default so it can never flash ---- */ .mob-inner{ position:relative!important; width:min(420px,86vw)!important; height:100%!important; display:flex!important;flex-direction:column!important; background:#060303!important; border-left:1px solid rgba(212,0,0,0.28)!important; overflow-y:auto!important;overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; transform:translateX(100%); } /* ---- header ---- */ .mob-header{ display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:32px!important; padding:22px 26px!important; border-bottom:1px solid rgba(237,232,229,0.07)!important; flex-shrink:0!important; opacity:0; } .mob-logo{ font-family:'Space Grotesk',sans-serif!important;font-size:11px!important;font-weight:600!important; letter-spacing:.36em!important;text-transform:uppercase!important;color:#EDE8E5!important; } .mob-logo span{color:#D40000!important;} .mob-x{ background:none!important;border:1px solid rgba(237,232,229,0.15)!important;color:#EDE8E5!important; cursor:pointer!important;width:36px!important;height:36px!important; display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important; transition:border-color .2s ease,transform .3s cubic-bezier(.7,0,.16,1)!important; transition-duration:.3s!important; } .mob-x:hover,.mob-x:active{border-color:#D40000!important;color:#D40000!important;transform:rotate(90deg)!important;} /* ---- nav links ---- NOTE: