/*!
 * TVB Motion System v1.0 — additive layer only. Pairs with tvb-motion.js.
 * Kill switch: remove the two tvb-motion enqueue lines in functions.php.
 * Rules honored: transform/opacity/filter/clip-path/background-position only;
 * all hidden states gated behind html.tvb-js; prefers-reduced-motion = static.
 */
:root{
  --tvb-ease-out:var(--ease,cubic-bezier(.16,1,.3,1));
  --tvb-ease-inout:cubic-bezier(.65,0,.35,1);
  --tvbm-dur:.7s;
}

/* ---------- 1. Scroll progress bar (above topbar; never hides content) ---------- */
#tvbm-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:100000;pointer-events:none;
  background:linear-gradient(90deg,#0b2a4a 0%,var(--cyan,#00c9c8) 100%);
  transform:scaleX(0);transform-origin:0 50%;opacity:.9}

/* ---------- 2. Auto reveal engine (JS tags [data-tvbm]; no-JS = fully visible) ---------- */
html.tvb-js [data-tvbm]{opacity:0;transition:opacity var(--tvbm-dur) var(--tvb-ease-out),transform var(--tvbm-dur) var(--tvb-ease-out),filter var(--tvbm-dur) var(--tvb-ease-out),clip-path var(--tvbm-dur) var(--tvb-ease-out);transition-delay:var(--tvbm-d,0s)}
html.tvb-js [data-tvbm="up"]{transform:translateY(28px)}
html.tvb-js [data-tvbm="scale"]{transform:scale(.96)}
html.tvb-js [data-tvbm="blur"]{transform:translateY(12px);filter:blur(8px)}
html.tvb-js [data-tvbm="clip"]{clip-path:inset(0 100% 0 0);opacity:1}
/* end state: clip-path only for the "clip" variant — a blanket inset(0) invisibly
   sheared children that overflow their box (vial halo, floating badges, card glows) */
html.tvb-js .tvbm-in[data-tvbm]{opacity:1;transform:none;filter:none;clip-path:none}
html.tvb-js .tvbm-in[data-tvbm="clip"]{clip-path:inset(0 0 0 0)}
@media(max-width:820px){html.tvb-js [data-tvbm="up"]{transform:translateY(16px)}}

/* ---------- 3. Word-by-word headline reveal (signature) ---------- */
html.tvb-js .tvbm-word{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(6px);
  transition:opacity .55s var(--tvb-ease-out),transform .55s var(--tvb-ease-out),filter .55s var(--tvb-ease-out);
  transition-delay:var(--wd,0s);will-change:transform,filter}
html.tvb-js .tvbm-in .tvbm-word,html.tvb-js .tvbm-wdone .tvbm-word{opacity:1;transform:none;filter:none;will-change:auto}

/* ---------- 4. Header: frosted on scroll + hide-down/show-up (topbar never moves) ---------- */
html.tvb-js .site-header{transition:transform .42s var(--tvb-ease-inout),background .3s var(--tvb-ease-out),box-shadow .3s var(--tvb-ease-out)}
html.tvb-js .site-header.is-scrolled{background:rgba(5,5,10,.74);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);box-shadow:0 1px 0 0 rgba(0,201,200,.14),0 14px 40px -22px rgba(0,0,0,.8)}
html.tvb-js .site-header.tvbm-hide{transform:translateY(calc(-100% - 44px))}
/* vertical padding compression skipped by design: --header-h positions the mobile menu; compressing would shift content */

/* ---------- 5. Ambient depth layer ---------- */
#tvbm-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.tvbm-blob{position:fixed;width:58vmax;height:58vmax;border-radius:50%;filter:blur(90px);opacity:.05;pointer-events:none;z-index:0}
.tvbm-blob.b1{top:-24vmax;left:-18vmax;background:radial-gradient(circle,rgba(0,201,200,.9),transparent 62%);animation:tvbmDrift1 20s var(--tvb-ease-inout) infinite alternate}
.tvbm-blob.b2{bottom:-26vmax;right:-20vmax;background:radial-gradient(circle,rgba(0,90,200,.9),transparent 62%);animation:tvbmDrift2 26s var(--tvb-ease-inout) infinite alternate}
@keyframes tvbmDrift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(7vmax,5vmax,0)}}
@keyframes tvbmDrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6vmax,-7vmax,0)}}

