/* ============================================================
   SHREERAMEXIM — ANIMATIONS
   21st.dev / Aceternity Inspired Effects
   ============================================================ */

/* ── Scroll Reveal Base ── */
.reveal {
  opacity: 0;
  transition: opacity 0.7s var(--transition), transform 0.7s var(--transition);
}
.reveal.fade-up    { transform: translateY(40px); }
.reveal.fade-down  { transform: translateY(-40px); }
.reveal.fade-left  { transform: translateX(-40px); }
.reveal.fade-right { transform: translateX(40px); }
.reveal.fade-in    { transform: none; }
.reveal.scale-in   { transform: scale(0.92); }
.reveal.visible {
  opacity: 1;
  transform: none !important;
}

/* Stagger delays */
.stagger-1  { transition-delay: 0.06s !important; }
.stagger-2  { transition-delay: 0.12s !important; }
.stagger-3  { transition-delay: 0.18s !important; }
.stagger-4  { transition-delay: 0.24s !important; }
.stagger-5  { transition-delay: 0.30s !important; }
.stagger-6  { transition-delay: 0.36s !important; }

/* ── Aurora Gradient (Hero) ── */
@keyframes auroraShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.aurora-bg {
  background: linear-gradient(
    -45deg,
    #0D2818,
    #1A3A2A,
    #0A2010,
    #162E1F,
    #0D2818
  );
  background-size: 400% 400%;
  animation: auroraShift 14s ease infinite;
}

/* ── Shimmer Button ── */
@keyframes shimmerSlide {
  from { transform: translateX(-100%) skewX(-12deg); }
  to   { transform: translateX(250%) skewX(-12deg); }
}
.btn-shimmer {
  position: relative; overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmerSlide 2.8s ease infinite;
}

/* ── Animated Gradient Border ── */
@keyframes borderRotate {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.gradient-border {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--deep-green), var(--deep-green)) padding-box,
    conic-gradient(from var(--angle), var(--gold), var(--gold-light), transparent 40%, var(--gold)) border-box;
  animation: borderRotate 4s linear infinite;
}

/* ── Spotlight Effect ── */
.spotlight-wrap {
  position: relative; overflow: hidden;
}
.spotlight-wrap .spotlight {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.13) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  opacity: 0;
}
.spotlight-wrap:hover .spotlight { opacity: 1; }

/* ── Beam / Divider ── */
.beam-divider {
  width: 100%; height: 1px; position: relative;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201,168,76,0.15) 20%,
    rgba(201,168,76,0.5) 50%,
    rgba(201,168,76,0.15) 80%,
    transparent 100%
  );
  overflow: hidden;
}
.beam-divider::after {
  content: '';
  position: absolute; top: 0; left: -80px;
  width: 80px; height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  animation: beamSweep 3.5s ease-in-out infinite;
}
@keyframes beamSweep {
  from { left: -80px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  to   { left: 100%; opacity: 0; }
}

/* ── Floating Particles ── */
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
  33%       { transform: translateY(-22px) translateX(10px) scale(1.1); opacity: 0.9; }
  66%       { transform: translateY(-10px) translateX(-8px) scale(0.95); opacity: 0.7; }
}
.particle {
  position: absolute; border-radius: 50%;
  background: var(--gold);
  pointer-events: none; opacity: 0.5;
}
.particle:nth-child(1) { width:3px; height:3px; top:15%; left:10%; animation: floatParticle 7s ease-in-out infinite; }
.particle:nth-child(2) { width:5px; height:5px; top:35%; left:80%; animation: floatParticle 9s ease-in-out 1s infinite; }
.particle:nth-child(3) { width:2px; height:2px; top:70%; left:25%; animation: floatParticle 8s ease-in-out 2s infinite; }
.particle:nth-child(4) { width:4px; height:4px; top:55%; left:65%; animation: floatParticle 6s ease-in-out 0.5s infinite; }
.particle:nth-child(5) { width:3px; height:3px; top:80%; left:45%; animation: floatParticle 10s ease-in-out 3s infinite; }
.particle:nth-child(6) { width:6px; height:6px; top:22%; left:55%; animation: floatParticle 7.5s ease-in-out 1.5s infinite; }

/* ── Hero Text Animate In (Triggered by .loader-loaded) ── */
.title-line-mask {
  display: block;
  overflow: hidden;
  line-height: 1.15;
}
.title-line {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}
body.loader-loaded .title-line {
  transform: translateY(0);
  opacity: 1;
}
body.loader-loaded .title-line.line-gold {
  transition-delay: 0.12s;
}

.hero-overline {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.05s;
}
body.loader-loaded .hero-overline {
  opacity: 1;
  transform: translateY(0);
}

.hero-sub {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.28s;
}
body.loader-loaded .hero-sub {
  opacity: 1;
  transform: translateY(0);
}

.hero-actions {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.42s;
}
body.loader-loaded .hero-actions {
  opacity: 1;
  transform: translateY(0);
}

.hero-scroll {
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.6s;
}
body.loader-loaded .hero-scroll {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── Number Counter ── */
.stat-number { display: inline-block; }

/* ── Trust Bar Items ── */
.trust-item { opacity: 0.8; transition: opacity 0.3s; }
.trust-item:hover { opacity: 1; }

/* ── Card Hover Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.1); }
  50%       { box-shadow: 0 0 40px rgba(201,168,76,0.25), 0 0 80px rgba(201,168,76,0.08); }
}
.glow-on-hover:hover { animation: glowPulse 2.5s ease-in-out infinite; }

/* ── Page Hero Parallax ── */
.page-hero-parallax {
  transition: transform 0.1s linear;
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 1001;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transition: width 0.05s linear;
  border-radius: 0 2px 2px 0;
}

/* ── Whatsapp Float Button ── */
.whatsapp-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 500;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 30px rgba(37,211,102,0.4);
  transition: transform 0.3s var(--transition), box-shadow 0.3s;
  animation: floatWA 3s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 14px 40px rgba(37,211,102,0.55); }
.whatsapp-float svg { width: 30px; height: 30px; color: #fff; }
@keyframes floatWA {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.whatsapp-float:hover { animation: none; }

/* ── Back to Top ── */
#back-top {
  position: fixed; bottom: 100px; right: 28px; z-index: 500;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(13,40,24,0.85);
  border: 1px solid var(--glass-border);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--transition);
  box-shadow: var(--shadow-card);
}
#back-top.show { opacity: 1; visibility: visible; }
#back-top:hover { transform: translateY(-3px); background: var(--gold); color: var(--deep-green); }
#back-top svg { width: 18px; height: 18px; }