/* ========================================================================== ANIMATIONS Keyframes and motion accents layered on top of components/layout. ========================================================================== */ /* ---- hero entrance (plays once on load, staggered via inline delay) ---- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.9s var(--ease-out) both; } /* ---- ambient cursor glow inside the hero (desktop only, disabled by JS on touch) ---- */ .hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at var(--glow-x, 50%) var(--glow-y, 20%), rgba(34,224,255,0.10), transparent 70%); transition: background 0.2s var(--ease-out); } /* ---- floating idle motion for the stacked mock windows ---- */ @keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } } .mock-1 { --r: -6deg; animation: floatSlow 7s ease-in-out infinite; } .mock-2 { --r: 5deg; animation: floatSlow 8s ease-in-out infinite 0.4s; } .mock-3 { --r: -2deg; animation: floatSlow 6.5s ease-in-out infinite 0.8s; } /* ---- soft pulse for the eyebrow dot ---- */ @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,224,255,0.5); } 50% { box-shadow: 0 0 0 5px rgba(34,224,255,0); } } .eyebrow::before { animation: pulseDot 2.4s ease-in-out infinite; } /* ---- number count-up target (JS toggles .counted to trigger via class swap) ---- */ .stat-item strong { font-variant-numeric: tabular-nums; } /* ---- custom cursor: a small dot plus a trailing ring, desktop only ---- js/cursor.js injects these two elements and adds .has-custom-cursor to only on fine-pointer devices, so touch and no-JS visitors keep the native cursor untouched. */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; border-radius: 50%; transition: opacity 0.25s ease; will-change: transform; } .cursor-dot { width: 8px; height: 8px; background: var(--color-accent); transform: translate3d(-100px, -100px, 0) translate(-50%, -50%); } .cursor-ring { width: 34px; height: 34px; border: 1.5px solid var(--color-accent); transform: translate3d(-100px, -100px, 0) translate(-50%, -50%); transition: opacity 0.25s ease, width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .cursor-ring.is-active { width: 56px; height: 56px; background: rgba(34, 224, 255, 0.12); } .cursor-ring.is-down { width: 28px; height: 28px; } html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor .btn, html.has-custom-cursor input, html.has-custom-cursor textarea, html.has-custom-cursor select, html.has-custom-cursor [role="button"] { cursor: none; }