/* ---------- 6. Buttons: press + periodic sheen (existing shine untouched; sheen is a JS-injected child) ---------- */
html.tvb-js .btn{will-change:auto}
html.tvb-js .btn:active{transform:scale(.97)!important;transition-duration:.12s}
.tvbm-sheen{position:absolute;top:-6px;bottom:-6px;left:-45%;width:34%;pointer-events:none;z-index:3;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.12) 45%,rgba(0,201,200,.10) 55%,transparent 100%);
  transform:skewX(-16deg) translateX(0);animation:tvbmSheen 6s linear infinite}
@keyframes tvbmSheen{0%{transform:skewX(-16deg) translateX(0);opacity:1}12%{transform:skewX(-16deg) translateX(560%);opacity:1}12.01%,100%{transform:skewX(-16deg) translateX(560%);opacity:0}}

/* ---------- 7. Cards: cursor-following highlight + tilt handled inline by JS ---------- */
.tvbm-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:1;
  transition:opacity .15s var(--tvb-ease-out);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(0,201,200,.10),transparent 65%)}
html.tvb-js .card:hover>.tvbm-glow,html.tvb-js .coalib-card:hover>.tvbm-glow{opacity:1;transition-duration:.15s}
html.tvb-js .card>.tvbm-glow,html.tvb-js .coalib-card>.tvbm-glow{transition-duration:.3s}
html.tvb-js .card,html.tvb-js .coalib-card{transform-style:preserve-3d}

/* ---------- 8. Nav underline sweep on hover (active-state rule already exists in tvb.css) ---------- */
html.tvb-js .nav-link:hover::after{right:0}

