/*
 * Ambient motion: every decorative background circle drifts continuously.
 *
 * Stylesheet-authored circles animate the individual `translate` / `scale`
 * properties, which compose with any `transform` they already use for centring
 * or hover. Tailwind v4 utility circles are the opposite: their `-translate-*`
 * utilities own `translate`, so those animate `transform` instead.
 *
 * Keep it calm: slow cycles, small distances, and the smallest drift next to
 * figures (stat cards) so motion never competes with what clients read.
 * Circles that already animate (modal headers, feature orbs, setup wizard,
 * pricing orbits, orbit dots) keep their own keyframes and are not listed.
 * Verified by scripts/audit-ambient-motion.mjs.
 */

/* Drifting dots behind public heroes ([data-ambient-dots], assets/js/ambient-dots.js).
   The canvas sits at z-index -1 inside an isolated hero: above the hero's own
   background, below every heading, field and button. Its `color` is the dot colour. */
[data-ambient-dots]{position:relative;isolation:isolate}
.sf-ambient-dots{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;color:rgb(74,144,226)}
/* Decorative pointer effects never capture clicks. */

.sf-motion-positioned{position:relative}
.sf-card-light{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;rotate:0deg;scale:1;background:radial-gradient(ellipse 240px 200px at var(--sf-card-light-x,50%) var(--sf-card-light-y,50%),rgb(22 135 245 / .14),transparent 75%);box-shadow:inset 0 0 0 1px rgb(22 135 245 / .12);transition:opacity .2s var(--sf-motion-ease),rotate .16s ease,scale .48s var(--sf-motion-ease)}
/* The glow keeps one size across controls, navigation and gaps; only its transform moves. */
.sf-surface-light-layer{position:fixed;inset:0;z-index:var(--sf-z-pointer,1400);pointer-events:none;overflow:clip}
.sf-surface-light-layer[data-local]{position:absolute}
.sf-surface-light{position:absolute;left:0;top:0;width:480px;height:400px;pointer-events:none;opacity:0;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse 240px 200px at 50% 50%,rgb(22 135 245 / var(--sf-light-alpha,.07)),transparent 75%);transition:opacity .2s var(--sf-motion-ease,ease);will-change:transform}
.sf-surface-light[data-local]{position:absolute}
.sf-surface-light[data-strength=quiet]{--sf-light-alpha:.07;--sf-light-border:.06}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Keep text flat; the decorative light alone responds with subtle depth. */
  body .sf-motion-card{translate:0 0;transition:translate .48s var(--sf-motion-ease),box-shadow .48s var(--sf-motion-ease),border-color .48s ease}
  html:not([data-motion=off]) body .sf-motion-card.is-motion-hovered{translate:0 max(var(--sf-motion-lift,-6px),-2px);box-shadow:0 6px 18px rgb(15 23 42 / .07),0 2px 6px rgb(22 135 245 / .04)!important}
  html:not([data-motion=off]) .is-motion-hovered>.sf-card-light{opacity:1;rotate:var(--sf-card-axis-x,0) var(--sf-card-axis-y,1) 0 var(--sf-card-tilt,0deg);scale:1.003}
  html:not([data-motion=off]) .sf-surface-light.is-motion-hovered{opacity:1}
}



html[data-motion=off] :is(.sf-card-light,.sf-surface-light){display:none}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.sf-surface-light{display:none}}
@media print{.sf-card-light,.sf-surface-light{display:none}}
html[data-motion=off] :is(.sf-section-banner,.sf-settings-hero,.sf-admin-footer,.sf-setup-celebration,.sf-vsla-admin-shell):before,html[data-motion=off] :is(.sf-section-banner,.sf-settings-hero,.sf-admin-footer,.sf-setup-celebration,.sf-vsla-admin-shell):after,html[data-motion=off] .absolute.rounded-full:empty{animation:none}


/* White on dark heroes: every hero in the dark theme, and the provider hero, which is dark in both. */
html[data-theme=dark] .sf-ambient-dots{color:rgb(255,255,255)}

@keyframes sf-ambient-drift-a{
    0%,100%{translate:0 0;scale:1}
    33%{translate:-18px 14px;scale:1.06}
    66%{translate:12px -10px;scale:.96}
}
@keyframes sf-ambient-drift-b{
    0%,100%{translate:0 0;scale:1}
    50%{translate:22px -16px;scale:1.08}
}
@keyframes sf-ambient-drift-c{
    0%,100%{translate:0 0;scale:1}
    25%{translate:10px 12px;scale:1.04}
    50%{translate:-8px 18px;scale:.97}
    75%{translate:-14px -6px;scale:1.05}
}
@keyframes sf-ambient-drift-soft{
    0%,100%{translate:0 0;scale:1}
    50%{translate:-7px 6px;scale:1.05}
}
@keyframes sf-ambient-drift-transform{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(-20px,14px) scale(1.06)}
    66%{transform:translate(14px,-12px) scale(.96)}
}

/* Motion only when the operating system has not asked to reduce it, as the rest of the app does. */
@media (prefers-reduced-motion:no-preference){
    /* Section banners (dashboard, reports, every workspace hero) */
    .sf-section-banner:before{animation:sf-ambient-drift-a 14s ease-in-out infinite}
    .sf-section-banner:after{animation:sf-ambient-drift-b 11s ease-in-out -4s infinite}

    /* Heroes */
    .sf-settings-hero:after{animation:sf-ambient-drift-a 16s ease-in-out -3s infinite}

    /* Admin shell backdrop (fixed, behind every admin page) */
    body[data-private-shell="admin"] .sf-vsla-admin-shell::before{animation:sf-ambient-drift-a 22s ease-in-out infinite}
    body[data-private-shell="admin"] .sf-vsla-admin-shell::after{animation:sf-ambient-drift-b 18s ease-in-out -6s infinite}

    /* Tailwind utility circles: empty, positioned, rounded and blurred (pricing hero,
       newsletter, supplier profile, admin billing). Pricing orbits animate already. */
    .absolute.rounded-full:empty:is([class^="blur-"],[class*=" blur-"]):not(.pricing-orbit){animation:sf-ambient-drift-transform 16s ease-in-out infinite}
    .absolute.rounded-full:empty:is([class^="blur-"],[class*=" blur-"]):not(.pricing-orbit)+.absolute.rounded-full:empty{animation-duration:12s;animation-delay:-5s}

    /* Cards and panels: soft drift beside figures */
    .sf-admin-footer:after{animation:sf-ambient-drift-b 18s ease-in-out infinite}
    .sf-setup-celebration>section:before{animation:sf-ambient-drift-a 12s ease-in-out infinite}
    .sf-setup-celebration>section:after{animation:sf-ambient-drift-b 10s ease-in-out -4s infinite}

    /* Dark-theme glows */
}