/* =========================================================
   ORIENLY — MOTION
   Entrances, scroll reveals, spotlight, ripples, indicators, progress bars, page transitions.
   ".mx-js" is set in <head> before first paint; ".mx-fallback" un-hides everything if motion.js never runs.
   Only opacity and transform are animated; pointer effects never write CSS variables (no subtree restyles).
   ========================================================= */

@keyframes mx-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes mx-scale { from { opacity: 0; transform: translateY(16px) scale(.955); } }
@keyframes mx-left { from { opacity: 0; transform: translateX(-24px); } }
@keyframes mx-fade { from { opacity: 0; } }
@keyframes mx-title { from { opacity: 0; transform: translateY(30px) scale(.985); } }
@keyframes mx-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } }

/* ---------- Hero entrances (every page) ---------- */
.mx-js :is(.ug-hero, .db-hero-text, .rm-hero-text, .cr-hero, .lp-section-head) > * { animation: mx-up .75s var(--ease) backwards; }
.mx-js :is(.ug-hero, .db-hero-text, .rm-hero-text, .cr-hero, .lp-section-head) > :nth-child(2) { animation-delay: .07s; }
.mx-js :is(.ug-hero, .db-hero-text, .rm-hero-text, .cr-hero, .lp-section-head) > :nth-child(3) { animation-delay: .14s; }
.mx-js :is(.ug-hero, .db-hero-text, .rm-hero-text, .cr-hero, .lp-section-head) > :nth-child(4) { animation-delay: .21s; }
.mx-js :is(.ug-hero, .db-hero-text, .rm-hero-text, .cr-hero, .lp-section-head) > :nth-child(n+5) { animation-delay: .28s; }
.mx-js :is(.ug-title, .lp-title) { animation: mx-title 1s var(--ease) .04s backwards; }
.mx-js :is(.rm-ring, .db-hero-actions, .ug-hero > .ug-ring, .ug-hero > div > .ug-ring) { animation: mx-scale .9s var(--ease) .18s backwards; }
.mx-js .ug-page > :not(.ug-hero):not(.db-hero):not(.rm-hero):not(.cr-hero) { animation: mx-fade .5s var(--ease) backwards; }
.mx-js .ug-intro { animation: mx-up .6s var(--ease) .25s backwards; }
.mx-js .ug-crumbs { animation: mx-fade .5s var(--ease) backwards; }
.mx-js .as-shell { animation: mx-up .6s var(--ease) backwards; }
.mx-js .sim-controls { animation: mx-left .7s var(--ease) .1s backwards; }
.mx-js .sim-results { animation: mx-up .7s var(--ease) .18s backwards; }

/* ---------- Scroll reveals (same selectors as motion.js) ---------- */
.mx-js :is(.db-bento > *, .lp-bento > *, .sim-counters > *, .lp-stats > *,
           .ug-grid > *, .cr-grid > *, .cr-rail > *, .pr-grid > *, .lp-steps > li, .db-checklist-items > li, .cr-fields > *, .sim-lists > *,
           .rm-timeline > li, .db-checklist, .rm-next, .rm-alldone, .rm-phases, .lp-final, .ug-table-wrap, .ug-paywall, .ug-notice, .cr-quiz,
           .ug-reveal):not(.is-in) { opacity: 0; }
.mx-js [data-reveal].is-in { animation: mx-up .8s var(--ease) var(--reveal-delay, 0ms) backwards; }
.mx-js [data-reveal="scale"].is-in { animation-name: mx-scale; }
.mx-js [data-reveal="left"].is-in { animation-name: mx-left; }
.mx-fallback :is(.db-bento > *, .lp-bento > *, .sim-counters > *, .lp-stats > *, .ug-grid > *, .cr-grid > *, .cr-rail > *, .pr-grid > *, .lp-steps > li,
    .db-checklist-items > li, .cr-fields > *, .sim-lists > *, .rm-timeline > li, .db-checklist, .rm-next, .rm-alldone, .rm-phases, .lp-final, .ug-table-wrap,
    .ug-paywall, .ug-notice, .cr-quiz, .ug-reveal) { opacity: 1 !important; }
/* Rings, meters and bars wait until their block is revealed, then draw. */
.mx-js [data-reveal]:not(.is-in) :is(.is-bar, .db-score-bar, .db-meter span, .db-stack span, .rm-bar i) { animation-play-state: paused; }
.mx-js .ug-reveal { transform: none; transition: none; }

/* ---------- Cursor spotlight ----------
   One fixed overlay laid over the hovered card (never inserted inside it, so card layouts and :last-child rules are
   untouched). It sits under the sticky bars (z-index 15 < tabs 20 < nav 60) and ignores the pointer. */
.mx-spot { position: fixed; left: 0; top: 0; z-index: 15; overflow: hidden; pointer-events: none; opacity: 0; contain: strict;
           transition: opacity .35s var(--ease); }
.mx-spot.is-on { opacity: 1; }
.mx-spot > i { position: absolute; left: 0; top: 0; width: 520px; height: 520px; border-radius: 50%; will-change: transform;
               background: radial-gradient(circle, rgb(var(--accent-rgb) / .10), transparent 62%); }
.is-lit { border-color: rgb(var(--accent-rgb) / .28) !important; }

/* ---------- Ripples ---------- */
.has-ripple { position: relative; overflow: hidden; isolation: isolate; }
.mx-ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .16;
             transform: scale(0); animation: mx-ripple .62s var(--ease) forwards; }
