/* ==========================================================================
   REDSIS — Motion layer (additive)
   Pairs with static/js/redsis-animations.js. No layout, color, spacing, or
   content changes: every rule is gated behind html.anim (set by JS), and the
   whole layer is inert for reduced-motion users, print, and no-JS.
   ========================================================================== */

:root{
  --anim-ease:cubic-bezier(.22,.61,.36,1);
  --anim-dur:.85s;
}

@media (prefers-reduced-motion: no-preference){

/* ---------- Scroll-in reveals ---------- */
html.anim [data-anim]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--anim-dur) var(--anim-ease),transform var(--anim-dur) var(--anim-ease);
  transition-delay:var(--anim-delay,0s);
}
html.anim [data-anim="fade"]{transform:none}
html.anim [data-anim="card"]{transform:translateY(30px) scale(.975)}
html.anim [data-anim].anim-in{opacity:1;transform:none}

/* ---------- Yellow rules draw in ---------- */
html.anim .anim-rule{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--anim-ease) .2s}
html.anim .rule-center.anim-rule{transform-origin:center}
html.anim .anim-rule.anim-in{transform:scaleX(1)}

/* ---------- Hero entrance on load ---------- */
html.anim .anim-hero-el{
  opacity:0;transform:translateY(24px);
  animation:animRise .95s var(--anim-ease) forwards;
  animation-delay:var(--anim-delay,0s);
}
html.anim .anim-hero-media{
  opacity:0;transform:scale(.955) translateY(16px);
  animation:animMedia 1.15s var(--anim-ease) .3s forwards;
}
@keyframes animRise{to{opacity:1;transform:none}}
@keyframes animMedia{to{opacity:1;transform:none}}

/* ---------- Mega-menu open polish ---------- */
html.anim .mega{transform:translateY(-14px);transition:opacity .22s var(--anim-ease),transform .26s var(--anim-ease),visibility .26s}
html.anim .mega.is-open .mega-col{animation:animMegaCol .5s var(--anim-ease) backwards}
html.anim .mega.is-open .mega-col:nth-child(1){animation-delay:.03s}
html.anim .mega.is-open .mega-col:nth-child(2){animation-delay:.07s}
html.anim .mega.is-open .mega-col:nth-child(3){animation-delay:.11s}
html.anim .mega.is-open .mega-col:nth-child(4){animation-delay:.15s}
html.anim .mega.is-open .mega-col:nth-child(5){animation-delay:.19s}
html.anim .mega.is-open .mega-col:nth-child(6){animation-delay:.23s}
html.anim .mega.is-open .mega-col:nth-child(7){animation-delay:.27s}
html.anim .mega.is-open .mega-col:nth-child(8){animation-delay:.31s}
html.anim .mega.is-open .mega-foot,
html.anim .mega.is-open .mega-cta{animation:animMegaCol .5s var(--anim-ease) .2s backwards}
@keyframes animMegaCol{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Region panel */
html.anim .region-panel.is-open .region-left{animation:animMegaCol .45s var(--anim-ease) .04s backwards}
html.anim .region-panel.is-open .region-right{animation:animMegaCol .45s var(--anim-ease) .12s backwards}

/* ---------- Tab / explorer crossfades ---------- */
html.anim .hv-mode.is-active{animation:animPanel .55s var(--anim-ease)}
html.anim .hv-exp-detail.is-active{animation:animPanel .45s var(--anim-ease)}
html.anim .hv-cdetail.is-active{animation:animPanel .45s var(--anim-ease)}
html.anim .hv-faq-item[open] .hv-faq-a{animation:animPanel .4s var(--anim-ease)}
@keyframes animPanel{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.anim .hv-toggle button{transition:background .25s var(--anim-ease),color .25s var(--anim-ease),box-shadow .25s var(--anim-ease)}

/* ---------- Icon micro-animations on hover ---------- */
html.anim .card:hover .card-icon svg,
html.anim .hv-diff-card:hover .hv-diff-ic svg,
html.anim .hv-gain-card:hover .hv-gain-ic svg,
html.anim .hv-model-card:hover .hv-model-ic svg,
html.anim .hv-support-card:hover .hv-support-ic svg,
html.anim .hv-node:hover .hv-node-ic svg,
html.anim .hv-proof-item:hover .hv-proof-ic svg,
html.anim .hv-exp-row:hover .exp-ic svg{animation:animIconPop .55s var(--anim-ease)}
@keyframes animIconPop{
  0%{transform:none}
  35%{transform:translateY(-3px) scale(1.1)}
  70%{transform:translateY(0) scale(1.03)}
  100%{transform:none}
}

/* ---------- Counters ---------- */
html.anim .anim-counting{font-variant-numeric:tabular-nums}

} /* end no-preference */

/* Safety: animations never hide content in print */
@media print{
  [data-anim],.anim-rule,.anim-hero-el,.anim-hero-media{opacity:1!important;transform:none!important;animation:none!important}
}