/* ═══════════════════════════════════════════════════════════════════
   Sl1ck N°1 — Aesthetic animation layer
   Loaded AFTER main-styles.css. Keeps the existing marble + gold
   scheme; only adds motion and light. Nothing here changes a color.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Scroll progress bar (gold, top edge) ───────────────────────── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #b8912c, #d4af37, #fdf0b0, #d4af37, #b8912c);
    background-size: 300% 100%;
    z-index: 2000;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
    animation: progressSheen 3.5s linear infinite;
    pointer-events: none;
}
@keyframes progressSheen {
    0%   { background-position: 0% 0; }
    100% { background-position: 300% 0; }
}

/* ── 2. Hero gold particle field (canvas, injected by JS) ──────────── */
#hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.home-section > .home-container {
    position: relative;
    z-index: 1;
}

/* ── 3. Breathing spotlight behind the artist ──────────────────────── */
.silhouette-container::before {
    animation: spotlightBreathe 7s ease-in-out infinite;
}
@keyframes spotlightBreathe {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* ── 4. Hero staggered entrance ────────────────────────────────────── */
.home-section .hero-eyebrow   { transition-delay: 0.05s; }
.home-section .hero-title     { transition-delay: 0.15s; }
.home-section .hero-subtitle  { transition-delay: 0.28s; }
.home-section .explore-hashes { transition-delay: 0.40s; }

/* ── 5. Nav link sliding gold underline ────────────────────────────── */
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
    width: 56%;
    left: 22%;
}

/* ── 6. Button shine sweep on hover ────────────────────────────────── */
.show-more-btn,
.nav-action-btn {
    position: relative;
    overflow: hidden;
}
.show-more-btn::after,
.nav-action-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -130%;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
    transform: skewX(-18deg);
    transition: left 0.55s ease;
    pointer-events: none;
}
.show-more-btn:hover::after,
.nav-action-btn:hover::after {
    left: 130%;
}

/* ── 7. Card spotlight-follow (gold glow tracks the cursor) ────────── */
.spotlight-card {
    position: relative;
    overflow: hidden;
}
.spotlight-card .spotlight-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
        480px circle at var(--mx, 50%) var(--my, 50%),
        rgba(212, 175, 55, 0.18),
        transparent 62%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.spotlight-card:hover .spotlight-glow {
    opacity: 1;
}

/* ── 8. Back-to-top button ─────────────────────────────────────────── */
#backToTop {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold);
    background: var(--accent-gold);
    color: var(--accent-black);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease,
                background 0.2s ease, color 0.2s ease;
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.4);
}
#backToTop.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#backToTop:hover {
    background: #b8941f;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(212, 175, 55, 0.5);
}

/* ── Reduced motion: flatten every new effect ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .scroll-progress,
    #hero-particles,
    #backToTop,
    .spotlight-card .spotlight-glow,
    .show-more-btn::after,
    .nav-action-btn::after,
    .nav-link::after {
        display: none !important;
    }
    .silhouette-container::before {
        animation: none !important;
    }
    .home-section .hero-eyebrow,
    .home-section .hero-title,
    .home-section .hero-subtitle,
    .home-section .explore-hashes {
        transition-delay: 0s !important;
    }
}