/* FFF — motion: scroll-reveal + subtle hover / idle micro-interactions. * No dependencies; driven by assets/motion.js (IntersectionObserver). * * FOUC-free: an inline script adds `.fff-anim` to BEFORE paint, so * the reveal targets below start hidden with no flash. motion.js then adds `.is-in` * as each element scrolls into view. Everything is gated on prefers-reduced-motion, * and if JS never runs the inline script drops `.fff-anim` so content still shows. * * The reveal-target list is duplicated in motion.js — keep the two in sync. */ /* Anchor navigation glides instead of jumping. scroll-padding-top keeps the landing section from butting right against the viewport top. Gated on reduced-motion so it falls back to an instant jump when requested. */ html { scroll-padding-top: 24px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: no-preference) { /* reveal targets — initial hidden state */ html.fff-anim :is( .fff-hero-title, .fff-hero-grid > div, .fff-hero-social-m, .fff-speakers-title, .fff-speakers-grid > *, .fff-cta-band h2, .fff-cta-band a, .fff-about-intro, .fff-about-row, .fff-audience-img, .fff-audience-title, .fff-pricing-title, .fff-pricing-note, .fff-pricing .fff-tier, .fff-sponsors-featured > *, .fff-sponsors-logos > *, .fff-learn-title, .fff-footer-cols > * ) { opacity: 0; transform: translateY(26px); will-change: opacity, transform; } /* reveal targets — settled state (staggered via --fff-rv-delay set in JS) */ html.fff-anim :is( .fff-hero-title, .fff-hero-grid > div, .fff-hero-social-m, .fff-speakers-title, .fff-speakers-grid > *, .fff-cta-band h2, .fff-cta-band a, .fff-about-intro, .fff-about-row, .fff-audience-img, .fff-audience-title, .fff-pricing-title, .fff-pricing-note, .fff-pricing .fff-tier, .fff-sponsors-featured > *, .fff-sponsors-logos > *, .fff-learn-title, .fff-footer-cols > * ).is-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--fff-rv-delay, 0ms); } /* idle: the mobile hero scroll-hint bar gently bounces */ .fff-scroll-hint span { animation: fff-scroll-bounce 1.6s ease-in-out infinite; } @keyframes fff-scroll-bounce { 0%, 100% { transform: translateY(-7px); opacity: .35; } 50% { transform: translateY(7px); opacity: .95; } } } /* hover micro-interactions — pointer devices only. Kept off the `transform` property on elements a reveal also owns, so the two never fight. */ @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fff-pricing .fff-tier > div { transition: box-shadow .4s ease; } .fff-pricing .fff-tier:hover > div { box-shadow: 0 24px 60px rgba(2, 10, 40, .30); } .fff-sponsors-logos img { transition: transform .35s ease; } .fff-sponsors-logos > *:hover img { transform: scale(1.07); } }