/* motion.css — premium motion layer + liquid glass (vanilla, offline, reduced-motion safe) */

/* scroll progress bar */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--accent),#ff9a5a);border-radius:0 3px 3px 0;
  box-shadow:0 0 12px rgba(255,106,61,.5);transition:width .1s linear}

/* scroll reveal — hidden ONLY when JS is active (html.js) AND motion is allowed.
   Without JS the .js class is never added, so content is always visible. */
@media(prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  html.js [data-reveal].in{opacity:1;transform:none}
  html.js [data-reveal="left"]{transform:translateX(-30px)}
  html.js [data-reveal="right"]{transform:translateX(30px)}
  html.js [data-reveal="scale"]{transform:scale(.94)}
  html.js [data-reveal].in{transform:none}
  html.js [data-hero-item]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js [data-hero-item].in{opacity:1;transform:none}
}

/* 3D tilt + magnetic — smooth return */
[data-tilt]{transition:transform .18s ease;will-change:transform}
[data-magnetic]{transition:transform .3s cubic-bezier(.2,.7,.2,1)}

/* enhanced liquid glass surfaces */
.glass-strong{background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.glass-glow{box-shadow:0 10px 40px -12px rgba(20,22,26,.22),inset 0 1px 0 rgba(255,255,255,.6)}

/* premium button shine sweep (hover) */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn:hover::after{left:140%}

/* card lift + glow on hover */
.btile,.pcard,.adv .item{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.btile:hover{transform:translateY(-4px);box-shadow:0 24px 50px -20px rgba(20,22,26,.35)}
.pcard:hover{box-shadow:0 26px 55px -22px rgba(20,22,26,.4)}
.adv .item:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(20,22,26,.28)}

/* soft animated gradient blob behind hero (subtle, light theme) */
.hero .visual{position:relative}
.hero .visual::before{content:"";position:absolute;inset:-8% -6% auto -6%;height:80%;z-index:0;
  background:radial-gradient(60% 60% at 70% 30%,rgba(255,150,90,.28),transparent 70%);
  filter:blur(10px);animation:blob 9s ease-in-out infinite alternate;pointer-events:none}
.hero .visual img{position:relative;z-index:1}
@keyframes blob{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6%,4%) scale(1.08)}}

/* stat counter emphasis */
.stat .num{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em}

/* stats band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 30px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff, #fbfbfc);border:1px solid var(--line);box-shadow:0 4px 12px -2px rgba(0,0,0,.08)}
.stat .num{font-size:clamp(28px,3.4vw,42px);color:var(--ink);line-height:1}
.stat .lbl{font-size:13px;color:var(--ink-2);margin-top:6px}
@media(max-width:768px){.stats{grid-template-columns:repeat(2,1fr)}}

/* nav underline grows from center */
.site-header .navrow a{position:relative}
.site-header .navrow a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:center;transition:transform .3s ease}
.site-header .navrow a:hover::after{transform:scaleX(1)}

/* spec-chip float */
.spec-chip{animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* respect reduced motion: kill infinite loops + reveals */
@media(prefers-reduced-motion:reduce){
  .hero .visual::before,.spec-chip{animation:none!important}
  [data-reveal],[data-hero-item]{opacity:1!important;transform:none!important}
}