/* Motion — reveals, keyframes, reduced-motion overrides */ /* * Progressive enhancement: hide-then-reveal only when JS is present. * Without .js on , content stays fully readable (no opacity:0 trap). */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js .reveal[data-reveal="scale"] { transform: translateY(16px) scale(0.98); } .js .reveal.is-revealed, .js .reveal[data-revealed="true"] { opacity: 1; transform: translateY(0) scale(1); } /* Stagger helpers for children */ .reveal-stagger > .reveal:nth-child(1) { --reveal-delay: 0ms; } .reveal-stagger > .reveal:nth-child(2) { --reveal-delay: 90ms; } .reveal-stagger > .reveal:nth-child(3) { --reveal-delay: 180ms; } .reveal-stagger > .reveal:nth-child(4) { --reveal-delay: 270ms; } .reveal-stagger > .reveal:nth-child(5) { --reveal-delay: 360ms; } .reveal-stagger > .reveal:nth-child(6) { --reveal-delay: 450ms; } /* Hero entrance (first paint) */ .hero-content .hero-kicker, .hero-content .hero-title, .hero-content .hero-tagline, .hero-content .hero-meta, .hero-content .hero-cta { opacity: 0; transform: translateY(20px); animation: hero-rise var(--dur-reveal) var(--ease-out-expo) forwards; } .hero-content .hero-kicker { animation-delay: 200ms; } .hero-content .hero-title { animation-delay: 380ms; } .hero-content .hero-tagline { animation-delay: 560ms; } .hero-content .hero-meta { animation-delay: 720ms; } .hero-content .hero-cta { animation-delay: 880ms; } .hero-scroll { opacity: 0; animation: hero-fade 1.2s var(--ease-out-expo) 1.2s forwards; } @keyframes hero-rise { to { opacity: 1; transform: translateY(0); } } @keyframes hero-fade { to { opacity: 1; } } /* Soft ring pulse — very restrained */ .hero-ring { animation: ring-breathe 10s var(--ease-in-out) infinite; } @keyframes ring-breathe { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } /* Scroll indicator line */ .hero-scroll-line { animation: scroll-line 2.4s var(--ease-in-out) infinite; transform-origin: top center; } @keyframes scroll-line { 0% { transform: scaleY(0.35); opacity: 0.3; } 50% { transform: scaleY(1); opacity: 0.7; } 100% { transform: scaleY(0.35); opacity: 0.3; } } /* Parallax layers use transform from JS; smooth when present */ .hero-photo, .hero-glow, .hero-ring, .hero-content { transition: transform 80ms linear; } html.has-reduced-motion .hero-photo, html.has-reduced-motion .hero-glow, html.has-reduced-motion .hero-content { transition: none; } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; will-change: auto; } .hero-content .hero-kicker, .hero-content .hero-title, .hero-content .hero-tagline, .hero-content .hero-meta, .hero-content .hero-cta, .hero-scroll { opacity: 1; transform: none; animation: none; } .hero-ring, .hero-scroll-line { animation: none; } /* Clear parallax offsets — ring is not a parallax layer */ .hero-photo, .hero-glow, .hero-content { transform: none !important; transition: none; } .quote-slide { transition: none; transform: none; } .quote-slide:not(.is-active) { display: none; } .quote-slide.is-active { opacity: 1; visibility: visible; } .theme-card:hover, .scene-card:hover, .visual-card:hover, .hero-cta:hover { transform: none; } .nav-link::after { transition: none; } } /* Class-based reduced motion (set by JS when matchMedia fires) */ html.has-reduced-motion.js .reveal { opacity: 1; transform: none; transition: none; will-change: auto; } html.has-reduced-motion .hero-content .hero-kicker, html.has-reduced-motion .hero-content .hero-title, html.has-reduced-motion .hero-content .hero-tagline, html.has-reduced-motion .hero-content .hero-meta, html.has-reduced-motion .hero-content .hero-cta, html.has-reduced-motion .hero-scroll { opacity: 1; transform: none; animation: none; } html.has-reduced-motion .hero-ring, html.has-reduced-motion .hero-scroll-line { animation: none; } html.has-reduced-motion .hero-photo, html.has-reduced-motion .hero-glow, html.has-reduced-motion .hero-content { transform: none !important; transition: none; } html.has-reduced-motion .quote-slide { transition: none; transform: none; } html.has-reduced-motion .quote-slide:not(.is-active) { display: none; } html.has-reduced-motion .quote-slide.is-active { opacity: 1; visibility: visible; } html.has-reduced-motion .theme-card:hover, html.has-reduced-motion .scene-card:hover, html.has-reduced-motion .visual-card:hover, html.has-reduced-motion .hero-cta:hover { transform: none; }