/* v1-smart — motion (only under html.js-motion). Transform + opacity + clip-path only. */
html.js-motion body { opacity: 0; transition: opacity .45s var(--ease); }
html.js-motion body.pt-in { opacity: 1; }
html.js-motion body.pt-out { opacity: 0; transition-duration: .2s; }

/* the one orchestrated sequence: hero */
html.js-motion .m-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
html.js-motion .m-wi { display: inline-block; transform: translateY(110%); animation: wrise .9s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes wrise { to { transform: none; } }
html.js-motion .hero-slide img { animation: kb 16s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.03) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1.5%); } }
html.js-motion .hero-loc, html.js-motion .hero-sub, html.js-motion .hero-actions { animation: fadeup .9s var(--ease-out) both; }
html.js-motion .hero-loc { animation-delay: .15s; }
html.js-motion .hero-sub { animation-delay: .85s; }
html.js-motion .hero-actions { animation-delay: 1.05s; }
html.js-motion .hero-rule { transform: scaleX(0); transform-origin: left; animation: rule 1.2s var(--ease-out) .7s forwards; }
@keyframes rule { to { transform: none; } }
html.js-motion .hero-card { animation: cardin 1.1s var(--ease-out) .9s both; }
@keyframes cardin { from { opacity: 0; transform: translateY(34px) rotate(1.2deg); } }
html.js-motion .hero-foot { animation: fadeup .9s var(--ease-out) 1.3s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(18px); } }
html.js-motion .hero-scroll i { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }
html.js-motion .hero-card-media img, html.js-motion .hero-card-body { transition: opacity .5s var(--ease); }
html.js-motion .hero-card.swap .hero-card-media img, html.js-motion .hero-card.swap .hero-card-body { opacity: 0; }

/* photo mask reveals: photos unveil from the bottom once, nothing else fades on scroll */
html.js-motion .mask { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
html.js-motion .mask.in { clip-path: inset(0 0 0 0); }
html.js-motion .mask-x { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); transition-delay: var(--d, 0ms); }
html.js-motion .mask-x.in { clip-path: inset(0 0 0 0); }
html.js-motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
html.js-motion [data-reveal].in { opacity: 1; transform: none; }
html.js-motion .oc[data-reveal].in, html.js-motion .tile[data-reveal].in, html.js-motion .pc[data-reveal].in, html.js-motion .feat[data-reveal].in { transition: opacity .7s var(--ease-out), transform .45s var(--ease), box-shadow .45s; }

html.js-motion .mq { animation: mq 46s linear infinite; }
@keyframes mq { to { transform: translateX(-50%); } }

.mag { transition: transform .35s var(--ease); }
.mag.magging { transition: transform .12s linear; }

html.js-motion .steps::before, html.js-motion .tl::before, html.js-motion .procs::before { transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) .2s; }
html.js-motion .steps.in-view::before, html.js-motion .tl.in-view::before, html.js-motion .procs.in-view::before { transform: none; }
html.js-motion .step::before, html.js-motion .tl-item::before, html.js-motion .proc::before { transform: scale(0); transition: transform .5s var(--ease-out); transition-delay: calc(.3s + var(--i, 0) * .22s); }
html.js-motion .steps.in-view .step::before, html.js-motion .tl.in-view .tl-item::before, html.js-motion .procs.in-view .proc::before { transform: none; }

html.js-motion .faq details[open] .faq-a { animation: fadeup .4s var(--ease-out); }
html.js-motion .calc-out strong { transition: transform .25s var(--ease); }
html.js-motion .calc-out.bump strong { transform: scale(1.06); }
html.js-motion .zone-path { transition: fill .25s, transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
html.js-motion .zone-path:hover { transform: scale(1.02); }