/* ===== VARIABLES ===== */
:root {
    /* Dark Theme (Default) */
    --bg-color: #0f0f0f;
    --text-color: #d0d0d0;
    --accent-color: #a7a7a7;
    --secondary-color: #404040;
    --card-bg: rgba(25, 25, 25, 0.8);
    --card-hover: rgba(35, 35, 35, 0.9);
    --gap: 20px;
    --border-radius: 0px;
    --cta-color: #ffffff;
    --card-padding: 20px; /* Standardized card padding */
}

html {
    background-color: var(--bg-color);
    transition: background-color 0.3s ease;
}

body {
    background-color: transparent;
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    transition: color 0.3s ease;
}

/* Light Theme */
[data-theme="light"] {
    --bg-color: #f0f0f0;
    --text-color: #202020;
    --accent-color: #505050;
    --secondary-color: #c0c0c0;
    --card-bg: rgba(230, 230, 230, 0.8);
    --card-hover: rgba(240, 240, 240, 0.9); /* Brighter on hover for light theme */
    --cta-color: #1D1D1D; /* More gray CTA text for light theme */
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: default;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Film grain effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08;
    z-index: -1;
    pointer-events: none;
    animation: subtleNoise 0.2s infinite;
}

[data-theme="light"] body::before {
    opacity: 0.04;
}

/* Vignette effect */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.4) 100%
    );
    z-index: -1;
    pointer-events: none;
}

[data-theme="light"] body::after {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* ===== ANIMATIONS ===== */
@keyframes subtleNoise {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-1px, 1px); }
    20% { transform: translate(1px, -1px); }
    30% { transform: translate(-1px, -1px); }
    40% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, 0); }
    60% { transform: translate(1px, 0); }
    70% { transform: translate(0, 1px); }
    80% { transform: translate(0, -1px); }
    90% { transform: translate(-1px, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes subtleFlicker {
    0% { opacity: 1; }
    93% { opacity: 1; }
    94% { opacity: 0.9; }
    96% { opacity: 1; }
    98% { opacity: 0.9; }
    100% { opacity: 1; }
}

@keyframes subtleGlitch {
    0% {
        transform: translate(0);
        opacity: 1;
    }
    20% {
        transform: translate(-1px, 1px);
        opacity: 0.95;
    }
    40% {
        transform: translate(-1px, -1px);
        opacity: 1;
    }
    60% {
        transform: translate(1px, 1px);
        opacity: 0.98;
    }
    80% {
        transform: translate(1px, -1px);
        opacity: 1;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}

/* ===== LAYOUT ===== */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Bento grid layout */
.bento-grid {
    display: grid;
    grid-template-areas: 
        "avatar avatar avatar profile profile profile featured featured featured featured featured featured"
        "avatar avatar avatar profile profile profile featured featured featured featured featured featured"
        "avatar avatar avatar releases releases releases featured featured featured featured featured featured"
        "offbeat offbeat offbeat releases releases releases upcoming upcoming upcoming upcoming upcoming upcoming"
        "offbeat offbeat offbeat releases releases releases upcoming upcoming upcoming upcoming upcoming upcoming"
        "offbeat offbeat offbeat djsets djsets djsets upcoming upcoming upcoming upcoming upcoming upcoming"
        "remixes remixes remixes djsets djsets djsets social social social social social social"
        "remixes remixes remixes djsets djsets djsets social social social social social social"
        "remixes remixes remixes djsets djsets djsets social social social social social social";
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(9, 1fr);
    gap: var(--gap);
    flex: 1;
    height: calc(100vh - 40px);
}

/* Define grid areas */
.avatar { grid-area: avatar; }
.profile-info { grid-area: profile; }
.focus-song { grid-area: featured; }
.offbeat { grid-area: offbeat; }
.releases { grid-area: releases; }
.dj-sets { grid-area: djsets; }
.remixes { grid-area: remixes; }
.upcoming-shows { grid-area: upcoming; }
.social-media { grid-area: social; }

/* ===== BENTO ITEM STYLES ===== */
.bento-item {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--secondary-color);
    padding: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.bento-item:hover {
    background-color: var(--card-hover);
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.bento-item h2 {
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 10px;
    font-family: 'Space Mono', monospace;
    letter-spacing: 1px;
    color: var(--text-color);
    text-transform: lowercase;
}

.bento-item p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 10px;
}

/* Bento item links */
.bento-item-link {
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

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

/* Card content - standardized padding for all cards */
.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--card-padding); /* Standardized padding */
}

.bento-item-link .card-content {
    justify-content: space-between;
}

/* Card background */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 110%; /* Zoomed in by 10% */
    height: 110%; /* Zoomed in by 10% */
    top: -5%; /* Center the zoomed image */
    left: -5%; /* Center the zoomed image */
    object-fit: cover;
    opacity: 0.2;
    filter: blur(5px);
    transition: all 0.4s ease;
    margin: 0;
    padding: 0;
}

.bento-item:hover .card-bg {
    opacity: 0.5;
    filter: blur(0);
}

/* ===== SPECIAL ELEMENTS ===== */
/* Avatar/Logo */
.avatar { 
    grid-row: span 3;
    grid-column: span 3;
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1a1a;
    overflow: hidden;
    border: 1px solid var(--secondary-color);
    cursor: pointer;
    transition: all 0.3s ease;
    flex-direction: column;
}

[data-theme="light"] .avatar {
    background-color: #e5e5e5;
}

.avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

[data-theme="light"] .avatar::before {
    background: rgba(255, 255, 255, 0.2);
}

.avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 1) 1px,
        transparent 1px,
        transparent 2px
    );
    z-index: 2;
    opacity: 0.8;
}

