/* =============================================
   BYE BYE MAXWELL - Stylesheet
   ============================================= */

/* Custom Fonts */
@font-face { font-family: 'Lakewood'; src: url('fonts/lakewood/Lakewood Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Lakewood'; src: url('fonts/lakewood/Lakewood Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lakewood'; src: url('fonts/lakewood/Lakewood Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
    --teal: #2EC4B6;
    --pink: #e84a73;
    --pink-light: #f06292;
    --white: #ffffff;
    --dark: #1a1a2e;
    --dark-secondary: #16213e;
    --title-font: 'Lakewood', sans-serif;
    --font-body: 'Questrial', sans-serif;
    --font-heading: 'Lakewood', sans-serif;
    --radius-pill: 50px;
    --radius-card: 12px;
    --radius-small: 8px;
    --transition-default: 0.3s ease;
}

/* Outline style for hero title — overridden by .hero-content h1 in hero block */

/* Glow styling for welcome statement */
.welcome {
    text-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.4),
        0 0 30px rgba(255,255,255,0.2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Screen-reader only (visually hidden but accessible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip navigation link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pink);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-small);
    z-index: 10001;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 1rem;
}

body {
    font-family: var(--font-body);
    color: var(--white);
    overflow-x: hidden;
    background: var(--dark);
}

/* Scroll Progress */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pink), var(--teal));
    z-index: 1001;
    width: 0%;
    transition: width 0.1s linear;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-logo {
    height: 50px;
    animation: pulse 1.5s ease-in-out infinite;
}

.preloader-butterflies {
    position: relative;
    width: 200px;
    height: 25px;
    margin-top: 0.5rem;
}

.preloader-butterfly {
    width: 20px;
    height: 20px;
    position: absolute;
}

.preloader-butterfly:nth-child(1) { color: var(--pink); left: 0; animation: bfHover1 0.8s ease-in-out infinite; }
.preloader-butterfly:nth-child(2) { color: var(--teal); left: 40px; animation: bfHover2 0.9s ease-in-out infinite 0.1s; }
.preloader-butterfly:nth-child(3) { color: var(--pink-light); left: 90px; animation: bfHover1 0.7s ease-in-out infinite 0.2s; }
.preloader-butterfly:nth-child(4) { color: var(--pink); left: 140px; animation: bfHover2 0.85s ease-in-out infinite 0.15s; }
.preloader-butterfly:nth-child(5) { color: var(--teal); left: 180px; animation: bfHover1 0.95s ease-in-out infinite 0.25s; }

@keyframes bfHover1 {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50% { transform: translateY(-5px) rotate(8deg); }
}
@keyframes bfHover2 {
    0%, 100% { transform: translateY(-3px) rotate(5deg); }
    50% { transform: translateY(2px) rotate(-5deg); }
}

.preloader-bar {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin-top: 2rem;
    overflow: hidden;
}

.preloader-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--pink), var(--teal));
    width: 0%;
    animation: loading 1.5s ease-in-out forwards;
}

@keyframes loading {
    0% { width: 0%; }
    70% { width: 100%; }
    100% { width: 100%; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* Fixed Background */
.background-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.background-fixed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.28);
}

.background-fixed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

/* Cursor Sparkle Effect */
.cursor-sparkle {
    position: fixed;
    pointer-events: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
    opacity: 0.8;
    z-index: 9999;
    animation: sparkle 0.6s ease-out forwards;
}

@keyframes sparkle {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(0); opacity: 0; }
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

/* Logo as text with letter-by-letter disappear */
.logo {
    display: flex;
    position: relative;
    cursor: pointer;
    height: 28px;
    align-items: center;
}

.logo img {
    height: 28px;
    width: auto;
    transition: transform 0.3s ease, opacity 1s ease;
}

.logo:hover img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

/* Butterflies */
.butterflies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.butterfly {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.butterfly svg { width: 22px; height: 22px; }

.butterfly.flying {
    animation: butterflyPath 3.5s forwards ease-out;
}

.butterfly .left-wing,
.butterfly .right-wing {
    transform-origin: center;
    animation: flutter 0.1s infinite ease-in-out;
}

.butterfly .right-wing { animation-delay: 0.05s; }

@keyframes flutter {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(0.15); }
}

@keyframes butterflyPath {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--endX), var(--endY)) rotate(var(--endRot)); }
}

@keyframes butterflyConverge {
    0% { opacity: 0; transform: translate(var(--startX), var(--startY)) rotate(var(--startRot)); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}

.butterfly.converging {
    animation: butterflyConverge 2.2s forwards ease-in;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
}

.nav-toggle span {
    width: 26px;
    height: 2px;
    background: var(--white);
}

/* Navigation Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-overlay.active { opacity: 1; visibility: visible; }
.nav-overlay nav { text-align: center; }

.nav-overlay a {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--white);
    text-decoration: none;
    margin: 0.8rem 0;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.nav-overlay a:hover { color: var(--pink); }

.nav-close {
    position: absolute;
    top: 1.2rem;
    right: 2rem;
    font-size: 1.8rem;
    color: var(--white);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 2rem 8rem;
    background: linear-gradient(180deg, rgba(8,11,20,0.15) 0%, rgba(8,11,20,0.3) 40%, rgba(8,11,20,0.65) 70%, rgba(8,11,20,0.88) 100%),
                url('background.jpg') center 30%/cover no-repeat;
}

/* Radial vignette — darkens edges, creates spotlight on center text */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, rgba(8,11,20,0.4) 100%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-content h1 {
    font-family: var(--title-font);
    font-size: clamp(3.5rem, 10vw, 7.5rem);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    -webkit-text-stroke: 1px rgba(255,255,255,0.3);
    text-shadow:
        0 0 15px rgba(255,255,255,0.8),
        0 0 40px rgba(255,255,255,0.5),
        0 0 80px rgba(46,196,182,0.5),
        0 0 120px rgba(46,196,182,0.3),
        0 0 180px rgba(46,196,182,0.15),
        0 2px 20px rgba(0,0,0,0.5);
    animation: heroRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               heroGlow 4s ease-in-out 2s infinite;
    opacity: 0;
    transform: translateY(80px);
}

@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

@keyframes heroGlow {
    0%, 100% {
        text-shadow:
            0 0 15px rgba(255,255,255,0.8),
            0 0 40px rgba(255,255,255,0.5),
            0 0 80px rgba(46,196,182,0.5),
            0 0 120px rgba(46,196,182,0.3),
            0 0 180px rgba(46,196,182,0.15),
            0 2px 20px rgba(0,0,0,0.5);
    }
    50% {
        text-shadow:
            0 0 20px rgba(255,255,255,1),
            0 0 50px rgba(255,255,255,0.7),
            0 0 100px rgba(46,196,182,0.65),
            0 0 160px rgba(46,196,182,0.4),
            0 0 220px rgba(46,196,182,0.2),
            0 2px 20px rgba(0,0,0,0.5);
    }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-newsletter {
    position: relative;
    margin-top: 40px;
    max-width: 480px;
    width: 100%;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 28px 28px 24px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 1.6s;
}

.hero-newsletter::before {
    display: none;
}

.hero-newsletter-heading {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
}

.hero-newsletter-subtext {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.03em;
    line-height: 1.55;
    margin-bottom: 16px;
}

.hero-newsletter-form {
    display: flex;
}

.hero-form-row {
    display: flex;
    width: 100%;
}

.hero-form-row input[type="email"] {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px 0 0 6px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    outline: none;
}

.hero-form-row input[type="email"]::placeholder {
    color: rgba(255,255,255,0.4);
}

.hero-form-row button {
    padding: 14px 24px;
    background: var(--teal);
    color: #080B14;
    border: none;
    border-radius: 0 6px 6px 0;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.hero-form-row button:hover { opacity: 0.9; }

.hero-newsletter-disclaimer {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 10px;
    letter-spacing: 0.02em;
}

.hero-newsletter-success {
    font-size: 1.1rem;
    color: var(--teal);
    font-weight: 600;
    padding: 16px 0;
    animation: fadeInUp 0.6s ease forwards;
}

.hero-album-badge {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 10px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.6s;
}

.hero-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 12px;
    padding: 0.9rem 2.2rem 0.9rem 1.6rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.8s;
}

.hero-play-btn svg {
    width: 18px;
    height: 18px;
    fill: rgba(255,255,255,0.8);
    transition: fill 0.3s ease;
}

.hero-play-btn:hover {
    border-color: rgba(232,74,115,0.7);
    background: rgba(232,74,115,0.12);
    transform: scale(1.05);
}

.hero-play-btn:hover svg {
    fill: var(--pink);
}

.scroll-arrows {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.scroll-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    animation: scrollBounce 3s ease-in-out infinite;
}

.scroll-arrow svg {
    width: 20px;
    height: 20px;
}
.scroll-arrow { color: rgba(255,255,255,0.3); transition: color 0.3s ease; }
.scroll-arrow:hover { color: rgba(255,255,255,0.7); }

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* Sections */
section { padding: 4rem 1.5rem; }

/* Subtle dividers between content sections */
.about-section,
.press-section,
.instagram-section,
.contact-section {
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Music Section */
.music-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--white);
}

.music-subtext {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    text-align: center;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.music-section {
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 4rem;
    position: relative;
    background: linear-gradient(180deg,
        rgba(46,196,182,0.04) 0%,
        rgba(8,11,20,0.6) 50%,
        rgba(46,196,182,0.04) 100%);
    border-top: 1px solid rgba(46,196,182,0.15);
}


.music-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
    border-radius: 1px;
}

.music-container {
    max-width: 800px;
    width: 100%;
}

.music-player {
    display: flex;
    gap: 3rem;
    align-items: stretch;
}

.album-wrapper {
    position: relative;
    flex-shrink: 0;
}

.album-cover {
    width: 300px;
    max-width: 100%;
    border-radius: var(--radius-small);
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(232, 74, 115, 0.3);
    position: relative;
    cursor: pointer;
}

.album-cover img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.album-cover:hover img {
    transform: scale(1.05);
}

.album-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.album-cover:hover .album-play-overlay {
    opacity: 1;
}

.album-play-overlay svg {
    width: 60px;
    height: 60px;
    fill: var(--white);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.track-list {
    flex: 1;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1rem;
}

.track-list h3 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1.2rem;
}

.track-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-small);
    margin-bottom: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.track-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

.track-item.active {
    background: rgba(232, 74, 115, 0.15);
    border-color: rgba(232, 74, 115, 0.3);
}

.track-item.playing .track-number {
    color: var(--pink);
}

.track-number {
    font-size: 0.8rem;
    color: var(--teal);
    opacity: 0.7;
    min-width: 24px;
}

.track-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 400;
}

.track-duration {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
}

/* About Section */
.about-section {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1.5rem;
}

.about-container {
    max-width: 800px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    text-align: center;
    position: relative;
}

.band-photo {
    width: calc(100% + 2.8rem);
    margin: 1rem -1.4rem -1.4rem;
    border-radius: 0 0 14px 14px;
    display: block;
}

.about-container h2 {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    opacity: 0.5;
}

.about-container .welcome {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
    color: var(--white);
}

.about-container .about-intro {
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    letter-spacing: 0.03em;
    font-style: normal;
    opacity: 0.75;
    margin-bottom: 1.5rem;
}

