/* animations.css — scroll-reveal states, parallax & tasteful CSS accents. * * SAFETY MODEL: every "hidden" state is GUARDED by `html.js`. The motion.js * script adds `js` to as soon as it runs. So: * - JS disabled -> no `html.js` -> nothing is hidden -> content fully visible. * - JS enabled -> elements start hidden, motion.js adds `.is-visible` * (or GSAP tweens them) to reveal. * This guarantees content is NEVER stuck invisible. */ /* ---- Scroll-reveal: initial hidden states (JS only) -------------------- */ html.js [data-animate]{ opacity:0; transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change:opacity, transform; } html.js [data-animate="up"] {transform:translateY(28px)} html.js [data-animate="down"] {transform:translateY(-28px)} html.js [data-animate="left"] {transform:translateX(-32px)} html.js [data-animate="right"] {transform:translateX(32px)} html.js [data-animate="scale"] {transform:scale(.94)} html.js [data-animate="zoom"] {transform:scale(1.06)} html.js [data-animate="fade"] {transform:none} /* Revealed state (motion.js adds .is-visible) */ html.js [data-animate].is-visible{ opacity:1; transform:none; } /* Optional stagger: set --d (ms) inline or via a wrapper */ html.js [data-animate][style*="--d"]{transition-delay:var(--d)} html.js [data-animate-delay="1"]{transition-delay:80ms} html.js [data-animate-delay="2"]{transition-delay:160ms} html.js [data-animate-delay="3"]{transition-delay:240ms} html.js [data-animate-delay="4"]{transition-delay:320ms} html.js [data-animate-delay="5"]{transition-delay:400ms} /* ---- Parallax ---------------------------------------------------------- */ [data-parallax]{will-change:transform} /* ---- Tasteful CSS-only accents ---------------------------------------- */ /* Soft attention pulse on the primary phone CTA (large variants only, * so the compact header button stays calm). Subtle, ring-based. */ @keyframes fd-call-pulse{ 0% {box-shadow:var(--shadow-accent), 0 0 0 0 rgba(255,122,0,.45)} 70% {box-shadow:var(--shadow-accent), 0 0 0 14px rgba(255,122,0,0)} 100% {box-shadow:var(--shadow-accent), 0 0 0 0 rgba(255,122,0,0)} } .cta-call--lg{animation:fd-call-pulse 2.6s ease-out infinite} .cta-call--lg:hover{animation-play-state:paused} /* On the callband the button is white-on-orange — keep pulse subtle/dark */ .callband .cta-call--lg{animation:none} /* Gradient shimmer sweep across the hero headline accent word */ @keyframes fd-shimmer{ 0% {background-position:-150% 0} 100% {background-position:250% 0} } .hero__title span{ background-image:linear-gradient(100deg,#ffae5e 0%,#ff7a00 35%,#ffd9b0 50%,#ff7a00 65%,#ffae5e 100%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; animation:fd-shimmer 6s linear infinite; } /* Mobile call bar: very gentle attention shimmer on its strong number */ @keyframes fd-bar-glow{ 0%,100%{opacity:.92} 50% {opacity:1} } .mobile-callbar strong{animation:fd-bar-glow 2.4s ease-in-out infinite} /* Brand plane mark: tiny idle drift for life */ @keyframes fd-plane-drift{ 0%,100%{transform:translateY(0)} 50% {transform:translateY(-2px)} } html.js .brand__mark{animation:fd-plane-drift 4s ease-in-out infinite} /* ---- Reduced motion: force everything visible & still ------------------ */ @media (prefers-reduced-motion: reduce){ html.js [data-animate]{opacity:1!important;transform:none!important;transition:none!important} [data-parallax]{transform:none!important;will-change:auto} .cta-call--lg, .hero__title span, .mobile-callbar strong, html.js .brand__mark{animation:none!important} }