/* ---------- 9. Footer links + column reveals ---------- */
html.tvb-js .f-col a{transition:transform .2s var(--tvb-ease-out),color .2s var(--tvb-ease-out)}
html.tvb-js .f-col a:hover{transform:translateX(4px);color:var(--cyan,#00c9c8)}

/* ---------- 10. Stats: cyan underline draw (absolute — zero layout shift) ---------- */
html.tvb-js .hs{position:relative}
html.tvb-js .hs::after{content:"";position:absolute;left:22px;right:30%;bottom:-7px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan,#00c9c8),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--tvb-ease-out) .4s}
html.tvb-js .hs.tvbm-in::after{transform:scaleX(1)}

/* ---------- 11. Trust marquee (JS duplicates items into a track) ---------- */
html.tvb-js .trust-strip .container.tvbm-mq{display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.tvbm-track{display:flex;flex:none;align-items:center;gap:56px;padding-right:56px;width:max-content;
  animation:tvbmMarq var(--mqd,30s) linear infinite}
html.tvb-js .trust-strip:hover .tvbm-track{animation-play-state:paused}
@keyframes tvbmMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 12. Images inside revealing COA cards ---------- */
html.tvb-js .coalib-card[data-tvbm] img{transform:scale(1.06);transition:transform .9s var(--tvb-ease-out)}
html.tvb-js .coalib-card.tvbm-in img{transform:scale(1)}

/* ---------- 13. Anchors ---------- */
html.tvb-js{scroll-behavior:smooth;scroll-padding-top:calc(34px + var(--header-h,72px) + 16px)}

/* ---------- 14. Hero extras (home) ---------- */
html.tvb-js .hero-scroll{transition:opacity .5s var(--tvb-ease-out)}
html.tvb-js .hero-scroll.tvbm-gone{opacity:0}
html.tvb-js .badge-float{transition:transform .3s var(--tvb-ease-out)}
html.tvb-js .badge-float.tvbm-bob1{animation:tvbmBob 7s ease-in-out .4s infinite alternate}
html.tvb-js .badge-float.tvbm-bob2{animation:tvbmBob 8.4s ease-in-out 1.6s infinite alternate-reverse}
@keyframes tvbmBob{from{transform:translateY(-4px)}to{transform:translateY(5px)}}

/* ---------- 15. CTA band: slow-panning cyan wash (overlay; band's own bg untouched) ---------- */
html.tvb-js .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background-image:linear-gradient(115deg,rgba(0,201,200,0) 0%,rgba(0,201,200,.05) 38%,rgba(0,90,200,.055) 62%,rgba(0,201,200,0) 100%);
  background-size:250% 250%;background-position:0% 50%;animation:tvbmPan 15s var(--tvb-ease-inout) infinite alternate}
@keyframes tvbmPan{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ---------- 16. COA library: search focus ring + one-time badge sheen ---------- */
html.tvb-js .coalib-toolbar input[type="search"]:focus{outline:none;border-color:var(--cyan,#00c9c8);
  box-shadow:0 0 0 3px rgba(0,201,200,.16),0 0 26px rgba(0,201,200,.10);transition:box-shadow .25s var(--tvb-ease-out),border-color .25s var(--tvb-ease-out)}
html.tvb-js .coalib-badge:not(.none){position:relative;overflow:hidden}
html.tvb-js .tvbm-in .coalib-badge:not(.none)::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);
  animation:tvbmBadgeSheen .9s var(--tvb-ease-out) .55s 1 both}
@keyframes tvbmBadgeSheen{from{left:-60%}to{left:130%}}

/* ---------- 17. WooCommerce (dormant until store is live) ---------- */
html.tvb-js ul.products li.product{overflow:hidden}
html.tvb-js ul.products li.product img{transition:transform .45s var(--tvb-ease-out)}
html.tvb-js ul.products li.product:hover img{transform:scale(1.05)}
html.tvb-js ul.products li.product .woocommerce-loop-product__title{transition:color .2s var(--tvb-ease-out)}
html.tvb-js ul.products li.product:hover .woocommerce-loop-product__title{color:var(--cyan,#00c9c8)}
.cart-count.tvbm-pop{animation:tvbmPop .5s var(--tvb-ease-out)}
@keyframes tvbmPop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

/* ---------- 18. Cart & checkout: single soft fade, everything else off (hard rule) ---------- */
body.woocommerce-cart,body.woocommerce-checkout{animation:tvbmPageFade .24s ease-out 1}
@keyframes tvbmPageFade{from{opacity:.55}to{opacity:1}}
body.woocommerce-cart [data-tvbm],body.woocommerce-checkout [data-tvbm]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
body.woocommerce-cart .tvbm-blob,body.woocommerce-checkout .tvbm-blob,
body.woocommerce-cart #tvbm-canvas,body.woocommerce-checkout #tvbm-canvas{display:none!important}

/* ---------- 19. Accordion garnish (open/close mechanics stay in tvb.js) ---------- */
html.tvb-js .acc-item.open .acc-a p{animation:tvbmFadeIn .35s var(--tvb-ease-out) .1s both}
@keyframes tvbmFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- 20. Reduced motion ----------
   OWNER DECISION (2026-07-04): full motion plays for ALL visitors; the reduced-motion
   kill-block was intentionally disabled (JS gate: FORCE_MOTION in tvb-motion.js).
   To restore accessibility gating, reinstate the block below and set FORCE_MOTION=false:
   @media (prefers-reduced-motion:reduce){
     html.tvb-js [data-tvbm],html.tvb-js .tvbm-word{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
     #tvbm-progress,.tvbm-blob,#tvbm-canvas,.tvbm-sheen{display:none!important}
     .tvbm-track{animation:none!important}
     html.tvb-js{scroll-behavior:auto}
     html.tvb-js .site-header{transition:none}
     html.tvb-js .site-header.tvbm-hide{transform:none!important}
     html.tvb-js .badge-float{animation:none!important}
     html.tvb-js .cta-band::after,html.tvb-js .coalib-badge::after{animation:none!important}
     html.tvb-js .hs::after{transform:scaleX(1);transition:none}
     html.tvb-js .coalib-card[data-tvbm] img{transform:none;transition:none}
     body.woocommerce-cart,body.woocommerce-checkout{animation:none}
     html.tvb-js .acc-item.open .acc-a p{animation:none}
   }
*/
