/* ============================================
   TRIMULIA NUGRAHA — animations.css
   Scroll-reveal & micro-interactions
   ============================================ */

/* ---------- Scroll reveal base states ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.reveal-left { transform: translateX(-44px); }
.reveal.reveal-right { transform: translateX(44px); }
.reveal.reveal-zoom { transform: scale(.92); }
.reveal.in-view {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger delays (apply via [data-delay] or utility classes) */
.d-1 { transition-delay: .08s; }
.d-2 { transition-delay: .16s; }
.d-3 { transition-delay: .24s; }
.d-4 { transition-delay: .32s; }
.d-5 { transition-delay: .40s; }
.d-6 { transition-delay: .48s; }

/* ---------- Hero entrance ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .hero-badge,
.hero h1,
.hero .hero-sub,
.hero .hero-actions,
.hero .hero-proof {
  animation: heroFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero h1 { animation-delay: .1s; }
.hero .hero-sub { animation-delay: .22s; }
.hero .hero-actions { animation-delay: .34s; }
.hero .hero-proof { animation-delay: .46s; }
.hero-media { animation: heroFadeUp .9s .3s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Floating glow ---------- */
@keyframes glowDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -26px); }
}
.hero-glow { animation: glowDrift 9s ease-in-out infinite; }
.hero-glow.g2 { animation-duration: 12s; animation-direction: reverse; }

/* ---------- Stat count pop ---------- */
@keyframes statPop {
  0% { transform: scale(.6); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.stat-item.in-view .stat-num { animation: statPop .6s cubic-bezier(.22,.61,.36,1) both; }

/* ---------- Service icon wiggle on hover ---------- */
@keyframes iconWiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-7deg); }
  75% { transform: rotate(7deg); }
}
.service-card:hover .service-icon svg { animation: iconWiggle .5s ease; }

/* ---------- Button shine sweep ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- Product card image ken-burns ---------- */
@keyframes kenBurns {
  0% { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.08) translate(-6px,-4px); }
}
.hero-media .frame img { animation: kenBurns 16s ease-in-out infinite alternate; }

/* ---------- Link underline draw ---------- */
.footer-col ul a { position: relative; }
.footer-col ul a::before {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold-light);
  transition: width .3s ease;
}
.footer-col ul a:hover::before { width: 100%; }