/* ============================================
   VINYL COLLECTION - CUSTOM STYLES
   Skeuomorphic effects and custom gradients
   ============================================ */

/* Active state for density buttons */
.density-btn.active {
    background: linear-gradient(135deg, #FFD6E8 0%, #E8D6FF 100%);
    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.3), 
                0 2px 4px -1px rgba(236, 72, 153, 0.2);
}

.density-btn.active svg rect {
    fill: #EC4899;
}

.density-btn.active span {
    color: #DB2777;
    font-weight: 600;
}

/* Shelf base styling with wood grain effect and isometric perspective */
.shelf {
    position: relative;
    width: 100%;
    height: 24px; /* Reduced from 40px for thinner appearance */
    background: linear-gradient(to bottom, 
        #D4C4A8 0%, 
        #C8B89C 50%, 
        #BCA788 100%);
    border-radius: 2px;
    
    /* Isometric perspective effect - create depth */
    transform-style: preserve-3d;
    
    /* Multi-layer shadow for isometric depth */
    box-shadow: 
        /* Top highlight for realism */
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        /* Inner shadow for depth */
        inset 0 -1px 3px rgba(0, 0, 0, 0.1),
        /* Main shelf shadow - shorter for thinner shelf */
        0 6px 12px rgba(0, 0, 0, 0.15),
        0 3px 6px rgba(0, 0, 0, 0.1),
        /* Isometric depth layers - simulate 3D shelf thickness */
        0 1px 0 #A89B85,
        0 2px 0 #9D9078,
        0 3px 0 #92856B,
        0 4px 2px rgba(0, 0, 0, 0.2);
    
    /* Position shelf normally */
    margin-top: 0;
    z-index: 1;
}

/* Top edge highlight for 3D effect */
.shelf::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.6), 
        rgba(255, 255, 255, 0.3), 
        rgba(255, 255, 255, 0.6));
    border-radius: 4px 4px 0 0;
}

/* Vinyl records container */
.vinyl-records {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 12px;
    /* Remove padding to allow full width */
    padding: 0;
    /* Add small margins on sides (about half a record width) */
    margin: 0 60px;
    transition: all 0.5s ease-in-out;
    /* Position records to slightly overlap the shelf */
    margin-bottom: -8px; /* Negative margin to overlap shelf */
    position: relative;
    z-index: 2;
}

/* Individual vinyl box */
.vinyl-box {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    box-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.15),
        4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    /* Position boxes to slightly overlap the shelf */
    margin-bottom: -8px; /* Negative margin to overlap shelf */
    /* Prepare for smooth animations */
    will-change: transform, opacity;
    /* Enable 3D transforms for flip animation */
    transform-style: preserve-3d;
}

/* Front and back faces of vinyl box */
.vinyl-box-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vinyl-box-front {
    transform: rotateY(0deg);
}

.vinyl-box-back {
    transform: rotateY(180deg);
}

/* Placeholder for vinyl box when enlarged */
.vinyl-placeholder {
    position: relative;
    aspect-ratio: 1 / 1;
    /* Invisible but takes up space */
    visibility: hidden;
    pointer-events: none;
    /* Smooth transition for placeholder appearance */
    transition: opacity 0.2s ease-out;
}

/* Spine effect on left side */
.vinyl-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.3), 
        rgba(0, 0, 0, 0.1), 
        transparent);
    border-radius: 6px 0 0 6px;
}

/* Hover effect - lift animation */
.vinyl-box:hover {
    transform: translateY(-8px);
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.2),
        6px 6px 12px rgba(0, 0, 0, 0.15),
        8px 8px 16px rgba(0, 0, 0, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
}

/* Enlarged vinyl box state */
.vinyl-box.enlarged {
    /* Position and scale are controlled by JavaScript for consistency across modes */
    z-index: 99999 !important; /* Maximum z-index to ensure it's always on top */
    cursor: pointer;
    box-shadow: 
        0 30px 60px -12px rgba(0, 0, 0, 0.5),
        0 15px 25px -5px rgba(0, 0, 0, 0.3),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    /* Fast but smooth animation with custom easing */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Ensure the box is not affected by any parent overflow settings */
    max-width: none !important;
    max-height: none !important;
    /* Optimize rendering performance */
    will-change: transform, box-shadow;
    /* 3D transform for flip animation */
    transform-style: preserve-3d;
}

