/* ============================================
   Enhanced CSS with Native Modern Features
   Following MODERN_UI_DESIGN.md principles
   ============================================ */

/* ============================================
   CSS Layers for Cascade Control
   ============================================ */
@layer reset, base, components, utilities;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

@layer base {
    /* ============================================
       Enhanced Custom Properties with @property
       ============================================ */
    @property --gradient-angle {
        syntax: '<angle>';
        initial-value: 135deg;
        inherits: false;
    }

    @property --glow-intensity {
        syntax: '<number>';
        initial-value: 0.3;
        inherits: false;
    }

    @property --card-scale {
        syntax: '<number>';
        initial-value: 1;
        inherits: false;
    }

    :root {
        /* Color system using oklch for better gradients */
        --color-primary-h: 280;
        --color-primary-s: 0.2;
        --color-primary-l: 45%;
        --color-primary: oklch(var(--color-primary-l) var(--color-primary-s) var(--color-primary-h));

        /* Dynamic Album Color Palette - Will be overridden by JavaScript */
        --album-primary: #6B46C1;
        --album-primaryLight: #9F7AEA;
        --album-primaryDark: #553C9A;
        --album-primarySubtle: #F3E8FF;
        --album-secondary: #FFD700;
        --album-secondaryLight: #FFE454;
        --album-secondaryDark: #B7950B;
        --album-secondarySubtle: #FFF9E6;
        --album-background: #0F0F1E;
        --album-backgroundElevated: #1A1A2E;
        --album-surface: #252542;
        --album-surfaceVariant: #323251;
        --album-textPrimary: #FFFFFF;
        --album-textSecondary: rgba(255,255,255,0.7);
        --album-success: #48BB78;
        --album-warning: #ED8936;
        --album-error: #F56565;
        --album-glow: #6B46C140;
        --album-shadow: rgba(0,0,0,0.5);

        /* Fluid spacing with clamp and calc */
        --fluid-space-xs: clamp(0.25rem, 0.5vw + 0.25rem, 0.5rem);
        --fluid-space-sm: clamp(0.5rem, 1vw + 0.5rem, 1rem);
        --fluid-space-md: clamp(1rem, 2vw + 0.5rem, 2rem);
        --fluid-space-lg: clamp(1.5rem, 3vw + 0.75rem, 3rem);
        --fluid-space-xl: clamp(2rem, 5vw + 1rem, 4rem);

        /* Fluid typography */
        --fluid-font-xs: clamp(0.75rem, 0.5vw + 0.7rem, 0.875rem);
        --fluid-font-sm: clamp(0.875rem, 0.75vw + 0.8rem, 1rem);
        --fluid-font-md: clamp(1rem, 1vw + 0.9rem, 1.25rem);
        --fluid-font-lg: clamp(1.25rem, 1.5vw + 1rem, 1.75rem);
        --fluid-font-xl: clamp(1.5rem, 2vw + 1.2rem, 2.5rem);
        --fluid-font-2xl: clamp(2rem, 3vw + 1.5rem, 4rem);

        /* Grid system */
        --grid-columns: 12;
        --grid-gap: var(--fluid-space-md);
    }
}

