/* ════════════════════════════════════════════════════════════════════════ VENGEANCE MOTION SYSTEM Shared animation/interaction toolkit for all marketing pages. Pairs with /assets/motion.js — include both on every page. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } body { animation: none !important; } .mesh-blob { animation: none !important; } .cursor-dot, .cursor-ring { display: none !important; } [data-reveal] { transform: none !important; transition: opacity .35s ease !important; } .fade-up { transform: none !important; transition: opacity .35s ease !important; } } /* ─── INTRO / SPLASH ───────────────────────────────────────────────────── Injected by motion.js on every page load: a black overlay with the logo pulsing in the center, which then morphs/shrinks into the nav logo's position while the overlay fades away. */ .intro-overlay{position:fixed;inset:0;z-index:3000;background:#000; display:flex;align-items:center;justify-content:center;opacity:1; transition:opacity 1.4s ease} .intro-overlay.hide{opacity:0;pointer-events:none} .intro-logo{width:84px;height:84px;border-radius:50%;object-fit:cover;opacity:1; will-change:transform,opacity;animation:intro-pulse 3.6s ease-in-out infinite; transition:transform 2s cubic-bezier(.16,1,.3,1),opacity 1.2s ease; box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 50px 16px rgba(255,255,255,.35)} .intro-logo.morph{animation:none;opacity:0} @keyframes intro-pulse{ 0%,100%{transform:scale(1);box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 50px 16px rgba(255,255,255,.35)} 50%{transform:scale(1.18);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 85px 26px rgba(255,255,255,.55)} } /* ─── SCROLL PROGRESS BAR ──────────────────────────────────────────────── */ .scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:1000; background:var(--grad);box-shadow:0 0 12px var(--red-glow,rgba(16,185,129,.4)); transition:width .08s linear;pointer-events:none} /* ─── CUSTOM CURSOR (desktop only — toggled via .has-cursor on ) ──── */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:999; border-radius:50%;transform:translate(-50%,-50%);will-change:transform;opacity:0; transition:opacity .25s ease} .cursor-dot{width:6px;height:6px;background:var(--red);} .cursor-ring{width:36px;height:36px;border:1.5px solid rgba(16,185,129,.45); transition:opacity .25s ease,width .25s cubic-bezier(.16,1,.3,1),height .25s cubic-bezier(.16,1,.3,1), border-color .25s ease,background .25s ease} .has-cursor .cursor-dot,.has-cursor .cursor-ring{opacity:1} .has-cursor.cursor-hover .cursor-ring{width:60px;height:60px;border-color:var(--red); background:var(--red-dim,rgba(16,185,129,.12))} .has-cursor.cursor-hover .cursor-dot{opacity:0} @media (pointer:coarse){.cursor-dot,.cursor-ring{display:none}} /* ─── REVEAL ON SCROLL ────────────────────────────────────────────────── Add data-reveal (fade-up), data-reveal="left" / "right" / "scale" / "zoom" Add data-stagger to a parent to auto-stagger direct children by 70ms */ [data-reveal]{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); transition-delay:var(--rd,0ms)} [data-reveal=""],[data-reveal="up"]{transform:translateY(28px)} [data-reveal="left"]{transform:translateX(-32px)} [data-reveal="right"]{transform:translateX(32px)} [data-reveal="scale"]{transform:scale(.92);transform-origin:center} [data-reveal="zoom"]{transform:scale(1.08)} [data-reveal].in-view{opacity:1;transform:none} /* ─── MAGNETIC BUTTONS ────────────────────────────────────────────────── Add class "magnetic" — JS applies a transform on mousemove */ .magnetic{transition:transform .25s cubic-bezier(.16,1,.3,1)} /* ─── TILT CARDS ──────────────────────────────────────────────────────── Add class "tilt" — JS applies perspective rotation on mousemove */ .tilt{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease} .tilt:hover{box-shadow:0 20px 60px -20px rgba(0,0,0,.6)} @media (pointer:fine){ .tilt{transform-style:preserve-3d;will-change:transform} } /* ─── BUTTON SHINE SWEEP ──────────────────────────────────────────────── Add class "shine" to any button/anchor */ .shine{position:relative;overflow:hidden;isolation:isolate} .shine::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%); transform:translateX(-120%);transition:transform .7s cubic-bezier(.16,1,.3,1)} .shine:hover::after{transform:translateX(120%)} /* ─── ANIMATED GRADIENT MESH BLOBS ────────────────────────────────────── Drop
etc inside a relatively- positioned ancestor with overflow hidden */ .mesh-blob{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none; mix-blend-mode:screen;will-change:transform,opacity} .mesh-1{animation:mesh-drift-1 22s ease-in-out infinite} .mesh-2{animation:mesh-drift-2 26s ease-in-out infinite} .mesh-3{animation:mesh-drift-3 18s ease-in-out infinite} @keyframes mesh-drift-1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6%,-8%) scale(1.08)}66%{transform:translate(-4%,5%) scale(.96)}} @keyframes mesh-drift-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8%,6%) scale(1.1)}} @keyframes mesh-drift-3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-46%,-54%) scale(1.12)}} /* ─── LIFT / GLOW HOVER UTILITIES ───────────────────────────────────────*/ .lift{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease} .lift:hover{transform:translateY(-6px)} /* ─── PAGE LOAD FADE ─────────────────────────────────────────────────────*/ body{animation:page-in .6s cubic-bezier(.16,1,.3,1) both} @keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ─── ANIMATED UNDERLINE LINKS ──────────────────────────────────────────*/ .underline-grow{position:relative} .underline-grow::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px; background:var(--grad);transition:width .35s cubic-bezier(.16,1,.3,1)} .underline-grow:hover::after{width:100%} /* ─── MARQUEE / TICKER ──────────────────────────────────────────────────*/ .marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:48px;flex-shrink:0;animation:marquee-scroll 32s linear infinite;padding-right:48px} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ─── SHIMMER LOADING / SKELETON ────────────────────────────────────────*/ @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} /* ─── TOUCH TAP FEEDBACK (mobile/coarse pointers) ─────────────────────── Since hover/tilt/magnetic don't make sense on touchscreens, give cards and buttons a quick press-down scale on tap instead. */ @media (pointer: coarse) { .tilt, .magnetic, .cmd-card, .feat-card, .stat-card, .mini-stat, .overall-card, .cta-card, .btn-primary, .btn-ghost, .btn-secondary, .cat-btn, .copy-btn { -webkit-tap-highlight-color: transparent; transition: transform .15s cubic-bezier(.4,0,.2,1); } .tilt:active, .magnetic:active, .cmd-card:active, .feat-card:active, .stat-card:active, .mini-stat:active, .overall-card:active, .cta-card:active, .btn-primary:active, .btn-ghost:active, .btn-secondary:active, .cat-btn:active, .copy-btn:active { transform: scale(.96); } }