/* ========================================================================== Advocate v2 — Motion gating -------------------------------------------------------------------------- Nothing here hides content unconditionally. Every starting state is gated on BOTH: .js — set by an inline script in ; absent if scripting is off :not(.no-gsap) — .no-gsap is set by the CDN sentinel when GSAP fails to load So a blocked CDN, a script error, or scripting disabled all land on a fully visible static page rather than a blank one. ========================================================================== */ /* --- Base hidden states (only when JS + GSAP are both confirmed) ---------- */ .js:not(.no-gsap) [data-anim] { opacity: 0; will-change: opacity, transform; } .js:not(.no-gsap) [data-anim="up"] { transform: translateY(26px); } .js:not(.no-gsap) [data-anim="fade"] { transform: none; } .js:not(.no-gsap) [data-anim="left"] { transform: translateX(-24px); } .js:not(.no-gsap) [data-anim="scale"] { transform: scale(.96); } /* Hero word masks — the inner span is what slides */ .js:not(.no-gsap) .hero__title .w > span { transform: translateY(105%); } /* Timeline draw rule */ /* --- Intro curtain ------------------------------------------------------- Only ever rendered when JS + GSAP are present; motion.js removes it after the sequence, and app.js never inserts it at all under .no-gsap. ------------------------------------------------------------------------ */ .intro { display: none; } .js:not(.no-gsap) .intro.is-armed { display: grid; } /* --- GSAP-absent fallback ------------------------------------------------ Explicitly neutralise everything the animation layer would have driven. ------------------------------------------------------------------------ */ .no-gsap [data-anim], .no-gsap .hero__title .w > span { opacity: 1 !important; transform: none !important; } .no-gsap .intro, .no-gsap .cursor, .no-gsap .cursor-ring { display: none !important; } /* Without GSAP the pinned track can't scrub — fall back to a stacked grid */ .no-gsap .track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .no-gsap .track .step { flex: none; } /* --- Non-GSAP transitions still worth having ------------------------------ */ .faq__item[open] .faq__a { animation: faq-in .42s var(--ease-out) both; } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .drawer__link { animation: drawer-in .5s var(--ease-out) both; } .drawer__link:nth-child(1) { animation-delay: .04s; } .drawer__link:nth-child(2) { animation-delay: .08s; } .drawer__link:nth-child(3) { animation-delay: .12s; } .drawer__link:nth-child(4) { animation-delay: .16s; } .drawer__link:nth-child(5) { animation-delay: .20s; } .drawer__link:nth-child(6) { animation-delay: .24s; } .drawer__link:nth-child(7) { animation-delay: .28s; } @keyframes drawer-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .btn .ico { transition: transform var(--dur) var(--ease); } .btn--solid:hover .ico, .btn--brass:hover .ico { transform: translateX(2px); } /* --- Magnetic buttons ----------------------------------------------------- */ .magnetic { will-change: transform; } .magnetic > span { display: inline-flex; align-items: center; gap: .55rem; will-change: transform; } /* --- Reduced motion ------------------------------------------------------- Kill everything. motion.js reads the same query via gsap.matchMedia() and skips pinning, scrubbing, counters, cursor and ambient drift. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js [data-anim], .js .hero__title .w > span, .drawer__link { opacity: 1 !important; transform: none !important; } .intro, .cursor, .cursor-ring { display: none !important; } .track { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); transform: none !important; } .track .step { flex: none; } }