/* ═══════════════════════════════════════════════════════
   animations.css — Brennstein Dent WordPress Theme
   All animations ported from the React/Vite source.
   Pure CSS: no React state dependency.
   ═══════════════════════════════════════════════════════ */

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

/* Used by .subpage-view and page transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Used for elements that slide down into view */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Used for the gold shimmer on accent elements */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Subtle pulse on trust/security pills */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

/* ─────────────────────────────────────────
   UTILITY ANIMATION CLASSES
   Apply directly to HTML elements that need
   a one-shot entrance animation.
───────────────────────────────────────── */

.animate-fade-in {
  animation: fadeIn 0.5s var(--ease) both;
}

.animate-slide-down {
  animation: slideDown 0.4s var(--ease) both;
}

/* Staggered delays for grid children */
.animate-delay-1 { animation-delay: 0.08s; }
.animate-delay-2 { animation-delay: 0.16s; }
.animate-delay-3 { animation-delay: 0.24s; }

/* ─────────────────────────────────────────
   SCROLL-TRIGGERED REVEAL
   main.js attaches an IntersectionObserver
   that adds .is-visible when an element
   with class .reveal enters the viewport.
───────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.65s var(--ease),
    transform 0.65s var(--ease);
}

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

/* Staggered reveal for grid siblings */
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

/* ─────────────────────────────────────────
   SUBPAGE VIEW FADE-IN
   Applied to nk-page sections which are
   full-page views in the original React app.
───────────────────────────────────────── */

.subpage-view,
.nk-page,
.legal-page-content {
  animation: fadeIn 0.5s var(--ease) both;
}

/* ─────────────────────────────────────────
   HEADER SCROLL COLLAPSE
   JS in main.js adds .scrolled to
   .header-wrapper when window.scrollY > 50.
   This is the only React-state animation
   rewritten as a CSS class-toggle.
───────────────────────────────────────── */

/* The translateY(-46px) collapses the 46px top-bar,
   leaving only the main-nav visible while scrolling. */
.header-wrapper {
  transition: transform 0.3s var(--ease);
}

.header-wrapper.scrolled {
  transform: translateY(-46px);
}

.header-wrapper.scrolled .main-nav {
  height: 54px;
  background: var(--blue-slate);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-wrapper.scrolled .logo-centered img {
  height: 44px;
}

/* ─────────────────────────────────────────
   SECURITY PILL — subtle pulse
───────────────────────────────────────── */

.security-pill {
  animation: softPulse 3s ease-in-out infinite;
}

/* ─────────────────────────────────────────
   GOLD GRADIENT TEXT SHIMMER
   Optional: add class .gold-shimmer to any
   .gold-text element to make it animate.
───────────────────────────────────────── */

.gold-shimmer {
  background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold-light) 40%,
    var(--gold) 60%,
    var(--gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}