/* ═══════════════════════════════════════════════════════════════════════
   MainTV storefront & account — motion layer (v10)
   animate-ui ideas rebuilt in CSS: Fade/Blur/Slide reveal, Highlight
   Text, Shine, Ripple, Tilt, Image Zoom, Scroll Progress, Counting Number,
   Toast. Ease-out only (no bounce), short durations, and all of it stops
   for prefers-reduced-motion or when the admin switches motion off.
   Class prefix "mo-" so nothing collides with style.css.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--mo-ease:cubic-bezier(.22,1,.36,1);--mo-ease-io:cubic-bezier(.65,0,.35,1)}

/* reveal */
.mo-rv{opacity:0;transform:translateY(16px);filter:blur(4px);
  transition:opacity 640ms var(--mo-ease),transform 640ms var(--mo-ease),filter 640ms var(--mo-ease);
  transition-delay:var(--mo-d,0ms);will-change:opacity,transform}
.mo-rv.mo-l{transform:translateX(-22px)}
.mo-rv.mo-r{transform:translateX(22px)}
.mo-rv.mo-z{transform:scale(.96)}
.mo-rv.mo-in{opacity:1;transform:none;filter:none}
.mo-done{will-change:auto}

/* split headings: words rise one after another */
.mo-w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(5px);
  transition:opacity 560ms var(--mo-ease),transform 560ms var(--mo-ease),filter 560ms var(--mo-ease);transition-delay:calc(var(--i,0) * 55ms + 80ms)}
.mo-in .mo-w,.mo-w.mo-in{opacity:1;transform:none;filter:none}
.mo-rv.mo-head{opacity:1;transform:none;filter:none}

