/* ============================
   ANIMATIONS CSS
   ============================ */

/* ── Page Load ── */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes borderGlow {
  0%,100% { box-shadow: 0 0 15px rgba(201,168,76,0.1); }
  50% { box-shadow: 0 0 30px rgba(201,168,76,0.3); }
}
@keyframes rotateGlobe {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes textGlow {
  0%,100% { text-shadow: 0 0 10px rgba(201,168,76,0.2); }
  50% { text-shadow: 0 0 20px rgba(201,168,76,0.5), 0 0 40px rgba(201,168,76,0.2); }
}
@keyframes lineGrow {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes floating {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes sparkle {
  0%,100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}
@keyframes wave {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
  100% { transform: scaleY(1); }
}

/* ── Hero Animations ── */
.hero-badge { animation: fadeInDown 0.7s ease 0.2s both; }
.hero-title { animation: fadeInUp 0.8s ease 0.4s both; }
.hero-desc { animation: fadeInUp 0.8s ease 0.6s both; }
.hero-phone-display { animation: fadeInUp 0.8s ease 0.7s both; }
.hero-btns { animation: fadeInUp 0.8s ease 0.9s both; }
.hero-visual { animation: slideInRight 1s ease 0.5s both; }
.stat-card:nth-child(1) { animation: slideInLeft 0.8s ease 0.8s both; }
.stat-card:nth-child(2) { animation: slideInLeft 0.8s ease 1s both; }
.stat-card:nth-child(3) { animation: slideInLeft 0.8s ease 1.2s both; }

/* ── Gold shimmer on phone numbers ── */
.hero-phone-num, .cta-phone-number {
  position: relative;
}
.hero-phone-num::after {
  content:'';
  position:absolute;
  top:0;right:-100%;
  width:60%;height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: shimmer-phone 3s ease infinite;
}
@keyframes shimmer-phone {
  0% { right: -100%; }
  100% { right: 200%; }
}

/* ── Pulse glow on CTA button ── */
.btn-cta-primary {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ── Gold line animation ── */
.hero-phone-display::after {
  content:'';
  position:absolute;
  bottom:0;right:0;left:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: lineGrow 2s ease 1.2s both;
  animation-fill-mode: forwards;
  width: 0;
}

/* ── Loading bar at top of page ── */
.page-loader {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
  background-size: 200% 100%;
  z-index: 99999;
  animation: gradientShift 1.5s ease infinite, slideLoader 0.8s ease forwards;
  transform-origin: left;
}
@keyframes slideLoader {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── Sparkle effects ── */
.sparkle-container { position: relative; display: inline-block; }
.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
}

/* ── Card hover shine ── */
.service-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -60%;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,0.03);
  transform: skewX(-20deg);
  transition: right 0.6s ease;
  pointer-events: none;
}
.service-card:hover::after { right: 120%; }

/* ── Number counter animation ── */
.counter-num { animation: countUp 0.6s ease both; }

/* ── Testimonial cards hover ── */
.testimonial-card {
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,168,76,0.25);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(201,168,76,0.08);
}

/* ── Phone number glow ── */
.footer-phone-big .phone-num { animation: textGlow 4s ease-in-out infinite; }

/* ── Background pattern animation ── */
.hero-grid {
  animation: fadeIn 2s ease 0.5s both;
}

/* ── Glass shapes continuous motion ── */
.glass-shape-1 { animation: float1 8s ease-in-out infinite; }
.glass-shape-2 { animation: float2 10s ease-in-out infinite; }
.glass-shape-3 { animation: float3 12s ease-in-out infinite; }

/* ── Section number appear ── */
@keyframes numberReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

/* ── Mobile menu animation ── */
.nav a {
  animation: none;
  transition: color 0.3s ease, background 0.3s ease;
}
.nav.open a:nth-child(1) { animation: slideInRight 0.4s ease 0.1s both; }
.nav.open a:nth-child(2) { animation: slideInRight 0.4s ease 0.15s both; }
.nav.open a:nth-child(3) { animation: slideInRight 0.4s ease 0.2s both; }
.nav.open a:nth-child(4) { animation: slideInRight 0.4s ease 0.25s both; }
.nav.open a:nth-child(5) { animation: slideInRight 0.4s ease 0.3s both; }