/* ==========================================================================
   Aaditri Gold Buyers — Animations
   Subtle, professional motion. Powered by IntersectionObserver toggling
   the .in-view class (see js/animations.js).
   ========================================================================== */

/* -------------------- Reveal base states -------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
[data-reveal="fade-up"] { transform: translateY(32px); }
[data-reveal="fade-in"] { transform: none; }
[data-reveal="slide-left"] { transform: translateX(-40px); }
[data-reveal="slide-right"] { transform: translateX(40px); }
[data-reveal="scale-in"] { transform: scale(0.92); }

[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Stagger via inline --delay custom property */
[data-reveal] { transition-delay: var(--delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* -------------------- Section heading reveal (every .section-title) -------------------- */
.section-title {
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section-title.heading-in-view { opacity: 1; transform: none; }
.section-title::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  margin: 14px 0 0;
  background: var(--gradient-brand);
  border-radius: 2px;
  transition: width 0.7s ease 0.35s;
}
.section-title.heading-in-view::after { width: 64px; }
.section-header:not(.section-header--left) .section-title::after,
.text-center .section-title::after { margin-inline: auto; }

/* Text itself sweeps through the logo's red -> orange -> gold once revealed */
.section-title.heading-in-view {
  color: var(--color-dark);
  background-image: linear-gradient(90deg, #8B0000, #F2761E, #D4AF37, #F2761E, #8B0000);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: headingTextShimmer 4s ease-in-out 0.15s infinite alternate;
}
.testimonial-section .section-title.heading-in-view,
.contact-panel-info .section-title.heading-in-view {
  color: #fff;
  background-image: linear-gradient(90deg, #fff, #F3D27A, #F2761E, #F3D27A, #fff);
}
.section-title .accent { -webkit-text-fill-color: initial; }

@keyframes headingTextShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .section-title { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .section-title::after { transition: none !important; }
}

/* -------------------- Hero particles -------------------- */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.9), rgba(212,175,55,0));
  animation: floatParticle 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.6; }
  50% { transform: translateY(-22px) translateX(10px); opacity: 1; }
}

/* -------------------- Counter pulse -------------------- */
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat-number.is-counting { animation: countPulse 0.4s ease; }

/* -------------------- Slider -------------------- */
.slider-track { display: flex; transition: transform 0.6s cubic-bezier(0.65,0,0.35,1); }
.slide { flex: 0 0 100%; }

.slider-dots { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.slider-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(212,175,55,0.35);
  transition: all var(--transition-base);
}
.slider-dot.is-active { background: var(--color-logo-orange); width: 28px; border-radius: 6px; }

.slider-arrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(212,175,55,0.5);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-base);
}
.slider-arrow:hover { background: var(--color-premium-gold); color: var(--color-dark-red); }

/* Card image zoom */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform 0.6s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* Section reveal underline growth */
.gold-divider {
  transform: scaleX(0);
  transform-origin: left;
  animation: none;
}
[data-reveal].in-view .gold-divider,
.gold-divider.in-view { transform: scaleX(1); transition: transform 0.6s ease 0.2s; }

/* Nav underline already handled in style.css via hover transitions */

/* Loading fade for page */
body.is-ready { animation: pageFadeIn 0.5s ease; }
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}