/* highlight text: accent wash sweeps behind the key words of a heading */
.mo-hl{background-image:linear-gradient(transparent 58%,color-mix(in srgb,var(--cyan,#0FB89E) 26%,transparent) 58%);
  background-repeat:no-repeat;background-size:0% 100%;transition:background-size 900ms var(--mo-ease) 220ms;
  border-radius:3px;padding-inline:2px}
[dir="rtl"] .mo-hl{background-position:100% 0}
.mo-in .mo-hl,.mo-hl.mo-in{background-size:100% 100%}

/* shimmering text (for badges like "Free 24h test") */
.mo-shimmer{background:linear-gradient(100deg,currentColor 40%,color-mix(in srgb,currentColor 35%,#fff) 50%,currentColor 60%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:moShimmer 3.2s linear infinite}
@keyframes moShimmer{from{background-position:120% 0}to{background-position:-120% 0}}

/* shine sweep on primary buttons */
.btn-primary,.pc-buy,.reg-btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary .mo-shine,.pc-buy .mo-shine,.reg-btn .mo-shine{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-130%)}
.btn-primary:hover .mo-shine,.pc-buy:hover .mo-shine,.reg-btn:hover .mo-shine{transform:translateX(130%);transition:transform 760ms var(--mo-ease)}

/* ripple */
.mo-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.2;transform:scale(0);
  animation:moRipple 600ms var(--mo-ease) forwards;z-index:2}
@keyframes moRipple{to{transform:scale(1);opacity:0}}

/* tilt cards (desktop pointer only) */
.mo-tilt{transform-style:preserve-3d;transition:transform 320ms var(--mo-ease),box-shadow 320ms var(--mo-ease)}
.mo-tilt.mo-tilting{transition:transform 80ms linear,box-shadow 320ms var(--mo-ease)}
.mo-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 260ms;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.18),transparent 55%);z-index:3}
.mo-tilt:hover .mo-glare{opacity:1}

/* image zoom inside cards */
.mo-zoom{overflow:hidden}
.mo-zoom img{transition:transform 700ms var(--mo-ease)}
.mo-zoom:hover img{transform:scale(1.06)}

/* magnetic (big call-to-action buttons) */
.mo-mag{transition:transform 300ms var(--mo-ease)}

/* scroll progress */
.mo-prog{position:fixed;top:0;inset-inline:0;height:3px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan,#0FB89E),color-mix(in srgb,var(--cyan,#0FB89E) 60%,#fff));
  transform:scaleX(0);transform-origin:left}
[dir="rtl"] .mo-prog{transform-origin:right}

/* page enter */
.mo-page{animation:moPage 480ms var(--mo-ease) both}
@keyframes moPage{from{opacity:0;transform:translateY(8px)}}

/* account area: cards lift, numbers count */
.mo-lift{transition:transform 260ms var(--mo-ease),box-shadow 260ms var(--mo-ease)}
.mo-lift:hover{transform:translateY(-3px)}

/* accordion auto-height (FAQ) */
.mo-acc{overflow:hidden;transition:height 340ms var(--mo-ease)}

/* toasts for flash messages */
.mo-toasts{position:fixed;z-index:10000;top:84px;inset-inline-end:18px;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px))}
.mo-toast{display:flex;gap:11px;align-items:flex-start;padding:13px 14px 15px;border-radius:14px;background:var(--surface,#fff);color:var(--text,#121a26);
  border:1px solid var(--line,#e3e8f0);box-shadow:0 18px 40px -16px rgba(0,0,0,.35);position:relative;overflow:hidden;font-size:14px;line-height:1.6;
  animation:moToastIn 360ms var(--mo-ease) both}
.mo-toast.mo-out{animation:moToastOut 240ms var(--mo-ease-io) forwards}
@keyframes moToastIn{from{opacity:0;transform:translateY(-10px) scale(.97)}}
@keyframes moToastOut{to{opacity:0;transform:translateY(-6px) scale(.98)}}
.mo-toast i.mo-ti{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;color:#fff;font-style:normal;font-weight:800;font-size:13px}
.mo-toast.success i.mo-ti{background:#12A15F}.mo-toast.error i.mo-ti{background:#E5484D}.mo-toast.warning i.mo-ti{background:#D98A00}.mo-toast.info i.mo-ti{background:#2F6FE0}
.mo-toast .mo-tb{flex:1;min-width:0}
.mo-toast button{border:0;background:none;color:inherit;opacity:.5;cursor:pointer;font-size:18px;line-height:1;padding:0 2px}
.mo-toast button:hover{opacity:1}
.mo-toast .mo-bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:100%;transform-origin:left;opacity:.5}
[dir="rtl"] .mo-toast .mo-bar{transform-origin:right}
.mo-toast.success .mo-bar{background:#12A15F}.mo-toast.error .mo-bar{background:#E5484D}.mo-toast.warning .mo-bar{background:#D98A00}.mo-toast.info .mo-bar{background:#2F6FE0}
@media (max-width:700px){.mo-toasts{top:auto;bottom:84px;inset-inline:12px;width:auto}}


/* ── v10.2 entrance variants (animate-ui Fade / Zoom / Flip / Slide / Blur) ── */
.mo-rv.mo-z{transform:scale(.9) translateY(10px)}
.mo-rv.mo-flip{transform:perspective(1000px) rotateX(16deg) translateY(34px) scale(.97);transform-origin:50% 100%}
.mo-rv.mo-fade{transform:none;filter:none}
.mo-rv.mo-mask{transform:none;filter:none;opacity:1;clip-path:inset(0 0 100% 0 round 18px);
  transition:clip-path 900ms var(--mo-ease),opacity 400ms;transition-delay:var(--mo-d,0ms)}
.mo-rv.mo-mask.mo-in{clip-path:inset(0 0 0 0 round 0)}
.mo-rv.mo-in.mo-z,.mo-rv.mo-in.mo-flip{transform:none}

/* parts of a card follow it in */
.mo-rv .mo-k{opacity:0;transform:translateY(10px);transition:opacity 520ms var(--mo-ease),transform 520ms var(--mo-ease);
  transition-delay:calc(var(--mo-d,0ms) + 160ms + var(--k,0) * 70ms)}
.mo-rv.mo-in .mo-k{opacity:1;transform:none}
.mo-rv .mo-li{opacity:0;transform:translateX(calc(var(--mo-dir,1) * -14px));transition:opacity 480ms var(--mo-ease),transform 480ms var(--mo-ease);
  transition-delay:calc(var(--mo-d,0ms) + 260ms + var(--k,0) * 55ms)}
[dir="rtl"] .mo-rv .mo-li{--mo-dir:-1}
.mo-rv.mo-in .mo-li{opacity:1;transform:none}
.mo-rv .mo-pop.mo-k{transform:scale(.4) rotate(-14deg)}
.mo-rv.mo-in .mo-pop.mo-k{transform:none;transition-duration:700ms}
.mo-rv .fb-rule.mo-k{transform:scaleX(0);transform-origin:left}
[dir="rtl"] .mo-rv .fb-rule.mo-k{transform-origin:right}
.mo-rv.mo-in .fb-rule.mo-k{transform:scaleX(1)}
/* icons: a small lift and tilt on hover (animate-ui animated icons) */
.mo-pop{transition:transform 380ms var(--mo-ease)}
:is(.feature-box,.stat-box,.shop-ghead,.bl-cta):hover .mo-pop{transform:translateY(-3px) rotate(-6deg) scale(1.06)}

/* eyebrows / badges: one shimmer sweep when they enter, then on hover */
.mo-shine-txt{position:relative;overflow:hidden;isolation:isolate}
.mo-shine-txt::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);mix-blend-mode:soft-light}
.mo-in .mo-shine-txt::after,.mo-shine-txt:hover::after{animation:moSweep 1.2s var(--mo-ease) .5s}
@keyframes moSweep{to{transform:translateX(120%)}}

/* header assembles itself on the first page of a visit */
.mo-boot{animation:moBoot 640ms var(--mo-ease) both;animation-delay:calc(var(--k,0) * 45ms + 60ms)}
@keyframes moBoot{from{opacity:0;transform:translateY(-12px);filter:blur(4px)}}

/* tab panels: switching plans / lists replays the entrance */
.price-panel.active .price-card{animation:moTabIn 620ms var(--mo-ease) both}
.price-panel.active .price-card:nth-child(2){animation-delay:70ms}
.price-panel.active .price-card:nth-child(3){animation-delay:140ms}
.price-panel.active .price-card:nth-child(4){animation-delay:210ms}
@keyframes moTabIn{from{opacity:0;transform:perspective(1000px) rotateX(10deg) translateY(20px)}}
.mo-rv.price-card:not(.mo-in){animation:none}
.price-tabs button,.mg-tabs button,.bl-chips a{transition:transform 220ms var(--mo-ease),background 220ms,color 220ms,box-shadow 220ms}
.price-tabs button:active,.mg-tabs button:active,.bl-chips a:active{transform:scale(.95)}

/* links in the footer: underline slides in */
.footer-grid a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;
  background-position:100% 100%;transition:background-size 320ms var(--mo-ease),color 200ms}
.footer-grid a:hover{background-size:100% 1px;background-position:0 100%}
[dir="rtl"] .footer-grid a{background-position:0 100%}
[dir="rtl"] .footer-grid a:hover{background-position:100% 100%}

/* ── Theme toggler: the new theme wipes in from the side of the page ── */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(root){animation-duration:760ms}
html.tt-from-r::view-transition-new(root){animation:ttFromR 760ms cubic-bezier(.65,0,.35,1) both}
html.tt-from-l::view-transition-new(root){animation:ttFromL 760ms cubic-bezier(.65,0,.35,1) both}
@keyframes ttFromR{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ttFromL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tt-edge{position:fixed;top:0;bottom:0;width:120px;z-index:2147483646;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cyan,#0FB89E) 40%,transparent) 50%,transparent)}
.tt-edge.r{right:-120px;animation:ttEdgeR 760ms cubic-bezier(.65,0,.35,1) forwards}
.tt-edge.l{left:-120px;animation:ttEdgeL 760ms cubic-bezier(.65,0,.35,1) forwards}
@keyframes ttEdgeR{to{transform:translateX(calc(-100vw - 120px))}}
@keyframes ttEdgeL{to{transform:translateX(calc(100vw + 120px))}}
/* browsers without View Transitions: a curtain in the new colour */
.tt-curtain{position:fixed;inset:0;z-index:2147483645;pointer-events:none}
.tt-curtain.r{animation:ttCurR 760ms cubic-bezier(.65,0,.35,1) forwards}
.tt-curtain.l{animation:ttCurL 760ms cubic-bezier(.65,0,.35,1) forwards}
@keyframes ttCurR{0%{clip-path:inset(0 0 0 100%)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes ttCurL{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
.theme-toggle .sun,.theme-toggle .moon{transition:transform 600ms var(--mo-ease),opacity 300ms}

/* motion off */
@media (prefers-reduced-motion:reduce){
  .mo-rv,.mo-w,.mo-k,.mo-li{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;clip-path:none!important}
  .mo-boot,.price-panel.active .price-card{animation:none!important}
  .mo-hl{background-size:100% 100%;transition:none}
  .mo-shimmer{animation:none;-webkit-text-fill-color:currentColor;background:none}
  .mo-page,.mo-toast{animation:none}
  .mo-tilt,.mo-zoom img,.mo-mag{transition:none;transform:none!important}
}
html.motion-off .mo-rv,html.motion-off .mo-w,html.motion-off .mo-k,html.motion-off .mo-li{opacity:1;transform:none;filter:none;transition:none;clip-path:none}
html.motion-off .mo-hl{background-size:100% 100%;transition:none}
html.motion-off .mo-shimmer{animation:none;-webkit-text-fill-color:currentColor;background:none}
html.motion-off .mo-page{animation:none}