/* ============================================
   SPARK - Animations
   Mana Reactor + Tactile Card Physics
   ============================================ */

/* --- Core Entrances --- */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Search results micro-bounce landing */
@keyframes bounce-in {
  0% { opacity: 0; transform: translateY(-8px); }
  60% { opacity: 1; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Commander row slide from left */
@keyframes row-enter {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Card grid items deal in */
@keyframes card-deal {
  0% { opacity: 0; transform: translateY(-16px) scale(0.95); }
  60% { opacity: 1; transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Mana Reactor Pulse --- */

/* Sigil heartbeat when active (72bpm = 833ms) */
@keyframes sigil-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Ambient glow throb for active sigils */
@keyframes glow-throb {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Page-level ambient color breathe */
@keyframes ambient-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* --- Aurora Border (Nuxt-style conic sweep) --- */

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-rotate {
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

.aurora-border {
  position: relative;
}

.aurora-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 30%,
    var(--gold) 40%,
    var(--arcane) 50%,
    var(--gold-dim) 60%,
    transparent 70%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: border-rotate 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* --- Shimmer (for text accents) --- */

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* --- Stagger children entrance --- */

.stagger-in > * {
  opacity: 0;
  animation: fade-up var(--duration-reveal) var(--ease-out) forwards;
}

.stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.stagger-in > *:nth-child(2) { animation-delay: 50ms; }
.stagger-in > *:nth-child(3) { animation-delay: 100ms; }
.stagger-in > *:nth-child(4) { animation-delay: 150ms; }
.stagger-in > *:nth-child(5) { animation-delay: 200ms; }
.stagger-in > *:nth-child(6) { animation-delay: 250ms; }
.stagger-in > *:nth-child(7) { animation-delay: 300ms; }
.stagger-in > *:nth-child(8) { animation-delay: 350ms; }
.stagger-in > *:nth-child(9) { animation-delay: 400ms; }
.stagger-in > *:nth-child(10) { animation-delay: 450ms; }
.stagger-in > *:nth-child(n+11) { animation-delay: 500ms; }

/* Card grid stagger (faster, tighter) */
.stagger-cards > * {
  opacity: 0;
  animation: card-deal var(--duration-slow) var(--ease-spring) forwards;
}

.stagger-cards > *:nth-child(1) { animation-delay: 0ms; }
.stagger-cards > *:nth-child(2) { animation-delay: 40ms; }
.stagger-cards > *:nth-child(3) { animation-delay: 80ms; }
.stagger-cards > *:nth-child(4) { animation-delay: 120ms; }
.stagger-cards > *:nth-child(5) { animation-delay: 160ms; }
.stagger-cards > *:nth-child(6) { animation-delay: 200ms; }
.stagger-cards > *:nth-child(7) { animation-delay: 240ms; }
.stagger-cards > *:nth-child(8) { animation-delay: 280ms; }
.stagger-cards > *:nth-child(n+9) { animation-delay: 320ms; }

/* --- Tactile Press (for sigils and buttons) --- */

.tactile-press {
  transition: transform var(--duration-fast) var(--ease-out);
}

.tactile-press:active {
  transform: scale(0.92);
}

/* --- Hover lift for interactive surfaces --- */

@media (hover: hover) and (pointer: fine) {
  .hover-lift {
    transition: transform var(--duration-base) var(--ease-spring),
                box-shadow var(--duration-base) var(--ease-out);
  }

  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lifted);
  }
}