/* ===============================
   TwoWheeler.lk – Premium Animations (UPDATED)
   File: assets/css/animations.css
=============================== */

/* =========================================================
   1) Classic Entry Animations
========================================================= */
.tw-fade-up{
  animation: twFadeUp .75s cubic-bezier(.2,.8,.2,1) both;
}
.tw-fade-up-delay{ animation: twFadeUp .75s cubic-bezier(.2,.8,.2,1) .12s both; }

/* Fade in only */
.tw-fade-in{
  animation: twFadeIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.tw-fade-in-delay{ animation: twFadeIn .7s cubic-bezier(.2,.8,.2,1) .16s both; }

/* =========================================================
   2) Scroll Reveal System (Recommended)
   Add class: .tw-reveal  -> JS adds .tw-in
========================================================= */
.tw-reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .72s cubic-bezier(.2,.8,.2,1),
              transform .72s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

/* Reveal variants */
.tw-reveal-left{ transform: translateX(-18px); }
.tw-reveal-right{ transform: translateX(18px); }
.tw-reveal-zoom{ transform: translateY(12px) scale(.98); }

/* Stagger delays */
.tw-reveal-delay{ transition-delay: .12s; }
.tw-reveal-delay-2{ transition-delay: .22s; }
.tw-reveal-delay-3{ transition-delay: .34s; }

/* When visible (JS adds tw-in) */
.tw-reveal.tw-in{
  opacity: 1;
  transform: translate(0,0) scale(1);
}

/* =========================================================
   3) Hover Micro Interactions
========================================================= */
.tw-hover-pop{
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s cubic-bezier(.2,.8,.2,1);
}
.tw-hover-pop:hover{
  transform: translateY(-4px);
}

/* Extra smooth lift + soft glow */
.tw-hover-glow{
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              filter .22s cubic-bezier(.2,.8,.2,1);
}
.tw-hover-glow:hover{
  transform: translateY(-4px);
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.35));
}

/* =========================================================
   4) Floating / Background Animations
========================================================= */
.tw-float{
  animation: twFloat 6s ease-in-out infinite;
}
@keyframes twFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Hero background drift utility */
.tw-bg-drift{
  animation: twBgDrift 10s ease-in-out infinite;
}
@keyframes twBgDrift{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-10px, 8px) scale(1.02); }
}

/* =========================================================
   5) Optional Ripple Effect (pure CSS hover)
   Add class .tw-ripple to buttons/links
========================================================= */
.tw-ripple{
  position: relative;
  overflow: hidden;
}
.tw-ripple::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%),
    rgba(255,255,255,.18),
    transparent 55%
  );
  opacity: 0;
  transition: opacity .25s ease;
}
.tw-ripple:hover::after{ opacity: 1; }

/* =========================================================
   6) Reduce Motion Support
========================================================= */
@media (prefers-reduced-motion: reduce){
  .tw-fade-up, .tw-fade-up-delay,
  .tw-fade-in, .tw-fade-in-delay{
    animation: none !important;
  }

  .tw-reveal{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .tw-float, .tw-bg-drift{
    animation: none !important;
  }
}

/* =========================================================
   KEYFRAMES
========================================================= */
@keyframes twFadeUp{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes twFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}