@keyframes mx-ripple { to { transform: scale(1); opacity: 0; } }
.ug-btn-primary .mx-ripple { background: #fff; opacity: .35; }

/* ---------- Desktop nav: sliding hover pill ---------- */
@media (min-width: 1025px) { .ug-nav-links.has-indicator { position: relative; } }  /* ≤1024px the links are the fixed « Menu » sheet */
.mx-nav-indicator { position: absolute; left: 0; top: 50%; z-index: 0; width: 0; height: 36px; margin-top: -18px; border-radius: 11px; pointer-events: none; opacity: 0;
                    background: var(--hover); box-shadow: inset 0 0 0 1px var(--line);
                    transition: transform .42s var(--ease), width .42s var(--ease), opacity .25s; }
.mx-nav-indicator.no-anim { transition: none; }
.has-indicator > a { z-index: 1; }
.has-indicator > a:hover { background: transparent; }
@media (max-width: 1024px) { .mx-nav-indicator { display: none; } }

/* ---------- Mobile tab bar: pill slides from the previous tab ---------- */
.mx-tab-pill { position: absolute; top: 8px; left: 0; width: 56px; height: 30px; border-radius: 15px; pointer-events: none; opacity: 0;
               background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .2);
               transition: transform .55s var(--ease-spring), opacity .2s; }
.mx-tab-pill.no-anim { transition: none; }
.ug-tabbar > a, .ug-tabbar > button { position: relative; z-index: 1; }
.ug-tabbar a.active .ug-icon { animation: mx-pop .5s var(--ease-spring) .15s backwards; }

/* ---------- Progress bars ---------- */
.mx-progress, .mx-loader { position: fixed; top: 0; left: 0; right: 0; height: 2px; transform-origin: 0 50%; pointer-events: none; }
.mx-progress { z-index: 69; transform: scaleX(0); opacity: 0; transition: opacity .3s;
               background: linear-gradient(90deg, var(--green-dark), var(--green-bright), var(--teal)); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .6); }
.mx-loader { z-index: 400; height: 3px; transform: scaleX(0); opacity: 0;
             background: linear-gradient(90deg, var(--green-bright), var(--teal), var(--green-bright)); box-shadow: 0 0 12px rgb(var(--accent-rgb) / .8); }
.mx-loader.is-loading { opacity: 1; animation: mx-load 6s cubic-bezier(.08, .8, .2, 1) forwards; }
.mx-loader.is-done { opacity: 0; transform: scaleX(1); transition: opacity .35s .1s, transform .2s; }
@keyframes mx-load { 0% { transform: scaleX(0); } 20% { transform: scaleX(.45); } 100% { transform: scaleX(.9); } }

/* ---------- Toasts: spring in, life bar, soft exit ---------- */
.ug-toast { overflow: hidden; }
.ug-toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: 0 50%;
                   background: linear-gradient(90deg, var(--green), var(--teal)); animation: mx-life var(--life, 2600ms) linear forwards; }
.ug-toast.is-upgrade::after { background: linear-gradient(90deg, var(--violet), var(--blue)); }
@keyframes mx-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ug-toast.is-leaving { animation: mx-toast-out .3s var(--ease) forwards; }
@keyframes mx-toast-out { to { opacity: 0; translate: 0 14px; scale: .97; } }

/* ---------- Landing: cursor glow, parallax, scroll-linked preview ---------- */
.lp-cursor { position: absolute; left: 0; top: 0; z-index: -1; width: 1200px; height: 1200px; border-radius: 50%; pointer-events: none; opacity: 0;
              background: radial-gradient(circle, rgb(var(--accent-rgb) / .08), transparent 60%); will-change: transform; transition: opacity .6s; }
.lp-hero:hover .lp-cursor { opacity: 1; }
.lp-window { transform: rotateX(8deg) scale(.965); transition: none; }
.lp-preview:hover .lp-window { transform: rotateX(8deg) scale(.965); }
@media (max-width: 760px) { .lp-window, .lp-preview:hover .lp-window { transform: none; } }
.mx-js .lp-stats > div strong { display: inline-block; }

/* ---------- Micro-interactions ---------- */
.ug-btn-lg.ug-btn-primary, .lp-pill, .ug-help-fab { transition: translate .35s var(--ease), transform var(--dur-2) var(--ease), filter var(--dur-2), box-shadow var(--dur-3); }
.ug-nav-links a .ug-icon, .ug-tabbar .ug-icon { transition: transform .45s var(--ease-spring), opacity .2s; }
.ug-nav-links a:hover .ug-icon { transform: translateY(-2px) scale(1.08); }
.ug-chip, .cr-meta span, .ug-badge { transition: transform .3s var(--ease-spring), background var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
.ug-brand:hover .ug-brand-mark { transform: rotate(-10deg) scale(1.08); }
.ug-brand-mark { transition: transform .5s var(--ease-spring); }
.db-score:hover strong, .ug-score-ring:hover strong { animation: mx-pop .45s var(--ease-spring); }
.sim.is-loading .sim-counter strong { animation: mx-breathe 1s ease-in-out infinite; }
@keyframes mx-breathe { 50% { opacity: .45; } }
.as-typing span { animation-duration: 1s; }
.db-greeting { background-size: 200% 100%; }

/* ---------- Page transitions (Chromium / Safari) ---------- */
::view-transition-old(root) { animation: .22s var(--ease) both mx-vt-out; }
::view-transition-new(root) { animation: .42s var(--ease) both mx-vt-in; }
@keyframes mx-vt-out { to { opacity: 0; transform: scale(.99); } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(10px); } }

html[data-motion="reduced"] :is(.mx-spot, .mx-ripple, .mx-nav-indicator, .mx-tab-pill, .mx-loader) { display: none !important; }
html[data-motion="reduced"] .lp-window { transform: none; }