/* ============================================================ ZUVINTEL — ANIMATIONS File: assets/css/animations.css Keyframes · scroll-reveal · custom cursor · motion preferences ============================================================ */ /* ─── KEYFRAMES ─── */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } @keyframes float-particle { 0% { transform: translateY(0) translateX(0); opacity: 0; } 20% { opacity: 0.8; } 80% { opacity: 0.4; } 100% { transform: translateY(-200px) translateX(60px); opacity: 0; } } /* Ken Burns — a slow, soft zoom-drift that makes still imagery feel like a premium video background. Two directions alternate so consecutive slides never move the same way. */ @keyframes kenburns-a { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.11) translate(-1.4%, -1%); } } @keyframes kenburns-b { 0% { transform: scale(1.11) translate(1.2%, 0.8%); } 100% { transform: scale(1.02) translate(0, 0); } } /* ─── ANIMATED ELEMENT BINDINGS ─── */ .hero-badge-dot { animation: pulse 2s infinite; } /* ─── HERO CINEMATIC SLIDER ─── */ /* Long, gentle crossfade — no abrupt transitions */ .hero-slide { transition: opacity 2.2s ease-in-out, visibility 0s linear 2.2s; } .hero-slide.is-active { transition: opacity 2.2s ease-in-out; } /* Ken Burns runs continuously on every slide (not only the active one) so the drift never snaps back mid-crossfade. Alternating directions + durations keep consecutive slides visually distinct. */ .hero-slide img { will-change: transform; animation: kenburns-a 28s ease-in-out infinite alternate; } .hero-slide:nth-of-type(even) img { animation-name: kenburns-b; animation-duration: 34s; } /* ─── TEAM BANNER — continuous marquee ─── */ /* Track holds two identical card sets; scrolling exactly one set-width (-50%) makes the loop seamless regardless of viewport width. Pauses on hover/focus so a visitor can read a caption. */ @keyframes team-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .team-banner-track { animation: team-marquee 42s linear infinite; } .team-banner-track:hover, .team-banner-track:focus-within { animation-play-state: paused; } .particle { position: absolute; width: 2px; height: 2px; background: var(--gold); border-radius: 50%; animation: float-particle linear infinite; opacity: 0; } /* ─── SCROLL REVEAL ─── */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* No-JS safety net: if JS never runs, content must not stay hidden. navigation.js adds .js-enabled to on load. */ html:not(.js-enabled) .reveal { opacity: 1; transform: none; } /* ─── CUSTOM CURSOR ─── */ /* Only replace the native cursor on precise pointers (desktop mouse). */ .cursor-dot, .cursor-ring { display: none; } @media (hover: hover) and (pointer: fine) { body.custom-cursor-active { cursor: none; } body.custom-cursor-active a, body.custom-cursor-active button, body.custom-cursor-active [role="button"], body.custom-cursor-active input, body.custom-cursor-active select, body.custom-cursor-active textarea, body.custom-cursor-active label { cursor: none; } body.custom-cursor-active .cursor-dot, body.custom-cursor-active .cursor-ring { display: block; } .cursor-dot { width: 8px; height: 8px; background: var(--gold); border-radius: 50%; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; } .cursor-ring { width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%; position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, border-color 0.3s; opacity: 0.6; pointer-events: none; z-index: 9999; } body.cursor-hover .cursor-ring { width: 56px; height: 56px; border-color: var(--gold-light); opacity: 1; } } /* ─── REDUCED MOTION ─── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .particle, .hero-particles { display: none; } body.custom-cursor-active { cursor: auto; } body.custom-cursor-active .cursor-dot, body.custom-cursor-active .cursor-ring { display: none; } }