/* ============================================================================= NETZERO AQUA — MOTION LAYER ============================================================================= Companion sheet to js/na-motion.js. Loaded last on the marketing pages, after na-mobile.css, because a couple of rules here deliberately win. THE ONE RULE THIS FILE KEEPS --------------------------- Nothing in here hides content. There is no `opacity: 0` on a real element, no `visibility: hidden`, no off-screen transform waiting for JavaScript to undo it. Every animation in na-motion.js is written as `gsap.from()`, which means the resting state is the state the CSS already describes: a visitor whose JavaScript fails, whose connection dropped the vendor bundle, or who is reading through a crawler sees the finished page, not an empty column. That is the same contract js/na-site.js already kept with its IntersectionObserver reveals, and breaking it here would undo it. WHAT IS ACTUALLY IN THIS FILE ----------------------------- Three kinds of rule, and nothing else: 1. Containment and hinting — `will-change`, `transform-style`, the `overflow: hidden` that a masked line reveal needs. Cheap, inert, no visual effect on their own. 2. The page-transition curtain, which is an element JS creates and which therefore cannot exist before JS runs. 3. Hover affordances that GSAP drives on a pointer device and CSS keeps on a touch device, so the two never fight over the same property. PREFIX ------ `na-` like the rest of the marketing system. Nothing here may appear in the logged-in shells (`nz-`, `shell-`). ========================================================================== */ /* ============================================================================= 1 — MASKED LINE REVEAL ----------------------------------------------------------------------------- SplitText's `mask: "lines"` wraps each line in a clipping element. The clip is what makes a headline rise out of nothing rather than fade in place — the difference between "an animation happened" and "the sentence arrived". These rules only ever apply to elements SplitText created, so they are inert until GSAP has run. ========================================================================== */ .na-split-line { display: block; overflow: hidden; /* A descender clipped flat is the giveaway that text is being masked. The padding gives the line somewhere to put its tails. */ padding-bottom: 0.08em; margin-bottom: -0.08em; } .na-split-line > * { display: block; will-change: transform; } /* ============================================================================= 2 — TRANSFORM HINTS ----------------------------------------------------------------------------- Promotion is expensive: every hinted element gets its own compositor layer and its own slice of memory. So this is a short list, applied only to things that are genuinely animated on a scrub — where a mid-animation promotion would show as a hitch — and removed by JS once a one-shot has finished. ========================================================================== */ .na-hero__media img, .na-hero__grid { will-change: transform; } /* The dashboard mock is one composited unit while it drifts, so the sixteen pond tiles and three panes inside it are not each promoted separately. */ .na-dash { transform: translateZ(0); } /* ============================================================================= 3 — THE PAGE-TRANSITION CURTAIN ----------------------------------------------------------------------------- A single navy panel that wipes up over the page before an internal navigation commits. It exists because the alternative on a static multi-page site is a white flash between two dark pages. Created by JS, so `display: none` here would be a lie — it simply is not in the DOM until na-motion.js puts it there. It starts at scaleY(0) and is pointer-transparent so it can never swallow a click if a tween is interrupted. ========================================================================== */ .na-curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; transform: scaleY(0); transform-origin: 50% 100%; background: radial-gradient(120% 90% at 50% 100%, #0A3A5C 0%, transparent 60%), linear-gradient(to top, #00243C 0%, #001830 100%); } /* The mark rides the curtain so the covered moment reads as the brand rather than as a loading state. Opacity is driven by GSAP. */ .na-curtain__mark { position: absolute; left: 50%; top: 50%; width: 132px; height: auto; transform: translate(-50%, -50%); opacity: 0; } /* ============================================================================= 4 — POINTER AFFORDANCES ----------------------------------------------------------------------------- GSAP owns `transform` on these elements while a fine pointer is present. The existing CSS `transition: transform` on buttons and cards would fight it — two engines writing the same property, forty times a second — so the transition is dropped for exactly the elements JS has claimed. `.na-magnetic` is added by JS, and only inside a `(pointer: fine)` and `(min-width: 1024px)` matchMedia context. On a phone none of this exists and the original CSS hover/active states are untouched. ========================================================================== */ .na-magnetic { transition: none !important; will-change: transform; } /* The arrow inside a magnetic button still wants its own CSS transition — GSAP is moving the button, not the glyph. */ .na-magnetic .na-btn__arrow { transition: transform var(--na-normal) var(--na-ease) !important; } /* A card JS has taken over for the lift-on-hover. Same reasoning. */ .na-lift { transition: box-shadow var(--na-normal) var(--na-ease) !important; } /* ============================================================================= 5 — REDUCED MOTION ----------------------------------------------------------------------------- js/na-motion.js already routes every tween through gsap.matchMedia() and renders the final state instead of animating it. This block is the belt to that braces: if the JS ever regressed, these rules alone would still leave a reduced-motion visitor with a page that does not move. Note what is NOT here: no `animation: none !important` on everything. Reduced motion means remove the vestibular trigger, not remove the feedback — a button that no longer responds to being pressed is a worse page, not a more accessible one. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .na-split-line, .na-split-line > * { will-change: auto; transform: none !important; } .na-hero__media img, .na-hero__grid { will-change: auto; transform: none !important; } /* The curtain never runs under reduced motion; JS skips it. Should one ever be left in the DOM, this keeps it out of the way for good. */ .na-curtain { display: none !important; } .na-magnetic { transform: none !important; } }