.about-container p {
    font-size: 0.95rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.about-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.about-expand-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.about-expand-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.about-expand-btn.open svg {
    transform: rotate(180deg);
}

.about-extended {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    opacity: 0;
    text-align: left;
}

.about-extended.open {
    max-height: 1200px;
    opacity: 1;
}

.about-extended p {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    opacity: 0.75;
}

.about-extended > .hidden-butterfly {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
}

.for-fans-line {
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
    padding-top: 0;
    color: var(--teal);
    opacity: 0.7;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    font-style: italic;
}

.for-fans-line .fan-band {
    display: inline;
    transition: all 0.3s ease;
    cursor: default;
}

.for-fans-line .fan-band:hover {
    text-shadow: 0 0 10px rgba(46,196,182,0.5), 0 0 20px rgba(46,196,182,0.3);
}

.signature {
    height: 32px;
    width: auto;
    opacity: 0.95;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.signature:hover { transform: scale(1.05); }

/* Press Kit Section */
.press-section {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 1.5rem;
}

.press-container {
    position: relative;
    max-width: 500px;
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 2.5rem 3rem;
}


.press-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.press-section p {
    opacity: 0.8;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.press-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.5rem;
    background: transparent;
    border: 2px solid var(--teal);
    border-radius: var(--radius-pill);
    color: var(--teal);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.press-btn:hover {
    border-color: var(--pink);
    background: rgba(232,74,115,0.12);
    color: var(--white);
}

.press-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Instagram Section */
.instagram-section {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
}

.instagram-section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.instagram-feed {
    max-width: 900px;
    width: 100%;
    margin-bottom: 1.5rem;
}

.embedsocial-hashtag {
    min-height: 300px;
}

.follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 2rem;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-pill);
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.follow-btn:hover {
    border-color: var(--pink);
    background: rgba(232,74,115,0.12);
    color: var(--white);
    transform: translateY(-2px);
}

.follow-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Contact Section */
.contact-section {
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.5rem 4rem;
}

.contact-box {
    position: relative;
    text-align: center;
    padding: 2.5rem 3rem;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.contact-box h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 400px;
}

.contact-form .form-row {
    display: flex;
    gap: 1rem;
}

.contact-form .form-row > div {
    flex: 1;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--teal);
    background: rgba(255, 255, 255, 0.15);
}

.contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.contact-form button {
    padding: 1rem 2rem;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-pill);
    color: rgba(255,255,255,0.8);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.contact-form button:hover {
    border-color: var(--pink);
    background: rgba(232,74,115,0.12);
    color: var(--white);
    transform: translateY(-2px);
}

/* Footer */
footer {
    background: rgba(8,11,20,0.95);
    border-top: 1px solid rgba(46,196,182,0.2);
    padding: 2.5rem 2rem 5rem;
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

.social-links a {
    color: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: var(--teal);
    transform: translateY(-2px);
}

.social-links svg { width: 22px; height: 22px; fill: currentColor; }

.easter-hint {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.8rem;
    font-style: italic;
}

.copyright {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
}

/* Player Bar with EQ */
.player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(8,11,20,0.95);
    border-top: 1px solid rgba(46,196,182,0.3);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    z-index: 100;
    height: 62px;
}

.player-bar-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.player-bar-info { min-width: 90px; flex-shrink: 0; }

.player-bar-info h4 {
    font-weight: 400;
    color: var(--white);
    font-size: 0.85rem;
    white-space: nowrap;
}

.player-bar-info span {
    font-size: 0.65rem;
    color: var(--white);
    opacity: 0.8;
}

.player-bar-controls {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.player-bar-btn {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0.2rem;
}

.player-bar-btn svg { width: 24px; height: 24px; fill: currentColor; }

.time-btn {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    background: none;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-display {
    font-size: 0.7rem;
    color: var(--white);
    min-width: 36px;
    text-align: center;
    flex-shrink: 0;
}

/* EQ Waveform with mirror effect */
.waveform-container {
    flex: 1;
    height: 46px;
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: pointer;
    gap: 2px;
}

.waveform-top, .waveform-bottom {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 1px;
}

.waveform-top {
    align-items: flex-end;
}

.waveform-bottom {
    align-items: flex-start;
}

.waveform-bar {
    flex: 1;
    max-width: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
    transition: height 0.04s linear;
    min-height: 1px;
}

.waveform-bottom .waveform-bar {
    background: rgba(255, 255, 255, 0.25);
}

.waveform-bar.played {
    background: var(--pink);
}

.waveform-bottom .waveform-bar.played {
    background: rgba(232, 74, 115, 0.35);
}

.time-remaining {
    font-size: 0.7rem;
    color: var(--white);
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.volume-btn { flex-shrink: 0; }

/* Easter Egg */
.easter-egg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0a0a1a 0%, var(--dark-secondary) 50%, #0a0a1a 100%);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.easter-egg-overlay.active { display: flex; }

.game-intro, .game-reward {
    text-align: center;
    padding: 2rem;
}

.game-intro h2, .game-reward h2 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--pink), var(--teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.game-intro p, .game-reward p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
    max-width: 300px;
}

.game-intro button, .close-secret-btn {
    padding: 0.9rem 2.5rem;
    background: var(--pink);
    border: none;
    border-radius: var(--radius-pill);
    color: white;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.game-intro button:hover, .close-secret-btn:hover {
    background: var(--pink-light);
    transform: scale(1.05);
}

.game-intro {
    position: relative;
}

.game-instructions {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

#countdown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: inherit;
    font-family: 'Arial Black', sans-serif;
    font-size: 8rem;
    color: var(--teal);
    text-shadow: 0 0 30px var(--teal);
}

.game-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#gameCanvas {
    background: transparent;
    max-width: 100%;
    max-height: 100%;
}

.game-ui {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    font-size: 1rem;
    color: var(--white);
    font-family: var(--font-body);
    letter-spacing: 0.1em;
}

.game-exit-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

.game-exit-btn:hover {
    background: rgba(232, 74, 115, 0.3);
    border-color: var(--pink);
    color: var(--white);
}

.secret-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    background: rgba(255,255,255,0.1);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-pill);
}

.secret-play-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--pink);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.secret-play-btn:hover {
    background: var(--pink-light);
    transform: scale(1.1);
}

.secret-play-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
    margin-left: 3px;
}

#secretTrackTime {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    min-width: 100px;
}

.close-secret-btn {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
}

.close-secret-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.5);
}

.secret-picture {
    margin: 1.5rem 0;
}

.secret-picture img {
    max-width: 280px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(232, 74, 115, 0.4);
}

.cheers-text {
    font-size: 0.9rem;
    color: var(--teal);
    margin-top: 0.8rem;
    font-style: italic;
}

/* Hidden Butterflies */
.hidden-butterfly {
    display: inline-block;
    animation: butterflyHint 3s ease-in-out infinite;
    width: 22px;
    height: 22px;
    color: rgba(232, 74, 115, 0.55);
    cursor: pointer;
    transition: all 0.3s ease;
    vertical-align: middle;
    margin-left: 0.5rem;
    filter: drop-shadow(0 0 2px rgba(232, 74, 115, 0.3));
}

.hidden-butterfly:hover {
    color: var(--pink);
    transform: scale(1.4) rotate(10deg);
    filter: drop-shadow(0 0 8px rgba(232, 74, 115, 0.6));
}

.hidden-butterfly.collected {
    color: var(--teal);
    filter: drop-shadow(0 0 10px rgba(0, 229, 204, 0.8));
    animation: butterflyCollected 0.6s ease forwards;
}

@keyframes butterflyCollected {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.8) rotate(20deg); }
    100% { transform: scale(1.3) rotate(5deg); }
}

@keyframes butterflyHint {
    0%, 100% { transform: scale(1) rotate(-5deg); opacity: 0.55; }
    50% { transform: scale(1.2) rotate(5deg); opacity: 0.8; }
}

.hidden-butterfly svg {
    width: 100%;
    height: 100%;
}

.butterfly-corner {
    position: absolute;
    bottom: 0.8rem;
    right: 0.8rem;
}

.hero-butterfly {
    display: block;
    margin: 0.5rem auto;
}

/* Newsletter Popup */
.newsletter-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}

.newsletter-popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 3rem 2.5rem;
    border-radius: 16px;
    text-align: center;
    max-width: 420px;
    width: 90%;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    animation: popupSlide 0.4s ease forwards;
    transform: translateY(30px);
}


@keyframes popupSlide {
    to { transform: translateY(0); }
}

.popup-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.8rem;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.popup-close:hover { color: var(--white); }

.popup-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.popup-icon svg {
    width: 22px;
    height: 22px;
    fill: rgba(255,255,255,0.7);
}

.popup-content h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    margin-bottom: 0.8rem;
    color: var(--white);
}

.popup-content p {
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.popup-form {
    display: flex;
    gap: 0;
}

.popup-form input[type="email"] {
    flex: 1;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px 0 0 6px;
    background: rgba(255,255,255,0.08);
    color: var(--white);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.3s ease;
}

.popup-form input[type="email"]:focus {
    outline: none;
    border-color: var(--teal);
}

.popup-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.popup-form button {
    padding: 14px 24px;
    background: var(--teal);
    border: none;
    border-radius: 0 6px 6px 0;
    color: #080B14;
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.popup-form button:hover {
    opacity: 0.9;
}

.popup-dismiss {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: color 0.3s ease;
    background: none;
    border: none;
    font-family: var(--font-body);
}

.popup-dismiss:hover { color: rgba(255, 255, 255, 0.8); }

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Cookie Consent Banner */
.cookie-banner {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 500;
    max-width: 560px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: fadeInUp 0.4s ease forwards;
}

.cookie-banner.hidden { display: none; }

.cookie-banner p {
    font-size: 0.75rem;
    line-height: 1.5;
    opacity: 0.7;
    flex: 1;
    margin: 0;
}

.cookie-btn-accept, .cookie-btn-decline {
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.cookie-btn-accept {
    background: var(--teal);
    border: none;
    color: var(--dark);
    font-weight: 600;
}

.cookie-btn-accept:hover { opacity: 0.85; }

.cookie-btn-decline {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

.cookie-btn-decline:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.8);
}

/* =============================================
   Reusable Utility Classes
   ============================================= */

/* Base pill button */
.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--transition-default);
    text-decoration: none;
}

.btn-pill-pink {
    padding: 0.9rem 2rem;
    background: var(--pink);
    border: none;
    color: var(--white);
    font-weight: 600;
}

.btn-pill-pink:hover {
    background: var(--pink-light);
    transform: translateY(-2px);
}

.btn-pill-outline {
    padding: 0.8rem 2rem;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
}

.btn-pill-outline:hover {
    border-color: var(--teal);
    background: rgba(0, 184, 162, 0.15);
}

.btn-pill-teal-outline {
    padding: 0.9rem 2.5rem;
    background: transparent;
    border: 2px solid var(--teal);
    color: var(--teal);
}

.btn-pill-teal-outline:hover {
    background: var(--teal);
    color: var(--dark);
}

/* Glass-style form input */
.input-glass {
    padding: 0.9rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color var(--transition-default), background var(--transition-default);
}

.input-glass::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-glass:focus {
    border-color: var(--teal);
    background: rgba(255, 255, 255, 0.15);
}

/* =============================================
   Accessibility: Focus Styles
   ============================================= */

/* Visible focus ring for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

/* Remove outline for mouse clicks */
:focus:not(:focus-visible) {
    outline: none;
}

/* Specific focus styles for buttons on teal background (player bar, footer) */
.player-bar :focus-visible,
footer :focus-visible {
    outline-color: var(--white);
}

/* =============================================
   Accessibility: Reduced Motion
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .cursor-sparkle { display: none; }
}

/* =============================================
   Cosmic Club Teaser (Main Page)
   ============================================= */

.cct-section {
    position: relative;
    padding: 8rem 1rem 10rem;
    text-align: center;
    overflow: hidden;
}

/* Smooth dark tunnel — long fade in/out so transition feels natural */
.cct-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(8, 6, 20, 0.3) 10%,
        rgba(8, 6, 20, 0.7) 25%,
        rgba(8, 6, 20, 0.92) 40%,
        rgba(8, 6, 20, 0.92) 60%,
        rgba(8, 6, 20, 0.7) 75%,
        rgba(8, 6, 20, 0.3) 90%,
        transparent 100%
    );
}

.cct-wrapper {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* Portal — relative container, black hole + video stacked in same spot */
.cct-portal {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: clamp(180px, 40vw, 300px);
    overflow: visible;
}

.cct-blackhole {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 30px rgba(120, 60, 200, 0.5));
    transition: filter 0.5s, opacity 0.6s;
    animation: cctFloat 5s ease-in-out infinite;
}

.cct-blackhole:hover {
    filter: drop-shadow(0 0 50px rgba(150, 80, 255, 0.8));
}

.cct-blackhole.hidden {
    opacity: 0;
    pointer-events: none;
    animation: none;
}

.cct-hint {
    margin-top: 0.8rem;
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: rgba(200, 170, 255, 0.6);
    letter-spacing: 0.05em;
    transition: opacity 0.4s;
}

@keyframes cctFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* Video — centered over portal, wider than black hole, fades out at edges */
.cct-video {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(85vw, 560px);
    height: auto;
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at center, black 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 75% 75% at center, black 40%, transparent 85%);
    z-index: 1;
}

.cct-video.active {
    display: block;
}

/* Join form — hidden until video ends, fades in below video */
.cct-join {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.cct-join.active {
    display: flex;
}

.cct-join.visible {
    opacity: 1;
    transform: translateY(0);
}

.cct-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: #e8d5b0;
    margin-bottom: 0.3rem;
    text-shadow: 0 0 30px rgba(200, 150, 80, 0.4);
}

.cct-text {
    font-family: 'Questrial', sans-serif;
    font-size: 0.95rem;
    color: rgba(200, 180, 220, 0.75);
    margin-bottom: 1.2rem;
    max-width: 360px;
}

.cct-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    max-width: 300px;
}

.cct-form input[type="text"],
.cct-form input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(200, 170, 255, 0.15);
    border-radius: 6px;
    padding: 0.65rem 1rem;
    color: #e8d5b0;
    font-family: 'Questrial', sans-serif;
    font-size: 0.95rem;
}

