/* ========================================================================== animations.css — All motion lives here. Rule of the house: motion explains hierarchy, it never decorates. No neon, no glow, no infinite pulsing. Every effect has an exit. ========================================================================== */ /* -------------------------------------------------------------------------- 1. WELCOME OVERLAY (multilingual greeting, runs once per session) welcome.js adds .is-leaving, then removes the node entirely. -------------------------------------------------------------------------- */ .welcome-overlay { position: fixed; inset: 0; z-index: var(--z-welcome); display: grid; place-items: center; background: var(--text); color: var(--bg); } .welcome-word { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: var(--sp-3); } .welcome-word::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* Curtain wipe upward on exit */ .welcome-overlay.is-leaving { animation: welcome-wipe 640ms var(--ease-out) forwards; } .welcome-overlay.is-leaving .welcome-word { animation: welcome-word-out 300ms var(--ease-out) forwards; } @keyframes welcome-wipe { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 8vh 8vh; } } @keyframes welcome-word-out { to { opacity: 0; transform: translateY(-24px); } } /* -------------------------------------------------------------------------- 2. SCROLL REVEALS scroll.js observes [data-reveal] and adds .in-view. Variants: fade-up (default) | fade | left | right | scale Stagger children with [data-reveal-stagger] on the parent. -------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-36px); } [data-reveal="right"] { transform: translateX(36px); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal].in-view { opacity: 1; transform: none; } /* Stagger: children inherit reveal, parent controls rhythm */ [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal-stagger].in-view > * { opacity: 1; transform: none; } [data-reveal-stagger].in-view > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].in-view > *:nth-child(2) { transition-delay: 90ms; } [data-reveal-stagger].in-view > *:nth-child(3) { transition-delay: 180ms; } [data-reveal-stagger].in-view > *:nth-child(4) { transition-delay: 270ms; } [data-reveal-stagger].in-view > *:nth-child(5) { transition-delay: 360ms; } [data-reveal-stagger].in-view > *:nth-child(6) { transition-delay: 450ms; } /* -------------------------------------------------------------------------- 3. HERO ENTRANCE (plays once after welcome overlay exits) welcome.js adds .hero-ready to ; elements opt in via .hero-anim with inline --d (delay) custom property. -------------------------------------------------------------------------- */ .hero-anim { opacity: 0; transform: translateY(30px); } .hero-ready .hero-anim { animation: hero-in 800ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); } @keyframes hero-in { to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 4. TECH MARQUEE — pure CSS infinite scroll. HTML duplicates the row once (aria-hidden on the clone). No JS needed. Pauses on hover/focus so items stay readable and clickable. -------------------------------------------------------------------------- */ .marquee { overflow: hidden; mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } .marquee-track { display: flex; gap: var(--sp-4); width: max-content; animation: marquee-scroll 36s linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { to { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 5. MICRO-INTERACTIONS -------------------------------------------------------------------------- */ /* Availability dot — gentle ring, not a neon pulse */ .dot-live { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } .dot-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ok); animation: dot-ring 2.4s var(--ease-out) infinite; } @keyframes dot-ring { 0% { transform: scale(0.5); opacity: 0.8; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } /* Link underline draw */ .link-draw { position: relative; } .link-draw::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out); } .link-draw:hover::after, .link-draw:focus-visible::after { transform: scaleX(1); transform-origin: left; } /* Arrow nudge on buttons/links containing .arrow */ .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); } a:hover .arrow, button:hover .arrow { transform: translate(3px, -3px); } /* Counter tick (stats.js toggles while counting) */ .is-counting { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 6. 3D TILT SURFACES (tilt.js drives the custom properties) Cards opt in with [data-tilt]. JS only writes --rx / --ry / --tz. -------------------------------------------------------------------------- */ [data-tilt] { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--dur-base) var(--ease-out); will-change: transform; } [data-tilt] .tilt-raise { transform: translateZ(var(--tz, 0px)); transition: transform var(--dur-base) var(--ease-out); } /* -------------------------------------------------------------------------- 7. SCROLL PROGRESS BAR (scroll.js writes --progress 0→1) -------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: calc(var(--z-header) + 1); width: 100%; height: 2px; background: var(--accent); transform: scaleX(var(--progress, 0)); transform-origin: left; pointer-events: none; } /* -------------------------------------------------------------------------- 8. MODAL MOTION (modals.js toggles .open) -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); background: rgba(20, 17, 14, 0.55); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .modal.open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out); } .modal-panel { transform: translateY(24px) scale(0.97); transition: transform var(--dur-base) var(--ease-snap); } .modal.open .modal-panel { transform: none; } /* -------------------------------------------------------------------------- 9. REDUCED MOTION — hard overrides for this file's effects -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > *, .hero-anim { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .marquee-track { animation: none; flex-wrap: wrap; width: 100%; } .dot-live::after { animation: none; opacity: 0; } [data-tilt], [data-tilt] .tilt-raise { transform: none !important; } .welcome-overlay { display: none; } }