/* ============================================================
   MEDSYNC — MOTION GRAPHICS SYSTEM
   animations.css
   
   Plug-and-play: add this stylesheet after navbar.css and
   mobile-menu.css. No existing classes are overridden — all
   animation hooks are additive.
   ============================================================ */

/* ── 1. GLOBAL ANIMATION TOKENS ─────────────────────────── */
:root {
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-expo:  cubic-bezier(0.7, 0, 0.84, 0);
    --ease-cinematic:cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur-fast:  0.35s;
    --dur-mid:   0.65s;
    --dur-slow:  1s;
    --dur-crawl: 1.6s;
}

/* ── 2. SCROLL-REVEAL BASE — every animated element starts here ── */
.ms-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity  var(--dur-mid) var(--ease-out-expo),
        transform var(--dur-mid) var(--ease-out-expo);
    will-change: opacity, transform;
}

.ms-reveal.ms-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variant: slide from left */
.ms-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity  var(--dur-mid) var(--ease-out-expo),
        transform var(--dur-mid) var(--ease-out-expo);
}
.ms-reveal-left.ms-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Variant: slide from right */
.ms-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition:
        opacity  var(--dur-mid) var(--ease-out-expo),
        transform var(--dur-mid) var(--ease-out-expo);
}
.ms-reveal-right.ms-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Variant: scale up */
.ms-reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity   var(--dur-mid) var(--ease-out-expo),
        transform var(--dur-mid) var(--ease-spring);
}
.ms-reveal-scale.ms-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.ms-delay-1  { transition-delay: 0.08s; }
.ms-delay-2  { transition-delay: 0.16s; }
.ms-delay-3  { transition-delay: 0.24s; }
.ms-delay-4  { transition-delay: 0.32s; }
.ms-delay-5  { transition-delay: 0.40s; }
.ms-delay-6  { transition-delay: 0.50s; }
.ms-delay-7  { transition-delay: 0.60s; }

/* ── 3. HERO SECTION ─────────────────────────────────────── */

/* Particle canvas layer */
#ms-particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Ambient glow orbs behind hero content */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.25;
    pointer-events: none;
    animation: orbDrift var(--dur-crawl) ease-in-out infinite alternate;
}

.hero-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(8,145,178,0.6), transparent 70%);
    top: -100px; left: -150px;
    animation-duration: 9s;
}

.hero-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(124,58,237,0.5), transparent 70%);
    bottom: -80px; right: -100px;
    animation-duration: 12s;
    animation-delay: -4s;
}

.hero-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(5,150,105,0.4), transparent 70%);
    top: 40%; left: 45%;
    animation-duration: 15s;
    animation-delay: -8s;
}

@keyframes orbDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(40px, 30px) scale(1.12); }
}

/* Hero text — word-by-word mask reveal */
.hero-word {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    animation: wordReveal var(--dur-slow) var(--ease-out-expo) forwards;
    animation-play-state: paused;
}

.hero-word.play { animation-play-state: running; }

@keyframes wordReveal {
    from { clip-path: inset(0 100% 0 0); transform: translateY(8px); }
    to   { clip-path: inset(0 0% 0 0);   transform: translateY(0); }
}

/* Hero status badge pulse */
.status-badge {
    animation: badgePop 0.6s var(--ease-spring) both;
    animation-delay: 0.2s;
}

@keyframes badgePop {
    0%   { opacity: 0; transform: scale(0.7) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.status-dot {
    animation: dotPulse 2.4s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.6; }
}

/* Hero buttons stagger */
.hero-buttons .btn-primary {
    animation: btnSlideIn var(--dur-mid) var(--ease-spring) both;
    animation-delay: 0.9s;
}
.hero-buttons .btn-secondary {
    animation: btnSlideIn var(--dur-mid) var(--ease-spring) both;
    animation-delay: 1.05s;
}

@keyframes btnSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Hero image container kinetic border */
.image-container {
    position: relative;
    animation: imageReveal 1s var(--ease-out-expo) both;
    animation-delay: 0.6s;
}

@keyframes imageReveal {
    from { opacity: 0; transform: scale(0.9) translateX(30px); clip-path: inset(0 40% 0 0 round 16px); }
    to   { opacity: 1; transform: scale(1)   translateX(0);    clip-path: inset(0 0%  0 0 round 16px); }
}

/* Animated gradient border on image-container */
.image-container::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 1.1rem;
    background: linear-gradient(135deg,
        rgba(8,145,178,0),
        rgba(8,145,178,0.6),
        rgba(124,58,237,0.5),
        rgba(5,150,105,0.4),
        rgba(8,145,178,0));
    background-size: 300% 300%;
    animation: borderRotate 5s linear infinite;
    z-index: -1;
    opacity: 0.7;
}

