/* CSS Variables */
:root {
    --color-primary: #ff8000;
    --color-secondary: #ff6600;
    --color-accent: #ffd700;
    --color-accent-orange: #ea2314;
    --color-background: #000000;
    --color-surface: rgba(0, 0, 0, 0.8);
}

/* Base Styles */
html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    height: auto;
    width: 100%;
    font-family: 'Inter', sans-serif;
}

/* Background container that fills the main content area */
.vinyl-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/backgrounds/treq-music-vinyl-record-hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Vinyl equalizer positioning and animation */
#equalizer {
    position: absolute;
    left: 50.7%;
    top: 45.9%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    z-index: 10;
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid orange;
    animation: pulse 2s infinite ease-in-out;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

/* Inner black circle to fill the center area */
.inner-black-circle {
    position: absolute;
    width: 35px;
    height: 35px;
    background: black;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Ring animations for index page */
.ring:nth-child(1) { width: 40px; height: 40px; animation-delay: 0s; border-color: #ffd700; }
.ring:nth-child(2) { width: 60px; height: 60px; animation-delay: 0.2s; border-color: #ffcc00; }
.ring:nth-child(3) { width: 80px; height: 80px; animation-delay: 0.4s; border-color: #ffb300; }
.ring:nth-child(4) { width: 100px; height: 100px; animation-delay: 0.6s; border-color: #ff9900; }
.ring:nth-child(5) { width: 120px; height: 120px; animation-delay: 0.8s; border-color: #ff8000; }
.ring:nth-child(6) { width: 140px; height: 140px; animation-delay: 1s; border-color: #ff6600; }

/* Ring animations for about page (different nth-child selectors) */
.about-page .ring:nth-child(2) { width: 40px; height: 40px; animation-delay: 0s; border-color: #ffd700; }
.about-page .ring:nth-child(3) { width: 60px; height: 60px; animation-delay: 0.2s; border-color: #ffcc00; }
.about-page .ring:nth-child(4) { width: 80px; height: 80px; animation-delay: 0.4s; border-color: #ffb300; }
.about-page .ring:nth-child(5) { width: 100px; height: 100px; animation-delay: 0.6s; border-color: #ff9900; }
.about-page .ring:nth-child(6) { width: 120px; height: 120px; animation-delay: 0.8s; border-color: #ff8000; }
.about-page .ring:nth-child(7) { width: 140px; height: 140px; animation-delay: 1s; border-color: #ff6600; }

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}

/* Responsive breakpoints - much larger scaling to match full record diameter */
/* Desktop: massive scale to reach the outer edge of the background record */
#equalizer {
    transform: translate(-50%, -50%) scale(8);
}

/* Tablet: medium screens */
@media screen and (max-width: 1024px) {
    #equalizer {
        width: 150px;
        height: 150px;
        transform: translate(-50%, -50%) scale(6);
    }
}

/* Mobile: smaller screens but still reaching record edges */
@media screen and (max-width: 600px) {
    #equalizer {
        width: 120px;
        height: 120px;
        transform: translate(-50%, -50%) scale(4);
    }
    .inner-black-circle {
        width: 25px;
        height: 25px;
    }
}

/* Listen Now Button */
.text-center.px-4.sm\:px-6.lg\:px-8.max-w-6xl.mx-auto .mb-12.md\:mb-16 .mb-4 span.inline-block.px-4.py-2.bg-treq-primary\/20.border.border-treq-primary\/40.text-treq-accent.text-lg.md\:text-xl.lg\:text-2xl.font-bold.tracking-wider.uppercase.backdrop-blur-sm {
    background-color: rgba(255, 255, 255, 0.6); /* Almost white with slight transparency */
    border-radius: 0.25rem;
	color: var(--color-accent-orange);
}

/* SoundCloud embed styles */
.soundcloud-credit {
    font-size: 10px;
    color: #cccccc;
    line-break: anywhere;
    word-break: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Interstate, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Garuda, Verdana, Tahoma, sans-serif;
    font-weight: 100;
    margin-top: 8px;
}

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

/* About page specific styles */
.about-content {
    margin-top: -4rem;
}

.about-background-image {
    min-height: 100vh;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

.content-container {
    position: relative;
    z-index: 10;
    background: transparent;
}

/* Apply background image to content container */
.content-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/assets/backgrounds/about-treq-music.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    z-index: 0;
}

/* Album Vinyl Record Styles */
:root {
    --treq-primary: #ff6b35;
}

/* Refactored Vinyl Record Styles - Bottom Protruding with Enhanced Shadow */
.vinyl-record {
    position: absolute;
    bottom: -35%; /* Moved down more for greater protrusion */
    left: 50%;
    transform: translate(-50%, 0);
    width: 95%; /* Almost as wide as the album cover */
    height: 95%;
    aspect-ratio: 1; /* Ensures perfect circle */
    border-radius: 50%;
    border: 0.3rem solid #333; /* Thicker, more defined rim */
    opacity: 0.9;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother easing */
    z-index: 5; /* Below text but above image if overlapping */
}

/* Per-album color gradients: Deep purple (1), Dark yellow (2), Burnt orange (3) */
.grid > a:nth-child(1) .vinyl-record {
    background: radial-gradient(circle at 50% 50%, #4B0082 0%, #301934 20%, #4B0082 40%, #301934 60%, #4B0082 80%, #000 100%); /* Deep purple groove */
}
.grid > a:nth-child(2) .vinyl-record {
    background: radial-gradient(circle at 50% 50%, #B8860B 0%, #8B8000 20%, #B8860B 40%, #8B8000 60%, #B8860B 80%, #000 100%); /* Dark yellow groove */
}
.grid > a:nth-child(3) .vinyl-record {
    background: radial-gradient(circle at 50% 50%, #CC5500 0%, #BE5103 20%, #CC5500 40%, #BE5103 60%, #CC5500 80%, #000 100%); /* Burnt orange groove */
}

/* Enhanced shadow for better visibility - Prominent drop shadow under record */
.vinyl-record {
    box-shadow:
        0 0.5rem 1.5rem rgba(0, 0, 0, 0.95), /* Stronger bottom drop shadow */
        0 0.25rem 0.75rem rgba(0, 0, 0, 0.8), /* Additional subtle offset for depth */
        inset 0 -0.5rem rgba(0, 0, 0, 0.6), /* Inner bottom shadow for depth */
        inset 0 0 1rem rgba(255, 255, 255, 0.05); /* Subtle inner highlight */
}

/* Center label on vinyl - Vibrant orange for contrast */
.vinyl-record::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%; /* Scaled to vinyl size */
    height: 35%;
    background: linear-gradient(135deg, #ff6b35 0%, #e55a23 50%, #d63031 100%); /* Shiny gradient label */
    border-radius: 50%;
    border: 0.2rem solid #fff;
    box-shadow:
        inset 0 0 0.5rem rgba(255, 255, 255, 0.3), /* Inner glow */
        0 0 0.5rem rgba(0, 0, 0, 0.5); /* Outer edge shadow */
}

/* Black very small inner circle (spindle hole) in the center of the label */
.vinyl-record .spindle-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.3rem; /* Very small */
    height: 0.3rem;
    background: #000; /* Solid black */
    border-radius: 50%;
    box-shadow: inset 0 0 0.1rem rgba(255, 255, 255, 0.2); /* Tiny inner highlight for depth */
    z-index: 1;
}

/* Enhanced groove lines - Finer spirals for texture */
.vinyl-record::after {
    content: '';
    position: absolute;
    top: 8%; /* Inset from edges */
    left: 8%;
    right: 8%;
    bottom: 8%;
    border-radius: 50%;
    background-image:
        repeating-conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.1) 1deg, transparent 2deg),
        repeating-conic-gradient(from 0deg, transparent 180deg, rgba(255,255,255,0.1) 181deg, transparent 182deg);
    opacity: 0.4;
    pointer-events: none;
    z-index: -1; /* Behind the label */
}

/* Hover effects: Spin in place, slight lift/bounce with intensified shadow */
.group:hover .vinyl-record {
    opacity: 1;
    bottom: -38%; /* Slight additional protrusion on hover */
    transform: translate(-50%, 0) rotate(360deg) scale(1.02); /* Spin + tiny enlarge */
    box-shadow:
        0 1rem 2rem rgba(0, 0, 0, 0.98), /* Even stronger bottom shadow on hover */
        0 0.5rem 1rem rgba(0, 0, 0, 0.9), /* Enhanced offset */
        inset 0 -0.75rem rgba(0, 0, 0, 0.7), /* Deeper inner shadow */
        inset 0 0 1.5rem rgba(255, 255, 255, 0.1),
        0 0 3rem rgba(255, 107, 53, 0.3); /* Orange glow */
}

/* Ensure the card allows bottom protrusion without clipping the vinyl */
.album-card {
    overflow: visible !important;
    position: relative;
    /* Removed padding-bottom to prevent clipping the full image */
}

/* Subtle "sleeve edge" overlay on the card's bottom for realism (fades into vinyl) */
.album-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Album text positioned above the cover (no overlay, no black background) */
.album-text {
    text-align: center;
    margin-bottom: 0.5rem; /* Small gap between text and cover */
    color: white;
}
.album-text h3 {
    font-size: 1.125rem; /* Larger, more prominent size */
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.album-text p {
    font-size: 0.875rem; /* Slightly larger description text */
    opacity: 0.8;
}

/* Mobile-specific album card sizing */
@media screen and (max-width: 767px) {
    .album-card {
        max-width: 280px; /* Limit maximum width on mobile */
        max-height: 280px; /* Limit maximum height on mobile */
        margin: 0 auto; /* Center the cards */
    }

    /* Hide vinyl record effect on mobile for cleaner look */
    .vinyl-record {
        display: none;
    }
}