/* ============================================================
   Digital Luminosity Brand — animations.css
   Hero gradient, scroll reveal, hover glows, keyframes
   ============================================================ */

/* ── Hero Background ─────────────────────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-bg::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(212, 175, 55, 0.07) 0%,
    rgba(212, 175, 55, 0.02) 40%,
    transparent 70%
  );
  animation: pulse-glow 6s ease-in-out infinite;
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: linear-gradient(to top, var(--bg-primary), transparent);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  animation: float-orb 10s ease-in-out infinite;
}

.hero-orb-1 {
  width: 400px;
  height: 400px;
  background: var(--gold-deep);
  top: -100px;
  right: -50px;
  animation-delay: 0s;
}

.hero-orb-2 {
  width: 300px;
  height: 300px;
  background: var(--accent-pink);
  bottom: 0;
  left: -80px;
  opacity: 0.08;
  animation-delay: -4s;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.6; transform: translateX(-50%) scale(1.08); }
}

@keyframes float-orb {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(20px, -20px); }
  66%       { transform: translate(-15px, 15px); }
}

/* ── Particle dots ───────────────────────────────────────────── */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-mid);
  opacity: 0;
  animation: twinkle var(--dur, 4s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%       { opacity: 0.6; transform: scale(1.5); }
}

/* ── Scroll Reveal ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── Gold Line Animation ─────────────────────────────────────── */
@keyframes draw-line {
  from { width: 0; }
  to   { width: 60px; }
}

.animated-divider {
  height: 1px;
  background: var(--gold-gradient);
  width: 0;
  margin: var(--space-md) auto;
}

.animated-divider.visible {
  animation: draw-line 0.6s ease-out 0.3s forwards;
}

/* ── Checkmark Animation (Thank You page) ────────────────────── */
.checkmark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.checkmark-circle {
  width: 100px;
  height: 100px;
}

.checkmark-circle-bg {
  stroke: rgba(212, 175, 55, 0.15);
  fill: none;
  stroke-width: 3;
}

.checkmark-circle-stroke {
  stroke: var(--gold-mid);
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: draw-circle 0.7s ease-out 0.2s forwards;
}

.checkmark-path {
  stroke: var(--gold-mid);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: draw-check 0.4s ease-out 0.85s forwards;
}

@keyframes draw-circle {
  to { stroke-dashoffset: 0; }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* ── Number Counter ──────────────────────────────────────────── */
.stat-number[data-target] {
  transition: none;
}

/* ── Gradient Border Animation ───────────────────────────────── */
@keyframes border-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.shimmer-border {
  position: relative;
  border-radius: var(--radius-lg);
}

.shimmer-border::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light), var(--accent-pink), var(--gold-mid));
  background-size: 300% 300%;
  animation: border-shimmer 4s linear infinite;
  z-index: -1;
  opacity: 0.5;
}

/* ── Glow Pulse ──────────────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--gold-glow); }
  50%       { box-shadow: 0 0 45px var(--gold-glow), 0 0 80px rgba(212, 175, 55, 0.1); }
}

.btn-primary {
  animation: glow-pulse 3s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
}

/* ── Page Fade In ────────────────────────────────────────────── */
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

body {
  animation: page-in 0.5s ease-out both;
}

/* ── Nav scroll shrink ───────────────────────────────────────── */
.nav {
  transition: height var(--transition-base), background var(--transition-base);
}

.nav.scrolled {
  height: 64px;
}