/* Site-wide motion for the public pages: text, blocks, images, cards, controls.
   JS (site-motion.js) tags the elements and adds .sm-ready to <html> only after it has run,
   so nothing is ever hidden when scripting fails. With "reduce motion" on, travel, blur and
   zoom are dropped and the same elements simply fade in. */

:root { --sm-ease: cubic-bezier(.16, 1, .3, 1); }
html { scroll-behavior: smooth; }

/* ---------- Page entrance ---------- */
@keyframes sm-main-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-header-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
main { animation: sm-main-in .7s var(--sm-ease) both; }
body > header, header.sticky { animation: sm-header-in .8s var(--sm-ease) both; }

/* ---------- Headline words rise out of a mask ---------- */
.sm-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em .16em; margin: -.1em -.02em -.16em; }
.sm-wi { display: inline-block; will-change: transform; }
.sm-ready .sm-split:not(.sm-in) .sm-wi { transform: translate3d(0, 112%, 0) rotate(6deg); transform-origin: 0 100%; opacity: 0; }
.sm-ready .sm-split .sm-wi {
    transition: transform 1.05s var(--sm-ease) calc(var(--i, 0) * 55ms), opacity .7s ease calc(var(--i, 0) * 55ms);
}
.sm-pre { opacity: 0; }

/* ---------- Blocks of text, cards and figures ---------- */
.sm-ready .sm-r:not(.sm-in) {
    opacity: 0;
    transform: translate3d(0, var(--sm-y, 28px), 0) scale(var(--sm-s, 1));
    filter: blur(var(--sm-b, 6px));
}
.sm-ready .sm-r {
    transition: opacity .9s var(--sm-ease) var(--d, 0ms), transform 1.05s var(--sm-ease) var(--d, 0ms), filter .9s var(--sm-ease) var(--d, 0ms);
    will-change: opacity, transform;
}
.sm-r--card { --sm-y: 46px; --sm-s: .965; --sm-b: 4px; }

/* ---------- Pictures settle into place ---------- */
.sm-ready .sm-img:not(.sm-in) { opacity: 0; transform: scale(1.14); }
.sm-ready .sm-img { transition: opacity 1.2s ease var(--d, 0ms), transform 1.9s var(--sm-ease) var(--d, 0ms); }

/* ---------- Cards: live 3D tilt with a light that follows the pointer ---------- */
.sm-tilt { position: relative; transform-style: preserve-3d; }
.sm-tilt.sm-live { transition: transform .45s var(--sm-ease), box-shadow .35s ease, border-color .3s ease; }
.sm-tilt.sm-live:not([data-reveal]),
.sm-tilt.sm-live.revealed {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, var(--ty, 0px), 0) !important;
}
.sm-tilt.sm-live:hover { --ty: -6px; }
.sm-tilt > :not(.sm-glare) { transform-style: preserve-3d; }
.sm-tilt h2, .sm-tilt h3, .sm-tilt h4 { transform: translateZ(24px); }
.sm-glare {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 2;
    background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 62%);
    transition: opacity .35s ease;
}
.sm-tilt:hover > .sm-glare { opacity: 1; }

/* ---------- Controls ---------- */
header nav a { transition: color .25s ease, translate .3s var(--sm-ease); }
header nav a:hover { translate: 0 -2px; }
main :is(a, button)[class*="rounded"][class*="bg-"]:not(:disabled):hover { translate: 0 -2px; }
main :is(a, button)[class*="rounded"]:not(:disabled):active { scale: .97; }
.sm-mag { will-change: transform; transition: transform .35s var(--sm-ease); }

/* ---------- Reduce motion: no travel, blur or zoom; keep a soft fade ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    header.sticky, body > header { animation: none; }
    .sm-ready .sm-split:not(.sm-in) .sm-wi { transform: none; }
    .sm-ready .sm-split .sm-wi { transition: opacity .8s ease calc(var(--i, 0) * 30ms); }
    .sm-ready .sm-r:not(.sm-in) { transform: none; filter: none; }
    .sm-ready .sm-r { transition: opacity .9s ease var(--d, 0ms); }
    .sm-ready .sm-img:not(.sm-in) { transform: none; }
    .sm-ready .sm-img { transition: opacity 1s ease var(--d, 0ms); }
    .sm-tilt.sm-live:not([data-reveal]), .sm-tilt.sm-live.revealed { transform: none !important; }
    .sm-glare { display: none; }
}