.cct-form input:focus {
    outline: none;
    border-color: rgba(200, 170, 255, 0.4);
}

.cct-form button {
    background: rgba(150, 100, 255, 0.15);
    border: 1px solid rgba(150, 100, 255, 0.3);
    border-radius: 6px;
    padding: 0.7rem;
    color: #c8b0ff;
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
}

.cct-form button:hover {
    background: rgba(150, 100, 255, 0.25);
    border-color: rgba(150, 100, 255, 0.5);
}

.cct-iframe {
    display: none;
    width: 0;
    height: 0;
    border: none;
}

.cct-success {
    display: none;
    color: rgba(150, 220, 180, 0.9);
    font-family: 'Caveat', cursive;
    font-size: 1.3rem;
    margin-top: 1rem;
}

.cct-success.active {
    display: block;
}

/* =============================================
   Cosmic Club Page
   ============================================= */

.cc-page {
    min-height: 100vh;
    background: #050810;
    color: var(--white);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* ── Background Image (like main site) ─── */
.cc-bg-fixed {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.cc-bg-fixed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay gradient for readability over bright bg image */
.cc-bg-fixed::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(5,8,16,0.55) 0%,
        rgba(5,8,16,0.35) 25%,
        rgba(5,8,16,0.2) 45%,
        rgba(5,8,16,0.15) 60%,
        rgba(5,8,16,0.1) 75%,
        rgba(5,8,16,0.3) 100%
    );
    pointer-events: none;
}

/* ── Nebula Background (CSS fallback / enhancement) ─── */
.cc-nebula {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 70% 50% at 15% 85%, rgba(232,74,115,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 85% 15%, rgba(46,196,182,0.14) 0%, transparent 55%),
        radial-gradient(ellipse 80% 40% at 50% 50%, rgba(139,92,246,0.1) 0%, transparent 55%),
        radial-gradient(ellipse 40% 50% at 70% 70%, rgba(255,160,50,0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 35% at 30% 25%, rgba(100,180,255,0.06) 0%, transparent 50%);
}

/* Floating cosmic dust particles (generated by JS) */
.cc-dust {
    position: fixed;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    pointer-events: none;
    z-index: 0;
    animation: ccDrift var(--dust-dur, 10s) ease-in-out infinite var(--dust-delay, 0s);
}

@keyframes ccDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.1; }
    50% { transform: translate(var(--drift-x, 20px), var(--drift-y, -20px)); opacity: 0.35; }
}

/* ── Stars ──────────────────────────── */
.cc-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cc-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: ccTwinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}

.cc-star-bright {
    box-shadow: 0 0 4px 1px rgba(255,255,255,0.4);
}

@keyframes ccTwinkle {
    0%, 100% { opacity: 0.08; transform: scale(0.8); }
    50% { opacity: 0.9; transform: scale(1.3); }
}

/* ── Aurora Gradient ────────────────── */
.cc-aurora {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(46,196,182,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(232,74,115,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 90% 60% at 50% 50%, rgba(139,92,246,0.08) 0%, transparent 60%);
    animation: ccAurora 12s ease-in-out infinite alternate;
}

@keyframes ccAurora {
    0% { opacity: 0.6; filter: hue-rotate(0deg); }
    100% { opacity: 1; filter: hue-rotate(20deg); }
}

/* ── Shooting Stars ─────────────────── */
.cc-shooting-star {
    position: fixed;
    width: 120px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,200,100,0.3), transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
}

.cc-ss-1 { top: 12%; animation: ccShoot 6s ease-in 2s infinite; transform: rotate(-12deg); }
.cc-ss-2 { top: 35%; animation: ccShoot 8s ease-in 6s infinite; transform: rotate(-8deg); }
.cc-ss-3 { top: 22%; animation: ccShoot 7s ease-in 10s infinite; transform: rotate(-18deg); }

@keyframes ccShoot {
    0% { left: -120px; opacity: 0; }
    5% { opacity: 0.9; }
    15% { left: 110%; opacity: 0; }
    100% { left: 110%; opacity: 0; }
}

/* ── Header ─────────────────────────── */
.cc-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
}

.cc-header img {
    height: 28px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.cc-header img:hover { opacity: 1; }

/* ── Hero ───────────────────────────── */
.cc-hero {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2.5rem 2rem 1rem;
    animation: ccFadeUp 1.2s ease-out;
}

.cc-hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(232,74,115,0.1) 0%, rgba(46,196,182,0.06) 35%, rgba(139,92,246,0.04) 55%, transparent 70%);
    pointer-events: none;
    animation: ccPulse 6s ease-in-out infinite;
}

@keyframes ccPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

.cc-hero-label {
    font-size: 0.55rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.35;
    margin-bottom: 1.5rem;
}

.cc-hero h1 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.8rem, 5vw, 3rem);
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin-bottom: 1.2rem;
}

.cc-hero-accent {
    font-weight: 400;
    background: linear-gradient(135deg, var(--teal), #e87dc8, var(--pink));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: ccGradientShift 6s ease-in-out infinite;
}

@keyframes ccGradientShift {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.cc-hero-sub {
    font-size: 0.9rem;
    opacity: 0.45;
    line-height: 1.7;
}

@keyframes ccFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Solar System (Scattered Planet Layout) ── */
.cc-solar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(2rem, 7vw, 6rem);
    padding: 0 2rem 4rem;
    margin-top: -2rem;
    flex-wrap: wrap;
}

.cc-orbit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    animation: ccFloat var(--float-dur, 5s) ease-in-out infinite;
    transition: opacity 0.5s ease, transform 0.5s ease;
    position: relative;
}

/* Scattered positions — each planet at different heights, well spread */
.cc-orbit-1 {
    --float-dur: 5s;
    animation-delay: 0s;
    align-self: flex-start;
    margin-top: -1rem;
}
.cc-orbit-2 {
    --float-dur: 6s;
    animation-delay: 1s;
    align-self: center;
    margin-top: 4.5rem;
}
.cc-orbit-3 {
    --float-dur: 5.5s;
    animation-delay: 2s;
    align-self: flex-start;
    margin-top: -2.5rem;
}
.cc-orbit-4 {
    --float-dur: 7s;
    animation-delay: 0.5s;
    align-self: flex-end;
    margin-top: 2.5rem;
}

@keyframes ccFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* World content hidden by default — must not take layout space */
.cc-world-scroll {
    display: none;
}

/* Hide other planets when one is expanded */
.cc-orbit.cc-orbit-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Zoom Overlay (fixed, covers viewport) ── */
.cc-zoom-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}

.cc-zoom-overlay.active {
    pointer-events: all;
}

/* The planet image that zooms from its original position to fill the screen */
.cc-zoom-planet {
    position: fixed;
    z-index: 0;
    /* Starting top/left/width/height are set by JS */
    transition: top 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.cc-zoom-planet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark overlay for text readability — sits on top of planet, below content */
.cc-zoom-dim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(5,8,16,0.45) 0%, rgba(5,8,16,0.75) 100%);
    opacity: 0;
    transition: opacity 0.5s ease 0.5s;
    pointer-events: none;
}

.cc-zoom-overlay.active .cc-zoom-dim {
    opacity: 1;
}

/* Scrollable content area on top of zoomed planet */
.cc-zoom-overlay .cc-world-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    overflow-y: auto;
    max-height: 100vh;
    width: 100%;
    padding: 2rem 0 3rem;
}

.cc-planet-label {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    text-shadow: 0 0 10px rgba(255,255,255,0.15);
}

.cc-orbit:hover .cc-planet-label { opacity: 0.9; }

/* ── Planets (image-based) ────────────── */
.cc-planet {
    width: clamp(130px, 22vw, 200px);
    height: clamp(130px, 22vw, 200px);
    cursor: pointer;
    position: relative;
    transition: transform 0.4s ease, filter 0.4s ease;
    background: none;
}

.cc-planet:hover {
    transform: scale(1.12);
    filter: brightness(1.15);
}

.cc-planet:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 12px;
    border-radius: 50%;
}

/* Planet image */
.cc-planet-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(255,200,100,0.2));
    transition: filter 0.4s ease;
}

.cc-planet:hover .cc-planet-img {
    filter: drop-shadow(0 0 35px rgba(255,200,100,0.4)) drop-shadow(0 0 60px rgba(255,200,100,0.15));
}

/* ── World Content (inside zoom overlay) ─── */

/* Close — just an arrow circle */
.cc-world-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
    transition: opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
    padding: 0;
    font-size: 0;
}

.cc-world-close span { display: none; }

.cc-zoom-overlay.active .cc-world-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.cc-world-close:hover {
    border-color: var(--pink);
    color: var(--white);
    background: rgba(232,74,115,0.15);
    transform: scale(1.1) rotate(0deg);
}

/* ── World Content Container ─────────── */
.cc-world-content {
    max-width: 560px;
    padding: 2rem 1.5rem 1.5rem;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease 0.5s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
    position: relative;
}

/* ══════════════════════════════════════
   CAROUSEL — 3D Ring / Circular Card Stack
   ══════════════════════════════════════ */
.cc-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cc-carousel-track {
    position: relative;
    width: 100%;
    /* Height set dynamically by JS */
    min-height: 150px;
}

.cc-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 65%;
    max-width: 320px;
    box-sizing: border-box;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease;
    will-change: transform, opacity;
    transform-origin: center center;
    /* All positioning done via JS transform */
}

.cc-slide:not(.active) {
    cursor: default;
    user-select: none;
    pointer-events: none;
}

/* Staggered entrance: children animate in when slide becomes active */
.cc-slide.active .cc-patch,
.cc-slide.active .cc-lyric-quote,
.cc-slide.active .cc-lyric-hero,
.cc-slide.active .cc-scrap-inline {
    animation: ccSlideChildIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cc-slide.active > :nth-child(1) { animation-delay: 0.05s; }
.cc-slide.active > :nth-child(2) { animation-delay: 0.15s; }
.cc-slide.active > :nth-child(3) { animation-delay: 0.25s; }

@keyframes ccSlideChildIn {
    from { opacity: 0; transform: translateY(20px) rotate(-1deg); }
    to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Navigation arrows */
.cc-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.cc-carousel-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}

.cc-carousel-btn:hover {
    border-color: rgba(255,255,255,0.25);
    color: #fff;
    background: rgba(255,255,255,0.08);
    transform: scale(1.15);
}

.cc-carousel-btn:active {
    transform: scale(0.9);
}

.cc-carousel-btn:disabled {
    opacity: 0.15;
    cursor: default;
    transform: none;
}

.cc-carousel-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Dots — bouncy, playful */
.cc-carousel-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.cc-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cc-carousel-dot:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.5);
}

.cc-carousel-dot.active {
    background: rgba(255,255,255,0.6);
    transform: scale(1.6);
    box-shadow: 0 0 8px currentColor;
}

/* Color per world — with glow */
.cc-world-story .cc-carousel-dot.active {
    background: var(--teal);
    box-shadow: 0 0 10px rgba(46,196,182,0.5);
}
.cc-world-lyrics .cc-carousel-dot.active {
    background: #ffc864;
    box-shadow: 0 0 10px rgba(255,200,100,0.5);
}

/* Slide counter text */
.cc-slide-counter {
    font-size: 0.45rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.2;
    text-align: center;
    margin-top: 0.5rem;
}

.cc-zoom-overlay.active .cc-world-content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ══════════════════════════════════════
   COLLAGE / PATCHWORK SYSTEM
   ══════════════════════════════════════ */

/* Tilt classes */
.cc-patch-tilt-r  { transform: rotate(1.2deg); }
.cc-patch-tilt-l  { transform: rotate(-1.5deg); }
.cc-patch-tilt-r2 { transform: rotate(0.8deg); }
.cc-patch-tilt-l2 { transform: rotate(-0.6deg); }

/* Sticker — small label, looks taped on */
.cc-patch-sticker {
    display: inline-block;
    font-size: 0.5rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.8rem;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
}

/* Note — text on a semi-transparent "paper" patch */
.cc-patch-note {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 2px;
    padding: 1rem 1.2rem;
    box-shadow: 3px 4px 12px rgba(0,0,0,0.25);
    position: relative;
    overflow: hidden;
}

/* Texture overlay via pseudo-element (set per world) */
.cc-patch-note::after,
.cc-patch-torn::after,
.cc-patch-tape::after,
.cc-patch-final::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 0;
}

/* Ensure text content stays above texture overlay */
.cc-patch-note > *,
.cc-patch-torn > *,
.cc-patch-tape > *,
.cc-patch-final > *,
.cc-lyric-quote > *,
.cc-lyric-hero > * {
    position: relative;
    z-index: 1;
}

