/* ══════════════════════════════════════════
   MyGenHome — Scroll Animations
   ══════════════════════════════════════════ */

/* ── BASE STATES (hidden before animation) ── */
.anim-fade{opacity:0;transition:opacity .5s ease}
.anim-fade.in-view{opacity:1}

.anim-up{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.anim-up.in-view{opacity:1;transform:translateY(0)}

.anim-up-lg{opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .5s ease}
.anim-up-lg.in-view{opacity:1;transform:translateY(0)}

.anim-right{opacity:0;transform:translateX(40px);transition:opacity .8s ease,transform .8s ease}
.anim-right.in-view{opacity:1;transform:translateX(0)}

.anim-scale{opacity:0;transform:scale(0.8);transition:opacity .4s ease,transform .4s ease}
.anim-scale.in-view{opacity:1;transform:scale(1)}

/* ── STAGGER DELAYS ── */
.anim-delay-1{transition-delay:.1s}
.anim-delay-2{transition-delay:.2s}
.anim-delay-3{transition-delay:.3s}
.anim-delay-4{transition-delay:.4s}
.anim-delay-5{transition-delay:.5s}

/* ── DIVIDER EXPAND ── */
.anim-expand{transform:scaleX(0);transform-origin:left;transition:transform .8s ease}
.anim-expand.in-view{transform:scaleX(1)}

/* ── HERO TYPING EFFECT ── */
.hero-typing .char{opacity:0;display:inline-block}
.hero-typing.in-view .char{animation:charReveal .04s ease forwards}

@keyframes charReveal{
  to{opacity:1}
}

/* ── COUNTER (JS sets the value) ── */
.counter-animate{font-variant-numeric:tabular-nums}

/* ── PRICE GLOW ── */
.anim-glow.in-view{animation:priceGlow .6s ease .2s}

@keyframes priceGlow{
  0%{text-shadow:0 0 0 transparent}
  50%{text-shadow:0 0 20px rgba(201,169,110,0.6)}
  100%{text-shadow:0 0 0 transparent}
}

/* ── BOUNCE IN ── */
.anim-bounce{opacity:0;transform:scale(0.3);transition:opacity .3s ease,transform .5s cubic-bezier(0.34,1.56,0.64,1)}
.anim-bounce.in-view{opacity:1;transform:scale(1)}

/* ── PARALLAX ── */
.parallax-hero{will-change:transform}

/* ── ACCESSIBILITY ── */
@media(prefers-reduced-motion:reduce){
  .anim-fade,.anim-up,.anim-up-lg,.anim-right,.anim-scale,.anim-bounce,.anim-expand{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
  .anim-glow.in-view{animation:none!important}
  .hero-typing .char{opacity:1!important;animation:none!important}
  .parallax-hero{will-change:auto;transform:none!important}
}