/* ACSM AMS motion layer: ambient backgrounds, entrance animations and hover feedback.
   Loaded after the page stylesheets on public, member and staff pages.
   Everything here is switched off for visitors who ask for reduced motion (bottom of file). */

:root{
  --ease-out:cubic-bezier(.2,.75,.25,1);
  --ease-spring:cubic-bezier(.34,1.45,.64,1);
}

/* ---------- Ambient background (light areas) ----------
   A fixed layer behind all content: slow-drifting brand colour fields and a faint dot texture. */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1}
body::before{
  inset:-25vmax;
  background:
    radial-gradient(34vmax 34vmax at 18% 28%,rgba(83,200,233,.17),transparent 70%),
    radial-gradient(30vmax 30vmax at 82% 22%,rgba(117,77,180,.12),transparent 70%),
    radial-gradient(32vmax 32vmax at 62% 82%,rgba(212,250,33,.15),transparent 70%),
    radial-gradient(26vmax 26vmax at 30% 78%,rgba(0,125,179,.08),transparent 70%);
  animation:ambient-drift 46s ease-in-out infinite alternate;
  will-change:transform;
}
body::after{
  inset:0;
  background-image:radial-gradient(rgba(33,38,33,.075) 1px,transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 85%);
  animation:ambient-dots 60s linear infinite;
}
@keyframes ambient-drift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  33%{transform:translate3d(4vmax,-3vmax,0) rotate(8deg) scale(1.06)}
  66%{transform:translate3d(-3vmax,3vmax,0) rotate(-6deg) scale(.97)}
  100%{transform:translate3d(2vmax,4vmax,0) rotate(4deg) scale(1.04)}
}
@keyframes ambient-dots{to{background-position:280px 140px}}

/* ---------- Ambient glow (dark brand panels) ---------- */
.site-header,.site-footer,.hero-art,.donate-band,.member-card,.success-header,.feature-card.dark,.sidebar,.login-brand{
  background-image:
    radial-gradient(40% 60% at 15% 20%,rgba(83,200,233,.16),transparent 70%),
    radial-gradient(45% 55% at 85% 30%,rgba(117,77,180,.20),transparent 70%),
    radial-gradient(40% 50% at 55% 95%,rgba(212,250,33,.10),transparent 70%);
  background-size:200% 200%;
  background-repeat:no-repeat;
  animation:panel-glow 28s ease-in-out infinite alternate;
}
.site-header{animation-duration:34s}
.site-footer{animation-duration:40s;animation-delay:-12s}
.sidebar{animation-duration:36s;animation-delay:-6s}
@keyframes panel-glow{
  0%{background-position:0% 0%}
  50%{background-position:100% 40%}
  100%{background-position:40% 100%}
}
.hero-art .art-label{background:rgba(33,38,33,.82)}
.login-shell{background:transparent}

/* ---------- Home hero: official ACSM mark ---------- */
.hero-art svg.hero-mark{position:relative;inset:auto;z-index:0;width:min(70%,400px);height:auto;margin-top:-28px;overflow:visible}
.hero-art .hero-grid{animation:grid-pan 30s linear infinite alternate}
@keyframes grid-pan{from{transform:translate(0,0)}to{transform:translate(-20px,-14px) scale(1.04)}}
.hero-glow{position:absolute;width:70%;aspect-ratio:1;left:15%;top:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(83,200,233,.22),rgba(117,77,180,.12) 55%,transparent);filter:blur(10px);animation:glow-breathe 9s ease-in-out infinite;pointer-events:none}
@keyframes glow-breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.hero-mark path{transform-box:fill-box}
.hero-mark .m-cyan{transform-origin:20% 90%;animation:mark-sweep .9s var(--ease-out) .15s backwards,mark-float 8s ease-in-out 1.6s infinite}
.hero-mark .m-lime{transform-origin:15% 85%;animation:mark-sweep .9s var(--ease-out) .32s backwards,mark-float 9s ease-in-out 1.9s infinite}
.hero-mark .m-body{transform-origin:10% 80%;animation:mark-sweep .9s var(--ease-out) .49s backwards,mark-float 7.5s ease-in-out 2.1s infinite}
.hero-mark .m-head{transform-origin:50% 50%;animation:mark-pop .7s var(--ease-spring) .85s backwards,mark-bob 6s ease-in-out 1.8s infinite}
@keyframes mark-sweep{from{opacity:0;transform:translate(-36px,28px) rotate(-9deg) scale(.92)}}
@keyframes mark-pop{from{opacity:0;transform:translateY(18px) scale(.2)}}
@keyframes mark-float{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(.8deg)}}
@keyframes mark-bob{0%,100%{transform:none}50%{transform:translateY(-8px)}}
.hero-art .art-label{animation:fade-in .6s ease .1s backwards}
.hero-art .art-caption{animation:rise .7s var(--ease-out) 1.1s backwards}