/* Torn paper — text block with rough edge feel */
.cc-patch-torn {
    background: rgba(255,255,255,0.03);
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
    border-left: 3px solid;
    position: relative;
    box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* Tape strip on top of torn patches */
.cc-patch-tape {
    background: rgba(255,255,255,0.03);
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
    position: relative;
    box-shadow: 3px 5px 15px rgba(0,0,0,0.2);
    overflow: hidden;
}

.cc-patch-tape::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20%;
    width: 60%;
    height: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
    transform: rotate(-0.5deg);
}

/* Final — big statement patch */
.cc-patch-final {
    margin-top: 1.5rem;
    padding: 1.5rem;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 2px;
    position: relative;
    box-shadow: 0 0 30px rgba(255,255,255,0.03);
    overflow: hidden;
}

.cc-patch-final p {
    font-size: 1rem;
    line-height: 1.8;
    opacity: 0.85;
    font-weight: 500;
    margin: 0;
}

/* ── Decorative Shapes ────────────────── */
.cc-deco {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.cc-deco-circle {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,74,115,0.12) 0%, transparent 70%);
}

.cc-deco-ring {
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.04);
}

.cc-deco-star {
    color: rgba(255,200,100,0.08);
}

.cc-deco-star svg { width: 100%; height: 100%; }

/* Deco positions */
.cc-deco-1 { width: 120px; height: 120px; top: -20px; right: -30px; }
.cc-deco-2 { width: 80px; height: 80px; bottom: 30px; left: -25px; }
.cc-deco-3 { width: 100px; height: 100px; top: 40px; right: -20px; background: radial-gradient(circle, rgba(46,196,182,0.1) 0%, transparent 70%); }
.cc-deco-4 { width: 40px; height: 40px; bottom: 60px; left: -10px; }
.cc-deco-5 { width: 90px; height: 90px; bottom: -20px; right: -20px; }

/* ── Shared Typography ────────────────── */

/* Glitch title effect */
.cc-w-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2rem, 6vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 1.2rem;
    position: relative;
    color: #fff;
}

.cc-glitch {
    animation: ccGlitchText 8s ease-in-out infinite;
}

.cc-glitch::before,
.cc-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cc-glitch::before {
    color: #ff2d6b;
    z-index: -1;
    animation: ccGlitchBefore 8s ease-in-out infinite;
}

.cc-glitch::after {
    color: #2ec4b6;
    z-index: -1;
    animation: ccGlitchAfter 8s ease-in-out infinite;
}

@keyframes ccGlitchText {
    0%, 92%, 100% { transform: none; }
    93% { transform: skewX(2deg); }
    94% { transform: skewX(-1deg); }
    95% { transform: none; }
}

@keyframes ccGlitchBefore {
    0%, 92%, 100% { clip-path: none; transform: none; }
    93% { clip-path: inset(20% 0 50% 0); transform: translateX(-4px); }
    94% { clip-path: inset(60% 0 10% 0); transform: translateX(3px); }
    95% { clip-path: none; transform: none; }
}

@keyframes ccGlitchAfter {
    0%, 92%, 100% { clip-path: none; transform: none; }
    93% { clip-path: inset(50% 0 20% 0); transform: translateX(4px); }
    94% { clip-path: inset(10% 0 60% 0); transform: translateX(-3px); }
    95% { clip-path: none; transform: none; }
}

.cc-w-body {
    font-size: 0.85rem;
    line-height: 1.9;
    opacity: 0.6;
    margin: 0;
}

.cc-w-body-big {
    font-size: 0.92rem;
    opacity: 0.7;
    line-height: 2;
}

.cc-w-whisper {
    font-size: 0.4rem;
    letter-spacing: 0.6em;
    text-transform: uppercase;
    opacity: 0.12;
    margin-top: 2rem;
    text-align: center;
}

/* ══════════════════════════════════════
   DEMO WORLD — Vinyl + Collage
   ══════════════════════════════════════ */
/* ── Per-World Textures ─────────────── */
.cc-world-demo .cc-patch-note::after,
.cc-world-demo .cc-patch-tape::after {
    background-image: url('images/texture-bioluminescent.png');
    opacity: 0.4;
    mix-blend-mode: overlay;
}

.cc-world-story .cc-patch-torn::after,
.cc-world-story .cc-patch-tape::after {
    background-image: url('images/texture-cosmic-moons.png');
    opacity: 0.3;
    mix-blend-mode: overlay;
}

.cc-world-lyrics .cc-patch-torn::after,
.cc-world-lyrics .cc-patch-tape::after {
    background-image: url('images/texture-alien-cracks.png');
    opacity: 0.3;
    mix-blend-mode: overlay;
}

/* ══════════════════════════════════════
   COLLAGE IMAGES — Visible, Opaque Scraps
   ══════════════════════════════════════ */

/* Scrap — a visible piece of image pasted into the collage */
.cc-scrap {
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 4px 5px 18px rgba(0,0,0,0.5);
    pointer-events: none;
}

.cc-scrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating scrap — positioned absolutely */
.cc-scrap-float {
    position: absolute;
    z-index: 0;
}

/* Inline scrap — between content, centered */
.cc-scrap-inline {
    margin: 0.8rem 0;
}

/* Scrap with irregular torn edge mask */
.cc-scrap-torn {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M5,8 L48,2 L95,6 L142,1 L195,5 Q198,48 196,95 L200,142 Q197,170 195,198 L150,195 L100,200 L52,196 L5,200 Q2,155 3,105 L0,55 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M5,8 L48,2 L95,6 L142,1 L195,5 Q198,48 196,95 L200,142 Q197,170 195,198 L150,195 L100,200 L52,196 L5,200 Q2,155 3,105 L0,55 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Scrap with circle crop — for "cut out" elements */
.cc-scrap-circle {
    border-radius: 50%;
}

/* Scrap with soft fade edges */
.cc-scrap-fade {
    -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
}

/* Screen blend — knocks out dark/black backgrounds, only bright parts visible */
.cc-scrap-screen {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

.cc-scrap-screen img {
    mix-blend-mode: screen;
}

/* Cosmic element scraps — Midjourney asteroids, moons, black holes, comets */
.cc-scrap-cosmic {
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.cc-scrap-cosmic img {
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,150,50,0.3));
    transition: filter 0.4s ease;
    /* Soft fade edges so no hard frame visible */
    -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
    mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
}

.cc-scrap-cosmic:hover {
    transform: inherit !important;
    box-shadow: none !important;
}

.cc-scrap-cosmic:hover img {
    filter: drop-shadow(0 0 14px rgba(255,150,50,0.5)) brightness(1.12);
}

/* Slow drift animation for cosmic scraps */
.cc-scrap-float.cc-scrap-cosmic {
    animation:
        ccScrapBob var(--bob-dur, 4s) ease-in-out infinite alternate var(--bob-delay, 0s),
        ccScrapSpin 50s linear infinite;
}

@keyframes ccScrapSpin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

/* Floating deko — visible, NOT transparent */
.cc-deko-float {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.cc-deko-float img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cc-world-demo { text-align: center; }

.cc-world-demo .cc-w-title {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    letter-spacing: 0.02em;
    color: #ff6b9d;
    text-shadow: 0 0 40px rgba(255,107,157,0.3), 0 0 80px rgba(255,107,157,0.1);
}

/* Side-by-side: vinyl + text note */
.cc-collage-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 1rem 0;
}

@media (max-width: 500px) {
    .cc-collage-row { flex-direction: column; gap: 1rem; }
}

.cc-collage-row .cc-vinyl-player {
    flex-shrink: 0;
}

.cc-collage-row .cc-patch-note {
    flex: 1;
    text-align: left;
}

/* Vinyl */
.cc-vinyl-player {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cc-vinyl {
    width: clamp(140px, 40vw, 190px);
    height: clamp(140px, 40vw, 190px);
    border-radius: 50%;
    background: radial-gradient(circle,
        #111 0%, #111 18%,
        #1a1a2e 19%, #0d0d1a 22%,
        #1a1a2e 40%, #0d0d1a 42%,
        #1a1a2e 60%, #0d0d1a 62%,
        #1a1a2e 80%, #111 82%, #0a0a0a 100%
    );
    position: relative;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.03), 0 0 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(0,0,0,0.3);
    transform: rotate(-3deg);
}

.cc-vinyl.spinning {
    animation: ccSpin 2s linear infinite;
}

@keyframes ccSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cc-vinyl-groove {
    position: absolute;
    border-radius: 50%;
    border: 0.5px solid rgba(255,255,255,0.04);
    pointer-events: none;
}

.cc-vinyl-groove { inset: 25%; }
.cc-vinyl-groove-2 { inset: 35%; }
.cc-vinyl-groove-3 { inset: 45%; }

.cc-vinyl-label {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 35%; height: 35%;
    border-radius: 50%;
    background: linear-gradient(135deg, #e84a73, #ff9a56, #e84a73);
    background-size: 200% 200%;
    animation: ccLabelShift 4s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(232,74,115,0.3);
}

.cc-vinyl-label::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #0a0a0a;
    position: absolute;
}

@keyframes ccLabelShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.cc-vinyl-label-text {
    font-size: 0.3rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    max-width: 70%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-vinyl-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.cc-vinyl-play:hover {
    background: rgba(232,74,115,0.4);
    border-color: var(--pink);
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 25px rgba(232,74,115,0.4);
}

.cc-vinyl-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }

.cc-vinyl.spinning .cc-vinyl-play { opacity: 0; pointer-events: none; }

/* Controls */
.cc-vinyl-controls {
    width: 90%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 1rem;
}

.cc-vinyl-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.55rem;
    opacity: 0.25;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.cc-progress {
    width: 100%;
    height: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.06);
    border-radius: 1px;
    outline: none;
    cursor: pointer;
}

.cc-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff6b9d;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255,107,157,0.5);
}

.cc-progress::-moz-range-thumb {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff6b9d; border: none;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255,107,157,0.5);
}

.cc-progress::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; }
.cc-progress::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(255,255,255,0.06); }

/* ══════════════════════════════════════
   STORY WORLD — Collage Chapters
   ══════════════════════════════════════ */
.cc-world-story .cc-w-title {
    color: #2ec4b6;
    text-shadow: 0 0 40px rgba(46,196,182,0.3), 0 0 80px rgba(46,196,182,0.1);
    transform: rotate(-1deg);
}

/* Chapter patches — torn paper with colored edge */
.cc-world-story .cc-patch-torn {
    border-left-color: rgba(46,196,182,0.4);
}

.cc-world-story .cc-patch-tape {
    border-left: 3px solid rgba(255,200,100,0.3);
}

.cc-story-number {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 300;
    opacity: 0.06;
    line-height: 1;
    color: var(--teal);
    display: block;
    margin-bottom: 0.3rem;
}

.cc-story-wave {
    width: 100%;
    margin: 0.5rem 0;
}

.cc-story-wave img {
    width: 100%;
    height: auto;
    display: block;
}

/* Final patch — teal accent */
.cc-world-story .cc-patch-final {
    border-color: rgba(46,196,182,0.15);
    background: rgba(46,196,182,0.03);
    transform: rotate(0.5deg);
}

/* ── Zine-Style Vertical Story Layout ─────── */
.cc-zine {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem 0 2rem;
}

.cc-zine-chapter {
    position: relative;
    padding: 0.3rem 0;
}

.cc-zine-number {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(46,196,182,0.08);
    position: absolute;
    top: -0.6rem;
    left: -0.3rem;
    z-index: 0;
    pointer-events: none;
}

.cc-zine-card {
    position: relative;
    z-index: 1;
    padding: 1rem 1.2rem;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 2px;
}

/* Alternating alignment — odd chapters lean left, even lean right */
.cc-zine-chapter:nth-child(odd) .cc-zine-card {
    margin-right: 15%;
}
.cc-zine-chapter:nth-child(even) .cc-zine-card {
    margin-left: 15%;
}

.cc-zine-divider {
    display: flex;
    justify-content: center;
    padding: 0.3rem 0;
}

/* Finale chapter — centered, bigger, with glow */
.cc-zine-chapter-finale .cc-zine-card {
    margin-left: 5% !important;
    margin-right: 5% !important;
    text-align: center;
    border-color: rgba(46,196,182,0.2);
    box-shadow: 0 0 30px rgba(46,196,182,0.05), inset 0 0 20px rgba(46,196,182,0.02);
}

/* Scroll-reveal animation */
.cc-zine-reveal {
    opacity: 0;
    transform: translateY(25px);
    animation: ccZineReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--zine-delay, 0s);
}

