/* Dentelo theme - motion. Every rule here is inert until JS adds .dt-anim-ready to (see theme.js), and everything is skipped entirely - JS never runs GSAP/Lenis/AOS init - when the browser sends prefers-reduced-motion: reduce, so content is always visible with no dependency on JS/animation completing. */ .dt-reveal { opacity: 0; transform: translateY(28px); } html.dt-anim-ready .dt-reveal { transition: opacity .7s ease, transform .7s ease; } html.dt-anim-ready .dt-reveal.dt-in { opacity: 1; transform: none; } .dt-reveal-scale { opacity: 0; transform: scale(.94); } html.dt-anim-ready .dt-reveal-scale { transition: opacity .6s ease, transform .6s ease; } html.dt-anim-ready .dt-reveal-scale.dt-in { opacity: 1; transform: none; } .dt-stagger > * { opacity: 0; transform: translateY(20px); } html.dt-anim-ready .dt-stagger > * { transition: opacity .6s ease, transform .6s ease; } html.dt-anim-ready .dt-stagger.dt-in > *{ opacity: 1; transform: none; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(1) { transition-delay: .05s; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(2) { transition-delay: .12s; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(3) { transition-delay: .19s; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(4) { transition-delay: .26s; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(5) { transition-delay: .33s; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(6) { transition-delay: .4s; } html.dt-anim-ready .dt-stagger.dt-in > *:nth-child(n+7) { transition-delay: .45s; } /* Hero entrance - handled by GSAP timeline in JS via these classes so it is sequenced (eyebrow -> title -> desc -> ctas), not just CSS-driven; the CSS still guarantees a sane un-animated fallback state. */ .dt-hero-content > * { opacity: 0; transform: translateY(24px); } html:not(.dt-anim-ready) .dt-hero-content > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.dt-anim-ready .dt-reveal, html.dt-anim-ready .dt-reveal-scale, html.dt-anim-ready .dt-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } .dt-hero-scroll { display: none; } }