/* ---------- Entrance animations ----------
   Visible on first paint: plays once on load (no JavaScript needed).
   Further down the page: site/motion.js marks items with .rv and reveals them as they scroll into view. */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes slide-down{from{opacity:0;transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

.hero>div:first-child>*,
.page-intro .container>*,.page-intro>*:not(.container),
.page-heading,
.section-head,.feature-card,.explore-card,.card,.product,.bundle-card,.cert-card,.chapter-card,.sidebar-card,.form-card,.signin-card,
.donate-band,.donate-story,.donation-form,.member-card,.dashboard-section,.account-panel,.account-nav,.receipt-panel,.cart-line,.filter-bar,.builder,.callout,.empty-state,
.kpi,.panel,.mode-card,.login-form,.login-brand>*{
  animation:rise .65s var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * 70ms + 60ms);
}
.donate-band,.member-card,.feature-card.dark{animation:rise .65s var(--ease-out) backwards,panel-glow 28s ease-in-out infinite alternate;animation-delay:calc(var(--i,0) * 70ms + 60ms),0s}
.hero>div:first-child>*{animation-duration:.8s}
.hero>div:first-child>*:nth-child(1){--i:0}.hero>div:first-child>*:nth-child(2){--i:1}.hero>div:first-child>*:nth-child(3){--i:2}.hero>div:first-child>*:nth-child(4){--i:3}
.page-intro .container>*:nth-child(2){--i:1}.page-intro .container>*:nth-child(3){--i:2}.page-intro .container>*:nth-child(4){--i:3}
.mo-nest{animation:none!important}
.rv{animation:none!important;opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.rv.in{opacity:1;transform:none}
.rv:is(.donate-band,.member-card,.feature-card.dark){animation:panel-glow 28s ease-in-out infinite alternate!important}

.flash,.feedback,.notice-inline,.payment-error{animation:slide-down .45s var(--ease-out) backwards}
.cart-notice.visible{animation:rise .5s var(--ease-spring) backwards}
.cart-count{display:inline-block;animation:pop .6s var(--ease-spring) .5s}

/* Progress: bars fill and CEC rings draw when shown. */
.progress span,.progress-track span{transform-origin:left center;animation:bar-fill 1.1s var(--ease-out) .35s backwards}
@keyframes bar-fill{from{transform:scaleX(0)}}
.cec-ring circle+circle{animation:ring-draw 1.4s var(--ease-out) .3s backwards}
@keyframes ring-draw{from{stroke-dasharray:0 314.16}}
.profile-progress progress{animation:fade-in .6s ease .2s backwards}

/* ---------- Hover and press feedback ---------- */
.btn{transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out),box-shadow .2s}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px rgba(33,38,33,.16)}
.btn:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:none;transition-duration:.08s}
.btn span[aria-hidden=true],.text-link span[aria-hidden=true]{display:inline-block;transition:transform .25s var(--ease-out)}
.btn:hover span[aria-hidden=true],.text-link:hover span[aria-hidden=true]{transform:translateX(4px)}
.text-link{transition:color .2s}

.feature-card,.explore-card,.product,.bundle-card,.cert-card,.chapter-card,.mode-card,.kpi{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.feature-card:hover,.explore-card:hover,.product:hover,.bundle-card:hover,.cert-card:hover,.chapter-card:hover,.mode-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(33,38,33,.12)}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(33,38,33,.08)}
.feature-card .big-num{display:inline-block;transition:transform .4s var(--ease-spring)}
.feature-card:hover .big-num{transform:scale(1.08) rotate(-3deg)}

.site-nav a:not(.nav-give):not([aria-current=page])::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.site-nav a:not(.nav-give):not([aria-current=page]):hover::after{transform:scaleX(1)}
.site-nav a{transition:color .2s}
.logo-link img{transition:transform .35s var(--ease-out),filter .35s}
.logo-link:hover img{transform:translateY(-1px);filter:drop-shadow(0 4px 10px rgba(83,200,233,.35))}
.footer-top nav a{display:block;width:max-content;transition:transform .2s var(--ease-out),color .2s}
.footer-top nav a:hover{transform:translateX(4px)}

.side-nav a{transition:background .2s,color .2s,padding-left .25s var(--ease-out)}
.side-nav a:hover:not(.active){padding-left:16px}
.side-nav a .nav-icon{transition:transform .25s var(--ease-spring)}
.side-nav a:hover .nav-icon{transform:scale(1.12)}
.side-nav a.active{animation:fade-in .4s ease}
.nav-count{animation:pop .7s var(--ease-spring) .6s}

table tbody tr{transition:background-color .2s}
.tab,.amount-chip,.tag-chip,.badge{transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease-out)}
.amount-chip:hover,.tab:hover{transform:translateY(-1px)}
.field input,.field select,.field textarea,input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 4px rgba(83,200,233,.22)}

/* ---------- Reduced motion ----------
   Keep the colour fields as a still background; stop every animation and hover movement. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  .btn:hover,.feature-card:hover,.explore-card:hover,.product:hover,.bundle-card:hover,.cert-card:hover,.chapter-card:hover,.mode-card:hover,.kpi:hover{transform:none!important}
}

/* Printing: no backgrounds or motion. */
@media print{body::before,body::after,.hero-glow{display:none}*{animation:none!important}}