/** * Premium Experience Layer (Phase 2.14, docs/DECISIONS.md ADR-034). * * Lightweight CSS-first animation system: scroll-reveal, hover-lift, * floating elements, counters, ripple, tilt, and a light parallax hook. * No animation library, no GSAP, no Lottie — every effect below is a * plain CSS transition/keyframe, optionally driven by a small amount of * vanilla JS (assets/js/animations.js) that only ever toggles a class or * sets a CSS custom property, never animates layout properties directly. * * Reduced motion: assets/css/accessibility.css already forces every * animation/transition duration to 0.01ms under * `prefers-reduced-motion: reduce` — every rule below inherits that * override for free. `.js` scroll-reveal is additionally short-circuited * in JS under reduced motion (content is marked visible immediately, * never gated on a scroll position) — see animations.js. * * Progressive enhancement: every `.u-reveal`/`.u-fade-*`/`.u-scale-*` * class is only hidden-by-default when the `.js` class exists on * `` (added by a tiny inline snippet in header.php *before* any * CSS paints — see that file). No-JS visitors, and any visitor whose * script failed to load, always see full content, never a blank section. */ /* ---------- Scroll-reveal entrance animations ---------- */ .js .u-reveal, .js .u-fade-up, .js .u-fade-in, .js .u-scale-in, .js .u-slide-left, .js .u-slide-right { opacity: 0; will-change: opacity, transform; } .js .u-fade-up { transform: translateY(28px); } .js .u-scale-in { transform: scale(0.92); } .js .u-slide-left { transform: translateX(-32px); } .js .u-slide-right { transform: translateX(32px); } .js .u-reveal.is-visible, .js .u-fade-up.is-visible, .js .u-fade-in.is-visible, .js .u-scale-in.is-visible, .js .u-slide-left.is-visible, .js .u-slide-right.is-visible { opacity: 1; transform: none; transition: opacity var(--duration-fade) var(--ease-out), transform var(--duration-fade) var(--ease-out); } /* Stagger children of a revealed group (e.g. a grid of cards) — each child's transition-delay increases by 80ms, up to 8 visible items; beyond that the delay is capped so a long grid doesn't feel sluggish. */ .js .u-reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; } .js .u-reveal-group.is-visible > *:nth-child(2) { transition-delay: 80ms; } .js .u-reveal-group.is-visible > *:nth-child(3) { transition-delay: 160ms; } .js .u-reveal-group.is-visible > *:nth-child(4) { transition-delay: 240ms; } .js .u-reveal-group.is-visible > *:nth-child(5) { transition-delay: 320ms; } .js .u-reveal-group.is-visible > *:nth-child(6) { transition-delay: 400ms; } .js .u-reveal-group.is-visible > *:nth-child(7) { transition-delay: 480ms; } .js .u-reveal-group.is-visible > *:nth-child(n+8) { transition-delay: 560ms; } /* ---------- Hover lift (premium cards) ---------- */ .u-hover-lift { transition: transform var(--transition-base) var(--ease-standard), box-shadow var(--transition-base) var(--ease-standard); } .u-hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); } /* ---------- Floating elements (hero visual card, decorative shapes) ---------- */ .u-float { animation: agencycare-float var(--duration-float) var(--ease-standard) infinite; } .u-float--slow { animation-duration: calc(var(--duration-float) * 1.4); } .u-float--delayed { animation-delay: 1.2s; } @keyframes agencycare-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* ---------- Animated gradient background (hero, CTA sections) ---------- */ .u-gradient-mesh { position: relative; background-image: var(--gradient-mesh), var(--gradient-hero); background-size: 200% 200%, 100% 100%; animation: agencycare-gradient-shift 18s ease infinite; } @keyframes agencycare-gradient-shift { 0% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } 100% { background-position: 0% 50%, 0 0; } } /* ---------- Decorative background shapes (CTA sections) ---------- */ .u-shape { position: absolute; border-radius: var(--radius-full); filter: blur(48px); pointer-events: none; z-index: 0; } /* ---------- Card tilt (very subtle, JS sets --tilt-x/--tilt-y; pointer:fine only, see animations.js) ---------- */ .u-tilt { --tilt-x: 0deg; --tilt-y: 0deg; transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform var(--transition-fast) var(--ease-out); transform-style: preserve-3d; } /* ---------- Button ripple ---------- */ .btn { position: relative; overflow: hidden; } .u-ripple { position: absolute; inset-block-start: var(--ripple-y, 50%); inset-inline-start: var(--ripple-x, 50%); width: 1px; height: 1px; border-radius: var(--radius-full); background-color: rgba(255, 255, 255, 0.55); transform: translate(-50%, -50%); animation: agencycare-ripple 600ms var(--ease-out) forwards; pointer-events: none; } .btn--outline .u-ripple, .btn--ghost .u-ripple { background-color: rgba(31, 111, 99, 0.18); } @keyframes agencycare-ripple { to { width: 320px; height: 320px; opacity: 0; } } /* ---------- Counter (JS updates textContent; this only marks the element while counting so a future style hook exists without adding visual noise today) ---------- */ .u-counting { font-variant-numeric: tabular-nums; } /* ---------- Scroll indicator (hero) ---------- */ .home-hero__scroll-indicator { position: absolute; inset-inline-start: 50%; inset-block-end: var(--space-6); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.08em; } .home-hero__scroll-indicator-icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 2.75rem; border: 2px solid var(--color-border-strong); border-radius: var(--radius-full); } .home-hero__scroll-indicator-icon::before { content: ''; width: 0.3rem; height: 0.3rem; border-radius: var(--radius-full); background-color: var(--color-brand-primary); animation: agencycare-scroll-dot 1.8s var(--ease-standard) infinite; } @keyframes agencycare-scroll-dot { 0% { transform: translateY(-0.4rem); opacity: 1; } 80%, 100% { transform: translateY(0.8rem); opacity: 0; } } @media (max-width: 48rem) { .home-hero__scroll-indicator { display: none; } } /* ---------- Glassmorphism (header, floating panels) ---------- */ .u-glass { background-color: var(--glass-bg); border-color: var(--glass-border); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { /* Graceful fallback for the handful of browsers without backdrop-filter support — an opaque background reads correctly with no blur, rather than a translucent panel with illegible text behind it. */ .u-glass { background-color: var(--color-background); } }