injected near top. ============================================================ */ .ambient { position: fixed; inset: 0; z-index: -1; /* behind content, above the body fill */ pointer-events: none; overflow: hidden; contain: strict; /* isolate layout/paint — perf guard */ animation: aurora-hue 34s var(--ease-in-out) infinite; } /* Each bloom layer is oversized + centred so rotation never exposes a corner. Heavy blur fuses the blooms into soft light. */ .ambient__layer { position: absolute; inset: -55%; border-radius: 50%; filter: blur(72px); will-change: transform; } .ambient__layer--a { background: radial-gradient(28% 30% at 30% 32%, rgba(26, 58, 143, 0.55), transparent 70%), radial-gradient(24% 26% at 72% 64%, rgba(201, 169, 110, 0.34), transparent 72%), radial-gradient(20% 22% at 56% 18%, rgba(79, 140, 255, 0.30), transparent 70%); opacity: 0.55; animation: aurora-spin-cw 52s linear infinite; } .ambient__layer--b { background: radial-gradient(26% 28% at 68% 30%, rgba(79, 140, 255, 0.40), transparent 70%), radial-gradient(30% 32% at 24% 70%, rgba(26, 58, 143, 0.45), transparent 72%), radial-gradient(18% 20% at 50% 88%, rgba(201, 169, 110, 0.26), transparent 70%); opacity: 0.5; mix-blend-mode: screen; animation: aurora-spin-ccw 68s linear infinite; } /* Faint moving film grain — the "quase invisível" refinement layer */ .ambient__grain { position: absolute; inset: -20%; background-image: var(--grain-tex); background-size: 180px 180px; opacity: 0.035; animation: grain-shift 8s steps(6) infinite; } /* Lighter theme: pull the blooms back so the page stays clean */ [data-theme="light"] .ambient__layer--a { opacity: 0.3; } [data-theme="light"] .ambient__layer--b { opacity: 0.26; } [data-theme="light"] .ambient__grain { opacity: 0.045; } @keyframes aurora-spin-cw { to { transform: rotate(360deg); } } @keyframes aurora-spin-ccw { to { transform: rotate(-360deg); } } /* Slow colour breath — gentle ±10deg shift over a long cycle */ @keyframes aurora-hue { 0%, 100% { filter: hue-rotate(-9deg); } 50% { filter: hue-rotate(11deg); } } @keyframes grain-shift { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-12%, 9%, 0); } } /* ============================================================ REVEAL ON SCROLL ============================================================ */ /* ============================================================ SCROLL REVEAL — opacity + lift + blur clearing. power3-style ease-out (cubic-bezier below) for a confident, premium settle. Children of [data-reveal-stagger] cascade. ============================================================ */ [data-reveal] { opacity: 0; transform: translateY(22px); filter: blur(8px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform, filter; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); filter: blur(0); } /* Stagger — children of [data-reveal-stagger] get sequential delays */ [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--stagger-i, 0) * 95ms); will-change: opacity, transform, filter; } [data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); filter: blur(0); } /* Once revealed, drop will-change so the compositor can reclaim memory */ [data-reveal].is-revealed, [data-reveal-stagger].is-revealed > * { will-change: auto; } /* Reduced motion override (defense in depth) */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .hero__orb { animation: none !important; } .ambient { animation: none !important; } .ambient__layer, .ambient__grain { animation: none !important; } .marquee__track { animation: none !important; } .btn--pulse { animation: none !important; } .wa-float::before { animation: none !important; } .hero__scroll svg { animation: none !important; } .cursor-glow { display: none !important; } [data-float] { animation: none !important; } } /* ============================================================ TIER 2/3 EFFECT STYLES Pointer-driven effects are positioned/styled here; their motion is driven by JS (effects.js). All are desktop + fine-pointer only — hidden or inert on touch via the media queries below. ============================================================ */ /* ---------- CURSOR GLOW — soft dark-mode spotlight ---------- */ .cursor-glow { position: fixed; top: 0; left: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; /* centre on the pointer */ border-radius: 50%; z-index: 500; /* above content, below header/menu/chrome */ pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease-out); background: radial-gradient( circle, color-mix(in srgb, var(--brand-accent) 16%, transparent) 0%, transparent 62% ); will-change: transform, opacity; } .cursor-glow.is-active { opacity: 1; } /* Lighter theme: the spotlight would wash out — keep it very faint */ [data-theme="light"] .cursor-glow { background: radial-gradient( circle, color-mix(in srgb, var(--brand-primary) 9%, transparent) 0%, transparent 62% ); } /* Touch / coarse pointers never get the glow */ @media (hover: none), (pointer: coarse) { .cursor-glow { display: none !important; } } /* ---------- MAGNETIC BUTTONS ---------- */ /* The translate is applied inline by JS; this just smooths the return-to-rest and lifts the label so it tracks with the pull. */ [data-magnetic] { will-change: transform; } [data-magnetic] .btn__label, [data-magnetic] svg { transition: transform 0.2s var(--ease-out); } @media (hover: none), (pointer: coarse) { [data-magnetic] { transform: none !important; } } /* ---------- FLOATING ELEMENTS ---------- */ /* Gentle vertical drift for small accent elements (badges, icons). Opt-in via [data-float]; staggered so a row never bobs in unison. */ [data-float] { animation: float-soft 6s var(--ease-in-out) infinite; } [data-float="2"] { animation-duration: 7.5s; animation-delay: -2s; } [data-float="3"] { animation-duration: 6.8s; animation-delay: -4s; } @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ---------- BLOB — organic drifting background shape ---------- */ /* The hero orbs gain a slow border-radius morph (declared in sections.css alongside their drift) so the round glows read as living, organic blobs. Pure CSS, GPU-friendly. */ @keyframes blob-morph { 0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; } 33% { border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%; } 66% { border-radius: 40% 60% 46% 54% / 60% 42% 58% 40%; } }