/**
 * Enhanced Card Effects - Ported from CCTV Central React/Tailwind
 *
 * ARCHITECTURE: Glow layer + lift + scale + deep shadows for premium depth
 * WHY: Creates tactile, interactive cards vs flat hover states
 * TRADEOFF: More CSS complexity + ::before pseudo-element vs simpler hover
 * NOTE: Uses existing CSS variables from variables.css, adds effect-specific vars
 */

:root {
    /* Card Effect Variables */
    --card-effect-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --card-effect-duration: 300ms;

    /* Glow colors (use primary colors by default) */
    --card-glow-from: transparent;
    --card-glow-via: rgba(59, 130, 246, 0.2);  /* primary-500 at 20%, subtler */
    --card-glow-to: transparent;

    /* Shadows - Subtle depth effects (toned down from original) */
    --card-shadow-base:
        0 2px 4px -1px rgba(0, 0, 0, 0.08),
        0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --card-shadow-hover:
        0 8px 20px -8px rgba(0, 0, 0, 0.15),
        0 4px 12px -4px rgba(0, 0, 0, 0.1);
    --card-shadow-active:
        0 12px 28px -10px rgba(0, 0, 0, 0.2),
        0 6px 16px -6px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
    --card-glow-via: rgba(99, 102, 241, 0.25);  /* Slightly purple for dark mode, toned down */
    --card-shadow-base:
        0 2px 4px -1px rgba(0, 0, 0, 0.2),
        0 1px 2px -1px rgba(0, 0, 0, 0.15);
    --card-shadow-hover:
        0 8px 20px -8px rgba(0, 0, 0, 0.3),
        0 4px 12px -4px rgba(0, 0, 0, 0.2);
    --card-shadow-active:
        0 12px 28px -10px rgba(0, 0, 0, 0.4),
        0 6px 16px -6px rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   BASE ENHANCED CARD (.card-enhanced)
   ============================================================================= */

/**
 * Enhanced card with glow effect, lift, and scale hover
 * Apply to any container that should have the premium hover effect
 */
.card-enhanced {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    box-shadow: var(--card-shadow-base);
    transition:
        transform var(--card-effect-duration) var(--card-effect-easing),
        box-shadow var(--card-effect-duration) var(--card-effect-easing),
        border-color var(--card-effect-duration) var(--card-effect-easing);
    cursor: pointer;
    overflow: visible;  /* Allow glow to extend beyond card bounds */
}

/* Glow layer (pseudo-element behind the card) */
.card-enhanced::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        var(--card-glow-from) 0%,
        var(--card-glow-via) 50%,
        var(--card-glow-to) 100%
    );
    opacity: 0;
    filter: blur(4px);
    z-index: -1;
    pointer-events: none;
    transition:
        opacity var(--card-effect-duration) var(--card-effect-easing),
        filter var(--card-effect-duration) var(--card-effect-easing);
}

/* Hover state - subtle lift */
.card-enhanced:hover {
    transform: translateY(-2px) scale(1.005);
    border-color: var(--primary-400);
    box-shadow: var(--card-shadow-hover);
}

.card-enhanced:hover::before {
    opacity: 0.6;
    filter: blur(12px);
}

/* Active/pressed state */
.card-enhanced:active {
    transform: translateY(-2px) scale(1.005);
    box-shadow: var(--card-shadow-base);
}

/* Focus state (keyboard navigation) */
.card-enhanced:focus-visible {
    outline: none;
    box-shadow:
        var(--card-shadow-hover),
        0 0 0 3px rgba(59, 130, 246, 0.4);
}

/* =============================================================================
   SELECTED STATE (.card-enhanced.selected)
   ============================================================================= */

.card-enhanced.selected {
    border-color: var(--primary-500);
    box-shadow: var(--card-shadow-active);
}

.card-enhanced.selected::before {
    opacity: 1;
    filter: blur(24px);
    --card-glow-via: rgba(59, 130, 246, 0.55);
}

