/* ── Hero entrance ──────────────────────────────── */ @keyframes fade-up { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .hero-headline { animation: fade-up var(--dur-slow) var(--ease-out) 150ms both; } .hero-roles { animation: fade-up var(--dur-slow) var(--ease-out) 350ms both; } .hero-line { animation: fade-up var(--dur-slow) var(--ease-out) 500ms both; } .hero-cta { animation: fade-up var(--dur-slow) var(--ease-out) 650ms both; } /* ── Scroll reveal ──────────────────────────────── */ /* Hidden states only apply when JS is running (html.js set in ), so content stays visible if scripts fail to load */ .js .reveal { opacity: 0; transform: translateY(24px); filter: blur(4px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms cubic-bezier(0.22, 1, 0.36, 1); } .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); } .js .reveal-group > * { opacity: 0; transform: translateY(18px); filter: blur(3px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms cubic-bezier(0.22, 1, 0.36, 1); } .reveal-group.visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-group.visible > *:nth-child(2) { transition-delay: 100ms; } .reveal-group.visible > *:nth-child(3) { transition-delay: 200ms; } .reveal-group.visible > *:nth-child(4) { transition-delay: 300ms; } .reveal-group.visible > *:nth-child(5) { transition-delay: 400ms; } .reveal-group.visible > *:nth-child(6) { transition-delay: 500ms; } .reveal-group.visible > * { opacity: 1; transform: translateY(0); filter: blur(0); } /* ── Rotating word ──────────────────────────────── */ #rotating-word { transition: opacity 300ms ease, transform 300ms ease, filter 300ms ease; } #rotating-word.fade-out { opacity: 0; transform: translateY(-8px); filter: blur(4px); } /* ── Reduced motion ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; filter: none; } }