@layer reset, theme, layout, components, utilities;

/* --- 1. Variables & Reset --- */
@layer theme {
    :root {
        /* Theme Colors */
        --bg-color: #03030b;      
        --card-bg: #0a0a1a;       
        --card-border: rgba(255, 255, 255, 0.08);
        
        /* Typography Colors */
        --text-main: #f0f0f5;     
        --text-muted: #8a8a9e;
        --text-body: #b4b4c3;     
        
        /* Accents */
        --accent-blue: #93c5fd;
        --accent-spotify: #1db954;
        --accent-purple: #c084fc;
        
        /* Metrics */
        --card-radius: 24px;
        --gap: 16px;
        --max-width: 1100px;
    }
}

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }

    body {
        background-color: var(--bg-color);
        color: var(--text-main);
        font-family: 'Inter', sans-serif;
        margin: 0;
        padding-block: 20px 40px; /* Logical padding */
        padding-inline: 20px;
        min-block-size: 100vh; /* Logical height */
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    @media (min-width: 900px) {
        body { padding-block-start: 40px; }
    }

    h1 { 
        margin: 0; 
        font-size: 1.75rem; 
        font-weight: 700; 
        letter-spacing: -0.02em; 
        text-wrap: balance; /* Modern typography */
    }
}

/* --- Components: Header --- */
@layer layout {
    header {
        max-inline-size: var(--max-width); /* Logical width */
        margin-inline: auto; /* Centering */
        margin-block-end: 32px;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@layer components {
    .role { 
        color: var(--text-muted); 
        font-size: 1rem; 
        margin-block-start: 4px; 
    }

    .social-link {
        color: var(--text-muted);
        transition: color 0.2s ease;
        padding: 10px; 
        margin: -10px; /* Offset padding */
    }
    .social-link:hover { color: var(--text-main); }
}

/* --- Components: Filters --- */
@layer components {
    .filters { display: flex; gap: 10px; }

    .filter-btn {
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--card-border);
        color: var(--text-muted);
        padding-block: 8px;
        padding-inline: 18px;
        border-radius: 100px;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: inherit;
        -webkit-tap-highlight-color: transparent; 
    }

    .filter-btn:hover { 
        background: rgba(255,255,255,0.08); 
        color: var(--text-main); 
    }

    .filter-btn.active {
        background: var(--text-main);
        color: var(--bg-color);
        border-color: var(--text-main);
        font-weight: 600;
    }
}

/* --- Layout: Grid --- */
@layer layout {
    .grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--gap);
        max-inline-size: var(--max-width);
        margin-inline: auto;
    }

    @media (min-width: 900px) {
        .grid {
            grid-template-columns: repeat(3, 1fr);
            grid-auto-flow: dense;
        }
        .grid:not(.is-filtered) .col-right { grid-column: 3; }
        .col-work { grid-column: span 1; }
        .col-work-wide { grid-column: span 2; }
        
        /* Desktop Ordering Override */
        .intro { order: 1; }
        #card-booking { order: 2; }
        #cassette-modern-card { 
            order: 3; 
            grid-column: 3;
        }
        
        #card-qatar { order: 4; }
        #card-flydubai { order: 5; }
        #card-spotify { order: 6; }
        
        #card-emirates { order: 7; }
        #card-location { 
            order: 8; 
            grid-column: span 1 !important; 
        }
        #card-grid { order: 9; }
        
        #card-bass { 
            order: 10; 
            grid-column: span 1 !important; 
        }
        #card-events { 
            order: 11; 
            grid-column: span 1 !important; 
        }

        .cassette-list-container {
            margin-block-start: 24px;
        }
    }
}

