/* ========================================================================== RAW CGI — motion.css Animation layer. Pure CSS + hooks added by motion.js. No libraries. Everything is gated behind html.js (added inline in ) so a no-JS visit sees a fully static, fully visible page. All movement is disabled under prefers-reduced-motion. Sections: 1 Entrance · 2 Line masks · 3 Stagger · 4 Playhead 5 Parallax & hover · 6 Marquee · 7 Spotlight · 8 Reduced motion ========================================================================== */ /* 1 — PAGE ENTRANCE ------------------------------------------------------ */ /* Runs once on load. Elements are hidden only when JS is present, then animated in with staggered delays. */ .js .nav { animation: fx-nav 0.7s var(--ease) both; } @keyframes fx-nav { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .js .hero .eyebrow, .js .hero .lede, .js .hero .btn-row, .js .hero__meta, .js .hero .media--hero { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .js.fx-ready .hero .eyebrow, .js.fx-ready .hero .lede, .js.fx-ready .hero .btn-row, .js.fx-ready .hero__meta, .js.fx-ready .hero .media--hero { opacity: 1; transform: translateY(0); } .js.fx-ready .hero .eyebrow { transition-delay: 0.15s; } .js.fx-ready .hero .lede { transition-delay: 0.55s; } .js.fx-ready .hero .btn-row { transition-delay: 0.7s; } .js.fx-ready .hero__meta { transition-delay: 0.85s; } .js.fx-ready .hero .media--hero { transition-delay: 0.95s; } /* The hero media frame also eases its scale in for a settle effect. */ .js .hero .media--hero { transform: translateY(34px) scale(0.985); } .js.fx-ready .hero .media--hero { transform: translateY(0) scale(1); } /* 2 — LINE-MASK HEADLINES ------------------------------------------------ */ /* motion.js wraps each line of a .display heading in an .fx-line mask with an .fx-line__inner that slides up into view. */ .fx-line { display: block; overflow: hidden; } .fx-line__inner { display: block; transform: translateY(112%); transition: transform 0.9s var(--ease); } .fx-lines.is-in .fx-line__inner { transform: translateY(0); } .fx-lines .fx-line:nth-child(1) .fx-line__inner { transition-delay: 0.05s; } .fx-lines .fx-line:nth-child(2) .fx-line__inner { transition-delay: 0.17s; } .fx-lines .fx-line:nth-child(3) .fx-line__inner { transition-delay: 0.29s; } /* Headline masks make the old opacity reveal redundant on the same node. */ .js .fx-lines.reveal { opacity: 1; transform: none; } /* 3 — STAGGERED GROUP REVEALS ------------------------------------------- */ /* motion.js marks children of [data-stagger] groups (product specs, roadmap rows, tag lists…) and reveals them with incremental delays. */ .js .fx-item { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); transition-delay: var(--fx-d, 0s); } .js .fx-item.is-in { opacity: 1; transform: translateY(0); } /* 4 — HERO PLAYHEAD ------------------------------------------------------ */ /* A sequencer-style playhead sweeps the hero timeline while the frame counter runs 0000 → 0143. Built by motion.js inside .media__track. */ .media__track { position: relative; overflow: hidden; } .fx-playbar { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient( to right, rgba(77, 163, 255, 0.12), rgba(77, 163, 255, 0.55) ); } .fx-playbar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(77, 163, 255, 0.9); } /* Blinking record-style dot in the media bar. */ .fx-live .media__dots i:first-child { animation: fx-blink 1.2s steps(2, start) infinite; } @keyframes fx-blink { to { visibility: hidden; } } /* 5 — PARALLAX & HOVER MICRO-INTERACTIONS -------------------------------- */ .js .fx-parallax .media__img { will-change: transform; transform: translateY(var(--fx-py, 0px)) scale(1.06); } /* Media frames: slow zoom settle on hover. */ .media__stage { overflow: hidden; } .media__stage img.media__img { transition: transform 1.1s var(--ease); } .media:hover .media__stage img.media__img { transform: scale(1.025); } .fx-parallax:hover .media__stage img.media__img { transform: translateY(var(--fx-py, 0px)) scale(1.08); } /* Interface recordings stay at a true 1:1 CSS scale. Enlarging them makes text softer and can crop controls near the frame edge. */ .media__stage video.media__img, .media:hover .media__stage video.media__img { transform: none; transition: none; will-change: auto; } /* Buttons: sheen sweep. */ .btn { position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, 0.16), transparent ); transform: skewX(-18deg); transition: left 0.6s var(--ease); pointer-events: none; } .btn:hover::before { left: 130%; } /* Roadmap rows nudge right on hover. */ .roadmap__row { transition: background 0.3s var(--ease), padding-left 0.3s var(--ease); } /* 6 — FORMAT MARQUEE ----------------------------------------------------- */ /* motion.js duplicates the [data-marquee] content for a seamless loop. */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } .marquee__inner { display: flex; width: max-content; gap: 56px; animation: fx-marquee 36s linear infinite; } .marquee:hover .marquee__inner { animation-play-state: paused; } .marquee__inner span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .marquee__inner span em { font-style: normal; color: var(--accent); } @keyframes fx-marquee { to { transform: translateX(-50%); } } /* 7 — HERO SPOTLIGHT ----------------------------------------------------- */ /* Subtle accent glow that follows a fine pointer across the hero. */ .js .hero { position: relative; } .js .fx-spot .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 640px circle at var(--fx-mx, 50%) var(--fx-my, 30%), rgba(77, 163, 255, 0.06), transparent 65% ); } /* 8 — REDUCED MOTION ------------------------------------------------------ */ /* Kill every effect: content is immediately visible and static. */ @media (prefers-reduced-motion: reduce) { .js .nav { animation: none; } .js .hero .eyebrow, .js .hero .lede, .js .hero .btn-row, .js .hero__meta, .js .hero .media--hero, .js .fx-item { opacity: 1; transform: none; transition: none; } .fx-line__inner { transform: none; transition: none; } .fx-playbar { display: none; } .fx-live .media__dots i:first-child { animation: none; } .js .fx-parallax .media__img, .media__stage .media__img, .media:hover .media__stage .media__img { transform: none; transition: none; } .btn::before { display: none; } .marquee__inner { animation: none; } .js .fx-spot .hero::after { display: none; } }