/* Utilities Layer - Animations, Helpers, and Responsive Styles */
@layer utilities {
    /* Animations */
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    @keyframes pulse-red {
        0%, 100% {
            box-shadow: 0 0.25rem 0.375rem oklch(63% 0.24 27 / 0.3);
        }
        50% {
            box-shadow: 0 0.25rem 0.9375rem oklch(63% 0.24 27 / 0.6);
        }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideIn {
        from {
            transform: translateY(-3.125rem);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.5);
            opacity: 0.7;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }
    .info-panel {
            block-size: calc(100dvb - 6rem);;
    }

    /* Responsive Utilities */
    @media (max-width: 48em) {
        .info-panel {
            inline-size: 100%;
            position: absolute;
            inset-block-start: 54dvb;
            inset-block-end: 0;
            
            block-size: 40dvb;
            border-inline-end: none;
            border-block-start: 0.0625rem solid var(--border-color);
            transform: none !important;

            & .stats-container {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-sm);
                padding: var(--space-md);
            }
        }
        
        .panel-toggle {
            display: none;
        }
        
        .map-container {
            block-size: 60vh;
        }
        
        /* Show only theme toggle on mobile, hide other nav items */
        .nav {
            & .nav-link {
                display: none;
            }
            
            & .login-btn {
                display: none;
            }
            
            & .theme-toggle {
                display: flex;
            }
        }
        
        /* Adjust map legend position on mobile to avoid clipping */
        .map-legend {
            position: fixed;
            inset-block-end: calc(10dvb - 2rem); /* Position lower on mobile */
            inset-inline-end: var(--space-md);
            font-size: var(--font-size-xs);
            padding: var(--space-sm);
            max-block-size: calc(35vh); /* Fit within visible map area */
            overflow-y: auto;
            
            & h4 {
                font-size: 0.625rem;
                margin-block-end: 0.25rem;
                text-transform: uppercase;
                letter-spacing: 0.03em;
            }
            
            & .legend-item {
                font-size: 0.625rem;
                margin-block-end: 0.125rem;
                gap: 0.25rem;
                
                & .legend-color {
                    inline-size: 0.875rem;
                    block-size: 0.875rem;
                }
            }
        }
        
        .modal .modal-content {
            inline-size: 95%;
            margin-block-start: 5%;
        }
    }

    
    /* Desktop override for map legend position */
    @media (min-width: 48.0625em) {
        .map-legend {
            position: absolute;
            inset-block-end: calc(var(--space-xl) * 2); /* Higher position on desktop */
            inset-block-end: 30dvb;
            inset-inline-end: var(--space-xl);
            max-block-size: none; /* Remove mobile height restriction */
            font-size: var(--font-size-sm); /* Restore normal font size */
            padding: var(--space-md); /* Restore normal padding */
        }
    }

    /* Modern CSS Features */
    @supports (backdrop-filter: blur(1.25rem)) {
        .header,
        .info-panel {
            backdrop-filter: blur(1.25rem);
            -webkit-backdrop-filter: blur(1.25rem);
        }
    }

    /* Disabled scroll animation - was causing cards to be invisible initially
    @supports (animation-timeline: scroll()) {
        .holiday-card {
            animation: fade-in linear;
            animation-timeline: scroll();
            animation-range: entry 0% cover 30%;
        }
        
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(1.25rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    } */

    /* Container Queries */
    @container (max-width: 31.25rem) {
        .stats-container {
            grid-template-columns: 1fr;
        }
    }

    /* Color Mix with OKLCH for better perceptual blending */
    @supports (color: color-mix(in oklch, red 50%, blue)) {
        .holiday-card:hover {
            background: color-mix(in oklch, currentColor 5%, var(--bg-elevated));
        }
    }

    /* Has Selector */
    @supports selector(:has(*)) {
        .holiday-list:has(.holiday-card:hover) .holiday-card:not(:hover) {
            opacity: 0.7;
        }
    }
    
    /* Utility Classes */
    .visually-hidden {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    .text-center {
        text-align: center;
    }
    
    .text-start {
        text-align: start;
    }
    
    .text-end {
        text-align: end;
    }
    
    .flex {
        display: flex;
    }
    
    .flex-column {
        flex-direction: column;
    }
    
    .items-center {
        align-items: center;
    }
    
    .justify-center {
        justify-content: center;
    }
    
    .gap-sm {
        gap: var(--space-sm);
    }
    
    .gap-md {
        gap: var(--space-md);
    }
    
    .gap-lg {
        gap: var(--space-lg);
    }
}

/* Deep Link Highlighting Animation */
@keyframes pulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.3);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
        transform: scale(1);
    }
}

.holiday-item.highlighted,
.disruption-card.highlighted {
    border: 2px solid var(--warning-color, #ffc107) !important;
    background-color: rgba(255, 193, 7, 0.05) !important;
}

.disruption-card.highlighted {
    z-index: 10;
    position: relative;
}