@keyframes borderRotate {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* Stats card — kinetic entry */
.stats-card {
    animation: statsFloat 0.9s var(--ease-spring) both;
    animation-delay: 1.1s;
}

@keyframes statsFloat {
    from { opacity: 0; transform: translate(30px, 30px) scale(0.8); }
    to   { opacity: 1; transform: translate(0, 0)        scale(1); }
}

.stats-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;
    box-shadow: 0 20px 40px rgba(8,145,178,0.25);
}

/* ── 4. GLASS NAVBAR ─────────────────────────────────────── */
.glass-navbar {
    animation: navbarDrop 0.8s var(--ease-spring) both;
}

@keyframes navbarDrop {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)      scale(1); }
}

.nav-island ul li a {
    position: relative;
    overflow: hidden;
}

/* Shimmer ripple on nav links */
.nav-island ul li a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.nav-island ul li a:hover::after {
    transform: translateX(100%);
}

/* Logo circle spin-in */
.logo-circle-island {
    animation: logoSpin 1s var(--ease-spring) both;
    animation-delay: 0.1s;
}

@keyframes logoSpin {
    from { opacity: 0; transform: rotate(-180deg) scale(0.5); }
    to   { opacity: 1; transform: rotate(0deg)    scale(1); }
}

/* ── 5. ERROR / TOPOLOGY SECTION ─────────────────────────── */

/* Flowchart connector lines — draw-on effect */
.flowchart {
    position: relative;
}

/* Pulsing ring on sensor nodes */
.node-sensor::after,
.node-tech::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(8,145,178,0.4);
    animation: ringPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

.node-tech::after {
    border-color: rgba(124,58,237,0.4);
    animation-delay: -1.25s;
}

@keyframes ringPulse {
    0%   { transform: scale(1);    opacity: 0.8; }
    50%  { transform: scale(1.15); opacity: 0.3; }
    100% { transform: scale(1),    opacity: 0.8; }
}

/* Error node — alarm flash */
.node-error {
    animation: alarmFlash 1.8s ease-in-out infinite;
}

@keyframes alarmFlash {
    0%, 100% { box-shadow: 0 0 0   0   rgba(255,113,108,0); border-color: rgba(255,113,108,0.4); }
    50%      { box-shadow: 0 0 30px 6px rgba(255,113,108,0.35); border-color: rgba(255,113,108,0.9); }
}

/* Feature list items — slide reveal on scroll */
.feature-item {
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateX(8px);
}

/* Topology card — shimmer header */
.topology-badge {
    animation: badgeBlink 2s ease-in-out infinite;
}

@keyframes badgeBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ── 6. RAG / CHAT SECTION ───────────────────────────────── */

/* Chat messages — typewriter stagger reveal */
.chat-message {
    animation: msgSlide var(--dur-mid) var(--ease-out-expo) both;
    animation-play-state: paused;
}

.chat-message.ms-chat-visible {
    animation-play-state: running;
}

.chat-message:nth-child(1) { animation-delay: 0s; }
.chat-message:nth-child(2) { animation-delay: 0.4s; }
.chat-message:nth-child(3) { animation-delay: 0.9s; }

@keyframes msgSlide {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Action buttons — micro press */
.action-btn {
    transition: transform 0.15s var(--ease-spring), background 0.2s ease !important;
}

.action-btn:active {
    transform: scale(0.92) !important;
}

/* Send button — spin on click */
.send-btn {
    transition: transform 0.3s var(--ease-spring), background 0.2s ease !important;
    overflow: hidden;
}

.send-btn:active .material-symbols-outlined {
    animation: sendSpin 0.4s var(--ease-out-expo);
}

@keyframes sendSpin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(-30deg) scale(0.8); }
    to   { transform: rotate(0deg)  scale(1); }
}

