/* ═══════════════════════════════════════════════════════════════════
   JV GROUP — Animations & Keyframes
═══════════════════════════════════════════════════════════════════ */

/* ─── SCROLL PULSE ──────────────────────────────────────────────── */
@keyframes scrollPulse {
  0%   { transform: translateY(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

/* ─── MARQUEE ────────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ─── FADE IN ────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── FADE UP ────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── FADE DOWN ──────────────────────────────────────────────────── */
@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── SLIDE IN FROM LEFT ─────────────────────────────────────────── */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── SLIDE IN FROM RIGHT ────────────────────────────────────────── */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─── SCALE IN ───────────────────────────────────────────────────── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── PULSE GLOW ─────────────────────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201,169,110,0.3);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(201,169,110,0);
  }
}

/* ─── FLOAT ──────────────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─── BORDER SWEEP ───────────────────────────────────────────────── */
@keyframes borderSweep {
  from { width: 0; }
  to   { width: 100%; }
}

/* ─── GOLD SHIMMER ───────────────────────────────────────────────── */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── COUNTER TICK ───────────────────────────────────────────────── */
@keyframes counterTick {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── HERO IMAGE SCALE IN ────────────────────────────────────────── */
@keyframes heroScale {
  from { transform: scale(1.12); }
  to   { transform: scale(1.04); }
}

/* ─── SPIN SLOW ──────────────────────────────────────────────────── */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── STAGGER FADE (utility classes) ───────────────────────────── */
.anim-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.16,1,0.3,1) both;
}

.anim-fade-in {
  animation: fadeIn 0.6s ease both;
}

.anim-scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

.anim-slide-left {
  animation: slideInLeft 0.7s cubic-bezier(0.16,1,0.3,1) both;
}

.anim-slide-right {
  animation: slideInRight 0.7s cubic-bezier(0.16,1,0.3,1) both;
}

/* Delays */
.anim-delay-100 { animation-delay: 0.1s; }
.anim-delay-200 { animation-delay: 0.2s; }
.anim-delay-300 { animation-delay: 0.3s; }
.anim-delay-400 { animation-delay: 0.4s; }
.anim-delay-500 { animation-delay: 0.5s; }
.anim-delay-600 { animation-delay: 0.6s; }
.anim-delay-700 { animation-delay: 0.7s; }
.anim-delay-800 { animation-delay: 0.8s; }

/* ─── HERO TEXT REVEAL ───────────────────────────────────────────── */
.hero-eyebrow.is-visible {
  animation: fadeDown 0.6s var(--ease-out) 0.3s both;
}

.hero-subtext.is-visible {
  animation: fadeUp 0.7s var(--ease-out) 1.1s both;
}

.hero-ctas.is-visible {
  animation: fadeUp 0.7s var(--ease-out) 1.3s both;
}

.hero-scroll.is-visible {
  animation: fadeIn 0.6s ease 1.6s both;
}

/* ─── HERO IMAGE ANIMATION ───────────────────────────────────────── */
.hero-video,
.hero-poster {
  animation: heroScale 1.4s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ─── GOLD SHIMMER TEXT ──────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--c-gold-dark) 0%,
    var(--c-gold-xlight) 50%,
    var(--c-gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
}

/* ─── TIMELINE REVEAL ────────────────────────────────────────────── */
.timeline-item.reveal {
  opacity: 0;
  transform: translateY(30px);
}

.timeline-item.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── PARALLAX SECTION ───────────────────────────────────────────── */
.parallax-section {
  overflow: hidden;
}

.parallax-bg {
  will-change: transform;
  transform: translateY(0);
}

/* ─── NAV SCROLL CLASS ───────────────────────────────────────────── */
.site-header {
  transition: background 0.5s ease, backdrop-filter 0.5s ease,
              box-shadow 0.5s ease;
}

/* ─── MOBILE OVERLAY BACKDROP ────────────────────────────────────── */
.mobile-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 30% 50%,
    rgba(201,169,110,0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ─── CARD IMAGE BG PLACEHOLDER SHIMMER ─────────────────────────── */
.card-img-placeholder {
  background: linear-gradient(
    110deg,
    #141210 30%,
    #1e1a14 50%,
    #141210 70%
  );
  background-size: 200% 100%;
  animation: goldShimmer 2.5s ease infinite;
}

/* ─── FLOATING WHATSAPP PULSE ────────────────────────────────────── */
.whatsapp-float {
  animation: float 4s ease-in-out infinite;
}

.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ─── PROCESS STEP COUNT-IN ──────────────────────────────────────── */
.process-step.reveal .process-num {
  animation: none;
}

.process-step.revealed .process-num {
  animation: fadeUp 0.5s var(--ease-out) 0.1s both;
}

/* ─── PAGE HERO CONTENT ANIMATE ──────────────────────────────────── */
.page-hero.is-loaded .breadcrumb-nav {
  animation: fadeDown 0.6s var(--ease-out) 0.2s both;
}

.page-hero.is-loaded .page-hero-title {
  animation: fadeUp 0.8s var(--ease-out) 0.35s both;
}

/* ─── CTA SECTION PULSE BORDER ───────────────────────────────────── */
@keyframes borderGlow {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

.cta-inner::before {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ─── REDUCE MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-line-pulse,
  .marquee-track,
  .hero-video,
  .hero-poster {
    animation: none !important;
  }
}