/* --- Components: Cards --- */
@layer components {
    .card {
        background-color: var(--card-bg);
        border-radius: var(--card-radius);
        padding: 28px;
        border: 1px solid var(--card-border);
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                    border-color 0.3s ease, 
                    background-color 0.3s ease;
        position: relative;
        will-change: transform; 
    }

    @media (hover: hover) {
        .card:hover {
            transform: translateY(-4px);
            border-color: rgba(255,255,255,0.15);
            background-color: #0e0e24;
        }
    }

    .card.hidden { display: none; }

    .card.intro {
        grid-column: 1 / -1;
        background: transparent;
        border: none;
        padding: 0 0 20px 0;
        pointer-events: none; 
    }

    .intro-text { 
        font-size: 1.5rem; 
        font-weight: 500; 
        max-inline-size: 800px; 
        color: var(--text-main); 
        pointer-events: auto;
        margin: 0; 
        text-wrap: balance;
    }

    .intro-text strong { 
        background: linear-gradient(90deg, #ffffff, #93c5fd);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
    }

    /* Current Role Highlight */
    .card.current-role {
        border-color: rgba(147, 197, 253, 0.3);
        background: linear-gradient(180deg, rgba(147, 197, 253, 0.05) 0%, var(--card-bg) 100%);
        box-shadow: 0 0 30px rgba(147, 197, 253, 0.05);
    }

    /* Card Internals */
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-block-end: 24px;
        gap: 20px;
    }

    .card-header-text { flex-grow: 1; }

    .company-logo {
        inline-size: 56px;
        block-size: 56px;
        border-radius: 14px;
        object-fit: cover;
        border: 1px solid rgba(255,255,255,0.08);
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    .card-title {
        font-weight: 700;
        font-size: 1.25rem;
        margin: 0 0 6px 0;
        letter-spacing: -0.01em;
        color: #fff;
        line-height: 1.2;
        text-wrap: balance;
    }

    .card-role {
        font-size: 0.95rem;
        color: var(--accent-blue);
        font-weight: 500;
        display: block;
        margin-block-end: 6px;
        line-height: 1.4;
        text-wrap: pretty;
    }

    .card-years {
        font-size: 0.85rem;
        color: var(--text-muted);
        opacity: 0.8;
        font-family: 'JetBrains Mono', monospace;
    }

    .card-body {
        font-size: 1rem;
        color: var(--text-body);
        line-height: 1.6;
        flex-grow: 1;
        text-wrap: pretty;
    }

    .card-footer {
        margin-block-start: 24px;
        display: flex;
        gap: 12px;
        align-items: center;
    }

    /* Tags & Labels */
    .tag-label {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        margin-block-end: 12px;
        display: block;
        font-weight: 600;
    }

    .stat-pill {
        background: rgba(25, 15, 67, 0.2);
        color: var(--accent-blue);
        padding-block: 4px;
        padding-inline: 12px;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
    }
}

/* --- Specialized Cards --- */
@layer components {
    /* Spotify */
    .card.spotify {
        background: linear-gradient(135deg, #0a0a1a, #051a0d);
        border-color: rgba(29, 185, 84, 0.1);
    }
    .playlist-cover {
        inline-size: 72px; block-size: 72px;
        background: linear-gradient(135deg, var(--accent-spotify), #09381a);
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.9); /* For the static icon */
        overflow: hidden; /* Ensures image respects border radius */
    }
    .visualizer { display: flex; gap: 3px; align-items: flex-end; block-size: 16px; margin-inline-end: 12px; }
    .bar { inline-size: 3px; background-color: var(--accent-spotify); animation: bounce 1s infinite ease-in-out; border-radius: 1px; }
    .bar:nth-child(1) { block-size: 60%; animation-delay: 0s; } 
    .bar:nth-child(2) { block-size: 90%; animation-delay: 0.1s; } 
    .bar:nth-child(3) { block-size: 50%; animation-delay: 0.2s; } 
    .bar:nth-child(4) { block-size: 80%; animation-delay: 0.3s; }
    @keyframes bounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.4); } }
    
    /* Location */
    .card.location {
        background-color: #0a0a1a;
        background-image: url('../assets/bg/amsterdam-skyline.svg');
        background-repeat: no-repeat;
        background-position: bottom 50px right -1px; 
        background-size: 220px auto; 
        position: relative;
        overflow: hidden;
        min-block-size: 180px;
    }
    
    /* Personal Cards Styling */
    #card-grid {
        background-image: radial-gradient(circle at top right, transparent 0%, var(--card-bg) 70%), 
                          url("data:image/svg+xml,%3Csvg width='150' height='100' viewBox='0 0 150 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-linecap='round'%3E%3Cpath d='M10,80 Q40,80 60,50 T110,20 T140,0' stroke-width='2'/%3E%3Cpath d='M10,95 Q40,95 60,65 T110,35 T140,15' stroke-width='2'/%3E%3C!-- Kerbs on the first apex --%3E%3Cpath d='M35,90 L40,85 M42,88 L47,83 M49,86 L54,81 M56,84 L61,79' stroke-width='3' stroke-opacity='0.1'/%3E%3C/g%3E%3C/svg%3E");
        background-position: top 10px right -10px;
        background-repeat: no-repeat;
        background-size: 140px auto;
    }
    
    #card-bass {
        background-image: radial-gradient(circle at top right, transparent 0%, var(--card-bg) 70%),
                          url("data:image/svg+xml,%3Csvg width='120' height='80' viewBox='0 0 120 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-width='1' stroke-opacity='0.1'%3E%3Cline x1='0' y1='10' x2='120' y2='10'/%3E%3Cline x1='0' y1='30' x2='120' y2='30'/%3E%3Cline x1='0' y1='50' x2='120' y2='50'/%3E%3Cline x1='0' y1='70' x2='120' y2='70'/%3E%3Cline x1='30' y1='0' x2='30' y2='80'/%3E%3Cline x1='70' y1='0' x2='70' y2='80'/%3E%3Cline x1='110' y1='0' x2='110' y2='80'/%3E%3C/g%3E%3Ccircle cx='50' cy='40' r='4' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
        background-position: top 10px right -10px;
        background-repeat: no-repeat;
        background-size: 140px auto;
    }
    
    #card-events {
        background-image: radial-gradient(circle at top right, transparent 0%, var(--card-bg) 80%),
                          url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M150,0 L100,150 L60,150 Z M150,0 L40,150 L0,150 Z M150,0 L150,100 L150,150 L120,150 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
        background-position: top right;
        background-repeat: no-repeat;
        background-size: 180px auto;
    }
    .radar-grid {
        position: absolute;
        inset: 0;
        opacity: 0.1; 
        background-image: radial-gradient(#fff 1px, transparent 1px); 
        background-size: 20px 20px;
        z-index: 0;
        pointer-events: none;
    }
    .card.location .content {
        position: relative;
        z-index: 1;
        block-size: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .time-display { font-size: 1.8rem; font-weight: 700; color: #fff; margin-block-start: 8px; }
    .geo-tag {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.7rem;
        color: var(--text-muted);
        border: 1px solid rgba(255,255,255,0.1);
        padding-block: 4px;
        padding-inline: 8px;
        border-radius: 6px;
        background: rgba(0,0,0,0.2);
    }
    
    /* Capabilities List */
    .capabilities-list {
        margin: 0;
    }
    .capabilities-list dt {
        font-size: 0.7rem;
        color: var(--accent-blue);
        opacity: 0.9;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-block-end: 0px;
    }
    .capabilities-list dd {
        margin: 0 0 16px 0;
        font-size: 0.8rem;
        color: #fff;
        line-height: 1.4;
        padding-inline-start: 8px;
    }
    .capabilities-list dt.purple { color: var(--accent-purple); }
}

/* --- Utility Classes --- */
@layer utilities {
    .text-white { color: #fff !important; }
    .text-accent-blue { color: var(--accent-blue) !important; }
    .text-accent-purple { color: var(--accent-purple) !important; }
    .text-accent-spotify { color: var(--accent-spotify) !important; }
    
    .flex-center-y { display: flex; align-items: center; }
    .flex-gap-6 { display: flex; gap: 6px; }
    .margin-bottom-8 { margin-block-end: 8px; }
    .opacity-70 { opacity: 0.7; }
    .opacity-80 { opacity: 0.8; }
    .opacity-90 { opacity: 0.9; }
    .img-cover { object-fit: cover; }
}

/* --- Component Refinements --- */
@layer components {
    /* Spotify specific */
    .spotify-info {
        display: flex;
        gap: 16px;
        align-items: center;
        margin-top: auto;
        margin-block-end: 20px;
    }
    .playlist-title {
        font-weight: 700;
        font-size: 1.1rem;
        color: #fff;
        line-height: 1.2;
        text-wrap: balance;
    }
    .playlist-desc {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin-block-start: 4px;
        line-height: 1.4;
        text-wrap: pretty;
    }
    .spotify-link {
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 600;
        color: #fff;
        opacity: 0.6;
        transition: opacity 0.2s;
        display: block;
    }
    .spotify-link:hover { opacity: 1; }
    
    /* Offline Mode specific */
    .offline-info { font-size: 0.95rem; }
    .offline-info .status { font-size: 0.8rem; opacity: 0.7; }
}

/* --- Accessibility & Motion --- */
@layer utilities {
    :focus-visible {
        outline: 2px solid var(--accent-blue);
        outline-offset: 4px;
        border-radius: 4px;
    }
    
    .filter-btn:focus-visible {
        border-radius: 100px;
        outline-offset: 2px;
    }
    
    /* Ensure smooth transition for focus ring */
    .filter-btn, .card, .social-link {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1), outline-offset 0.1s ease;
    }
    
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
    
    .clock-display {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.9rem;
        margin-block-start: 4px;
    }
}

/* --- Flip Card Mechanics --- */
@layer components {
    .flip-card {
        perspective: 1000px;
        padding: 0;
        background: transparent;
        border: none;
        block-size: 100%; /* Fix: Match height of grid row */
    }
    
    /* Disable default card hover on the container */
    .flip-card.card:hover {
        background: transparent;
        border: none;
        transform: none;
    }
    
    .flip-card-inner {
        position: relative;
        inline-size: 100%;
        block-size: 100%;
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
    }
    
    /* Hover Effect: Lift the inner wrapper */
    /* Note: We handle the flipped state separately to preserve rotation */
    @media (hover: hover) {
        .flip-card:hover .flip-card-inner {
            transform: translateY(-4px);
        }
        
        .flip-card.flipped:hover .flip-card-inner {
            transform: rotateY(180deg) translateY(-4px);
        }
    
        /* Apply visual hover styles (glow/border) to the faces */
        .flip-card:hover .flip-card-front,
        .flip-card:hover .flip-card-back {
            border-color: rgba(255,255,255,0.15);
            background-color: #0e0e24;
        }
    }
    
    /* Flipped State */
    .flip-card.flipped .flip-card-inner {
        transform: rotateY(180deg);
    }
    
    .flip-card-front, .flip-card-back {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        
        /* Re-apply card styles */
        background-color: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: var(--card-radius);
        padding: 28px;
        display: flex;
        flex-direction: column;
        
        /* Ensure faces fill the height */
        block-size: 100%;
        box-sizing: border-box;
        transition: border-color 0.3s ease, background-color 0.3s ease;
    }
    
    .flip-card-front {
        position: relative; /* Drives the height (Critical for mobile) */
        z-index: 2;
        transform: rotateY(0deg);
    }
    
    .flip-card-back {
        position: absolute;
        inset: 0;
        transform: rotateY(180deg);
    }
    
    /* Sleek Cassette Flip Styles */
    .card.cassette-modern {
        background: transparent; /* Container is transparent */
        border: none;
        padding: 0;
        align-self: start;
        aspect-ratio: 400 / 260;
        block-size: auto;
    }
    
    /* Apply the sleek background to the FACES, overriding the wireframe cassette */
    .card.cassette-modern .flip-card-front,
    .card.cassette-modern .flip-card-back {
        background-color: #0a0a1a;
        background-image: url('../assets/bg/sleek-cassette.svg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
        padding-block: 25px;
        padding-inline: 35px;
        border: none; /* No border, SVG handles it */
        
        /* Ensure internal content layout */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .card.cassette-modern .card-title {
        font-family: 'JetBrains Mono', monospace;
        letter-spacing: -0.02em;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    
    .cassette-list-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-block-start: 12px;
    }
    
    @media (min-width: 900px) {
        .cassette-list-container {
            margin-block-start: 24px;
        }
    }
}