[data-theme="light"] .avatar::after {
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
}

.avatar .card-content {
    z-index: 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.avatar-img {
    display: none;
}

.logo {
    font-family: 'Space Mono', monospace;
    font-size: 4rem;
    color: var(--text-color);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    animation: subtleFlicker 5s infinite;
    letter-spacing: 0.05em;
    font-weight: 300;
    text-transform: lowercase;
    transform: translateY(-10px);
}

[data-theme="light"] .logo {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Simple theme toggle */
.theme-toggle-slider {
    position: relative;
    width: 38px;
    height: 12px;
    margin-top: 0;
    background-color: var(--secondary-color);
    border: 1px solid var(--accent-color);
    cursor: pointer;
    z-index: 10;
    box-sizing: border-box;
}

.theme-toggle-knob {
    position: absolute;
    width: 18px;
    height: 10px;
    background-color: var(--accent-color);
    left: 0;
    top: 0;
    transition: left 0.3s ease;
    box-sizing: border-box;
    margin: 0;
    border: none;
}

[data-theme="light"] .theme-toggle-knob {
    left: 19px;
}

/* Profile Info */
.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Genre Tags Container - new container to help with responsiveness */
.genre-tags-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 8px;
    max-width: 100%;
}

/* Genre Tags */
.genre-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--secondary-color);
    padding: 4px 8px;
    border-radius: 0;
    font-size: 0.7rem;
    margin-right: 8px;
    margin-bottom: 8px; /* Added margin-bottom for wrap */
    font-family: 'Space Mono', monospace;
    letter-spacing: 1px;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.social-icon {
    width: 52px;
    height: 52px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .social-icon:hover {
    background: rgba(0, 0, 0, 0.15);
}

.custom-icon {
    filter: invert(40%);
    transition: filter 0.3s ease, transform 0.3s ease;
    width: 28px;
    height: 28px;
}

.social-icon:hover .custom-icon {
    filter: invert(0%);
}

/* Light mode icon adjustments */
[data-theme="light"] .custom-icon {
    filter: invert(60%);
}

[data-theme="light"] .social-icon:hover .custom-icon {
    filter: invert(100%);
}

/* Embed Container */
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    width: 100%;
    border-radius: 0;
    margin-top: auto;
    flex-grow: 1;
    border: 1px solid var(--secondary-color);
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    filter: contrast(1.05) brightness(0.9);
}

/* SoundCloud container */
.soundcloud-container {
    padding-bottom: 0 !important;
    height: 166px !important;
    margin-top: 20px;
}

