/** * Scroll-reveal + ambient animation utilities. * Driven by assets/js/animations.js (IntersectionObserver). * Always GPU-composited (transform/opacity only) and fully disabled * under prefers-reduced-motion via variables.css. */ /* ---- Scroll reveal (add .visible via animations.js) ---- */ /* Hidden state is gated on html.js-anim (set by a tiny inline script in the page ) so content never gets stuck invisible if the animation script fails to load. */ html.js-anim .fade-up, html.js-anim .fade-in, html.js-anim .scale-in { opacity: 0; will-change: opacity, transform; } html.js-anim .fade-up { transform: translateY(30px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); } html.js-anim .fade-in { transition: opacity 0.5s ease; } html.js-anim .scale-in { transform: scale(0.95); transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo); } html.js-anim .fade-up.visible, html.js-anim .fade-in.visible, html.js-anim .scale-in.visible { opacity: 1; } html.js-anim .fade-up.visible { transform: translateY(0); } html.js-anim .scale-in.visible { transform: scale(1); } /* Stagger helpers — pair with .fade-up etc. */ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } .stagger-5 { transition-delay: 0.5s; } .stagger-6 { transition-delay: 0.6s; } /* ---- Hero text reveal (lines slide up out of a clipped parent) ---- */ .tr-mask { display: block; overflow: hidden; } .tr-line { display: block; transform: translateY(110%); animation: tr-up 0.7s var(--ease-out-expo) forwards; animation-delay: var(--tr-delay, 0.15s); } @keyframes tr-up { to { transform: translateY(0); } } /* ---- Shimmer sweep (add .btn-shimmer to any .btn) ---- */ @keyframes shimmer { 0% { transform: translateX(-150%) skewX(-20deg); } 55%, 100% { transform: translateX(350%) skewX(-20deg); } } .btn-shimmer::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent); pointer-events: none; animation: shimmer 4s ease-in-out infinite; } /* ---- Gentle float (floating UI cards etc.) ---- */ @keyframes float-y { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } } .float-animation { animation: float-y 3s ease-in-out infinite; } /* ---- Live pulse dot ("12 bookings today") ---- */ @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } } .live-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--zov-green, #10b981); animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0; } /* ---- Animated gradient mesh blobs (hero background) ---- */ .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; pointer-events: none; z-index: 0; animation: blob-drift 12s ease-in-out infinite alternate; } /* Tuned for the dark emerald hero (.mkt-hero) they sit on — amber is the lead accent per the brand's gold identity, teal/green add depth without competing with the white headline text. */ .blob-1 { width: 620px; height: 620px; top: -180px; left: -140px; background: var(--color-gold); opacity: 0.16; } .blob-2 { width: 560px; height: 560px; bottom: -220px; right: -120px; background: var(--zov-teal, #14b8a6); opacity: 0.16; animation-delay: -4s; } .blob-3 { width: 420px; height: 420px; top: 30%; left: 55%; background: var(--zov-green, #10b981); opacity: 0.14; animation-delay: -8s; } @keyframes blob-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.12); } 100% { transform: translate(-50px, 30px) scale(0.94); } } /* ---- Pulse ring (WhatsApp float button) ---- */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } @keyframes bounce-in { 0% { opacity: 0; transform: scale(0.3); } 55% { opacity: 1; transform: scale(1.08); } 75% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } } /* ---- Misc ---- */ .count-up { font-variant-numeric: tabular-nums; }