/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS.CSS — Keyframes and transition effects
   Darkfall Card Game Companion
═══════════════════════════════════════════════════════════════ */

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

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

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

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

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes investment-ready-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(200, 146, 42, 0.25); }
  50%       { box-shadow: 0 0 28px rgba(200, 146, 42, 0.55); }
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(200,146,42,0.4); }
  50%       { text-shadow: 0 0 24px rgba(200,146,42,0.8); }
}

@keyframes ember-flicker {
  0%, 100% { opacity: 1; }
  45%       { opacity: 0.85; }
  50%       { opacity: 0.95; }
  55%       { opacity: 0.8; }
}

@keyframes count-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes screen-enter {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes screen-exit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}

@keyframes boss-defeat {
  0%   { transform: scale(1);    filter: brightness(1); }
  20%  { transform: scale(1.04); filter: brightness(1.5); }
  60%  { transform: scale(0.98); filter: brightness(0.7) grayscale(0.5); }
  100% { transform: scale(1);    filter: brightness(1) grayscale(1); opacity: 0.7; }
}

@keyframes overlay-in {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes banner-swap {
  0%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 0; transform: translateY(-12px); }
  60%  { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes descent-shift {
  0%   { transform: translateY(0); filter: brightness(1); }
  35%  { transform: translateY(-8px); filter: brightness(1.3); }
  100% { transform: translateY(0); filter: brightness(1); }
}

@keyframes environment-pulse {
  0%   { opacity: 0.4; }
  40%  { opacity: 1; }
  100% { opacity: 0.6; }
}

@keyframes victory-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(200, 146, 42, 0.5); }
  50%       { text-shadow: 0 0 48px rgba(200, 146, 42, 0.9); }
}

@keyframes round-increment {
  0%   { transform: scale(1) rotate(0deg); color: var(--color-ember); }
  25%  { transform: scale(1.4) rotate(-5deg); color: var(--color-ember-glow); }
  50%  { transform: scale(1.2) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── UTILITY ANIMATION CLASSES ─────────────────────────────── */

/* Applied programmatically via JS */
.anim-fade-in     { animation: fade-in     var(--duration-base) var(--ease-out-expo) both; }
.anim-slide-up    { animation: slide-up    var(--duration-slow) var(--ease-out-expo) both; }
.anim-slide-down  { animation: slide-down  var(--duration-base) var(--ease-out-expo) both; }
.anim-scale-in    { animation: scale-in    var(--duration-base) var(--ease-spring)   both; }
.anim-screen-in   { animation: screen-enter var(--duration-slow) var(--ease-out-expo) both; }

.anim-count-bump  { animation: count-bump  var(--duration-base) var(--ease-spring)   both; }
.anim-boss-defeat { animation: boss-defeat 600ms var(--ease-out-expo) forwards; }
.anim-banner-swap { animation: banner-swap 400ms var(--ease-out-expo) both; }
.anim-round-inc   { animation: round-increment 500ms var(--ease-spring) both; }

/* Overlay panels always animate in */
.overlay:not([hidden]) .overlay-panel {
  animation: overlay-in var(--duration-base) var(--ease-out-expo) both;
}

/* Staggered children — set --delay via inline style or JS */
.stagger-child {
  animation-delay: var(--delay, 0ms);
}

/* Home menu button entrance stagger */
#screen-home.active .home-action-btn:nth-child(1) { animation: slide-up var(--duration-slow) var(--ease-out-expo) 120ms both; }
#screen-home.active .home-action-btn:nth-child(2) { animation: slide-up var(--duration-slow) var(--ease-out-expo) 200ms both; }
#screen-home.active .home-secondary-btn { animation: fade-in var(--duration-slow) var(--ease-out-expo) 360ms both; }

.anim-profile-enter {
  animation: slide-up var(--duration-slow) var(--ease-out-expo) both;
}

/* Home title entrance */
#screen-home.active .home-welcome {
  animation: fade-in var(--duration-xslow) var(--ease-out-expo) both;
}

/* Title glimmer — the signature ambient effect */
.title-top {
  animation: ember-flicker 6s ease-in-out infinite;
}