/* ═══════════════════════════════════════════════════════════
   animations.css — IoT Emergency Platform Animation System
   ═══════════════════════════════════════════════════════════ */

/* ── Animation Tokens ────────────────────────────────────── */
:root {
    --dur-fast:    150ms;
    --dur-normal:  300ms;
    --dur-slow:    600ms;
    --dur-xslow:  1200ms;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-linear: linear;
}

/* ── Page Load — Staggered Reveal ────────────────────────── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
    animation: revealUp var(--dur-slow) var(--ease-out) forwards;
}
.reveal:nth-child(1)  { animation-delay: 0ms; }
.reveal:nth-child(2)  { animation-delay: 80ms; }
.reveal:nth-child(3)  { animation-delay: 160ms; }
.reveal:nth-child(4)  { animation-delay: 240ms; }
.reveal:nth-child(5)  { animation-delay: 320ms; }
.reveal:nth-child(6)  { animation-delay: 400ms; }
.reveal:nth-child(7)  { animation-delay: 480ms; }
.reveal:nth-child(8)  { animation-delay: 560ms; }
.reveal:nth-child(9)  { animation-delay: 640ms; }
.reveal:nth-child(10) { animation-delay: 720ms; }

/* ── Scroll-Triggered Reveal ─────────────────────────────── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
}
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero Word Reveal ────────────────────────────────────── */
@keyframes wordReveal {
    from { opacity: 0; transform: translateY(40px) skewY(3deg); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) skewY(0deg); filter: blur(0); }
}
.hero-word {
    display: inline-block;
    animation: wordReveal var(--dur-slow) var(--ease-out) forwards;
    opacity: 0;
}

/* Hero subline + CTA entrance */
.hero-subline {
    opacity: 0;
    animation: revealUp var(--dur-slow) var(--ease-out) 700ms forwards;
}
.hero-cta-row {
    opacity: 0;
    animation: revealUp var(--dur-slow) var(--ease-out) 900ms forwards;
}
.hero-metrics {
    opacity: 0;
    animation: revealUp var(--dur-slow) var(--ease-out) 1100ms forwards;
}

/* ── Critical Alert Pulse ────────────────────────────────── */
@keyframes criticalPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.5); }
    50%       { box-shadow: 0 0 0 10px rgba(255, 45, 85, 0); }
}
.status-critical {
    animation: criticalPulse 2s ease-in-out infinite;
    border-color: var(--color-danger) !important;
}

/* ── Online Breathe Animation ────────────────────────────── */
@keyframes breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}
.status-dot.online {
    background: var(--color-success);
    animation: breathe 2.4s ease-in-out infinite;
}

/* ── Submenu Slide-In ────────────────────────────────────── */
@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
.submenu-rail {
    animation: slideInLeft var(--dur-normal) var(--ease-out) forwards;
}

/* ── AJAX Value Flash ────────────────────────────────────── */
@keyframes valueFlash {
    0%   { color: var(--color-accent); background: rgba(0,194,255,0.12); }
    100% { color: var(--color-text);   background: transparent; }
}
.metric-value.updated {
    animation: valueFlash var(--dur-slow) var(--ease-out) forwards;
    border-radius: 4px;
    padding: 0 4px;
}

/* ── Background Drift Glow ───────────────────────────────── */
@keyframes driftGlow {
    0%   { background-position: 20% 30%; }
    33%  { background-position: 80% 20%; }
    66%  { background-position: 60% 80%; }
    100% { background-position: 20% 30%; }
}

/* ── Ticker Scroll ───────────────────────────────────────── */
@keyframes tickerScroll {
    from { transform: translateX(100vw); }
    to   { transform: translateX(-100%); }
}

/* ── SVG Scene Animations ────────────────────────────────── */
@keyframes orbitPulse {
    0%   { stroke-dashoffset: 200; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: 0; }
}
.data-pulse-line {
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    fill: none;
    animation: orbitPulse 2.4s linear infinite;
}
.data-pulse-line:nth-child(1) { animation-delay: 0ms; }
.data-pulse-line:nth-child(2) { animation-delay: 400ms; }
.data-pulse-line:nth-child(3) { animation-delay: 800ms; }
.data-pulse-line:nth-child(4) { animation-delay: 1200ms; }
.data-pulse-line:nth-child(5) { animation-delay: 1600ms; }
.data-pulse-line:nth-child(6) { animation-delay: 2000ms; }

/* Cloud hub spinning glow ring */
@keyframes spinRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.hub-ring {
    transform-origin: center;
    animation: spinRing 12s linear infinite;
    stroke: url(#ringGradient);
    stroke-dasharray: 60 240;
}

/* Alert badge blink */
@keyframes alertBlink {
    0%, 90%, 100% { opacity: 1; }
    95%            { opacity: 0.3; }
}
.alert-badge-dot {
    animation: alertBlink 2s ease-in-out infinite;
    fill: var(--color-danger);
}

/* SVG scene float */
@keyframes scenFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}
.hero-svg-scene {
    animation: scenFloat 6s ease-in-out infinite;
}

/* ── Card Hover ──────────────────────────────────────────── */
.card,
.device-card,
.solution-card {
    transition: transform var(--dur-normal) var(--ease-spring),
                box-shadow var(--dur-normal) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

/* ── Button Press Feedback ───────────────────────────────── */
.btn {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.btn:active {
    transform: scale(0.96);
    box-shadow: none;
}
.btn-primary {
    box-shadow: 0 0 24px rgba(0,194,255,0.35);
}
.btn-primary:hover {
    box-shadow: 0 0 36px rgba(0,194,255,0.55);
}

/* ── Loading Spinner ─────────────────────────────────────── */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}

/* ── Progress Bar Animation ──────────────────────────────── */
@keyframes progressFill {
    from { width: 0; }
    to   { width: var(--progress, 60%); }
}
.progress-fill.animate {
    animation: progressFill 1.2s var(--ease-out) forwards;
}

/* ── Fade transitions for right panel swap ───────────────── */
.panel-fade-out {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.panel-fade-in {
    opacity: 1;
    transform: translateX(0);
    transition: opacity var(--dur-normal) ease, transform var(--dur-normal) ease;
}

/* ── Glow hover for nav items ────────────────────────────── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(0,194,255,0.15); }
    50%       { box-shadow: 0 0 20px rgba(0,194,255,0.35); }
}

/* ── Shake animation for form errors ─────────────────────── */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.form-shake {
    animation: shake 400ms ease;
}

/* ── Slide in from right (for slide-over panels) ─────────── */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .scroll-reveal,
    .hero-word,
    .hero-subline,
    .hero-cta-row,
    .hero-metrics {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .status-dot.online,
    .status-critical,
    .alert-badge-dot,
    .hero-svg-scene,
    .hub-ring,
    .data-pulse-line,
    .ticker-track {
        animation: none !important;
    }
    body::before {
        animation: none !important;
    }
}