.soundcloud-info {
    font-size: 12px;
    color: #cccccc;
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

.soundcloud-info a {
    color: #cccccc;
    text-decoration: none;
}

.soundcloud-info a:hover {
    color: #ffffff;
}

/* Events List */
.events-list {
    margin-top: 15px;
}

.event-item {
    display: flex;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.event-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.event-date {
    font-family: 'Space Mono', monospace;
    min-width: 90px;
    color: var(--accent-color);
    font-size: 0.85rem;
}

.event-info {
    font-size: 0.9rem;
}

/* ===== LINK STYLES ===== */
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
    padding: 0 2px;
}

a:hover {
    color: var(--text-color);
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    opacity: 0.5;
}

a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Action link - base styles */
.action-link {
    opacity: 0;
    transition: all 0.3s ease;
    margin-top: auto;
    font-weight: 500;
    font-size: 1rem;
    display: inline-block;
    color: var(--cta-color);
}

/* Desktop hover effects */
@media (min-width: 601px) {
    .action-link {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
        font-size: 1.2rem;
        text-align: center;
        text-transform: lowercase;
        letter-spacing: 1px;
    }
    
    .bento-item:hover .bento-item-link .action-link {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    
    /* Show/hide content on hover */
    .bento-item-link .card-content h2,
    .bento-item-link .card-content p {
        transition: opacity 0.3s ease;
    }
    
    .bento-item:hover .bento-item-link .card-content h2,
    .bento-item:hover .bento-item-link .card-content p {
        opacity: 0;
    }
    
    /* Card background hover effect */
    .bento-item:hover .card-bg {
        opacity: 0.5;
        filter: blur(0);
    }
}

/* Glitch effect */
.glitch {
    animation: subtleGlitch 0.1s linear;
}

/* ===== RESPONSIVE LAYOUT ===== */
@media (max-width: 1200px) {
    .bento-grid {
        grid-template-areas: 
            "avatar avatar avatar profile profile profile"
            "featured featured featured featured featured featured"
            "featured featured featured featured featured featured"
            "offbeat offbeat offbeat releases releases releases"
            "offbeat offbeat offbeat releases releases releases"
            "djsets djsets djsets remixes remixes remixes"
            "djsets djsets djsets remixes remixes remixes"
            "upcoming upcoming upcoming upcoming upcoming upcoming"
            "social social social social social social";
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
    }
    
    html, body {
        height: auto;
        overflow-y: auto;
    }
    
    .bento-grid {
        height: auto;
    }

    .avatar {
        grid-area: avatar;
    }
}

/* Mobile styles (no hover effects) */
@media (max-width: 600px), (hover: none) {
    .bento-grid {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
    }
    
    .bento-item {
        min-height: 180px;
    }
    
    html, body {
        height: auto;
        overflow-y: auto;
    }
    
    body {
        padding: 18px;
    }
    
    /* Completely disable hover effects on mobile */
    .bento-item:hover {
        background-color: var(--card-bg) !important;
        transform: none !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Keep backgrounds blurred on mobile even when hovering */
    .bento-item:hover .card-bg {
        opacity: 0.2 !important;
        filter: blur(5px) !important;
    }
    
    /* Always show CTA on mobile */
    .action-link {
        opacity: 1;
        transform: none;
        position: static;
        margin-top: auto;
        align-self: flex-start;
        color: var(--cta-color);
    }
    
    /* Always show title and description on mobile */
    .bento-item-link .card-content h2,
    .bento-item-link .card-content p {
        opacity: 1 !important;
    }
    
    /* Ensure links don't change on hover */
    a:hover, .bento-item-link:hover {
        color: var(--accent-color) !important;
    }
    
    a:hover::after {
        transform: scaleX(0) !important;
    }
    
    /* Prevent icon color changes on hover */
    .social-icon:hover {
        background: rgba(255, 255, 255, 0.05) !important;
    }
    
    .social-icon:hover .custom-icon {
        filter: invert(40%) !important;
    }
    
    [data-theme="light"] .social-icon:hover .custom-icon {
        filter: invert(60%) !important;
    }
}

/* Booking button text */
.book-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    text-transform: lowercase;
    letter-spacing: 0.5px;
}