/* =============================================================================
   COLOR VARIANTS (Medical Theme)
   ============================================================================= */

/* Blue/Primary (default) */
.card-enhanced--primary {
    --card-glow-via: rgba(59, 130, 246, 0.35);
}
.card-enhanced--primary:hover,
.card-enhanced--primary.selected {
    border-color: var(--primary-500);
}

/* Teal/Accent */
.card-enhanced--accent {
    --card-glow-via: rgba(20, 184, 166, 0.35);
}
.card-enhanced--accent:hover,
.card-enhanced--accent.selected {
    border-color: var(--accent-500);
}

/* Success/Green */
.card-enhanced--success {
    --card-glow-via: rgba(16, 185, 129, 0.35);
}
.card-enhanced--success:hover,
.card-enhanced--success.selected {
    border-color: var(--success-500);
}

/* Warning/Amber */
.card-enhanced--warning {
    --card-glow-via: rgba(245, 158, 11, 0.35);
}
.card-enhanced--warning:hover,
.card-enhanced--warning.selected {
    border-color: var(--warning-500);
}

/* Error/Red (use sparingly) */
.card-enhanced--error {
    --card-glow-via: rgba(239, 68, 68, 0.35);
}
.card-enhanced--error:hover,
.card-enhanced--error.selected {
    border-color: var(--error-500);
}

/* =============================================================================
   NOTE TYPE CARDS (Upgrade existing .note-type-card)
   ============================================================================= */

.note-type-card.card-enhanced {
    /* Reset existing transforms, use enhanced version */
    padding: var(--space-5);
}

.note-type-card.card-enhanced::before {
    /* Override to include top accent bar effect */
    background: linear-gradient(
        180deg,
        var(--primary-500) 0%,
        var(--primary-500) 4px,
        transparent 4px,
        transparent 15%,
        var(--card-glow-via) 50%,
        transparent 100%
    );
}

/* =============================================================================
   ICON CONTAINER ENHANCEMENT
   ============================================================================= */

/**
 * Enhanced icon container with glow effect on parent hover
 * Use within .card-enhanced for coordinated hover animations
 */
.icon-enhanced {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
    color: white;
    transition:
        transform var(--card-effect-duration) var(--card-effect-easing),
        box-shadow var(--card-effect-duration) var(--card-effect-easing);
}

.card-enhanced:hover .icon-enhanced {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.45);
}

.card-enhanced.selected .icon-enhanced {
    transform: scale(1.1);
    box-shadow: 0 0 32px rgba(59, 130, 246, 0.7);
}

/* Icon color variants */
.icon-enhanced--accent {
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
}
.card-enhanced:hover .icon-enhanced--accent {
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.45);
}

.icon-enhanced--success {
    background: linear-gradient(135deg, var(--success-500), var(--success-600));
}
.card-enhanced:hover .icon-enhanced--success {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.45);
}

/* =============================================================================
   STAGGERED ENTRANCE ANIMATIONS
   ============================================================================= */

/**
 * Apply to container, children animate in sequence
 * Use with JavaScript to add .visible class on IntersectionObserver trigger
 */
.stagger-container > .card-enhanced {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition:
        opacity var(--card-effect-duration) var(--card-effect-easing),
        transform var(--card-effect-duration) var(--card-effect-easing);
}

.stagger-container > .card-enhanced.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Stagger delay CSS custom property (set via JavaScript) */
.stagger-container > .card-enhanced {
    transition-delay: calc(var(--stagger-index, 0) * 100ms);
}

