/* ===== VitaFit — professional motion layer (shared: landing + business) ===== */
/* JS adds .fx to elements → hidden until revealed. No JS / reduced-motion = fully visible. */

.fx{opacity:0;transform:translateY(36px);will-change:opacity,transform;filter:blur(6px);
    transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
.fx-in{filter:none}
.fx.fx-l{transform:translateX(30px)}
.fx.fx-r{transform:translateX(-30px)}
.fx.fx-s{transform:translateY(16px) scale(.97)}
.fx-in{opacity:1 !important;transform:none !important;filter:none !important}

/* nav condenses on scroll */
.nav{transition:background .35s ease, box-shadow .35s ease, border-color .35s ease}
.nav.scrolled{background:rgba(11,11,20,.96);box-shadow:0 10px 34px rgba(0,0,0,.45)}

/* button light sweep on hover */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;z-index:1}
.btn:hover::after{left:140%}

/* refined card hover (adds depth without the flat AI look) */
.ft,.stp,.pl,.coach,.meal,.prod,.stat,.uc,.qa,.hero-card,.strip .s{
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease}
.ft:hover,.stp:hover,.uc:hover{transform:translateY(-4px);border-color:var(--border2)}
.feat:hover .fi{transform:scale(1.06) rotate(-3deg)}
.feat .fi{transition:transform .3s cubic-bezier(.16,1,.3,1)}

/* ambient hero glow drift */
@media (prefers-reduced-motion: no-preference){
  .hero::before{animation:vf-glow 17s ease-in-out infinite alternate}
  @keyframes vf-glow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2.5%,1.8%,0) scale(1.06)}}
}

/* stat number pop when revealed */
.strip .s.fx-in b,.stat.fx-in .n{animation:vf-pop .6s cubic-bezier(.16,1,.3,1) both}
@keyframes vf-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* gradient-text subtle shimmer on hero headline */
@media (prefers-reduced-motion: no-preference){
  .hero h1 .g{background-size:200% auto;animation:vf-shimmer 5s linear infinite}
  @keyframes vf-shimmer{to{background-position:200% center}}

  /* always-on ambient motion — clearly visible on load */
  .hero-img img{animation:vf-kb 20s ease-in-out infinite alternate}
  @keyframes vf-kb{from{transform:scale(1)}to{transform:scale(1.09)}}
  .hero-img .badge{animation:vf-float 4.5s ease-in-out infinite}
  @keyframes vf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .eyebrow,.kick{animation:vf-breathe 3.5s ease-in-out infinite}
  @keyframes vf-breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,45,138,0)}50%{box-shadow:0 0 22px 0 rgba(255,45,138,.35)}}
}