/* ============================================================
   TOVIAN — MOTION LAYER (lightweight, CSS + vanilla JS)
   Pair with tovian-motion.js. Load ONLY on pages that need it
   (index hero, cases hub, cabinet). All effects gate on
   html.mtn-on (set by tovian-motion.js only when the user does
   NOT prefer reduced motion) and lean on design tokens so the
   light theme + both themes inherit correctly.
   ============================================================ */

/* ---------- 4.5 · REDUCED MOTION (mandatory hard-stop) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   4.1 · HERO — animated ray/gradient field + route stepper + parallax
   ===================================================================== */

/* soft animated gradient field layered over the hero photo (screen blend) */
.mtn-rays{position:absolute;left:50%;top:-26%;width:138%;height:116%;transform:translateX(-50%);
  z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55;filter:blur(26px);
  background:
    radial-gradient(38% 58% at 30% 2%, rgba(168,232,12,.12), transparent 60%),
    radial-gradient(34% 54% at 72% 6%, rgba(189,245,46,.08), transparent 62%);}
html.mtn-on .mtn-rays{animation:mtnRaysDrift 19s ease-in-out infinite alternate;}
@keyframes mtnRaysDrift{
  0%{opacity:.42;transform:translateX(-52%) translateY(-1%)}
  100%{opacity:.66;transform:translateX(-48%) translateY(2.4%)}}
/* desktop parallax target (JS sets --mtn-px/--mtn-py) */
@media (min-width:761px){
  .hhero__photo{transform:translate3d(var(--mtn-px,0),var(--mtn-py,0),0) scale(1.04);transition:transform .5s var(--ease);}
  .mtn-rays{transition:transform .6s var(--ease);}
}

/* route stepper — найти → проверить → рассчитать → исполнить.
   Lives on the always-dark hero photo (same image in both themes), so
   colours are fixed light-on-dark and must NOT flip with the theme. */
.hroute{position:relative;display:inline-flex;align-items:center;gap:clamp(9px,1.3vw,15px);
  margin-top:clamp(20px,2.4vw,30px);padding-bottom:13px;max-width:100%;
  font-family:'Space Grotesk',sans-serif;font-size:clamp(11px,1vw,13.5px);
  text-transform:lowercase;letter-spacing:.01em;color:rgba(238,241,232,.62);white-space:nowrap;}
.hroute__step{display:inline-flex;align-items:center;gap:8px;transition:color .55s var(--ease);}
.hroute__step::after{content:"→";margin-left:clamp(9px,1.3vw,15px);color:rgba(238,241,232,.42);
  font-size:.92em;transition:color .55s var(--ease),opacity .55s var(--ease);}
.hroute__step:last-of-type::after{display:none;}
.hroute__dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;transition:background .55s var(--ease),box-shadow .55s var(--ease);}
.hroute__rail{position:absolute;left:1px;right:1px;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.hroute__rail::after{content:"";position:absolute;top:0;left:0;height:100%;width:38%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--lime),transparent);transform:translateX(-130%);}
html.mtn-on .hroute__rail::after{animation:mtnRoute 5.4s var(--ease) infinite;}
@keyframes mtnRoute{0%{transform:translateX(-130%)}62%,100%{transform:translateX(330%)}}
/* dots glow in sequence as the sheen sweeps through */
html.mtn-on .hroute__step .hroute__dot{animation:mtnDot 5.4s var(--ease) infinite;}
html.mtn-on .hroute__step:nth-of-type(1) .hroute__dot{animation-delay:.15s;}
html.mtn-on .hroute__step:nth-of-type(2) .hroute__dot{animation-delay:1.25s;}
html.mtn-on .hroute__step:nth-of-type(3) .hroute__dot{animation-delay:2.35s;}
html.mtn-on .hroute__step:nth-of-type(4) .hroute__dot{animation-delay:3.45s;}
@keyframes mtnDot{
  0%,72%,100%{background:rgba(255,255,255,.16);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset;}
  10%,30%{background:var(--lime);box-shadow:0 0 12px 1px rgba(168,232,12,.6);}}
@media (max-width:760px){
  .hroute{gap:7px;font-size:clamp(9px,2.6vw,12px);}
  .hroute__step::after{margin-left:7px;}
  .hroute__dot{width:6px;height:6px;}
}

/* =====================================================================
   4.2 · CARDS — light sweep on hover (lift + border glow already in
   the design system; this only adds the sheen). Tap-friendly: the
   sweep is hover-only decoration, never carries meaning.
   ===================================================================== */