/* Alternative: Pure CSS stagger (no JS needed) */
.stagger-container.auto-stagger > .card-enhanced:nth-child(1) { transition-delay: 0ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(2) { transition-delay: 100ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(3) { transition-delay: 200ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(4) { transition-delay: 300ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(5) { transition-delay: 400ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(6) { transition-delay: 500ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(7) { transition-delay: 600ms; }
.stagger-container.auto-stagger > .card-enhanced:nth-child(8) { transition-delay: 700ms; }

/* =============================================================================
   AMBIENT GRADIENT MOTION (Optional Enhancement)
   ============================================================================= */

/**
 * Adds subtle pulsing animation to glow layer
 * Use sparingly - can be distracting if overused
 */
.card-enhanced.ambient-glow::before {
    animation: ambientPulse 4.5s ease-in-out infinite;
}

@keyframes ambientPulse {
    0%, 100% {
        filter: blur(20px);
        opacity: 0.6;
    }
    50% {
        filter: blur(28px);
        opacity: 0.8;
    }
}

/* Only animate on hover to reduce visual noise */
.card-enhanced.ambient-glow:hover::before {
    animation: ambientPulse 4.5s ease-in-out infinite;
    opacity: 1;
}

/* =============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .card-enhanced,
    .card-enhanced::before,
    .icon-enhanced {
        transition-duration: 0ms;
    }

    .card-enhanced:hover {
        transform: none;
    }

    .card-enhanced.ambient-glow::before {
        animation: none;
    }

    .stagger-container > .card-enhanced {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }
}

/* =============================================================================
   SOL-PATIENT-CARD INTEGRATION
   ============================================================================= */

/**
 * Override for .sol-patient-card which has its own ::after glow and isolation.
 * We enhance the existing ::after instead of adding ::before.
 */
.sol-patient-card.card-enhanced {
    /* Remove isolation so glow can extend beyond bounds */
    isolation: auto;
    overflow: visible;
}

/* Enhance the existing ::after glow layer on hover */
.sol-patient-card.card-enhanced::after {
    transition:
        opacity var(--card-effect-duration, 300ms) var(--card-effect-easing, cubic-bezier(0.22, 0.61, 0.36, 1)),
        filter var(--card-effect-duration, 300ms) var(--card-effect-easing, cubic-bezier(0.22, 0.61, 0.36, 1)),
        background var(--card-effect-duration, 300ms) var(--card-effect-easing, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.sol-patient-card.card-enhanced:hover::after {
    filter: blur(12px);
    opacity: 1;
}

/* Color-coded glow based on severity variant */
.sol-patient-card.card-enhanced.card-enhanced--error:hover::after {
    background: radial-gradient(
        ellipse 150% 100% at 30% 0%,
        rgba(239, 68, 68, 0.4),
        transparent 60%
    );
}

.sol-patient-card.card-enhanced.card-enhanced--warning:hover::after {
    background: radial-gradient(
        ellipse 150% 100% at 30% 0%,
        rgba(245, 158, 11, 0.4),
        transparent 60%
    );
}

.sol-patient-card.card-enhanced.card-enhanced--success:hover::after {
    background: radial-gradient(
        ellipse 150% 100% at 30% 0%,
        rgba(34, 197, 94, 0.35),
        transparent 60%
    );
}

.sol-patient-card.card-enhanced.card-enhanced--primary:hover::after {
    background: radial-gradient(
        ellipse 150% 100% at 30% 0%,
        rgba(59, 130, 246, 0.35),
        transparent 60%
    );
}

/* Subtle shadow on hover - toned down */
.sol-patient-card.card-enhanced:hover {
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.2),
        0 3px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
    /* Reduce hover lift on mobile (touch devices) */
    .card-enhanced:hover {
        transform: translateY(-2px) scale(1.005);
    }

    /* Smaller glow blur on mobile for performance */
    .card-enhanced:hover::before {
        filter: blur(12px);
    }

    /* Reduce shadow intensity for cleaner mobile look */
    .card-enhanced:hover {
        box-shadow:
            0 12px 30px -10px rgba(0, 0, 0, 0.2),
            0 6px 16px -6px rgba(0, 0, 0, 0.1);
    }
}