/* ── animations.css ─────────────────────────────────────────
   All keyframe definitions and CSS-driven animation helpers.
   JS-driven animations live in animations.js.
─────────────────────────────────────────────────────────── */

/* ── Float (hero particles fallback) ────────────────────── */
@keyframes floatUp {
  0%   { transform: translateY(0)    opacity(0); }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-120px); opacity: 0; }
}

/* ── Pulse glow ──────────────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(218, 179, 34, 0.25),
      0 4px 24px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      0 0 48px rgba(218, 179, 34, 0.5),
      0 4px 24px rgba(0, 0, 0, 0.5);
  }
}

/* ── Text shimmer ────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

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

/* ── Slow spin (decorative rings) ───────────────────────── */
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Border gradient spin ────────────────────────────────── */
@keyframes borderSpin {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Fade up (used by IntersectionObserver via JS) ───────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Card lift on hover ──────────────────────────────────── */
.card-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-lift:hover {
  transform: translateY(-6px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(218, 179, 34, 0.12);
}

/* ── Gold glow button ────────────────────────────────────── */
.btn-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ── Nav logo subtle pulse ───────────────────────────────── */
@keyframes logoPulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.15) drop-shadow(0 0 6px rgba(218,179,34,0.4)); }
}

.nav-brand:hover .logotype {
  text-shadow: 0 0 16px rgba(218, 179, 34, 0.5);
}

/* ── Staggered card entrance ─────────────────────────────── */
.stagger-1 { transition-delay: 0.05s !important; }
.stagger-2 { transition-delay: 0.15s !important; }
.stagger-3 { transition-delay: 0.25s !important; }
.stagger-4 { transition-delay: 0.35s !important; }
.stagger-5 { transition-delay: 0.45s !important; }
.stagger-6 { transition-delay: 0.55s !important; }

/* ── Grain texture filter ────────────────────────────────── */
.hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Subtle border glow on focus ─────────────────────────── */
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(218, 179, 34, 0.15);
}

/* ── Scroll-linked progress bar (decorative) ─────────────── */
.scroll-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
  z-index: 101;
  transition: width 0.1s linear;
}