/* 
  cinny p — Professional Music Artist Website
  Additional premium custom styles (complements Tailwind CDN + inline styles)
  Dark, moody, luxurious late-night aesthetic inspired by references.
*/

:root {
    --cinny-bg: #0A0A0C;
    --cinny-surface: #121214;
    --cinny-surface-2: #1A1A1E;
    --cinny-text: #F4F4F5;
    --cinny-muted: #A1A1AA;
    --cinny-accent: #7C3AED;
    --cinny-violet: #C026D3;
    --cinny-gold: #C9A16A;
}

/* Premium typography tweaks */
h1, h2, h3, .heading-serif {
    font-feature-settings: "tnum", "kern";
}

/* Navbar enhancements beyond inline */
nav {
    transition: background-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1),
                border-color 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Hero refinements */
.hero-bg {
    box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.65);
}

/* Card and release styles */
.premium-card {
    border: 1px solid #1A1A1E;
}

.release-card img {
    transition: transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.release-card:hover img {
    transform: scale(1.035);
}

/* Music table / discography */
.track-row {
    border-bottom: 1px solid #1A1A1E;
}

.track-row:last-child {
    border-bottom: none;
}

/* Stream buttons */
.stream-btn {
    font-feature-settings: "tnum";
}

/* Modal polish */
#stream-modal .modal,
#player-modal .modal {
    box-shadow: 0 40px 90px -15px rgb(0 0 0 / 0.6),
                0 0 0 1px rgb(255 255 255 / 0.04);
}

/* Fake player progress */
#progress-bar {
    box-shadow: 0 0 10px rgb(124 58 237 / 0.5);
}

/* Newsletter success state handled in JS, here for extra */
#newsletter-form input:focus {
    box-shadow: 0 0 0 1px #7C3AED;
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .artist-name {
        font-size: 3.25rem;
        line-height: 0.92;
    }
    
    .hero-bg {
        background-attachment: scroll;
    }
}

/* Accessibility + focus */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #7C3AED;
    outline-offset: 3px;
}

/* Subtle decorative elements for premium feel */
.subtle-grid {
    background-image: 
        linear-gradient(rgba(124, 58, 237, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.012) 1px, transparent 1px);
}

/* Instagram / social hints */
#connect a {
    transition: color 0.2s ease;
}

/* Footer */
footer a {
    transition: color .2s ease;
}

footer a:hover {
    color: #F4F4F5;
}

/* Small visual enhancements */
.premium-card,
.release-card {
    will-change: transform;
}

/* Loading hint (unused here but available) */
.loading {
    opacity: 0.6;
    pointer-events: none;
}