@layer components {
    /* ============================================
       Container with Container Queries
       ============================================ */
    .container {
        container-type: inline-size;
        container-name: main;
        width: min(100% - 2rem, 1280px);
        margin-inline: auto;
        padding-inline: var(--fluid-space-md);
    }

    /* Container Query Usage */
    @container main (min-width: 480px) {
        .responsive-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @container main (min-width: 768px) {
        .responsive-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @container main (min-width: 1024px) {
        .responsive-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    /* ============================================
       Native CSS Nesting
       ============================================ */
    .card {
        --card-bg: oklch(98% 0.01 280 / 0.05);
        --card-border: oklch(100% 0 0 / 0.1);

        container-type: inline-size;
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border: 1px solid var(--card-border);
        border-radius: 1rem;
        padding: var(--fluid-space-lg);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        /* Nested hover state */
        &:hover {
            --card-scale: 1.02;
            transform: scale(var(--card-scale)) translateY(-4px);
            box-shadow: 0 20px 40px oklch(0% 0 0 / 0.2);

            /* Nested element within hover */
            .card-title {
                color: var(--color-primary);
            }

            /* Nested pseudo-element */
            &::before {
                opacity: 1;
            }
        }

        /* Nested elements */
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-block-end: var(--fluid-space-md);

            .card-title {
                font-size: var(--fluid-font-lg);
                font-weight: 700;
                transition: color 0.3s ease;
            }

            .card-badge {
                padding: var(--fluid-space-xs) var(--fluid-space-sm);
                background: var(--color-primary);
                border-radius: 2rem;
                font-size: var(--fluid-font-xs);
            }
        }

        /* Nested media query */
        @media (prefers-reduced-motion: no-preference) {
            &::before {
                content: '';
                position: absolute;
                inset: 0;
                background: radial-gradient(
                    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                    oklch(70% 0.2 280 / 0.2),
                    transparent 50%
                );
                opacity: 0;
                transition: opacity 0.3s;
                pointer-events: none;
            }
        }

        /* Container query within nesting */
        @container (min-width: 400px) {
            grid-template-columns: auto 1fr;
            gap: var(--fluid-space-lg);
        }
    }

    /* ============================================
       :has() Selector Usage
       ============================================ */

    /* Style parent based on child state */
    .form-group:has(input:focus) {
        --input-glow: 0 0 0 3px oklch(70% 0.2 280 / 0.3);
        box-shadow: var(--input-glow);
    }

    .form-group:has(input:invalid:not(:placeholder-shown)) {
        --border-color: oklch(60% 0.2 30);

        .error-message {
            display: block;
        }
    }

    /* Card with featured item */
    .card:has(.featured-badge) {
        background: linear-gradient(
            var(--gradient-angle),
            oklch(98% 0.02 280 / 0.1),
            oklch(98% 0.02 250 / 0.05)
        );
        border-color: var(--color-primary);
    }

    /* Navigation with active link */
    nav:has(a[aria-current="page"]) {
        --nav-indicator-opacity: 1;
    }

    /* Grid that contains a selected item */
    .grid:has(.item.selected) {
        .item:not(.selected) {
            opacity: 0.5;
            filter: grayscale(50%);
        }
    }

    /* ============================================
       Advanced Grid with Subgrid
       ============================================ */
    .advanced-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
        gap: var(--fluid-space-lg);

        /* Nested grid with subgrid */
        .grid-item {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 3;

            .item-header {
                grid-row: 1;
            }

            .item-content {
                grid-row: 2;
            }

            .item-footer {
                grid-row: 3;
                align-self: end;
            }
        }
    }

    /* ============================================
       Scroll-Driven Animations
       ============================================ */
    @supports (animation-timeline: scroll()) {
        .parallax-section {
            animation: parallax linear;
            animation-timeline: scroll(root block);
        }

        @keyframes parallax {
            to {
                transform: translateY(calc(var(--parallax-speed, 50) * 1%));
            }
        }

        .fade-in-scroll {
            animation: fadeInScroll linear;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }

        @keyframes fadeInScroll {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }

    /* ============================================
       Modern Form Styling with :has() and :is()
       ============================================ */
    .modern-form {
        display: grid;
        gap: var(--fluid-space-md);

        /* Group related selectors with :is() */
        :is(input, textarea, select) {
            width: 100%;
            padding: var(--fluid-space-sm);
            background: oklch(0% 0 0 / 0.3);
            border: 2px solid oklch(50% 0.02 280 / 0.3);
            border-radius: 0.5rem;
            color: inherit;
            transition: all 0.3s ease;

            &:focus {
                outline: none;
                border-color: var(--color-primary);
                background: oklch(0% 0 0 / 0.5);
            }

            &:valid {
                border-color: oklch(70% 0.2 150);
            }

            /* Placeholder styling with nesting */
            &::placeholder {
                color: oklch(70% 0.02 280 / 0.5);
            }
        }

        /* Float labels with :has() */
        .field:has(input:focus, input:not(:placeholder-shown)) {
            .label {
                transform: translateY(-150%) scale(0.85);
                color: var(--color-primary);
            }
        }
    }

    /* ============================================
       Logical Properties for Internationalization
       ============================================ */
    .international-card {
        margin-block: var(--fluid-space-md);
        padding-inline: var(--fluid-space-lg);
        border-inline-start: 4px solid var(--color-primary);
        inset-inline-start: 0;

        /* RTL support automatically handled */
        &[dir="rtl"] {
            /* No need for special rules with logical properties */
        }
    }

    /* ============================================
       Modern Animation with CSS Houdini (when available)
       ============================================ */
    @supports (background: paint(smooth-corners)) {
        .smooth-card {
            background: paint(smooth-corners);
            --smooth-corners: 20;
        }
    }

    /* ============================================
       Aspect Ratio Management
       ============================================ */
    .media-container {
        aspect-ratio: 16 / 9;
        container-type: inline-size;
        overflow: hidden;
        border-radius: 1rem;

        img,
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Different aspect ratios based on container */
        @container (max-width: 400px) {
            aspect-ratio: 1 / 1;
        }

        @container (min-width: 401px) and (max-width: 800px) {
            aspect-ratio: 4 / 3;
        }
    }

    /* ============================================
       CSS Anchor Positioning (Future)
       ============================================ */
    @supports (anchor-name: --tooltip) {
        .tooltip-trigger {
            anchor-name: --tooltip;
        }

        .tooltip {
            position: absolute;
            position-anchor: --tooltip;
            inset-area: top;
            margin-bottom: 10px;
        }
    }
}

@layer utilities {
    /* ============================================
       Utility Classes with Modern Features
       ============================================ */

    /* Container queries utility */
    .cq-grid {
        container-type: inline-size;

        @container (min-width: 400px) {
            --columns: 2;
        }

        @container (min-width: 600px) {
            --columns: 3;
        }

        @container (min-width: 900px) {
            --columns: 4;
        }

        display: grid;
        grid-template-columns: repeat(var(--columns, 1), 1fr);
        gap: var(--fluid-space-md);
    }

    /* Text balancing */
    .balance-text {
        text-wrap: balance;
    }

    .pretty-text {
        text-wrap: pretty;
    }

    /* Modern centering with one line */
    .center {
        display: grid;
        place-items: center;
    }

    /* Fluid cluster layout */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cluster-gap, var(--fluid-space-sm));
        justify-content: var(--cluster-justify, flex-start);
        align-items: var(--cluster-align, center);
    }

    /* Visually hidden but accessible */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    /* Focus visible only for keyboard */
    .focus-visible:focus {
        outline: none;
    }

    .focus-visible:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }

    /* ============================================
       Dynamic Album Theming Integration
       ============================================ */

    /* Use album colors for interactive elements */
    .btn-primary {
        background: var(--album-primary);
        color: var(--album-textPrimary);
        box-shadow: 0 4px 20px var(--album-glow);
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        background: var(--album-primaryLight);
        transform: translateY(-2px);
        box-shadow: 0 6px 30px var(--album-glow);
    }

    /* Glass cards with album theme */
    .glass-card {
        background: linear-gradient(135deg,
            var(--album-surface) 0%,
            var(--album-backgroundElevated) 100%);
        border: 1px solid var(--album-primarySubtle);
        box-shadow: 0 8px 32px var(--album-shadow);
    }

    .glass-card:hover {
        border-color: var(--album-primary);
        box-shadow: 0 12px 40px var(--album-glow);
    }

    /* Track cards with dynamic theming */
    .track-card {
        background: var(--album-surface);
        border-left: 4px solid var(--album-primary);
    }

    .track-card:hover {
        background: var(--album-surfaceVariant);
        border-left-color: var(--album-primaryLight);
    }

    /* Hero section with album glow */
    .hero {
        background: radial-gradient(
            ellipse at center,
            var(--album-glow) 0%,
            transparent 70%
        ), var(--album-background);
    }

    /* ============================================
       Celebration & Animation Styles
       ============================================ */

    /* Ripple effect for buttons */
    .ripple-effect {
        position: absolute;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.3;
        animation: ripple 0.6s ease-out;
    }

    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }

    /* Achievement notification styles */
    .achievement-notification {
        animation: slideInRight 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes slideInRight {
        from {
            transform: translateX(400px);
        }
        to {
            transform: translateX(0);
        }
    }

    /* Celebration canvas should be on top */
    #celebration-canvas {
        pointer-events: none;
        mix-blend-mode: screen;
    }

    /* Toast notifications */
    .toast {
        animation: toastSlideIn 0.3s ease;
    }

    @keyframes toastSlideIn {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }

    /* ============================================
       Physics Motion Enhancements
       ============================================ */

    /* Smooth all transforms for physics animations */
    * {
        transform-origin: center;
        will-change: transform, opacity;
    }

    /* Optimize for GPU acceleration */
    .glass-card,
    .track-card,
    button {
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    /* Hover states with physics preparation */
    button,
    .glass-card,
    .track-card {
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
}