/* ============================================================ 11-animations.css Scroll-reveal ("dimmed → vivid") helpers, marquees, aurora, floaters, hover transitions. Respects prefers-reduced-motion. IMPORTANT: .ss-reveal only applies the hidden initial state when the body has .ss-js-ready (added by main.js). This way, if JS fails to load, all content remains visible. Mirrors src/app/globals.css (.ss-reveal + .ss-reveal--in). ============================================================ */ /* Film grain noise overlay — premium texture (optional opt-in element) */ .ss-noise-overlay { position: fixed; inset: 0; opacity: 0.04; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } /* ---------- Scroll reveal — dimmed → vivid ---------- */ @media (prefers-reduced-motion: no-preference) { /* Only dim when JS is ready (so the page is visible without JS) */ body.ss-js-ready .ss-reveal { opacity: 0.4; filter: saturate(0.2) brightness(0.85); transform: translateY(24px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, filter, transform; } body.ss-js-ready .ss-reveal.is-visible, body.ss-js-ready .ss-reveal--in { opacity: 1; filter: saturate(1) brightness(1); transform: none; } /* Titles + eyebrows light up with brand color when section is revealed */ body.ss-js-ready .ss-reveal h1, body.ss-js-ready .ss-reveal h2, body.ss-js-ready .ss-reveal h3 { color: var(--ss-gray); transition: color 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; } body.ss-js-ready .ss-reveal .ss-eyebrow { color: var(--ss-gray); opacity: 0.5; transition: color 0.9s ease 0.1s, opacity 0.9s ease 0.1s; } body.ss-js-ready .ss-reveal .ss-eyebrow::before { background: var(--ss-gray); transition: background 0.9s ease 0.1s; } /* When revealed: titles go bold black, eyebrows go violet with violet dot */ body.ss-js-ready .ss-reveal.is-visible h1, body.ss-js-ready .ss-reveal.is-visible h2, body.ss-js-ready .ss-reveal.is-visible h3, body.ss-js-ready .ss-reveal--in h1, body.ss-js-ready .ss-reveal--in h2, body.ss-js-ready .ss-reveal--in h3 { color: var(--ss-black); } body.ss-js-ready .ss-reveal.is-visible .ss-eyebrow, body.ss-js-ready .ss-reveal--in .ss-eyebrow { color: var(--ss-violet); opacity: 1; } body.ss-js-ready .ss-reveal.is-visible .ss-eyebrow::before, body.ss-js-ready .ss-reveal--in .ss-eyebrow::before { background: var(--ss-violet); } /* Stagger helpers */ body.ss-js-ready .ss-reveal[data-delay="1"] { transition-delay: 80ms; } body.ss-js-ready .ss-reveal[data-delay="2"] { transition-delay: 160ms; } body.ss-js-ready .ss-reveal[data-delay="3"] { transition-delay: 240ms; } body.ss-js-ready .ss-reveal[data-delay="4"] { transition-delay: 320ms; } body.ss-js-ready .ss-reveal[data-delay="5"] { transition-delay: 400ms; } /* Stagger children inside a revealed section for a richer effect */ body.ss-js-ready .ss-reveal.is-visible .ss-reveal-stagger > *, body.ss-js-ready .ss-reveal--in .ss-reveal-stagger > * { animation: ss-stagger-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes ss-stagger-in { from { opacity: 0.5; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Floating cards subtle motion (legacy hero floaters) */ .ss-floater { animation: ss-float 6s var(--ss-ease-in-out) infinite; } .ss-floater--wa { animation-delay: 0.5s; } .ss-floater--crm { animation-delay: 1s; } .ss-floater--ia { animation-delay: 1.5s; } @keyframes ss-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Mockup gentle pulse */ .ss-mockup { animation: ss-pulse-soft 8s var(--ss-ease-in-out) infinite; } @keyframes ss-pulse-soft { 0%, 100% { box-shadow: var(--ss-shadow-lg); } 50% { box-shadow: 0 18px 60px rgba(184, 165, 230, 0.45); } } /* Final CTA blobs drift */ .ss-final-cta::before { animation: ss-drift 14s var(--ss-ease-in-out) infinite alternate; } .ss-final-cta::after { animation: ss-drift 18s var(--ss-ease-in-out) infinite alternate-reverse; } @keyframes ss-drift { from { transform: translate(0, 0); } to { transform: translate(40px, 30px); } } } /* ---------- Reduced motion guard for animations declared in 06-landing.css ---------- */ @media (prefers-reduced-motion: reduce) { .ss-marquee-left, .ss-marquee-right, .ss-spin-slow, .ss-pulsate, .ss-bounce-soft, .ss-aurora-blob, .ss-floater, .ss-mockup, .ss-final-cta::before, .ss-final-cta::after { animation: none !important; } .ss-reveal, body.ss-js-ready .ss-reveal { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; } body.ss-js-ready .ss-reveal h1, body.ss-js-ready .ss-reveal h2, body.ss-js-ready .ss-reveal h3 { color: var(--ss-black) !important; transition: none !important; } body.ss-js-ready .ss-reveal .ss-eyebrow { color: var(--ss-violet) !important; opacity: 1 !important; } body.ss-js-ready .ss-reveal .ss-eyebrow::before { background: var(--ss-violet) !important; } } /* Performance: lazy-render offscreen sections */ .ss-lazy { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* Always-on hover lifts (cheap, GPU-friendly) */ .ss-card:hover, .ss-package:hover, .ss-service-card:hover, .ss-project-card:hover, .ss-post-card:hover { transform: translateY(-3px); } /* CTA press feedback */ .ss-cta:active { transform: translateY(0); }