/* ============================================================
   WildGuard Society — Lively Effects (css/lively.css)
   Animated gradients, glowing cards, shine buttons, live
   indicators, aurora background and scroll progress.
   Kept reduced-motion aware — see the media query at the end.
   ============================================================ */

/* ── Aurora background (layer injected by js/lively.js) ── */
.wg-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.wg-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  mix-blend-mode: screen;
  will-change: transform;
}
.wg-a1 { width: 42vw; height: 42vw; left: -10%; top: -6%;  background: radial-gradient(circle, rgba(244,162,97,0.40), transparent 70%); animation: wgDrift1 26s ease-in-out infinite alternate; }
.wg-a2 { width: 36vw; height: 36vw; right: -9%; top: 18%;  background: radial-gradient(circle, rgba(45,106,79,0.55), transparent 70%); animation: wgDrift2 33s ease-in-out infinite alternate; }
.wg-a3 { width: 46vw; height: 46vw; left: 24%; bottom: -16%; background: radial-gradient(circle, rgba(224,122,95,0.35), transparent 70%); animation: wgDrift3 40s ease-in-out infinite alternate; }
.wg-a4 { width: 26vw; height: 26vw; left: -4%; bottom: 8%;  background: radial-gradient(circle, rgba(52,168,132,0.40), transparent 70%); animation: wgDrift2 22s ease-in-out infinite alternate-reverse; }

@keyframes wgDrift1 { from { transform: translate(0,0) scale(1); }  to { transform: translate(9vw, 6vh) scale(1.15); } }
@keyframes wgDrift2 { from { transform: translate(0,0) scale(1); }  to { transform: translate(-8vw, 9vh) scale(1.1); } }
@keyframes wgDrift3 { from { transform: translate(0,0) scale(1); }  to { transform: translate(6vw, -7vh) scale(1.18); } }

/* ── Scroll progress bar (injected by js/lively.js) ── */
.wg-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 5000;
  background: linear-gradient(90deg, var(--primary-bright), var(--accent), var(--terracotta));
  box-shadow: 0 0 12px rgba(244,162,97,0.8);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── Fireflies in the hero (injected by js/lively.js) ── */
.wg-fly {
  position: absolute;
  width: var(--s, 7px);
  height: var(--s, 7px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9c9 0%, rgba(244,162,97,0.85) 45%, rgba(244,162,97,0) 70%);
  box-shadow: 0 0 12px 3px rgba(244,162,97,0.5);
  opacity: 0;
  animation: wgFirefly linear infinite;
  pointer-events: none;
}
@keyframes wgFirefly {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.9; }
  50%  { opacity: 0.25; }
  80%  { opacity: 0.85; }
  100% { transform: translateY(-46vh) translateX(4vw); opacity: 0; }
}

/* ── LIVE pill (injected into the field-notes ticker) ── */
.wg-live-pill {
  position: absolute;
  top: 0.9rem; right: 3rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(18,24,20,0.75);
  border: 1px solid rgba(244,162,97,0.35);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
}
.wg-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px 2px rgba(34,197,94,0.8);
  animation: wgLivePulse 1.6s ease-in-out infinite;
}
@keyframes wgLivePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

/* ── Hero: animated gradient headline + soft glow ── */
.hero-content h1 {
  background: linear-gradient(90deg, #ffffff 0%, #fce7c8 30%, #F4A261 55%, #ffffff 85%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: wgTextFlow 7s linear infinite;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55));
}
@keyframes wgTextFlow {
  0%   { background-position: 0% center; }
  100% { background-position: -200% center; }
}
.hero-content .eyebrow {
  animation: wgEyebrowFloat 4s ease-in-out infinite;
}
@keyframes wgEyebrowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ── Buttons: shine sweep + lively glow ── */
.cta-button,
.btn--primary,
.btn-submit,
.btn-cta {
  position: relative;
  overflow: hidden;
}
.cta-button::after,
.btn--primary::after,
.btn-submit::after,
.btn-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-20deg);
  animation: wgBtnShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wgBtnShine {
  0%        { left: -70%; }
  55%, 100% { left: 140%; }
}
.cta-button:hover,
.btn--primary:hover {
  box-shadow: 0 8px 34px rgba(244,162,97,0.5), 0 0 0 1px rgba(255,255,255,0.15);
}

/* ── Cards: animated flowing gradient ring on hover ── */
.card,
.feature-card {
  position: relative;
}
.card::before,
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(244,162,97,0) 10%,
    rgba(244,162,97,0.9) 40%,
    rgba(45,106,79,0.9) 60%,
    rgba(244,162,97,0) 90%);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.card:hover::before,
.feature-card:hover::before {
  opacity: 1;
  animation: wgBorderFlow 2.6s linear infinite;
}
@keyframes wgBorderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.card:hover,
.feature-card:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,0.45), 0 0 0 1px rgba(244,162,97,0.22), 0 0 34px rgba(244,162,97,0.12);
}

/* ── Stat values: gradient figures ── */
.stat-value {
  background: linear-gradient(120deg, var(--accent) 0%, var(--terracotta) 55%, var(--primary-light) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.stat-card:hover::after { opacity: 1; animation: wgBorderFlow 2s linear infinite; }

/* ── Section headers: reveal + shimmer underline ── */
.section-header h2 {
  animation: wgHeaderIn 0.9s ease-out both;
}
@keyframes wgHeaderIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-header h2::after {
  width: 48px;
  background: linear-gradient(90deg, var(--accent), var(--terracotta), var(--accent));
  background-size: 200% auto;
  animation: wgTextFlow 3s linear infinite;
}

/* ── Slideshow: slow ken-burns drift on the active photo ── */
.page-slide.active {
  animation: wgKenBurns 18s ease-in-out infinite alternate;
}
@keyframes wgKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}

/* ── Field note icons breathe softly ── */
.field-note i {
  animation: wgIconBreathe 3s ease-in-out infinite;
}
@keyframes wgIconBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.7; }
}

/* ── Nav links: sliding gradient indicator ── */
.desktop-nav a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--primary-light));
  transition: width 0.3s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  width: 55%;
}

/* ── Custom colorful scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--darker); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 6px;
  border: 2px solid var(--darker);
}

/* ── Logo glow pulse ── */
.logo-img {
  animation: wgLogoGlow 3.4s ease-in-out infinite;
}
@keyframes wgLogoGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(244,162,97,0.3); }
  50%      { box-shadow: 0 4px 22px rgba(244,162,97,0.65); }
}

/* ── Badges get a gentle lift on hover ── */
.badge { transition: transform 0.25s ease; }
.card:hover .badge { transform: translateY(-2px) rotate(-2deg); }

/* ── Reduced motion: switch everything off ── */
@media (prefers-reduced-motion: reduce) {
  .wg-aurora-blob,
  .wg-fly,
  .wg-live-dot,
  .hero-content h1,
  .hero-content .eyebrow,
  .cta-button::after,
  .btn--primary::after,
  .btn-submit::after,
  .btn-cta::after,
  .card::before,
  .feature-card::before,
  .stat-card::after,
  .section-header h2,
  .section-header h2::after,
  .page-slide.active,
  .field-note i,
  .desktop-nav a::after,
  .logo-img,
  .badge {
    animation: none !important;
  }
  .wg-aurora-blob { opacity: 0.25; }
  .wg-fly { display: none; }
}