/* =============================================================
   JV GROUP — ANIMATIONS CSS
   All @keyframes, reveal classes, GSAP helper classes
   ============================================================= */

/* ─── KEYFRAMES ──────────────────────────────────────────────── */

/* Ken Burns — hero image zoom */
@keyframes ken-burns {
  0%   { transform: scale(1.0) translateX(0); }
  50%  { transform: scale(1.04) translateX(-0.5%); }
  100% { transform: scale(1.08) translateX(0.5%); }
}

/* Ticker / marquee scroll */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* News marquee */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Floating bounce (scroll indicator) */
@keyframes float-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* WhatsApp pulse aura */
@keyframes whatsapp-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Gold dot pulse */
@keyframes pulse-gold {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Counter scale-in */
@keyframes count-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Fade up */
@keyframes fade-up {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Clip reveal left to right (text reveal) */
@keyframes clip-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

/* Gold shimmer on text */
@keyframes gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Scale fade for modals / toasts */
@keyframes scale-fade-in {
  0%   { opacity: 0; transform: scale(0.9) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Spin loading */
@keyframes spin-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Timeline dot pulse */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(211,169,77,0.6); }
  50%       { box-shadow: 0 0 0 8px rgba(211,169,77,0); }
}

/* ─── REVEAL CLASSES (GSAP ScrollTrigger targets) ───────────── */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-fade {
  opacity: 0;
}

.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-fade  { transform: none; }

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-fade.revealed {
  opacity: 1;
  transform: translate(0);
}

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

/* ─── HERO TEXT REVEAL ───────────────────────────────────────── */
.hero-eyebrow.animated   { animation: clip-reveal 0.8s ease forwards; animation-delay: 0.3s; }
.hero-heading .line      { display: block; overflow: hidden; }
.hero-heading .line span { display: block; }

/* GSAP targets */
.gsap-fade-in  { opacity: 0; }
.gsap-slide-up { opacity: 0; transform: translateY(60px); }

/* ─── COUNTER ANIMATION ──────────────────────────────────────── */
.counter-animated {
  animation: count-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ─── TIMELINE DOT ───────────────────────────────────────────── */
.timeline-dot { animation: dot-pulse 2.5s infinite; }

/* ─── LOADING SPINNER ────────────────────────────────────────── */
.spinner-gold {
  width: 28px; height: 28px;
  border: 3px solid rgba(211,169,77,0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin-slow 0.8s linear infinite;
  display: inline-block;
}

/* ─── TOAST / ALERT ──────────────────────────────────────────── */
.toast-luxury {
  background: var(--surface);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  color: var(--ivory);
  animation: scale-fade-in 0.4s ease forwards;
  box-shadow: var(--shadow-card);
}
.toast-luxury .toast-header {
  background: var(--primary);
  color: var(--gold);
  border-bottom: 1px solid var(--border-gold);
  font-family: 'Mulish', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.toast-luxury .toast-body {
  font-family: 'Mulish', sans-serif;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.alert-success-luxury {
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #a5d6a7;
  border-radius: var(--radius-lg);
  font-family: 'Mulish', sans-serif;
  font-size: 0.9rem;
  padding: 1rem 1.25rem;
  animation: scale-fade-in 0.4s ease;
}

.alert-error-luxury {
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid rgba(244, 67, 54, 0.4);
  color: #ef9a9a;
  border-radius: var(--radius-lg);
  font-family: 'Mulish', sans-serif;
  font-size: 0.9rem;
  padding: 1rem 1.25rem;
  animation: scale-fade-in 0.4s ease;
}

/* ─── PRELOADER ──────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--base);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  pointer-events: none;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
#preloader img { height: 56px; animation: fade-in 0.5s ease; }
#preloader .preloader-bar {
  width: 200px;
  height: 2px;
  background: var(--border-subtle);
  border-radius: 100px;
  overflow: hidden;
}
#preloader .preloader-fill {
  height: 100%;
  background: linear-gradient(to right, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: 100px;
  animation: preloader-fill 0.8s ease forwards;
}
@keyframes preloader-fill {
  0%   { width: 0%; }
  60%  { width: 80%; }
  100% { width: 100%; }
}

/* ─── SCROLL PROGRESS BAR ────────────────────────────────────── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(to right, var(--gold-dark), var(--gold));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}