/* Input focus glow */
.input-wrapper {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.input-wrapper:focus-within {
    border-color: rgba(8,145,178,0.6) !important;
    box-shadow: 0 0 0 3px rgba(8,145,178,0.12), 0 0 20px rgba(8,145,178,0.15) !important;
}

/* ── 7. FEATURE BOXES ────────────────────────────────────── */
.feature-box {
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease, border-color 0.4s ease !important;
    cursor: default;
}

.feature-box:hover {
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow: 0 20px 40px rgba(8,145,178,0.15) !important;
    border-color: rgba(8,145,178,0.25) !important;
}

.feature-box .material-symbols-outlined {
    transition: transform 0.4s var(--ease-spring);
}

.feature-box:hover .material-symbols-outlined {
    transform: rotate(15deg) scale(1.2);
}

/* ── 8. SERVICE CARDS ────────────────────────────────────── */
.service-card {
    transition: transform 0.5s var(--ease-spring) !important;
    cursor: default;
}

.service-card:hover {
    transform: translateY(-12px) !important;
}

/* Kinetic number counter on stats-value */
.stats-value {
    display: inline-block;
    animation: counterFlicker 0.8s var(--ease-out-expo) both;
    animation-delay: 1.3s;
}

@keyframes counterFlicker {
    0%  { opacity: 0; filter: blur(6px); transform: translateY(10px); }
    60% { opacity: 1; filter: blur(1px); }
    100%{ opacity: 1; filter: blur(0);   transform: translateY(0); }
}

/* ── 9. SECTION DIVIDER LINES — animated gradient sweep ─── */
.ms-section-line {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(8,145,178,0.5) 30%,
        rgba(124,58,237,0.5) 70%,
        transparent 100%);
    background-size: 200% 100%;
    animation: lineSweep 4s linear infinite;
    border: none;
    margin: 0;
}

@keyframes lineSweep {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ── 10. FOOTER ─────────────────────────────────────────── */
footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(8,145,178,0.6),
        rgba(124,58,237,0.5),
        rgba(5,150,105,0.4),
        transparent);
    background-size: 300% 100%;
    animation: footerLine 6s linear infinite;
}

@keyframes footerLine {
    from { background-position: 0% 0; }
    to   { background-position: 300% 0; }
}

.footer-link {
    position: relative;
    transition: color 0.3s ease !important;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: var(--ms-primary);
    transition: width 0.35s var(--ease-out-expo);
}

.footer-link:hover::after {
    width: 100%;
}

/* ── 11. THEME TOGGLE — morphic spin ────────────────────── */
.theme-toggle {
    transition: transform 0.4s var(--ease-spring), box-shadow 0.3s ease !important;
}

.theme-toggle:hover {
    transform: scale(1.15) rotate(20deg) !important;
}

.theme-toggle:active {
    transform: scale(0.9) rotate(-30deg) !important;
}

/* ── 12. MOBILE MENU ─────────────────────────────────────── */

/* Nav items stagger on open already handled by mobile-menu.css;
   add kinetic icon bounce */
.mobile-nav-icon {
    transition: transform 0.3s var(--ease-spring);
}

.mobile-nav-item:hover .mobile-nav-icon {
    transform: scale(1.25) rotate(-5deg);
}

/* ── 13. HAMBURGER LINES — magnetic hover ───────────────── */
.mobile-hamburger:hover .hamburger-line:nth-child(1) { transform: translateX(4px); }
.mobile-hamburger:hover .hamburger-line:nth-child(3) { transform: translateX(-4px); }

/* ── 14. SCANLINE — optional cinematic overlay ───────────── */
.ms-scanline {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.018) 2px,
        rgba(0,0,0,0.018) 4px
    );
    opacity: 0.6;
}

/* ── 15. PREFERS-REDUCED-MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── 16. DASHBOARD SPECIFIC ANIMATIONS ─────────────────────────── */
/* Fade in up animation */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation-name: fade-in-up;
    animation-duration: 0.65s;
    animation-fill-mode: both;
}

/* Slide in left animation */
@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translate3d(-60px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-slide-in-left {
    animation-name: slide-in-left;
    animation-duration: 0.65s;
    animation-fill-mode: both;
}

/* Animation delay utilities */
.delay-100 {
    animation-delay: 100ms;
}
.delay-200 {
    animation-delay: 200ms;
}
.delay-300 {
    animation-delay: 300ms;
}
.delay-400 {
    animation-delay: 400ms;
}
.delay-500 {
    animation-delay: 500ms;
}
.delay-600 {
    animation-delay: 600ms;
}