@keyframes ccZineReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chapter hover — subtle lift */
.cc-zine-card:hover {
    border-color: rgba(46,196,182,0.15);
    box-shadow: 0 4px 20px rgba(46,196,182,0.06);
}

.cc-world-story .cc-patch-final p {
    color: var(--teal);
}

/* ══════════════════════════════════════
   UPDATES WORLD — Transmission Collage
   ══════════════════════════════════════ */
.cc-world-updates .cc-w-title {
    color: #b388ff;
    text-shadow: 0 0 40px rgba(179,136,255,0.3), 0 0 80px rgba(179,136,255,0.1);
    transform: rotate(0.8deg);
}

.cc-world-updates .cc-patch-note {
    border-color: rgba(179,136,255,0.1);
}

/* Transmission — tilted retro terminal */
.cc-transmission {
    padding: 1.5rem;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(179,136,255,0.15);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    font-family: monospace;
    margin-top: 1rem;
    box-shadow: 4px 5px 20px rgba(0,0,0,0.3);
}

.cc-transmission::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/texture-synesthetic.png');
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.cc-transmission-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(179,136,255,0.02) 2px, rgba(179,136,255,0.02) 4px);
    pointer-events: none;
    z-index: 1;
}

.cc-transmission-static {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
    animation: ccStatic 0.5s steps(3) infinite;
}

@keyframes ccStatic {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-2px, 1px); }
    66% { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}

.cc-transmission-date {
    font-size: 0.5rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(179,136,255,0.5);
    margin-bottom: 0.6rem;
    position: relative;
    z-index: 2;
}

.cc-transmission-date::before {
    content: '> ';
    color: rgba(179,136,255,0.3);
}

.cc-transmission-msg {
    font-size: 0.8rem;
    line-height: 1.7;
    opacity: 0.6;
    position: relative;
    z-index: 2;
    color: rgba(179,136,255,0.8);
}

/* ══════════════════════════════════════
   LYRICS WORLD — Quote Collage
   ══════════════════════════════════════ */
.cc-world-lyrics .cc-w-title {
    color: #ffc864;
    text-shadow: 0 0 40px rgba(255,200,100,0.3), 0 0 80px rgba(255,200,100,0.1);
    transform: rotate(0.6deg);
}

.cc-world-lyrics .cc-patch-torn {
    border-left-color: rgba(255,200,100,0.3);
}

.cc-world-lyrics .cc-patch-tape {
    border-left: 3px solid rgba(255,107,157,0.2);
}

/* Lyrics quote block */
.cc-lyric-quote {
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
    position: relative;
    overflow: hidden;
}

.cc-lyric-quote blockquote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.9;
    opacity: 0.85;
    font-style: italic;
    letter-spacing: 0.01em;
}

.cc-lyric-quote cite {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.3;
    margin-top: 0.5rem;
    font-style: normal;
}

/* Big hero quote */
.cc-lyric-hero {
    text-align: center;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(255,200,100,0.08);
    background: rgba(255,200,100,0.02);
    position: relative;
    overflow: hidden;
}

.cc-lyric-hero blockquote {
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0;
    opacity: 0.9;
    color: rgba(255,200,100,0.9);
}

.cc-lyric-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('images/texture-dream.png');
    background-size: cover;
    opacity: 0.08;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Scattered quote positions */
.cc-lyric-scatter { position: relative; }

.cc-lyric-left { margin-right: 15%; }
.cc-lyric-right { margin-left: 15%; }
.cc-lyric-wide { margin: 0; }

/* Collage scrap between quotes */
.cc-lyric-edge {
    width: 100%;
    margin: 0.5rem 0;
    pointer-events: none;
}

.cc-lyric-edge img {
    width: 100%;
    height: auto;
    display: block;
}

/* Final patch — golden accent */
.cc-world-lyrics .cc-patch-final {
    border-color: rgba(255,200,100,0.15);
    background: rgba(255,200,100,0.02);
}

.cc-world-lyrics .cc-patch-final p {
    color: rgba(255,200,100,0.85);
}

/* ══════════════════════════════════════
   BUTTERFLY LYRICS — Flying + Wing Tattoo
   ══════════════════════════════════════ */

.cc-butterfly-hint {
    text-align: center;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    opacity: 0.3;
    margin-bottom: 0.5rem;
    animation: ccHintPulse 3s ease-in-out infinite;
}

@keyframes ccHintPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.12; }
}

/* ── Flying butterflies — 3D depth with Midjourney images ── */
.cc-bfly {
    position: absolute;
    cursor: pointer;
    width: var(--bfly-size, 54px);
    height: var(--bfly-size, 54px);
    transition: filter 0.3s ease, opacity 0.3s ease;
    filter: drop-shadow(0 0 6px rgba(255,150,50,0.4)) blur(var(--bfly-blur, 0px));
    opacity: var(--bfly-opacity, 0.85);
    animation:
        ccBflyHint 3s ease-in-out infinite,
        ccBflyFloat var(--fly-dur, 14s) ease-in-out infinite alternate var(--fly-delay, 0s),
        ccBflyFlap var(--flap-dur, 0.3s) ease-in-out infinite alternate;
}

/* Near butterflies — more prominent */
.cc-bfly.cc-bfly-near {
    filter: drop-shadow(0 0 10px rgba(255,150,50,0.5));
}

/* Far butterflies — subtle, dreamy, but still catchable */
.cc-bfly.cc-bfly-far {
    /* all clickable now! */
}

.cc-bfly:hover {
    filter: drop-shadow(0 0 16px rgba(255,180,80,0.7)) brightness(1.2) blur(0px) !important;
    z-index: 50 !important;
    opacity: 1 !important;
}

.cc-bfly .cc-bfly-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

/* ── Dangling lyric thread + tag ── */
.cc-bfly-thread {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: var(--thread-len, 25px);
    background: linear-gradient(
        to bottom,
        rgba(255,200,100,0.4),
        rgba(255,200,100,0.1)
    );
    transform-origin: top center;
    animation: ccThreadSway var(--thread-sway, 3s) ease-in-out infinite alternate;
}

.cc-bfly-tag {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Caveat', cursive;
    font-size: clamp(0.5rem, 1.2vw, 0.7rem);
    color: rgba(255,200,100,0.6);
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* Far butterflies: hide the tag (too small to read) */
.cc-bfly-far .cc-bfly-thread { display: none; }

@keyframes ccThreadSway {
    0%   { transform: rotate(-4deg); }
    100% { transform: rotate(4deg); }
}

/* ── "Caught!" animation — butterfly wiggles then freezes ── */
.cc-bfly.cc-bfly-caught {
    animation: ccBflyCaught 0.35s ease both !important;
    pointer-events: none;
}

@keyframes ccBflyCaught {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.3) rotate(-12deg); }
    50%  { transform: scale(1.2) rotate(8deg); }
    75%  { transform: scale(1.1) rotate(-4deg); }
    100% { transform: scale(0.3) rotate(0deg); opacity: 0; }
}

/* ── Net swoosh effect — expanding circle at catch point ── */
.cc-net-swoosh {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,200,100,0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    animation: ccNetSwoosh 0.5s ease-out both;
}

@keyframes ccNetSwoosh {
    0%   { width: 10px; height: 10px; opacity: 1; border-width: 2px; }
    100% { width: 80px; height: 80px; opacity: 0; border-width: 1px; }
}

/* Gentle pulse — fade in/out */
@keyframes ccBflyHint {
    0%, 100% { opacity: var(--bfly-opacity, 0.7); }
    50% { opacity: 1; }
}

/* Wing flap — subtle scaleX squeeze for 3D illusion */
@keyframes ccBflyFlap {
    0%   { transform: scaleX(1); }
    100% { transform: scaleX(0.75); }
}

/* Flight path — gentle drift across the area */
@keyframes ccBflyFloat {
    0%   { translate: 0 0; rotate: var(--r0, 0deg); }
    20%  { translate: var(--dx1, 25px) var(--dy1, -20px); rotate: var(--r1, 8deg); }
    40%  { translate: var(--dx2, -18px) var(--dy2, 12px); rotate: var(--r2, -5deg); }
    60%  { translate: var(--dx3, 30px) var(--dy3, -25px); rotate: var(--r3, 6deg); }
    80%  { translate: var(--dx4, -22px) var(--dy4, 18px); rotate: var(--r4, -8deg); }
    100% { translate: var(--dx5, 15px) var(--dy5, -10px); rotate: var(--r5, 3deg); }
}

/* ── Zoom Overlay — zooms from clicked butterfly position ── */
.cc-bfly-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    justify-content: center;
    align-items: center;
}

.cc-bfly-overlay.active {
    display: flex;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.85) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: ccOverlayIn 0.5s ease both;
    cursor: pointer;
}

@keyframes ccOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* The zoomed butterfly + lyric panel — vertical layout */
.cc-bfly-zoom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
    width: 80vw;
    animation: ccBflyZoomIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) both;
    transform-origin: center center;
}

@keyframes ccBflyZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.1) translate(
            calc(var(--bfly-start-x, 50vw) - 50vw),
            calc(var(--bfly-start-y, 50vh) - 50vh)
        );
    }
    60% {
        opacity: 1;
        transform: scale(1.05) translate(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translate(0, 0);
    }
}

/* Large butterfly image in overlay — radial mask hides rectangular PNG background */
.cc-bfly-zoom > img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 35px rgba(255,150,50,0.5));
    animation: ccBflyGlow 3s ease-in-out infinite alternate;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 35%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 80% at center, black 35%, transparent 75%);
}

@keyframes ccBflyGlow {
    0%   { filter: drop-shadow(0 0 25px rgba(255,150,50,0.4)); }
    100% { filter: drop-shadow(0 0 45px rgba(255,120,40,0.6)); }
}

/* ── Lyric Panel — below butterfly, soft fade edges ── */
.cc-bfly-lyric-panel {
    position: relative;
    margin-top: 8px;
    padding: 1.2rem 2rem;
    text-align: center;
    max-width: 380px;
    /* Soft fade-out in all directions — no visible border/edge */
    -webkit-mask-image: radial-gradient(ellipse 85% 75% at center, black 20%, transparent 85%);
    mask-image: radial-gradient(ellipse 85% 75% at center, black 20%, transparent 85%);
    animation: ccLyricPanelIn 0.6s ease both;
    animation-delay: 0.4s;
}

.cc-bfly-lyric-panel::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 50%;
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, rgba(255,200,100,0.05), rgba(255,200,100,0.15));
}

@keyframes ccLyricPanelIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cc-bfly-lyric-panel blockquote,
.cc-bfly-lyric-panel p {
    margin: 0;
    font-style: italic;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
    font-family: 'Caveat', cursive;
    font-size: clamp(0.95rem, 3.5vw, 1.35rem);
    line-height: 1.55;
    letter-spacing: 0.02em;
}

.cc-bfly-lyric-panel cite {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 0.6rem;
    font-style: normal;
    color: rgba(255,200,100,0.7);
}

/* Close button on overlay */
.cc-bfly-close {
    position: absolute;
    top: -35px;
    right: -5px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    z-index: 10;
}

.cc-bfly-close:hover {
    color: rgba(255,200,100,0.9);
    transform: scale(1.2);
}

/* ══════════════════════════════════════
   PLAYFUL INTERACTIONS & ANIMATIONS
   ══════════════════════════════════════ */

/* Scraps wiggle on hover/touch */
.cc-scrap {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    pointer-events: auto;
    cursor: default;
}

.cc-scrap:hover {
    transform: rotate(0deg) scale(1.15) !important;
    box-shadow: 6px 8px 25px rgba(0,0,0,0.6), 0 0 15px rgba(255,200,100,0.1);
    z-index: 10;
}

/* Floating scraps bob gently */
.cc-scrap-float {
    animation: ccBob var(--bob-dur, 4s) ease-in-out var(--bob-delay, 0s) infinite;
}

@keyframes ccBob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

/* Patches — subtle float on active slide */
.cc-slide.active .cc-patch {
    transition: box-shadow 0.5s ease;
}

.cc-slide.active .cc-patch:hover {
    box-shadow: 5px 6px 25px rgba(0,0,0,0.35), 0 0 20px rgba(255,255,255,0.03);
}

/* ── Typewriter cursor ─────────────── */
.cc-typewriter::after {
    content: '|';
    animation: ccBlink 0.7s step-end infinite;
    color: rgba(255,200,100,0.6);
    margin-left: 2px;
}

.cc-typewriter.done::after {
    display: none;
}