html.mtn-on .kcard__media::before,
html.mtn-on .kcase__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 48%,transparent 64%);
  transform:translateX(-120%);transition:transform .85s var(--ease);}
@media (hover:hover){
  html.mtn-on .kcard:hover .kcard__media::before,
  html.mtn-on .kcase:hover .kcase__media::before{transform:translateX(120%);}
}

/* =====================================================================
   4.3 · CASES — pop-in for show-more batches + filter swaps.
   Initial 9 reveal via the global tovian-reveal engine; this animates
   cards that become visible AFTER a user action (show-more / filter).
   All 56 <a> stay in the DOM (only .is-hidden toggles display).
   ===================================================================== */
@keyframes mtnPop{from{opacity:.001;transform:translateY(20px) scale(.985);}to{opacity:1;transform:none;}}
html.mtn-on .kcard.mtn-pop{animation:mtnPop .5s var(--ease) both;}

/* =====================================================================
   4.4 · CABINET — count-up (JS), countdown bars, timeline micro-motion,
   skeleton shimmer, status-badge pulse (processing / soon-expire only).
   ===================================================================== */

/* countdown bars animate width from 0 → target (JS adds .mtn-bar-go) */
.kb-cd__fill{transition:width 1s var(--ease);}
html.mtn-on .kb-cd__bar{position:relative;overflow:hidden;}

/* balance numbers use tabular figures so count-up doesn't jitter width */
.kb-bal__n,.kb-stat__v{font-variant-numeric:tabular-nums;}

/* project timeline (route flow) — active node breathes, line draws in */
html.mtn-on .kb-flow__s.is-now .kb-flow__n{animation:mtnNowPulse 2.6s var(--ease) infinite;}
@keyframes mtnNowPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
html.mtn-on .kb-flow__s.is-now::after,
html.mtn-on .kb-flow__s.is-now .kb-flow__t{will-change:auto;}

/* status badges — pulse ONLY for processing + soon-expire (per spec) */
html.mtn-on .kb-badge--wait,
html.mtn-on .kb-cd--warn b{animation:mtnBadgePulse 1.8s ease-in-out infinite;}
@keyframes mtnBadgePulse{0%,100%{opacity:1;}50%{opacity:.6;}}
/* processing badge gets a tiny travelling dot of light */
html.mtn-on .kb-badge--wait{position:relative;overflow:hidden;}
html.mtn-on .kb-badge--wait::after{content:"";position:absolute;top:0;left:0;height:100%;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform:translateX(-130%);animation:mtnWaitSweep 1.9s linear infinite;}
@keyframes mtnWaitSweep{0%{transform:translateX(-130%)}100%{transform:translateX(330%)}}

/* skeleton shimmer — shown briefly before cabinet data paints */
.mtn-skeleton{display:grid;gap:14px;}
.mtn-skeleton__row{height:74px;border-radius:18px;border:1px solid var(--line-2);
  background:
    linear-gradient(100deg,var(--glass-2) 30%,var(--glass) 50%,var(--glass-2) 70%) ,
    var(--card);
  background-size:220% 100%,100% 100%;}
html.mtn-on .mtn-skeleton__row{animation:mtnShimmer 1.25s linear infinite;}
.mtn-skeleton__row:nth-child(2){opacity:.85;}
.mtn-skeleton__row:nth-child(3){opacity:.7;}
@keyframes mtnShimmer{0%{background-position:160% 0,0 0;}100%{background-position:-60% 0,0 0;}}

/* count-up safety: never leave a balance blank if JS bails */
.kb-bal__n[data-mtn-to]{min-width:1ch;}

/* =====================================================================
   4.6 · CTA arrow-slide + cabinet panel transition (added for the
   Yandex/hero/motion pass). All hover-only / one-shot, reduced-motion safe.
   ===================================================================== */
@media (hover:hover){
  html.mtn-on .btn .btn__ic,
  html.mtn-on .kb-act .btn__ic{transition:transform .35s var(--ease);}
  html.mtn-on .btn:hover .btn__ic{transform:translate(2px,-2px);}
}
/* cabinet — soft fade/slide when a section panel becomes visible */
html.mtn-on .kb-main [data-panel]:not([hidden]){animation:kbPanelIn .42s var(--ease) both;}
@keyframes kbPanelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* cabinet hero glow + static-hero entrance respect reduced motion automatically */
@media (prefers-reduced-motion:reduce){
  html.mtn-on .kb-main [data-panel]:not([hidden]){animation:none;}
  html.mtn-on .btn:hover .btn__ic{transform:none;}
}