/* Flipped state - realistic 3D rotation */
.vinyl-box.enlarged.flipped {
    /* Transform is controlled by JavaScript */
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Animation state when box is being enlarged */
.vinyl-box.enlarging {
    animation: expandBox 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animation state when box is being returned */
.vinyl-box.shrinking {
    animation: contractBox 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    /* Keep box in center during shrinking */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
}

/* Keyframe animations - scale values are controlled by JavaScript */
@keyframes expandBox {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes contractBox {
    0% {
        opacity: 1;
        box-shadow: 
            0 30px 60px -12px rgba(0, 0, 0, 0.5),
            0 15px 25px -5px rgba(0, 0, 0, 0.3),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
    100% {
        opacity: 1;
        box-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.15),
            4px 4px 8px rgba(0, 0, 0, 0.1),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
}

@keyframes contractBoxFlipped {
    0% {
        opacity: 1;
        box-shadow: 
            0 30px 60px -12px rgba(0, 0, 0, 0.5),
            0 15px 25px -5px rgba(0, 0, 0, 0.3),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
    100% {
        opacity: 1;
        box-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.15),
            4px 4px 8px rgba(0, 0, 0, 0.1),
            inset -1px -1px 2px rgba(0, 0, 0, 0.1);
    }
}

/* Overlay to block scroll and clicks on other elements */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark semi-transparent overlay */
    z-index: 99998; /* Just below the enlarged box */
    display: none; /* Hidden by default */
    /* Prevent any interaction with elements behind the overlay */
    pointer-events: auto;
    /* Smooth fade in/out */
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

/* Overlay visible state */
.overlay.visible {
    opacity: 1;
}

/* Flip button for enlarged vinyl box */
.flip-button {
    position: fixed; /* Fixed to viewport, not the box */
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 36px; /* Restored original size for better usability */
    height: 36px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 100000; /* Above the enlarged box */
    transition: opacity 0.1s ease-out, background 0.3s, box-shadow 0.3s;
    color: #333;
    /* Prevent blur on small elements */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-font-smoothing: antialiased;
    opacity: 1;
}

.flip-button:hover {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flip-button:active {
    background: rgba(255, 255, 255, 0.9);
}

.flip-button.visible {
    display: flex;
    opacity: 1;
}

.flip-button.hiding {
    opacity: 0;
}

.flip-button svg {
    width: 20px; /* Larger icon for better visibility */
    height: 20px;
    /* Prevent blur on small SVG */
    shape-rendering: crispEdges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Gradient definitions for vinyl boxes */
.gradient-g1 {
    background: linear-gradient(to bottom, 
        #FFD6E8 0%, 
        #E8D6FF 100%);
}

.gradient-g2 {
    background: linear-gradient(135deg, 
        #C7F0DB 0%, 
        #C7E7FF 100%);
}

.gradient-g3 {
    background: linear-gradient(to bottom, 
        #FFE5C7 0%, 
        #FFF4C7 100%);
}

.gradient-g4 {
    background: linear-gradient(-135deg, 
        #E8D6FF 0%, 
        #C7F0DB 100%);
}

.gradient-g5 {
    background: radial-gradient(circle at center, 
        #C7E7FF 0%, 
        #FFD6E8 100%);
}

.gradient-g6 {
    background: linear-gradient(to bottom, 
        #FFF4C7 0%, 
        #FFE5C7 100%);
}

.gradient-g7 {
    background: linear-gradient(135deg, 
        #FFD6E8 0%, 
        #C7F0DB 100%);
}

.gradient-g8 {
    background: linear-gradient(to bottom, 
        #C7E7FF 0%, 
        #E8D6FF 100%);
}

/* Size variants for different density modes */
.vinyl-box.size-small {
    width: 80px;
}

.vinyl-box.size-medium {
    width: 110px;
}

.vinyl-box.size-large {
    width: 150px;
}

/* Increase gap for spacious mode */
.vinyl-records:has(.vinyl-box.size-large) {
    gap: 18px;
}

/* Medium gap for standard mode */
.vinyl-records:has(.vinyl-box.size-medium) {
    gap: 14px;
}

/* Smaller gap for compact mode */
.vinyl-records:has(.vinyl-box.size-small) {
    gap: 10px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .vinyl-box.size-small {
        width: 60px;
    }
    
    .vinyl-box.size-medium {
        width: 80px;
    }
    
    .vinyl-box.size-large {
        width: 100px;
    }
    
    /* Adjust box overlap for mobile */
    .vinyl-box {
        margin-bottom: -6px; /* Less overlap on mobile */
    }
    
    .shelf {
        height: 18px; /* Thinner on mobile */
        margin-top: 0;
        /* Simplified shadows for mobile performance */
        box-shadow: 
            inset 0 1px 2px rgba(255, 255, 255, 0.5),
            inset 0 -1px 3px rgba(0, 0, 0, 0.1),
            0 4px 8px rgba(0, 0, 0, 0.15),
            0 1px 0 #A89B85,
            0 2px 0 #9D9078,
            0 3px 2px rgba(0, 0, 0, 0.2);
    }
    
    /* Adjust shelf container height for mobile */
    .shelf-container {
        min-height: 150px; /* Smaller height for mobile */
    }
    
    .vinyl-records {
        gap: 4px;
        /* Adjust margins for smaller screens */
        margin: 0 30px;
        margin-bottom: -6px; /* Negative margin for overlap on mobile */
    }
    
    /* Adjust enlargement for mobile */
    .vinyl-box.enlarged {
        /* Scale is controlled by JavaScript for consistency */
        /* Slightly faster animation on mobile */
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        transform-style: preserve-3d;
    }
    
    .vinyl-box.enlarged.flipped {
        /* Transform is controlled by JavaScript */
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .vinyl-box.size-small {
        width: 70px;
    }
    
    .vinyl-box.size-medium {
        width: 95px;
    }
    
    .vinyl-box.size-large {
        width: 130px;
    }
    
    .vinyl-records {
        margin: 0 50px;
    }
    
    .vinyl-box.enlarged {
        /* Scale is controlled by JavaScript for consistency */
        transform-style: preserve-3d;
    }
    
    .vinyl-box.enlarged.flipped {
        /* Transform is controlled by JavaScript */
        transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

@media (min-width: 1280px) {
    .vinyl-box.size-small {
        width: 90px;
    }
    
    .vinyl-box.size-medium {
        width: 120px;
    }
    
    .vinyl-box.size-large {
        width: 160px;
    }
    
    .vinyl-records {
        margin: 0 60px;
    }
    
    /* Scale is controlled by JavaScript for consistency across all modes */
}

/* Animation for shelf appearance */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.shelf-container {
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0;
    position: relative;
    /* Add some spacing between shelves */
    margin-bottom: 30px;
    /* Fixed height to prevent jumping when box is enlarged */
    min-height: 200px; /* Use min-height instead of fixed height */
    /* Ensure shelf doesn't shift when box is removed from flow */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Stagger animation delays */
.shelf-container:nth-child(1) {
    animation-delay: 0.1s;
}

.shelf-container:nth-child(2) {
    animation-delay: 0.25s;
}

.shelf-container:nth-child(3) {
    animation-delay: 0.4s;
}

.shelf-container:nth-child(4) {
    animation-delay: 0.55s;
}

.shelf-container:nth-child(5) {
    animation-delay: 0.7s;
}

.shelf-container:nth-child(6) {
    animation-delay: 0.85s;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .vinyl-box,
    .density-btn,
    .shelf-container {
        animation: none;
        transition: none;
    }
    
    .vinyl-box:hover {
        transform: none;
    }
}

/* Button scale animation on click */
.density-btn:active {
    transform: scale(0.95);
}

/* Focus visible for keyboard navigation */
.density-btn:focus-visible {
    outline: 3px solid #EC4899;
    outline-offset: 2px;
}

/* Vinyl disc styles */
.vinyl-disc {
    position: absolute;
    top: 50%;
    left: 50%; /* Start from center */
    transform: translate(-50%, -50%); /* Center the disc */
    width: 85%; /* Slightly smaller than the box height */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #1a1a1a; /* Black vinyl */
    z-index: -1; /* Behind the enlarged box */
    pointer-events: none; /* Don't interfere with clicks */
    /* Vinyl grooves effect with concentric rings */
    box-shadow: 
        /* Outer edge space (margin from edge) */
        inset 0 0 0 8px #1a1a1a,
        /* Groove rings - alternating slightly lighter shades */
        inset 0 0 0 10px rgba(255, 255, 255, 0.03),
        inset 0 0 0 12px #1a1a1a,
        inset 0 0 0 14px rgba(255, 255, 255, 0.02),
        inset 0 0 0 16px #1a1a1a,
        inset 0 0 0 18px rgba(255, 255, 255, 0.03),
        inset 0 0 0 21px #1a1a1a,
        inset 0 0 0 23px rgba(255, 255, 255, 0.02),
        inset 0 0 0 26px #1a1a1a,
        inset 0 0 0 28px rgba(255, 255, 255, 0.03),
        inset 0 0 0 31px #1a1a1a,
        inset 0 0 0 34px rgba(255, 255, 255, 0.02),
        inset 0 0 0 37px #1a1a1a,
        inset 0 0 0 40px rgba(255, 255, 255, 0.03),
        inset 0 0 0 44px #1a1a1a,
        inset 0 0 0 47px rgba(255, 255, 255, 0.02),
        inset 0 0 0 51px #1a1a1a,
        inset 0 0 0 54px rgba(255, 255, 255, 0.03),
        inset 0 0 0 58px #1a1a1a,
        inset 0 0 0 62px rgba(255, 255, 255, 0.02),
        inset 0 0 0 66px #1a1a1a,
        inset 0 0 0 70px rgba(255, 255, 255, 0.03),
        /* Inner shadow for depth */
        inset 0 0 60px rgba(0, 0, 0, 0.8),
        /* Outer shadow */
        0 8px 20px rgba(0, 0, 0, 0.4);
    /* Always fully opaque */
    opacity: 1;
    /* Smooth animation - only position, no opacity */
    transition: transform 0.4s ease-out;
}

/* Vinyl disc center label (white) */
.vinyl-disc::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%; /* Center label size */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #f5f5f5; /* White center */
    box-shadow: 
        0 0 0 2px #e0e0e0,
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Center hole */
.vinyl-disc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8%; /* Small center hole */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #2a2a2a;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Label text container on white center */
.vinyl-label-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    justify-content: flex-start; /* Align to the top */
    width: 28%; /* Slightly smaller than white center to fit text */
    height: 28%;
    text-align: center;
    pointer-events: none;
    /* Prevent text selection */
    user-select: none;
    padding-top: 0.1em; /* Small padding from the top edge */
}

/* Individual text lines */
.vinyl-label-text .title {
    font-size: 0.039em;
    font-weight: 700;
    color: #2a2a2a;
    line-height: 1.1;
    margin-bottom: 0.017em;
    /* Limit to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vinyl-label-text .artist {
    font-size: 0.031em;
    font-weight: 500;
    color: #2a2a2a;
    line-height: 1.1;
    margin-bottom: 0.017em;
    /* Limit to 1 line with ellipsis */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.vinyl-label-text .year {
    font-size: 0.02em;
    font-weight: 400;
    color: #6a6a6a;
    line-height: 1.1;
    white-space: nowrap;
}

/* Visible state - slide out to the right */
.vinyl-disc.visible {
    transform: translate(10%, -50%); /* Slide to the right, showing ~35-40% of disc */
}

/* Hide state - slide back to center */
.vinyl-disc.hiding {
    transform: translate(-50%, -50%); /* Return to center */
    transition: transform 0.3s ease-in;
}

/* Caption for enlarged vinyl box */
.vinyl-caption {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100001; /* Above the enlarged box and flip button */
    text-align: center;
    pointer-events: none; /* Don't block clicks */
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    max-width: 90%;
    padding: 0 20px;
}

.vinyl-caption.visible {
    opacity: 1;
}

.vinyl-caption-title {
    font-size: 32px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.6);
}

.vinyl-caption-artist {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Responsive caption sizes */
@media (max-width: 767px) {
    .vinyl-caption-title {
        font-size: 24px;
    }
    
    .vinyl-caption-artist {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .vinyl-caption-title {
        font-size: 28px;
    }
    
    .vinyl-caption-artist {
        font-size: 18px;
    }
}