/* =========================================
   SD Records — Custom Styles
   ========================================= */

/* ---- Smooth scroll ---- */
html {
    scroll-behavior: smooth;
    touch-action: manipulation;
}

/* ---- Parallax background ---- */
.parallax-bg img {
    will-change: transform;
}

/* ---- Navigation states ---- */
#navbar {
    transition: background-color 0.5s ease, box-shadow 0.5s ease;
}

#navbar.scrolled {
    background-color: rgba(29, 30, 29, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.15);
}

#navbar.scrolled .nav-logo {
    height: 1.75rem;
}

/* ---- Burger animation ---- */
#burger.active .burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#burger.active .burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

#burger.active .burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Mobile menu ---- */
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

#navbar.menu-open {
    background-color: #1D1E1D;
}

/* ---- Back to top button ---- */
#back-to-top.visible {
    opacity: 1;
    pointer-events: all;
}

/* ---- Audio toggle ---- */
.audio-toggle[data-state="after"] {
    background-color: rgba(196, 149, 106, 0.3);
}

.audio-toggle[data-state="after"] span {
    transform: translateX(1.5rem);
}

.toggle-label-before.active,
.toggle-label-after.active {
    color: #6B4C3B;
    font-weight: 600;
}

/* ---- Waveform container ---- */
.waveform-container {
    transition: opacity 0.3s ease;
}

/* ---- Selection color ---- */
::selection {
    background-color: rgba(196, 149, 106, 0.3);
    color: #1D1E1D;
}

/* ---- Scrollbar (webkit) ---- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #F5F0EB;
}

::-webkit-scrollbar-thumb {
    background: #C4956A;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6B4C3B;
}

/* ---- Focus styles for accessibility ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #C4956A;
    outline-offset: 2px;
}

/* ---- Image grid aspect ratio ---- */
#studio .grid > div {
    aspect-ratio: auto;
    min-height: 200px;
}

#studio .grid > div:first-child {
    min-height: 420px;
}

@media (max-width: 767px) {
    #studio .grid > div:first-child {
        min-height: 250px;
    }

    #studio .grid > div {
        min-height: 150px;
    }
}

/* ---- Service card hover glow ---- */
#services .grid > div:hover {
    box-shadow: 0 0 30px rgba(196, 149, 106, 0.08);
}

/* ---- Form input autofill style ---- */
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #F5F0EB inset;
    -webkit-text-fill-color: #1D1E1D;
}

/* ---- Loading skeleton for waveform ---- */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.waveform-loading {
    background: linear-gradient(90deg, rgba(0,0,0,0.03) 25%, rgba(0,0,0,0.06) 50%, rgba(0,0,0,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}