/**
 * ClinShield Animations
 *
 * Custom CSS animations with accessibility support.
 * Uses prefers-reduced-motion media query for accessibility.
 * Updated for clinical-grade light theme design.
 */

/* ============================================
   CSS Custom Properties (Animation Timing)
   ============================================ */
:root {
    /* Easing functions */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-gauge: 1800ms;

    /* Delays for staggered animations */
    --stagger-delay: 100ms;

    /* Colors - Clinical Light Theme */
    --color-deep-navy: #0B1F33;
    --color-surface: #F8FAFC;
    --color-border: #E5E7EB;
    --color-success: #059669;
    --color-warning: #D97706;
    --color-critical: #DC2626;
    --color-teal-accent: #1FA4A9;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-gauge: 0ms;
        --stagger-delay: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Scale Animations
   ============================================ */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   Slide Animations
   ============================================ */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ============================================
   Gauge/Circle Animations
   ============================================ */
@keyframes gaugeProgress {
    from {
        stroke-dashoffset: var(--gauge-circumference, 283);
    }
    to {
        stroke-dashoffset: var(--gauge-offset, 0);
    }
}

@keyframes gaugePulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 8px currentColor);
    }
}

/* ============================================
   Loading Animations
   ============================================ */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Fade utilities */
.animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--ease-out) forwards;
}

.animate-fade-in-up {
    animation: fadeInUp var(--duration-normal) var(--ease-out) forwards;
}

.animate-fade-in-down {
    animation: fadeInDown var(--duration-normal) var(--ease-out) forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft var(--duration-normal) var(--ease-out) forwards;
}

.animate-fade-in-right {
    animation: fadeInRight var(--duration-normal) var(--ease-out) forwards;
}

/* Scale utilities */
.animate-scale-in {
    animation: scaleIn var(--duration-normal) var(--ease-out) forwards;
}

.animate-pop-in {
    animation: popIn var(--duration-slow) var(--ease-out-back) forwards;
}

/* Loading utilities */
.animate-pulse {
    animation: pulse 2s var(--ease-in-out) infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-border) 25%,
        #F3F4F6 50%,
        var(--color-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   Staggered Animation Helpers
   ============================================ */
.stagger-1 { animation-delay: calc(var(--stagger-delay) * 1); }
.stagger-2 { animation-delay: calc(var(--stagger-delay) * 2); }
.stagger-3 { animation-delay: calc(var(--stagger-delay) * 3); }
.stagger-4 { animation-delay: calc(var(--stagger-delay) * 4); }
.stagger-5 { animation-delay: calc(var(--stagger-delay) * 5); }
.stagger-6 { animation-delay: calc(var(--stagger-delay) * 6); }
.stagger-7 { animation-delay: calc(var(--stagger-delay) * 7); }
.stagger-8 { animation-delay: calc(var(--stagger-delay) * 8); }

/* Initial state for staggered items */
.stagger-item {
    opacity: 0;
}

.stagger-item.animate {
    animation: fadeInUp var(--duration-normal) var(--ease-out) forwards;
}

/* ============================================
   Card Hover Effects (Light Theme)
   ============================================ */
.card-hover {
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 31, 51, 0.08),
                0 2px 4px rgba(11, 31, 51, 0.04);
    border-color: rgba(11, 31, 51, 0.15);
}

/* ============================================
   Button Micro-interactions
   ============================================ */
.btn-interactive {
    transition: transform var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn-interactive:hover {
    transform: translateY(-1px);
}

.btn-interactive:active {
    transform: translateY(0) scale(0.98);
}

/* Primary button hover */
.btn-primary-hover:hover {
    background-color: #1a3a5c;
}

/* ============================================
   Skeleton Loading States (Light Theme)
   ============================================ */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-border) 25%,
        #F3F4F6 50%,
        var(--color-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-card {
    height: 120px;
}

/* ============================================
   Toast Notifications
   ============================================ */
.toast-enter {
    animation: slideInRight var(--duration-normal) var(--ease-out) forwards;
}

.toast-exit {
    animation: slideOutRight var(--duration-normal) var(--ease-out) forwards;
}

/* Toast styles */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-width: 400px;
}

.toast-success {
    background: var(--color-success);
    color: white;
}

.toast-error {
    background: var(--color-critical);
    color: white;
}

.toast-warning {
    background: var(--color-warning);
    color: white;
}

/* ============================================
   Modal Animations
   ============================================ */
.modal-backdrop {
    animation: fadeIn var(--duration-fast) var(--ease-out) forwards;
}

.modal-content {
    animation: scaleIn var(--duration-normal) var(--ease-out) forwards;
}

/* ============================================
   Progress Bar Animation
   ============================================ */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--progress-width, 0%);
    }
}

.progress-bar-animated {
    animation: progressFill var(--duration-slow) var(--ease-out) forwards;
}

/* ============================================
   Risk Level Color Classes (Light Theme)
   ============================================ */
.risk-low {
    --risk-color: var(--color-success);
}

.risk-medium {
    --risk-color: var(--color-warning);
}

.risk-high {
    --risk-color: #EA580C;
}

.risk-critical {
    --risk-color: var(--color-critical);
}

/* Risk badge styles */
.risk-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.risk-badge.risk-low {
    background-color: rgba(5, 150, 105, 0.1);
    color: #059669;
}

.risk-badge.risk-medium {
    background-color: rgba(217, 119, 6, 0.1);
    color: #D97706;
}

.risk-badge.risk-high {
    background-color: rgba(234, 88, 12, 0.1);
    color: #EA580C;
}

.risk-badge.risk-critical {
    background-color: rgba(220, 38, 38, 0.1);
    color: #DC2626;
}

/* ============================================
   Gauge Component Styles (Light Theme)
   ============================================ */
.compliance-gauge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.compliance-gauge-svg {
    transform: rotate(-90deg);
}

.compliance-gauge-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 12;
}

.compliance-gauge-progress {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke var(--duration-normal) var(--ease-out),
                stroke-dashoffset var(--duration-gauge) var(--ease-out);
}

.compliance-gauge-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.compliance-gauge-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-deep-navy);
}

.compliance-gauge-label {
    font-size: 0.875rem;
    color: #6B7280;
    margin-top: 0.25rem;
}

/* ============================================
   Input Focus States
   ============================================ */
.input-focus {
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.input-focus:focus {
    outline: none;
    border-color: var(--color-deep-navy);
    box-shadow: 0 0 0 3px rgba(11, 31, 51, 0.1);
}

/* ============================================
   Link Hover Effects
   ============================================ */
.link-hover {
    transition: color var(--duration-fast) var(--ease-out);
}

.link-hover:hover {
    color: var(--color-teal-accent);
}

/* ============================================
   Page Load Animation
   ============================================ */
.page-enter {
    opacity: 0;
}

.page-enter-active {
    opacity: 1;
    animation: fadeInUp var(--duration-normal) var(--ease-out) forwards;
}

/* ============================================
   Scroll Reveal Animation
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

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

/* ============================================
   Navigation Transitions
   ============================================ */
.nav-link {
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

/* ============================================
   Dropdown Menu Animation
   ============================================ */
.dropdown-enter {
    opacity: 0;
    transform: translateY(-8px);
}

.dropdown-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.dropdown-exit {
    opacity: 1;
    transform: translateY(0);
}

.dropdown-exit-active {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}