/* ============================================================
   Storyteller App — Animations & Micro-interactions
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */

/* Messages/cards sliding in from below */
@keyframes slideInMsg {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toast slides in from right */
@keyframes slideInToast {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Combat beat slides in from right (feed bar) */
@keyframes slideInBeat {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Pop-in for modals and popups */
@keyframes popIn {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Active turn pulse — red glow oscillation */
@keyframes pulse-combat {
  0%, 100% { box-shadow: 0 0 8px hsla(0, 80%, 50%, 0.3), 0 0 16px hsla(0, 80%, 40%, 0.15); }
  50%       { box-shadow: 0 0 16px hsla(0, 80%, 55%, 0.6), 0 0 32px hsla(0, 80%, 45%, 0.3); }
}

/* Active turn row pulse (background oscillation) */
@keyframes active-turn-pulse {
  0%, 100% { background: hsla(0, 80%, 15%, 0.35); }
  50%       { background: hsla(0, 80%, 18%, 0.55); }
}

/* Dot pulsing (status indicators) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* Blinking (declaring status) */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Thinking dots (agent loading) */
@keyframes thinking-dot {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

/* Shake (botch/fumble) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* Blood drip flash (critical success) */
@keyframes blood-flash {
  0%   { box-shadow: 0 0 0 hsla(0, 90%, 45%, 0); }
  30%  { box-shadow: 0 0 30px hsla(0, 90%, 45%, 0.7); }
  100% { box-shadow: 0 0 0 hsla(0, 90%, 45%, 0); }
}

/* Turn entry animation */
@keyframes combat-turn-enter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Login screen glow pulse */
@keyframes login-glow {
  0%, 100% { text-shadow: 0 0 10px hsla(0, 80%, 40%, 0.4), 0 0 20px hsla(0, 80%, 30%, 0.2); }
  50%       { text-shadow: 0 0 20px hsla(0, 80%, 50%, 0.7), 0 0 40px hsla(0, 80%, 40%, 0.4); }
}

/* Agent HUD tab shimmer when thinking */
@keyframes agent-thinking-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Initiative roll number count-up visual pulse */
@keyframes init-reveal {
  from { opacity: 0; transform: scale(1.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slide-up drawer */
@keyframes slideUpDrawer {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Applied Animation Classes ─────────────────────────────── */

.animate-fade-in { animation: fadeIn var(--dur-normal) var(--ease-smooth) both; }
.animate-slide-in { animation: slideInMsg var(--dur-normal) var(--ease-out-quart) both; }
.animate-pop-in   { animation: popIn var(--dur-normal) var(--ease-spring) both; }

/* Login title glow */
.login-logo h1 { animation: login-glow 3s ease-in-out infinite; }

/* Agent tab shimmer while loading */
.agent-tab.thinking {
  background: linear-gradient(
    90deg,
    var(--c-bg-500) 25%,
    hsla(0,0%,100%,0.06) 50%,
    var(--c-bg-500) 75%
  );
  background-size: 200% 100%;
  animation: agent-thinking-shimmer 1.5s linear infinite;
}

/* Blood flash on combat beat (class added by JS) */
.beat-critical { animation: blood-flash 0.7s ease-out; }

/* Init reveal animation added by JS */
.init-revealed { animation: init-reveal 0.4s var(--ease-spring); }

/* ── Transitions ───────────────────────────────────────────── */

/* Smooth panel view switching */
.content-view {
  animation: none;
}
.content-view.entering {
  animation: fadeIn var(--dur-fast) var(--ease-smooth) both;
}

/* Sidebar nav item hover transition (defined in layout.css but animated here) */
.nav-item { will-change: background, border-color; }

/* Agent HUD tab transitions */
.agent-tab { will-change: color, border-color, background; }

/* Combatant row transitions */
.combatant-row { will-change: border-color, background, box-shadow; }

/* Action card hover */
.action-card { will-change: transform, border-color, background; }

/* Button press feel */
.btn, .fab {
  will-change: transform, box-shadow;
  -webkit-tap-highlight-color: transparent;
}

/* Dot rating hover cascade */
.dot-rating:hover .dot { transition: background var(--dur-fast) var(--ease-smooth); }

/* ── Thematic UI Animations ── */

@keyframes roll-dice {
    0% {
        transform: rotate(0deg) scale(0.9);
    }
    50% {
        transform: rotate(180deg) scale(1);
    }
    100% {
        transform: rotate(360deg) scale(0.9);
    }
}

.animate-roll {
    animation: roll-dice 0.5s linear;
}

@keyframes slide-in-bottom {
    from {
        transform: translateY(100%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.animate-slide-in {
    animation: slide-in-bottom 0.5s ease-out forwards;
}

@keyframes slide-out-bottom {
    from {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    to {
        transform: translateY(100%) scale(0.9);
        opacity: 0;
    }
}

.animate-slide-out {
    animation: slide-out-bottom 0.5s ease-in forwards;
}

@keyframes blood-pulse {
    0% {
        background-color: hsla(0, 85%, 45%, 0.4);
        box-shadow: 0 0 15px var(--c-red-500);
        opacity: 1;
    }
    50% {
        background-color: transparent;
        box-shadow: none;
        opacity: 0.5;
    }
    100% {
        background-color: hsla(0, 85%, 45%, 0.4);
        box-shadow: 0 0 15px var(--c-red-500);
        opacity: 1;
    }
}

.animate-blood-splatter {
    animation: blood-pulse 0.8s ease-out infinite;
}

/* ── UI Micro-Animations ──────────────────────────────────── */

/* Dice Roll Shake */
@keyframes dice-roll-shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-2deg); }
  20% { transform: translate(-3px, 0px) rotate(2deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(2deg); }
  50% { transform: translate(-1px, 2px) rotate(-2deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-2deg); }
  80% { transform: translate(-1px, -1px) rotate(2deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-2deg); }
}

.animate-dice-roll {
  animation: dice-roll-shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Blood Splatter effect on damage */
@keyframes blood-splatter-pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); border-color: rgba(220, 38, 38, 1); }
  70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); border-color: rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); border-color: rgba(220, 38, 38, 0); }
}

.animate-splatter {
  animation: blood-splatter-pulse 0.8s ease-out;
}

/* Standardized Slide / Fade */
.animate-fade-slide {
  animation: slideInMsg var(--dur-normal) var(--ease-out-quart);
}