@keyframes ccBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ── Mixed Typography for Lyrics ───── */
.cc-lyric-big {
    font-size: 1.4rem !important;
    line-height: 1.5 !important;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.cc-lyric-whisper {
    font-size: 0.75rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    opacity: 0.5 !important;
}

.cc-lyric-handwritten {
    font-family: 'Caveat', cursive !important;
    font-size: 1.3rem !important;
    transform: rotate(-1.5deg);
    letter-spacing: 0.02em;
}

.cc-lyric-accent {
    color: #ff6b9d;
    font-weight: 600;
}

.cc-lyric-glow {
    text-shadow: 0 0 20px currentColor;
}

/* ── Particle Burst (slide change) ─── */
.cc-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;
    animation: ccParticleBurst 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes ccParticleBurst {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--px, 40px), var(--py, -30px)) scale(0); }
}

/* ── Pulse ring on planet hover ────── */
.cc-planet::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cc-planet:hover::after {
    opacity: 1;
    transform: scale(1.15);
    animation: ccPulseRing 1.5s ease-in-out infinite;
}

@keyframes ccPulseRing {
    0%, 100% { transform: scale(1.15); opacity: 0.8; }
    50% { transform: scale(1.25); opacity: 0.3; }
}

/* ── Story number — dramatic entrance (zine) ── */
.cc-zine-number {
    animation: ccNumberDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ccNumberDrop {
    from { opacity: 0; transform: translateY(-30px) scale(1.5); }
    to   { opacity: 0.08; transform: translateY(0) scale(1); }
}

/* ── Lyrics hero quote shimmer ─────── */
.cc-lyric-hero blockquote {
    background: linear-gradient(90deg, rgba(255,200,100,0.9) 0%, rgba(255,107,157,0.9) 50%, rgba(255,200,100,0.9) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccShimmer 6s ease-in-out infinite;
}

@keyframes ccShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ── Inline scrap — tilt on slide change ── */
.cc-slide.active .cc-scrap-inline {
    animation: ccScrapFlip 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.3s;
}

@keyframes ccScrapFlip {
    from { opacity: 0; transform: rotate(var(--scrap-tilt, 3deg)) scaleY(0.3); }
    to   { opacity: 1; transform: rotate(var(--scrap-tilt, 1.5deg)) scaleY(1); }
}

/* ── Patch sticker — pop in ────────── */
.cc-patch-sticker {
    animation: ccStickerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.2s;
}

@keyframes ccStickerPop {
    from { opacity: 0; transform: scale(0.5) rotate(-5deg); }
    to   { opacity: 1; transform: scale(1) rotate(var(--tilt, 1.2deg)); }
}

/* ── Footer — Cosmic Portal ─────────────────────────── */
.cc-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 2rem;
}

.cc-footer-portal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem 2rem;
    background: transparent !important;
    border-top: none !important;
}

.cc-portal-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.cc-portal-blackhole {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(139,92,246,0.4));
    transition: filter 0.5s ease;
    animation: ccPortalSpin 20s linear infinite, ccPortalFloat 4s ease-in-out infinite;
}

.cc-portal-link:hover .cc-portal-blackhole {
    filter: drop-shadow(0 0 30px rgba(139,92,246,0.7)) brightness(1.2);
}

@keyframes ccPortalSpin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

@keyframes ccPortalFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

.cc-portal-label {
    font-family: 'Caveat', cursive;
    font-size: 0.85rem;
    color: rgba(255,200,100,0.35);
    letter-spacing: 0.15em;
    margin-top: 0.8rem;
    transition: color 0.3s ease;
}

.cc-footer-portal:hover .cc-portal-label {
    color: rgba(255,200,100,0.7);
}

.cc-portal-copy {
    font-size: 0.5rem;
    opacity: 0.15;
    margin-top: 1.5rem;
    letter-spacing: 0.1em;
}

/* ══════════════════════════════════════
   COSMIC ENHANCEMENTS
   ══════════════════════════════════════ */

/* ── Comet Cursor Trail ── */
.cc-comet-dot {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,100,0.8), rgba(255,150,50,0.3));
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    filter: blur(0.5px);
}

/* ── Dynamic Shooting Stars ── */
.cc-shooting-star-dynamic {
    position: fixed;
    left: -200px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 30%, rgba(255,200,100,0.5) 60%, transparent);
    border-radius: 1px;
    pointer-events: none;
    z-index: 0;
    animation: ccShootDynamic 1.5s ease-out forwards;
}

@keyframes ccShootDynamic {
    0%   { left: -10%; opacity: 0; }
    10%  { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

/* ── Nebula Color Shift ── */
.cc-nebula {
    animation: ccNebulaShift 30s ease-in-out infinite alternate;
}

@keyframes ccNebulaShift {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    33%  { filter: hue-rotate(15deg) brightness(1.05); }
    66%  { filter: hue-rotate(-10deg) brightness(0.95); }
    100% { filter: hue-rotate(8deg) brightness(1.02); }
}

/* ── Enhanced Planet Hover — double ring + glow halo ── */
.cc-planet::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px dashed rgba(255,200,100,0.08);
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: ccOrbitSpin 20s linear infinite;
    pointer-events: none;
}

.cc-planet:hover::before {
    opacity: 1;
    border-color: rgba(255,200,100,0.2);
}

@keyframes ccOrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Black Hole Portal — vortex effect ── */
.cc-blackhole-vortex {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    animation: ccVortexGrow 1.2s ease-out forwards;
    background: radial-gradient(circle, rgba(0,0,0,0.9) 0%, rgba(100,50,200,0.4) 40%, transparent 70%);
    box-shadow: 0 0 40px 10px rgba(100,50,200,0.3), inset 0 0 20px rgba(0,0,0,0.8);
}

@keyframes ccVortexGrow {
    0%   { width: 10px; height: 10px; opacity: 1; }
    50%  { width: 200px; height: 200px; opacity: 0.9; }
    100% { width: 300px; height: 300px; opacity: 0; }
}

/* Screen "suck" effect when black hole is clicked */
.cc-sog-active {
    animation: ccSogPull 1.2s ease-out;
}

@keyframes ccSogPull {
    0%   { filter: none; }
    30%  { filter: blur(1px) brightness(0.85); }
    60%  { filter: blur(0.5px) brightness(0.95); }
    100% { filter: none; }
}

/* ── Secret 5th Planet — below the solar system ── */
.cc-orbit-secret {
    --float-dur: 8s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    position: relative;
    z-index: 1;
    padding: 2rem 0 1rem;
    opacity: 0;
    transform: scale(0) translateY(40px);
    transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    animation: ccFloat var(--float-dur, 8s) ease-in-out infinite;
}

.cc-orbit-secret-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.cc-planet-secret {
    animation: ccSecretGlow 3s ease-in-out infinite alternate;
}

@keyframes ccSecretGlow {
    0%   { filter: drop-shadow(0 0 15px rgba(255,180,80,0.5)) brightness(1); }
    100% { filter: drop-shadow(0 0 35px rgba(255,150,50,0.8)) brightness(1.15); }
}

.cc-orbit-secret .cc-planet-label {
    color: rgba(255,200,100,0.7);
    font-style: italic;
    animation: ccSecretLabel 2s ease-in-out infinite alternate;
}

@keyframes ccSecretLabel {
    0%   { opacity: 0.4; letter-spacing: 0.15em; }
    100% { opacity: 0.8; letter-spacing: 0.3em; }
}

.cc-world-secret .cc-w-title {
    color: rgba(255,200,100,0.9);
}

/* BTS photo gallery inside secret world */
.cc-bts-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
    padding: 1rem 0;
}

