/* gabs.feedback - Neon Editorial Cabaret */
:root {
    --midnight-velvet: #0D0710;
    --black-cherry: #1A0A14;
    --stage-curtain: #7A1B3D;
    --neon-rosette: #FF2D6B;
    --footlight-amber: #D4A04A;
    --curtain-call: #4A0E2A;
    --parchment: #E8DDD0;
    --dusty-mauve: #8A7080;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Libre Baskerville', serif;
    background-color: var(--midnight-velvet);
    color: var(--parchment);
    overflow-x: hidden;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    line-height: 1.7;
}

.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.feedback-spine {
    position: fixed;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100vh;
    background: var(--stage-curtain);
    z-index: 1;
    box-shadow: 0 0 6px var(--neon-rosette);
    animation: spinePulse 3s ease-in-out infinite;
}

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

.orbs-container {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor, transparent);
}

/* Marquee */
.zone-marquee {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.marquee-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(3rem, 12vw, 8rem);
    letter-spacing: 0.04em;
    color: var(--parchment);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.marquee-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    border: 1px solid transparent;
    padding: 0 2px;
    transition: border-color 0.3s;
}

.marquee-letter.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.marquee-letter.glow {
    border-color: var(--neon-rosette);
    box-shadow: 0 0 8px rgba(255, 45, 107, 0.3);
}

.split-flap-display {
    margin-top: 3rem;
    text-align: center;
}

.flap-text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--footlight-amber);
    text-transform: uppercase;
}

/* Dashboard */
.zone-dashboard {
    position: relative;
    z-index: 2;
    padding: 10vh 5vw;
}

.panel {
    max-width: 520px;
    background-color: var(--black-cherry);
    margin-bottom: 4rem;
    position: relative;
    display: flex;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.panel.visible {
    opacity: 1;
    transform: translateX(0);
}

.panel-left { margin-right: auto; margin-left: 5%; }
.panel-right { margin-left: auto; margin-right: 5%; transform: translateX(30px); }
.panel-right.visible { transform: translateX(0); }

.panel-accent {
    width: 4px;
    background: var(--stage-curtain);
    flex-shrink: 0;
    transition: box-shadow 0.3s;
}

.panel:hover .panel-accent {
    box-shadow: 0 0 12px var(--neon-rosette);
}

.panel-content {
    padding: 2rem;
}

.panel-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.65rem, 1vw, 0.8rem);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--dusty-mauve);
    display: block;
    margin-bottom: 1rem;
}

.counter {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 500;
    color: var(--footlight-amber);
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
}

.counter-suffix {
    font-size: 0.5em;
    color: var(--dusty-mauve);
}

.panel-body {
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    color: var(--parchment);
    opacity: 0.85;
}

.constellation-svg {
    width: 180px;
    height: 45px;
    margin-bottom: 1rem;
    animation: constellationRotate 120s linear infinite;
}

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

/* Interstitials */
.interstitial {
    background: var(--curtain-call);
    padding: 4rem 2rem;
    margin: 4rem 0;
    text-align: center;
    position: relative;
    box-shadow: 0 0 40px rgba(122, 27, 61, 0.2);
}

.neon-quote-mark {
    font-family: 'Playfair Display', serif;
    font-size: 6rem;
    color: var(--neon-rosette);
    opacity: 0.2;
    position: absolute;
    top: 0.5rem;
    left: 2rem;
    line-height: 1;
}

.interstitial-quote {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    color: var(--parchment);
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Afterglow */
.zone-afterglow {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, var(--midnight-velvet), #000000);
}

.afterglow-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dusty-mauve);
    font-variant: small-caps;
}

@media (max-width: 768px) {
    .panel-left, .panel-right { margin-left: 3%; margin-right: 3%; max-width: none; }
    .feedback-spine { display: none; }
}