/* ════════════════════════════════════════════════════════════════ TDME shared animation system — loaded on every page. Gated behind html.js-anim (set by an inline snippet in ), so content stays fully visible when JS is unavailable. All motion is disabled under prefers-reduced-motion at the bottom of this file. Animates transform/opacity only (compositor-friendly, no CLS). ════════════════════════════════════════════════════════════════ */ :root { --anim-ease: cubic-bezier(0.16, 1, 0.3, 1); --anim-pop: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ── Scroll reveals (elements decorated by animations.js) ── */ html.js-anim .rv { opacity: 0; transform: translateY(36px); transition: opacity .7s var(--anim-ease) var(--rvd, 0ms), transform .7s var(--anim-ease) var(--rvd, 0ms); } html.js-anim .rv-hero { transform: translateY(40px); transition: opacity .85s var(--anim-ease) var(--rvd, 0ms), transform .85s var(--anim-ease) var(--rvd, 0ms); } html.js-anim .rv.in { opacity: 1; transform: none; } /* ── "Getting Started" timeline: connector draws, numbers pop ── */ html.js-anim .steps::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1) .25s; } html.js-anim .steps.in::before { transform: scaleX(1); } html.js-anim .step .step-num { transform: scale(.6); transition: transform .6s var(--anim-pop) calc(var(--rvd, 0ms) + 150ms); } html.js-anim .step.in .step-num { transform: scale(1); } /* ── "The Reel" — gold phrase rises through a clip. Keyframes/easing from the prior preview-animations.html experiment. animations.js wraps the hero h1 content in .reel-inner. ── */ html.js-anim .reel { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.28; } html.js-anim .reel .reel-inner { display: block; } @keyframes reel-rise { from { transform: translateY(110%); } to { transform: translateY(0); } } html.js-anim .rv .reel .reel-inner { transform: translateY(110%); } html.js-anim .rv.in .reel .reel-inner { animation: reel-rise .68s var(--anim-ease) var(--reel-delay, .35s) both; } /* ── Ken Burns drift on hero slideshows, layered with the crossfade. Scale never drops below 1 so cover images never show edges. ── */ @keyframes kb-in { from { transform: scale(1); } to { transform: scale(1.09); } } @keyframes kb-out { from { transform: scale(1.09); } to { transform: scale(1); } } html.js-anim .hero-slides { overflow: hidden; } html.js-anim .hero-slide.active { animation: kb-in 16s ease-out forwards; } html.js-anim .hero-slide:nth-child(even).active { animation-name: kb-out; } /* ── Sticky nav: compresses + deepens shadow past the hero ── */ nav { transition: box-shadow .35s ease; } .nav-inner { transition: height .35s ease; } html.js-anim nav.nav-scrolled { box-shadow: 0 8px 30px rgba(13, 43, 69, .18); } html.js-anim nav.nav-scrolled .nav-inner { height: 56px; } /* ── Button micro-interactions: lift + shadow on hover/focus ── */ html.js-anim .btn-primary, html.js-anim .btn-dark, html.js-anim .btn-outline-dark, html.js-anim .nav-cta, html.js-anim .mobile-cta, html.js-anim .hero-form button[type=submit], html.js-anim .contact-form button[type=submit], html.js-anim .tdme-quote-form button[type=submit] { transition: transform .25s var(--anim-pop), box-shadow .25s ease, background .2s, color .2s; } html.js-anim .btn-primary:hover, html.js-anim .btn-primary:focus-visible, html.js-anim .btn-dark:hover, html.js-anim .btn-dark:focus-visible, html.js-anim .btn-outline-dark:hover, html.js-anim .btn-outline-dark:focus-visible, html.js-anim .nav-cta:hover, html.js-anim .nav-cta:focus-visible, html.js-anim .mobile-cta:hover, html.js-anim .hero-form button[type=submit]:hover, html.js-anim .contact-form button[type=submit]:hover, html.js-anim .tdme-quote-form button[type=submit]:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(13, 43, 69, .25); } /* "Learn more" links nudge forward */ html.js-anim .serve-cta, html.js-anim .market-cta-link, html.js-anim .faq-cta { transition: transform .25s var(--anim-pop), color .2s, opacity .2s; } html.js-anim .serve-cta:hover, html.js-anim .market-cta-link:hover, html.js-anim .faq-cta:hover { transform: translateX(5px); } html.js-anim .market-cta-link { display: inline-block; } html.js-anim .faq-cta { display: inline-block; } /* One-time diagonal sheen on primary CTAs when first revealed */ html.js-anim .sheen { position: relative; overflow: hidden; } html.js-anim .sheen::after { content: ''; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); pointer-events: none; } html.js-anim .sheen.sheen-run::after { animation: sheen-sweep .9s ease .5s 1 both; } @keyframes sheen-sweep { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(440%) skewX(-20deg); } } /* ── FAQ accordion: smooth height easing (max-height set by JS). Padding can't be compressed by max-height even with border-box, so padding/border collapse alongside it while closed. ── */ html.js-anim .faq-a { display: block; max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(0.4, 0, 0.2, 1), padding .45s cubic-bezier(0.4, 0, 0.2, 1), border-top-width .3s ease; } html.js-anim .faq-a:not(.open) { padding-top: 0; padding-bottom: 0; border-top-width: 0; } /* ── Photo-verification checkmark: self-drawing SVG + amber pulse. Markup lives in index.html's first .diff-item; triggers when the card's reveal lands. Absolutely positioned — zero layout shift. ── */ html.js-anim .diff-item { position: relative; } .photo-check { position: absolute; top: 34px; right: 30px; width: 46px; height: 46px; display: block; } .photo-check svg { display: block; width: 100%; height: 100%; overflow: visible; } html.js-anim .photo-check .pc-circle { stroke-dasharray: 151; stroke-dashoffset: 151; } html.js-anim .photo-check .pc-tick { stroke-dasharray: 36; stroke-dashoffset: 36; } html.js-anim .diff-item.in .pc-circle { animation: pc-draw .8s ease .35s forwards; } html.js-anim .diff-item.in .pc-tick { animation: pc-draw .45s ease 1s forwards; } @keyframes pc-draw { to { stroke-dashoffset: 0; } } .photo-check::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent, #f5a623); opacity: 0; pointer-events: none; } html.js-anim .diff-item.in .photo-check::after { animation: pc-pulse 1.1s ease 1.3s 1; } @keyframes pc-pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } } /* ── Reduced motion: kill everything, restore native behaviors ── */ @media (prefers-reduced-motion: reduce) { html.js-anim .rv, html.js-anim .rv-hero { opacity: 1 !important; transform: none !important; transition: none !important; } html.js-anim .step .step-num, html.js-anim .steps::before { transform: none !important; transition: none !important; } html.js-anim .reel .reel-inner, html.js-anim .rv .reel .reel-inner { animation: none !important; transform: none !important; } html.js-anim .hero-slide.active { animation: none !important; } html.js-anim .sheen::after { display: none !important; } html.js-anim .pc-circle, html.js-anim .pc-tick { animation: none !important; stroke-dashoffset: 0 !important; } html.js-anim .diff-item.in .photo-check::after { animation: none !important; } /* FAQ falls back to the original instant display toggle */ html.js-anim .faq-a { display: none; max-height: none; overflow: visible; transition: none; border-top-width: initial; } html.js-anim .faq-a.open { display: block; } nav, .nav-inner { transition: none; } html.js-anim nav.nav-scrolled .nav-inner { height: 68px; } html.js-anim .btn-primary:hover, html.js-anim .btn-dark:hover, html.js-anim .btn-outline-dark:hover, html.js-anim .nav-cta:hover, html.js-anim .mobile-cta:hover, html.js-anim .serve-cta:hover, html.js-anim .market-cta-link:hover, html.js-anim .faq-cta:hover { transform: none; } }