.cc-bts-gallery img {
    width: 100%;
    border-radius: 6px;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.cc-bts-gallery img:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* ── Guestbook World ─────────────── */
.cc-guestbook {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.cc-guestbook-entry {
    background: rgba(255,255,255,0.03);
    border-left: 2px solid rgba(255,200,100,0.15);
    padding: 0.8rem 1rem;
    border-radius: 0 6px 6px 0;
}

.cc-guestbook-entry .cc-gb-name {
    font-family: 'Caveat', cursive;
    color: rgba(255,200,100,0.7);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

.cc-guestbook-entry .cc-gb-msg {
    font-size: 0.8rem;
    opacity: 0.7;
    line-height: 1.5;
}

.cc-guestbook-entry .cc-gb-date {
    font-size: 0.5rem;
    opacity: 0.3;
    margin-top: 0.4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cc-guestbook-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

.cc-guestbook-form input,
.cc-guestbook-form textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,200,100,0.1);
    border-radius: 6px;
    color: var(--white);
    padding: 0.6rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.cc-guestbook-form input:focus,
.cc-guestbook-form textarea:focus {
    outline: none;
    border-color: rgba(255,200,100,0.35);
}

.cc-guestbook-form button {
    align-self: flex-start;
    background: rgba(255,200,100,0.1);
    border: 1px solid rgba(255,200,100,0.2);
    color: rgba(255,200,100,0.8);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Caveat', cursive;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
}

.cc-guestbook-form button:hover {
    background: rgba(255,200,100,0.2);
    border-color: rgba(255,200,100,0.4);
}

/* Honeypot — invisible to users */
.cc-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── Thank You Page ─────────────────── */
.ty-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.ty-logo { margin-bottom: 2rem; }
.ty-logo img { height: 28px; opacity: 0.7; transition: opacity 0.3s ease; }
.ty-logo img:hover { opacity: 1; }

.ty-content {
    max-width: 500px;
    animation: ccFadeUp 1s ease-out;
}

.ty-label {
    font-size: 0.55rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.35;
    margin-bottom: 1.5rem;
}

.ty-content h1 {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    letter-spacing: 0.06em;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.ty-message {
    font-size: 0.9rem;
    line-height: 1.8;
    opacity: 0.5;
    margin-bottom: 2.5rem;
}

.ty-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.5rem;
    transition: all 0.3s ease;
}

.ty-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 900px) {
    .music-player { flex-direction: column; align-items: center; gap: 2rem; }
    .album-cover { width: 260px; }
    .track-list { width: 100%; max-width: 400px; }
}

@media (max-width: 700px) {
    .waveform-container { display: none; }
    .time-display, .time-remaining { display: none; }
}

@media (max-width: 640px) {
    .hero-newsletter {
        padding: 22px 20px 18px;
    }
    .hero-form-row {
        flex-direction: column;
        gap: 12px;
    }
    .hero-form-row input[type="email"] {
        border-radius: 6px;
    }
    .hero-form-row button {
        border-radius: 6px;
    }
    .popup-form {
        flex-direction: column;
        gap: 12px;
    }
    .popup-form input[type="email"] {
        border-radius: 6px;
    }
    .popup-form button {
        border-radius: 6px;
    }
}

@media (max-width: 600px) {
    .cc-solar { padding: 1rem 1rem 4rem; }
    .cc-orbit-2 { margin-top: 2rem; }
    .cc-hero { padding: 3rem 1.5rem 2rem; }
    header { padding: 0.7rem 1rem; }
    .logo img { height: 20px; }
    .about-container { padding: 2rem 1.5rem; }
    .press-container { padding: 2rem 1.5rem; }
    .contact-box { padding: 2rem 1.5rem; }
    .contact-form .form-row { flex-direction: column; }
    .nav-overlay a { font-size: 1.4rem; }
    .cookie-banner { bottom: 90px; left: 1rem; right: 1rem; width: auto; max-width: none; transform: none; flex-wrap: wrap; gap: 0.5rem; padding: 0.8rem 1rem; }
    .cookie-banner p { flex-basis: 100%; font-size: 0.65rem; }
    .cookie-btn-accept, .cookie-btn-decline { flex: 1; text-align: center; }
    .player-bar { padding: 0.2rem 0.5rem; height: 80px; }
    .player-bar-cover { width: 42px; height: 42px; }
    .player-bar-info h4 { font-size: 0.75rem; }
    .time-btn { width: 26px; height: 26px; font-size: 0.5rem; }
    .player-bar-btn svg { width: 20px; height: 20px; }
    .popup-content { padding: 2rem 1.5rem; }
}

@media (max-width: 450px) {
    .player-bar-info { display: none; }
    .time-btn { display: none; }
}


/* ==============================================================
   v4 — Consolidated Überau release additions
   Replaces all v3.1 → v3.13 patches that were appended over time.
   Order is intentional (cascade matters):
     1. Hide legacy DOM blocks that are no longer rendered
     2. Hero: BG vignette, glow taming, cover wrapper
     3. Hero release card + streaming buttons
     4. Transmissions section (EP headline + lyric + cover-flow)
     5. Cosmic Club portal (black hole, video, login/signup form)
   ============================================================== */


/* === 1. Hide legacy elements no longer in the public layout === */
.music-player,
.music-player[hidden],
.player-bar,
.player-bar[hidden],
.music-section,
.music-locked,
.top-banner,
body.has-top-banner,
.transmissions-label,
.transmissions-photo,
.hero-newsletter,
.cct-hint,
.release-buttons,
.cct-join { display: none !important; }


/* === 2. Hero === */

/* Background: cover-flow-friendly vignette so the pink BG sun
   doesn't clash with the orange/blue cover artwork. */
.hero.hero-release-bg {
    background:
        radial-gradient(ellipse 38% 32% at 50% 50%, rgba(8, 11, 20, 0.96) 0%, rgba(8, 11, 20, 0.85) 40%, rgba(8, 11, 20, 0.0) 70%),
        radial-gradient(ellipse 65% 55% at 50% 40%, rgba(28, 50, 90, 0.0) 0%, rgba(8, 11, 20, 0.65) 70%, rgba(8, 11, 20, 0.95) 100%),
        linear-gradient(180deg, rgba(8, 11, 20, 0.55) 0%, rgba(8, 11, 20, 0.78) 60%, rgba(8, 11, 20, 0.95) 100%),
        url('background.jpg') center 30%/cover no-repeat;
}

/* Bandname glow tamed to ~50% intensity */
.hero-content h1 {
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.4),
        0 0 22px rgba(255, 255, 255, 0.18),
        0 0 50px rgba(46, 196, 182, 0.22),
        0 0 100px rgba(46, 196, 182, 0.10),
        0 2px 14px rgba(0, 0, 0, 0.45) !important;
    animation: heroRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               heroGlowV4 5s ease-in-out 2s infinite !important;
}

@keyframes heroGlowV4 {
    0%, 100% {
        text-shadow:
            0 0 8px rgba(255, 255, 255, 0.4),
            0 0 22px rgba(255, 255, 255, 0.18),
            0 0 50px rgba(46, 196, 182, 0.22),
            0 0 100px rgba(46, 196, 182, 0.10),
            0 2px 14px rgba(0, 0, 0, 0.45);
    }
    50% {
        text-shadow:
            0 0 12px rgba(255, 255, 255, 0.5),
            0 0 30px rgba(255, 255, 255, 0.22),
            0 0 60px rgba(46, 196, 182, 0.3),
            0 0 130px rgba(46, 196, 182, 0.16),
            0 2px 14px rgba(0, 0, 0, 0.45);
    }
}


/* === 3. Hero release card === */

.hero-release {
    width: 100%;
    max-width: 480px;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.5s;
}

.release-label {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    margin: 0 0 18px 0;
    padding: 4px 14px;
    border: 1px solid rgba(46, 196, 182, 0.5);
    border-radius: 999px;
    background: rgba(46, 196, 182, 0.08);
}

.release-cover-wrap {
    width: 100%;
    max-width: 340px;
    margin-bottom: 22px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 60px rgba(201, 122, 58, 0.22),
        0 0 120px rgba(28, 74, 110, 0.28);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.release-cover-wrap::before {
    content: "";
    position: absolute;
    inset: -32px;
    background: radial-gradient(circle at 30% 50%, rgba(201, 122, 58, 0.30) 0%, transparent 55%),
                radial-gradient(circle at 70% 50%, rgba(28, 74, 110, 0.35) 0%, transparent 55%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.9;
}

.release-cover-wrap:hover { transform: translateY(-4px) scale(1.02); }

.release-cover-wrap picture,
.release-cover-wrap picture img,
.release-cover {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.release-title {
    font-family: var(--title-font);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 4px 0;
    letter-spacing: 0.02em;
}

.release-artist {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 10px 0;
    letter-spacing: 0.04em;
}

.release-context {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 22px 0;
    line-height: 1.5;
    max-width: 360px;
    letter-spacing: 0.02em;
}

/* Primary Spotify CTA */
.release-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
    padding: 14px 28px;
    background: #1db954;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 10px 28px rgba(29, 185, 84, 0.35);
    margin: 4px 0 18px;
}

.release-cta-primary:hover {
    background: #1ed760;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(29, 185, 84, 0.5);
}

.release-cta-icon { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
.release-cta-text { white-space: nowrap; }

/* Secondary platforms */
.release-alt-platforms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 6px;
}

.release-platform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.25s ease;
}

.release-platform svg { width: 18px; height: 18px; fill: currentColor; }

.release-platform:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    transform: translateY(-2px);
}

.release-platform-mx3 {
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.release-mx3-label {
    font-size: 0.85rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: currentColor;
}

@media (max-width: 480px) {
    .release-cta-primary { padding: 13px 22px; font-size: 0.88rem; }
    .release-alt-platforms { gap: 12px; }
    .release-platform { width: 38px; height: 38px; }
    .release-cover-wrap { max-width: 280px; }
    .release-context { font-size: 0.75rem; }
}


/* === 4. Transmissions section === */

.transmissions-section {
    padding: 5rem 2rem;
    position: relative;
}

.transmissions-wrap {
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
}

.transmissions-quote-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: 1.4rem 1.6rem;
    background: linear-gradient(180deg, rgba(8, 11, 20, 0.55) 0%, rgba(8, 11, 20, 0.45) 100%);
    border-radius: 8px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.transmissions-ep-headline {
    font-family: var(--title-font);
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    letter-spacing: 0.03em;
    margin: 0 0 0.4rem 0;
    padding-left: 1.4rem;
    position: relative;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.transmissions-ep-headline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    bottom: 0.4em;
    width: 2px;
    background: linear-gradient(180deg, var(--teal) 0%, rgba(46, 196, 182, 0.15) 100%);
}

.transmissions-ep-meta {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 1.6rem 0;
    padding-left: 1.4rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.transmissions-quote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0 0 0.4rem 0;
    padding-left: 1.4rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.transmissions-cite {
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 1.4rem 0;
    padding-left: 1.4rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.transmissions-cite::before {
    content: "— ";
    color: rgba(255, 255, 255, 0.35);
}

.transmissions-hint {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 0;
    padding-left: 1.4rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

@media (max-width: 720px) {
    .transmissions-section { padding: 3.5rem 1.5rem; }
    .transmissions-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .transmissions-quote-wrap { padding: 1.2rem; }
    .transmissions-ep-headline { padding-left: 1rem; }
    .transmissions-ep-meta,
    .transmissions-quote,
    .transmissions-cite,
    .transmissions-hint { padding-left: 1rem; }
}


/* === 4b. Cover-flow studio carousel === */

.transmissions-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: visible;
    perspective: 1400px;
}

.tx-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 78%;
    height: 100%;
    margin-left: -39%;
    overflow: hidden;
    opacity: 0;
    transform: translateX(0) scale(0.5);
    transition:
        transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
        filter 0.85s ease;
    will-change: transform, opacity, filter;
    pointer-events: none;
}

.tx-slide picture,
.tx-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    -webkit-mask-image: radial-gradient(ellipse 92% 96% at center, black 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 92% 96% at center, black 60%, transparent 100%);
}

.tx-slide.tx-hidden {
    opacity: 0;
    transform: translateX(0) scale(0.45);
    filter: blur(8px) saturate(0.8);
    z-index: 0;
}

.tx-slide.tx-active {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 32px rgba(46, 196, 182, 0.16));
    z-index: 5;
    pointer-events: auto;
}

.tx-slide.tx-next {
    opacity: 0.55;
    transform: translateX(58%) scale(0.72);
    filter: blur(6px) saturate(0.85);
    z-index: 3;
}

.tx-slide.tx-prev {
    opacity: 0.55;
    transform: translateX(-58%) scale(0.72);
    filter: blur(6px) saturate(0.85);
    z-index: 3;
}

.tx-slide.tx-next-2 {
    opacity: 0.25;
    transform: translateX(95%) scale(0.5);
    filter: blur(10px) saturate(0.7);
    z-index: 2;
}

.tx-slide.tx-prev-2 {
    opacity: 0.25;
    transform: translateX(-95%) scale(0.5);
    filter: blur(10px) saturate(0.7);
    z-index: 2;
}

@media (max-width: 720px) {
    .tx-slide { width: 82%; margin-left: -41%; }
    .tx-slide.tx-next { transform: translateX(45%) scale(0.7); }
    .tx-slide.tx-prev { transform: translateX(-45%) scale(0.7); }
    .tx-slide.tx-next-2,
    .tx-slide.tx-prev-2 { opacity: 0; }
}

/* Carousel arrows */
.tx-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(8, 11, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.tx-nav svg { width: 18px; height: 18px; }
.tx-nav-prev { left: 2%; }
.tx-nav-next { right: 2%; }

.transmissions-carousel:hover .tx-nav,
.tx-nav:focus-visible { opacity: 1; }

.tx-nav:hover {
    background: rgba(46, 196, 182, 0.85);
    color: #0a0a14;
    transform: translateY(-50%) scale(1.08);
}

@media (hover: none) { .tx-nav { opacity: 0.7; } }

@media (max-width: 600px) {
    .tx-nav { width: 36px; height: 36px; }
    .tx-nav svg { width: 16px; height: 16px; }
    .tx-nav-prev { left: 4px; }
    .tx-nav-next { right: 4px; }
}


/* === 5. Cosmic Club portal === */

.cct-section { padding-bottom: 4rem; }

.cct-portal-wrap {
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    aspect-ratio: 848 / 464;
    overflow: visible;
}

.cct-portal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    overflow: visible;
}

/* Black hole — fixed size locked via ID selector */
img#cctBlackhole {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 380px !important;
    max-width: 55% !important;
    height: auto !important;
    margin: 0 !important;
    filter: drop-shadow(0 0 36px rgba(120, 60, 200, 0.55)) !important;
    animation: cctFloat 5s ease-in-out infinite;
    transition: opacity 0.6s ease;
}

img#cctBlackhole.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    animation: none !important;
}

@media (max-width: 760px) {
    img#cctBlackhole { width: 240px !important; max-width: 60% !important; }
}

/* Video fills the wrap */
.cct-portal-wrap .cct-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    z-index: 1;
    -webkit-mask-image: radial-gradient(ellipse 88% 90% at center, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 88% 90% at center, black 55%, transparent 100%);
}

.cct-portal-wrap .cct-video.active { opacity: 1; visibility: visible; }

/* "Enter the Cosmic Club" overlay, lower third */
.cct-portal-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    padding: 0 1rem 8% 1rem;
    z-index: 3;
    text-align: center;
}

.cct-portal-overlay-title {
    font-family: var(--title-font);
    font-size: clamp(1.1rem, 2.8vw, 1.9rem);
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #fff;
    text-shadow:
        0 0 16px rgba(0, 0, 0, 0.85),
        0 0 30px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(46, 196, 182, 0.3);
    margin: 0;
    transition: opacity 0.5s ease;
}

.cct-portal-overlay-sub {
    font-family: var(--font-body);
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0.8rem 0 0 0;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
    transition: opacity 0.5s ease;
}

.cct-portal-overlay.faded .cct-portal-overlay-title,
.cct-portal-overlay.faded .cct-portal-overlay-sub { opacity: 0; }


/* === Login / Signup form (now a sibling block below the wrap) === */

#cctPaths,
.cct-wrapper > .cct-paths {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 1040px;
    margin: 0.6rem auto 0;
    height: auto;
    background: rgba(8, 11, 20, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem 1.3rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

#cctPaths.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cct-path {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.95rem 1rem;
}

.cct-path-label {
    font-family: var(--font-heading);
    font-size: 0.62rem;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    margin: 0 0 0.25rem 0;
}

.cct-path-title {
    font-family: var(--title-font);
    font-size: 0.98rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0.3rem 0;
    letter-spacing: 0.04em;
}

.cct-path-text {
    font-family: var(--font-body);
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0 0 0.65rem 0;
}

/* Code input form */
.cct-code-form {
    display: flex;
    gap: 0;
    width: 100%;
}

.cct-code-form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px 0 0 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    outline: none;
    text-transform: uppercase;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cct-code-form input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
    text-transform: none;
    letter-spacing: 0.02em;
}

