/* ── Themed background effects ──
   Each theme gets its own background via [data-theme] selectors.
   To add a new background for a theme, add a [data-theme="name"] .bg-effects block.
── */
.bg-effects {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Light: animated dot grid (two layers for parallax movement) */
[data-theme="light"] .bg-effects {
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.18) 1px, transparent 1px);
    background-size: 24px 24px;
}

[data-theme="light"] .bg-effects::before {
    content: '';
    position: absolute;
    inset: -30px;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    animation: dot-drift 25s ease-in-out infinite;
}

@keyframes dot-drift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(10px, -8px); }
    50% { transform: translate(-6px, 12px); }
    75% { transform: translate(8px, 4px); }
}

/* Dark: aurora gradient wash */
[data-theme="dark"] .bg-effects::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    right: -20%;
    height: 80%;
    background:
        radial-gradient(ellipse at 25% 30%, rgba(167, 139, 250, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 20%, rgba(52, 211, 153, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 10%, rgba(251, 191, 36, 0.14) 0%, transparent 40%),
        radial-gradient(ellipse at 60% 55%, rgba(251, 113, 133, 0.12) 0%, transparent 45%);
    filter: blur(40px);
    animation: aurora-drift 25s ease-in-out infinite;
}

@keyframes aurora-drift {
    0%, 100% { transform: translateX(0) translateY(0); }
    33% { transform: translateX(30px) translateY(15px); }
    66% { transform: translateX(-20px) translateY(-10px); }
}

/* Retro: CRT noise grain + scan lines + flicker */
[data-theme="retro"] .bg-effects {
    animation: crt-flicker 8s linear infinite;
    will-change: opacity;
}

[data-theme="retro"] .bg-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("/static/images/noise.png");
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: 0.08;
}

[data-theme="retro"] .bg-effects::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.08) 3px,
        rgba(0, 0, 0, 0.08) 4px
    );
    opacity: 0.9;
}

/* Tape reel spin (retro cassette deck) */
@keyframes tape-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* MySpace: neon topo lines + color cycling gradient + twinkling stars */
[data-theme="myspace"] .bg-effects {
    background-image:
        repeating-radial-gradient(circle at 15% 25%, transparent 0px, transparent 28px, rgba(255, 0, 255, 0.22) 29px, transparent 31px),
        repeating-radial-gradient(circle at 85% 45%, transparent 0px, transparent 42px, rgba(0, 255, 255, 0.18) 43px, transparent 45px),
        repeating-radial-gradient(circle at 40% 75%, transparent 0px, transparent 22px, rgba(0, 255, 0, 0.16) 23px, transparent 25px),
        repeating-radial-gradient(circle at 70% 10%, transparent 0px, transparent 35px, rgba(255, 255, 0, 0.14) 36px, transparent 38px),
        repeating-radial-gradient(circle at 50% 50%, transparent 0px, transparent 50px, rgba(255, 100, 0, 0.12) 51px, transparent 53px);
}

[data-theme="myspace"] .bg-effects::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 0, 255, 0.15),
        rgba(0, 255, 255, 0.12),
        rgba(0, 255, 0, 0.15),
        rgba(255, 255, 0, 0.12),
        rgba(255, 0, 128, 0.15),
        rgba(0, 128, 255, 0.12)
    );
    background-size: 400% 400%;
    animation: myspace-color-cycle 6s ease-in-out infinite;
}

[data-theme="myspace"] .bg-effects::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 30% 70%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 50% 40%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 70% 10%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 15% 85%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 55% 90%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 80% 35%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 40% 15%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 65% 55%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 25% 45%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 85% 80%, rgba(255, 255, 255, 0.5), transparent);
    animation: myspace-twinkle 3s ease-in-out infinite;
}

@keyframes myspace-color-cycle {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

@keyframes myspace-twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Nav animated gradient line */
.nav-gradient-line {
    background: linear-gradient(to right, #fb7185, #fbbf24, #34d399, #60a5fa, #a78bfa);
    background-size: 200% 100%;
    animation: nav-gradient-shift 4s ease-in-out infinite;
}

@keyframes nav-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Nav scroll animation ── */
#nav-brand {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#main-nav.at-top #nav-brand {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
}

#nav-links {
    transition: transform 0.4s ease;
}

#main-nav.at-top #nav-links {
    transform: translateX(var(--center-offset, 0px));
}

/* ── Scroll reveal animations ── */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Directional variants */
.scroll-from-left {
    transform: translateX(-30px) translateY(0);
}

.scroll-from-left.revealed {
    transform: translateX(0) translateY(0);
}

.scroll-from-right {
    transform: translateX(30px) translateY(0);
}

.scroll-from-right.revealed {
    transform: translateX(0) translateY(0);
}

/* Staggered delays for cards */
.scroll-delay-1 { transition-delay: 0s; }
.scroll-delay-2 { transition-delay: 0.15s; }
.scroll-delay-3 { transition-delay: 0.3s; }
.scroll-delay-4 { transition-delay: 0.45s; }

/* ── Page scrollbar ── */
html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: var(--color-bg);
}

html::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--color-bg);
}

/* ── Custom scrollbar (tracklist) ── */
.styled-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.styled-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.styled-scrollbar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.styled-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Firefox */
.styled-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* ── Dead High slideshow ── */
.slideshow-container .slideshow-img {
    opacity: 0;
    animation: slideshow-fade 25s infinite;
}

@keyframes slideshow-fade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    20%  { opacity: 1; }
    24%  { opacity: 0; }
    100% { opacity: 0; }
}