.cct-code-form input[type="text"]:focus {
    border-color: rgba(46, 196, 182, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.cct-code-form input[type="text"].error {
    border-color: rgba(232, 74, 115, 0.7);
    background: rgba(232, 74, 115, 0.08);
    animation: cctShake 0.35s ease;
}

@keyframes cctShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.cct-code-form button {
    padding: 9px 14px;
    background: rgba(46, 196, 182, 0.85);
    color: #080B14;
    border: none;
    border-radius: 0 6px 6px 0;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cct-code-form button:hover { background: var(--teal); }

.cct-code-error {
    display: none;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: rgba(232, 74, 115, 0.95);
    line-height: 1.4;
}

.cct-code-error.active { display: block; }

/* Signup form */
.cct-new-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cct-new-form input {
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.cct-new-form input::placeholder { color: rgba(255, 255, 255, 0.35); }

.cct-new-form input:focus {
    border-color: rgba(46, 196, 182, 0.6);
    background: rgba(255, 255, 255, 0.1);
}

.cct-new-form button {
    margin-top: 4px;
    padding: 10px 14px;
    background: var(--teal);
    color: #080B14;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cct-new-form button:hover { opacity: 0.9; transform: translateY(-1px); }

.cct-newsletter-meta {
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.04em;
    line-height: 1.5;
    margin: 0.45rem 0 0 0;
    text-align: center;
}

.cct-new-success {
    display: none;
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: var(--teal);
    line-height: 1.5;
}

.cct-new-success.active { display: block; }

.cct-iframe {
    width: 0;
    height: 0;
    border: 0;
    position: absolute;
    visibility: hidden;
}

@media (max-width: 720px) {
    #cctPaths,
    .cct-wrapper > .cct-paths {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        padding: 0.9rem 1rem 1.05rem;
    }
    .cct-path { padding: 0.75rem 0.85rem; }
    .cct-section { padding-bottom: 3rem; }
}


/* ==============================================================
   v4.1 — Cosmic Club demo playlist tracklist
   ============================================================== */
.cc-demo-tracklist {
    list-style: none;
    margin: 0.8rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cc-demo-track {
    display: grid;
    grid-template-columns: 32px 1fr 18px;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.75);
}

.cc-demo-track:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateX(2px);
}

.cc-demo-track.active {
    background: rgba(46, 196, 182, 0.14);
    border-color: rgba(46, 196, 182, 0.4);
    color: #fff;
}

.cc-demo-track-num {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.4);
}

.cc-demo-track.active .cc-demo-track-num {
    color: var(--teal);
}

.cc-demo-track-title {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-demo-track-icon {
    opacity: 0;
    transition: opacity 0.2s ease;
    color: rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-demo-track:hover .cc-demo-track-icon,
.cc-demo-track.active .cc-demo-track-icon {
    opacity: 1;
}

.cc-demo-track.active .cc-demo-track-icon {
    color: var(--teal);
}


/* ==============================================================
   v4.2 — Black hole video: brute-force center positioning
   (ID selector beats the original .cct-video rule that's still
   in the file with `width: min(85vw, 560px); left: 50%; transform: translate(-50%, -50%)`)
   ============================================================== */
video#cctVideo {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block !important;
}

/* =============================================
   v3.3 — Welcome Page (post email confirmation)
   Adds prominent access-code block + CTA button
   to the existing thank-you skeleton.
   ============================================= */

.wc-content {
    max-width: 560px;
}

/* Code block — the hero element of this page */
.wc-code-block {
    margin: 2rem auto 2.5rem;
    padding: 1.6rem 1.2rem 1.7rem;
    max-width: 360px;
    border: 1px solid rgba(46, 196, 182, 0.32);
    border-radius: 4px;
    background:
        radial-gradient(ellipse at center, rgba(46, 196, 182, 0.10) 0%, rgba(46, 196, 182, 0.02) 70%),
        rgba(8, 11, 20, 0.45);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 40px rgba(46, 196, 182, 0.10),
        0 18px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.wc-code-block::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0%, rgba(46, 196, 182, 0.22) 50%, transparent 100%);
    height: 1px;
    top: 0;
    animation: wcShimmer 4s ease-in-out infinite;
}

@keyframes wcShimmer {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

.wc-code-label {
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(46, 196, 182, 0.75);
    margin: 0 0 0.7rem 0;
}

.wc-code {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.32em;
    color: #fff;
    margin: 0;
    text-shadow:
        0 0 12px rgba(46, 196, 182, 0.55),
        0 0 28px rgba(46, 196, 182, 0.25);
    user-select: all;
    -webkit-user-select: all;
}

/* CTA button — gets brand teal, more weight than the default ty-btn */
.wc-cta-btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0b1224;
    background: linear-gradient(135deg, var(--teal) 0%, #4dd9c5 100%);
    text-decoration: none;
    padding: 0.95rem 1.8rem;
    border-radius: 2px;
    border: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    box-shadow:
        0 8px 28px rgba(46, 196, 182, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    margin-bottom: 1.6rem;
}

.wc-cta-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 12px 36px rgba(46, 196, 182, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

/* Secondary back link below CTA */
.wc-back-link {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    margin-top: 0.4rem;
    transition: color 0.25s ease;
}

.wc-back-link:hover {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 540px) {
    .wc-code-block {
        max-width: 100%;
        padding: 1.3rem 1rem 1.4rem;
    }
    .wc-code {
        letter-spacing: 0.22em;
    }
}

/* =============================================
   v3.4 — Newsletter subscribe error message
   ============================================= */
.cct-new-error {
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.5;
    color: #ff8a8a;
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.8rem;
    background: rgba(255, 60, 60, 0.08);
    border: 1px solid rgba(255, 80, 80, 0.25);
    border-radius: 3px;
}

/* =============================================
   v3.5 — Cookie banner: pin to bottom edge,
   cleanly centered, narrower max-width.
   Overrides v1-era positioning that left it
   floating mid-page when the player bar
   wasn't visible.
   ============================================= */

.cookie-banner {
    bottom: 1.25rem !important;
    max-width: 480px !important;
    width: calc(100% - 2rem) !important;
    padding: 0.75rem 1rem !important;
    z-index: 600 !important;
    border-radius: 8px !important;
}

.cookie-banner p {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
}

.cookie-btn-accept,
.cookie-btn-decline {
    padding: 0.4rem 0.9rem !important;
    font-size: 0.66rem !important;
}

/* When the audio player bar is visible, push the banner above it.
   Player bar is 62px tall + a small gap. */
body:has(.player-bar:not([hidden])) .cookie-banner {
    bottom: 78px !important;
}

@media (max-width: 720px) {
    .cookie-banner {
        bottom: 1rem !important;
        left: 1rem !important;
        right: 1rem !important;
        width: auto !important;
        transform: none !important;
        max-width: none !important;
    }
    body:has(.player-bar:not([hidden])) .cookie-banner {
        bottom: 74px !important;
    }
}

/* =============================================
   v3.6 — Welcome page: fix access-code overflow
   "COSMIC2026" was getting clipped because the
   letter-spacing was too wide for the box.
   ============================================= */

.wc-code-block {
    max-width: 420px !important;
    padding: 1.6rem 1.4rem 1.7rem !important;
}

.wc-code {
    letter-spacing: 0.2em !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(1.4rem, 4.2vw, 1.85rem) !important;
}

@media (max-width: 540px) {
    .wc-code-block {
        max-width: 100% !important;
        padding: 1.3rem 1rem 1.4rem !important;
    }
    .wc-code {
        letter-spacing: 0.14em !important;
        font-size: clamp(1.25rem, 6vw, 1.6rem) !important;
    }
}

@media (max-width: 380px) {
    .wc-code {
        letter-spacing: 0.1em !important;
        font-size: 1.2rem !important;
    }
}

/* =============================================
   v3.7 — Cosmic Club footer: "return to earth"
   sichtbarer machen (war auf mobile fast
   unlesbar: 0.85rem + 0.35 opacity orange-tan).
   ============================================= */

.cc-portal-label {
    font-size: 1.05rem !important;
    color: rgba(255, 220, 160, 0.7) !important;
    letter-spacing: 0.18em !important;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}

.cc-footer-portal:hover .cc-portal-label {
    color: rgba(255, 220, 160, 1) !important;
}

@media (max-width: 720px) {
    .cc-portal-label {
        font-size: 1.15rem !important;
        color: rgba(255, 230, 180, 0.85) !important;
    }
    .cc-portal-blackhole {
        width: 70px;
        height: 70px;
    }
    .cc-footer-portal { padding: 3rem 1rem 2rem !important; }
}

/* =============================================
   v3.8 — Welcome code-block: brute-force fix
   The parent had overflow:hidden which clipped
   the code. Override + shrink letter-spacing
   + cap font-size so "COSMIC2026" always fits.
   ============================================= */

.wc-code-block {
    max-width: 480px !important;
    width: 90% !important;
    overflow: visible !important;
    padding: 1.5rem 1rem 1.6rem !important;
}

.wc-code {
    letter-spacing: 0.12em !important;
    font-size: 1.5rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    word-spacing: normal !important;
    text-overflow: clip !important;
}

@media (max-width: 600px) {
    .wc-code {
        font-size: 1.25rem !important;
        letter-spacing: 0.08em !important;
    }
}

@media (max-width: 380px) {
    .wc-code {
        font-size: 1.05rem !important;
        letter-spacing: 0.05em !important;
    }
}

/* The shimmer line (::before) needs its container's overflow:hidden
   to clip — re-apply it just on the pseudo-element scope. */
.wc-code-block::before {
    overflow: hidden !important;
}

/* =============================================
   v3.9 — Welcome code: Lakewood-Font hat keine
   sichtbaren Ziffern. Auf Questrial wechseln
   damit "COSMIC2026" komplett angezeigt wird.
   ============================================= */

.wc-code {
    font-family: 'Questrial', 'Helvetica Neue', Arial, sans-serif !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* =============================================
   v3.10 — Mobile Zoom: prevent horizontal pan
   so the fixed BG doesn't desync from content.
   User can still pinch-zoom (a11y), but cannot
   pan sideways past the viewport edges.
   ============================================= */

html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch;
}

/* Make sure no child element creates horizontal overflow */
body * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Re-allow elements that *should* be wider (e.g. carousels with internal scroll) */
.bts-carousel-track,
.cct-carousel,
.tx-nav {
    max-width: none;
}

/* =============================================
   v3.11 — Cosmic Club persistent mini player bar
   Stays visible across planets; the audio keeps
   playing on planet switch. Stop = pause toggle.
   ============================================= */

.cc-pb {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(8, 11, 20, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(46, 196, 182, 0.25);
    z-index: 950;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(110%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cc-pb.active { transform: translateY(0); }

.cc-pb-toggle {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--teal);
    border: none;
    color: #0b1224;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(46, 196, 182, 0.4);
}
.cc-pb-toggle:hover { filter: brightness(1.1); transform: scale(1.05); }
.cc-pb-toggle svg { display: block; fill: currentColor; }

.cc-pb-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.cc-pb-label {
    font-family: var(--font-body);
    font-size: 0.55rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(46, 196, 182, 0.75);
}
.cc-pb-title {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-pb-progress {
    flex: 1.2;
    min-width: 100px;
    max-width: 280px;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
}
.cc-pb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), #b78cff);
    width: 0;
    transition: width 0.15s linear;
}

.cc-pb-back {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.7);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.cc-pb-back:hover {
    background: rgba(46, 196, 182, 0.15);
    color: var(--teal);
    border-color: var(--teal);
}

/* The portal footer ("return to earth") needs to clear the player bar */
.cc-pb.active ~ .cc-footer-portal,
body:has(.cc-pb.active) .cc-footer-portal {
    padding-bottom: 90px;
}

@media (max-width: 600px) {
    .cc-pb {
        height: 60px;
        padding: 0 0.8rem;
        gap: 0.7rem;
    }
    .cc-pb-progress { display: none; }
    .cc-pb-label { font-size: 0.5rem; letter-spacing: 0.22em; }
    .cc-pb-title { font-size: 0.8rem; }
    .cc-pb-toggle { width: 38px; height: 38px; }
    .cc-pb-back   { width: 34px; height: 34px; }
}

/* =============================================
   v3.12 — Player-Bar progress: clickable to seek
   ============================================= */

.cc-pb-progress {
    cursor: pointer;
    position: relative;
    /* Larger invisible hit area for touch */
    padding: 14px 0;
    height: auto !important;
    background: transparent !important;
    overflow: visible !important;
}

.cc-pb-progress::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    pointer-events: none;
}

.cc-pb-progress:hover::before {
    background: rgba(255, 255, 255, 0.22);
}

.cc-pb-progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px !important;
    border-radius: 999px;
    pointer-events: none;
}

/* =============================================
   v3.13 — Butterfly close button (visible X)
   War nur Click-anywhere + ESC, jetzt sichtbar.
   ============================================= */

.cc-bfly-close {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10001;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.25s ease;
    opacity: 0;
    transform: scale(0.5) rotate(-45deg);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s, color 0.2s, border-color 0.2s;
}

.cc-bfly-overlay.active .cc-bfly-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.4s;
}

.cc-bfly-close:hover {
    background: rgba(255, 90, 90, 0.18);
    border-color: rgba(255, 120, 120, 0.65);
    color: #ffffff;
    transform: scale(1.08) rotate(0deg);
}

.cc-bfly-close svg {
    display: block;
    pointer-events: none;
}

@media (max-width: 600px) {
    .cc-bfly-close {
        top: 0.9rem;
        right: 0.9rem;
        width: 40px;
        height: 40px;
    }
    .cc-bfly-close svg { width: 18px; height: 18px; }
}