/* ==========================================================
   judge.bar — cosmic adjudication lounge
   blobitecture meets sci-fi-hud, dopamine-neon on violet
   ========================================================== */

:root {
    --ground: #0F0820;
    --pink: #FF4FD8;
    --lime: #A7FF3E;
    --cyan: #3DEAFF;
    --yellow: #FFE94F;
    --cream: #F4E9D8;
    --chamber-violet: #1F1238;
    --orange: #FF8A4F;

    --hud-h: 32px;

    --display: 'Jost', system-ui, sans-serif;
    --body-font: 'Familjen Grotesk', system-ui, sans-serif;
    --mono: 'Space Mono', ui-monospace, monospace;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--ground);
    color: var(--cream);
    font-family: var(--body-font);
    font-size: 1.125rem;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(255, 79, 216, 0.10), transparent 60%),
        radial-gradient(ellipse 100% 70% at 50% 100%, rgba(61, 234, 255, 0.06), transparent 60%),
        var(--ground);
}

.global-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Global noise overlay */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-color: transparent;
    filter: url(#grain);
    /* Force a paint surface so the SVG filter applies to the box */
    background-image: linear-gradient(transparent, transparent);
}

.grain-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6) 0 1px, transparent 1px 3px);
    filter: url(#grain);
    opacity: 0.6;
}

/* Scanline overlay */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    background: repeating-linear-gradient(
        transparent 0 3px,
        rgba(255, 255, 255, 0.015) 3px 4px
    );
}

/* ==========================================================
   Chambers — stacked sections
   ========================================================== */

.chambers {
    position: relative;
    z-index: 2;
    display: block;
}

.chamber {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    padding: 0 6vw;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    overflow: hidden;
}

.chamber + .chamber::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(180px, 40vw, 520px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 79, 216, 0.35), transparent);
    box-shadow: 0 0 16px rgba(61, 234, 255, 0.18);
}

.foyer        { min-height: 100vh; }
.docket       { min-height: 140vh; padding-top: 14vh; padding-bottom: 14vh; }
.bench        { min-height: 120vh; padding-top: 10vh; padding-bottom: 10vh; }
.gallery      { min-height: 100vh; }
.verdict      { min-height: 100vh; }
.after-party  { min-height: 130vh; padding-top: 10vh; padding-bottom: 12vh; }
.footer-lounge{ min-height: 60vh; padding-top: 6vh; padding-bottom: calc(var(--hud-h) + 4vh); }

.section-frame {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.section-title {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(3rem, 9vw, 8rem);
    margin: 0 0 0.4em;
    letter-spacing: -0.04em;
    color: var(--cream);
    line-height: 0.92;
    text-transform: lowercase;
}

.section-lede {
    font-family: var(--body-font);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    color: rgba(244, 233, 216, 0.78);
    max-width: 56ch;
    margin: 0 auto 4rem;
    line-height: 1.5;
    text-transform: lowercase;
}

/* ==========================================================
   1) THE FOYER
   ========================================================== */

.foyer-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: clamp(60vh, 95vmin, 110vh);
}

.foyer-blob {
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(60vh, 95vmin, 110vh);
    height: clamp(60vh, 95vmin, 110vh);
    filter: drop-shadow(0 0 80px rgba(255, 79, 216, 0.35)) drop-shadow(0 0 140px rgba(255, 79, 216, 0.22));
}

.blob-shape {
    transform-origin: center;
    animation: breathe 6s ease-in-out infinite;
    filter: url(#blob-warp-soft);
}

.blob-inner {
    transform-origin: center;
    animation: breathe-inner 6s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}

@keyframes breathe-inner {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.97); }
}

.wordmark {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(5rem, 18vw, 16rem);
    letter-spacing: -0.06em;
    color: var(--cream);
    text-transform: lowercase;
    line-height: 0.85;
    margin: 0;
    text-shadow:
        0 0 40px rgba(255, 79, 216, 0.45),
        0 0 100px rgba(255, 79, 216, 0.25);
}

.foyer-tag {
    position: relative;
    z-index: 2;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-top: 2.5rem;
    opacity: 0.85;
}

/* ==========================================================
   2) THE DOCKET
   ========================================================== */

.docket-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    position: relative;
}

.case-pill {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.4rem 2.6rem;
    background: linear-gradient(120deg, var(--chamber-violet), #2a1850);
    border: 1px solid rgba(255, 79, 216, 0.35);
    border-radius: 999px;
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 2.4vw, 2.1rem);
    color: var(--cream);
    text-transform: lowercase;
    box-shadow:
        0 0 30px rgba(255, 79, 216, 0.12),
        inset 0 0 60px rgba(61, 234, 255, 0.05);
    position: relative;
    overflow: hidden;
    max-width: 92%;
    transition: transform 480ms ease, box-shadow 480ms ease, border-color 480ms ease;
}

.case-pill:hover {
    transform: translateY(-4px);
    border-color: rgba(167, 255, 62, 0.55);
    box-shadow:
        0 0 40px rgba(167, 255, 62, 0.18),
        inset 0 0 80px rgba(167, 255, 62, 0.06);
}

.case-pill:nth-child(odd) {
    transform: translateX(-3vw);
}
.case-pill:nth-child(even) {
    transform: translateX(3vw);
}
.case-pill:nth-child(odd):hover  { transform: translateX(-3vw) translateY(-4px); }
.case-pill:nth-child(even):hover { transform: translateX(3vw) translateY(-4px); }

.case-num {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--yellow);
    text-transform: uppercase;
    font-style: normal;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(255, 233, 79, 0.4);
    border-radius: 999px;
    background: rgba(255, 233, 79, 0.06);
    flex-shrink: 0;
}

.case-text {
    font-style: italic;
}

/* ==========================================================
   3) THE BENCH
   ========================================================== */

.judges-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3vw;
    margin-top: 3rem;
    align-items: end;
}

.judge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.judge:hover {
    transform: translateY(-12px);
}

.judge-blob-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 360 / 420;
    filter: drop-shadow(0 0 38px var(--judge-glow, rgba(255, 79, 216, 0.5)));
    transition: filter 600ms ease;
}

.judge-plum .judge-blob-wrap { --judge-glow: rgba(255, 79, 216, 0.55); }
.judge-fuzz .judge-blob-wrap { --judge-glow: rgba(167, 255, 62, 0.55); }
.judge-soda .judge-blob-wrap { --judge-glow: rgba(61, 234, 255, 0.55); }

.judge:hover .judge-blob-wrap {
    filter: drop-shadow(0 0 70px var(--judge-glow));
}

.judge-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.judge-body {
    transform-origin: center 50%;
    animation: judge-breathe 6s ease-in-out infinite;
}

.judge-fuzz .judge-body { animation-duration: 6.6s; animation-delay: -1.4s; }
.judge-soda .judge-body { animation-duration: 6.2s; animation-delay: -3s; }

@keyframes judge-breathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.025) translateY(-6px); }
}

.visor {
    transition: filter 400ms ease;
}

.visor-slit {
    transform-box: fill-box;
    transform-origin: center;
    animation: visor-flicker 3.4s ease-in-out infinite;
    filter: drop-shadow(0 0 6px var(--cyan));
}

.judge-soda .visor-slit { filter: drop-shadow(0 0 6px var(--pink)); }

@keyframes visor-flicker {
    0%, 100% { opacity: 0.95; }
    47%      { opacity: 1; }
    49%      { opacity: 0.4; }
    51%      { opacity: 1; }
    78%      { opacity: 0.85; }
}

.visor-text {
    font-family: var(--mono);
    font-size: 8.5px;
    fill: var(--ground);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.judge:hover .visor-slit {
    filter: drop-shadow(0 0 14px var(--cyan)) drop-shadow(0 0 28px var(--cyan));
}

.judge-name {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--cream);
    text-transform: lowercase;
}

.judge-tag {
    margin: 0;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 0.95rem;
    color: rgba(244, 233, 216, 0.6);
    text-align: center;
    max-width: 22ch;
    text-transform: lowercase;
}

/* ==========================================================
   4) THE GALLERY
   ========================================================== */

.gallery-stage {
    width: 100%;
    height: clamp(60vh, 78vmin, 90vh);
    display: grid;
    place-items: center;
    margin-top: 2rem;
    position: relative;
}

.gallery-svg {
    width: clamp(60vh, 78vmin, 90vh);
    height: clamp(60vh, 78vmin, 90vh);
    display: block;
    filter: drop-shadow(0 0 60px rgba(255, 79, 216, 0.18));
}

.gallery-svg .gallery-center {
    filter: drop-shadow(0 0 18px rgba(61, 234, 255, 0.5));
    animation: breathe 6s ease-in-out infinite;
    transform-origin: center;
}

.spectator {
    transform-origin: center;
}

/* ==========================================================
   5) THE VERDICT
   ========================================================== */

.verdict-stage {
    position: relative;
    width: 100%;
    height: clamp(70vh, 95vmin, 100vh);
    display: grid;
    place-items: center;
}

.verdict-blob {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(95vw, 1100px);
    height: clamp(60vh, 70vmin, 80vh);
    filter: drop-shadow(0 0 80px rgba(255, 233, 79, 0.35));
}

.blob-verdict {
    transform-origin: center;
    animation: verdict-pulse 7s ease-in-out infinite;
    filter: url(#blob-warp-soft);
}

.blob-inner-verdict {
    opacity: 0.92;
}

@keyframes verdict-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.verdict-text-wrap {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 6vw;
    max-width: 1100px;
}

.verdict-eyebrow {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--yellow);
    margin: 0 0 1.25rem;
}

.verdict-text {
    font-family: var(--display);
    font-weight: 900;
    font-size: clamp(2.4rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--cream);
    text-transform: lowercase;
    margin: 0;
    text-shadow:
        0 0 40px rgba(255, 233, 79, 0.4),
        0 0 100px rgba(255, 233, 79, 0.2);
}

.verdict-text em {
    font-style: normal;
    color: var(--yellow);
    text-transform: uppercase;
    border-bottom: 4px solid var(--yellow);
    padding: 0 0.1em;
    margin: 0 0.05em;
    text-shadow: 0 0 30px rgba(255, 233, 79, 0.7);
}

.verdict-line2 {
    display: block;
    margin-top: 0.4em;
    color: rgba(244, 233, 216, 0.92);
}

.verdict-foot {
    margin-top: 2.5rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: 0.85;
}

/* ==========================================================
   6) THE AFTER-PARTY
   ========================================================== */

.snack-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2vw;
    margin-top: 2rem;
}

.snack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 1.4rem;
    border-radius: 32px;
    background: linear-gradient(160deg, rgba(255, 138, 79, 0.06), rgba(31, 18, 56, 0.4));
    border: 1px solid rgba(255, 138, 79, 0.25);
    transition: transform 540ms cubic-bezier(0.4, 0, 0.2, 1), border-color 540ms ease;
}

.snack:hover {
    transform: translateY(-10px) rotate(-1.5deg);
    border-color: rgba(255, 138, 79, 0.55);
}

.snack-svg {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 220 / 260;
    display: block;
    filter: drop-shadow(0 0 24px rgba(255, 138, 79, 0.4));
}

.snack:nth-child(2) .snack-svg { filter: drop-shadow(0 0 24px rgba(167, 255, 62, 0.4)); }
.snack:nth-child(4) .snack-svg { filter: drop-shadow(0 0 24px rgba(255, 233, 79, 0.4)); }

.snack-svg path,
.snack-svg rect:not([class]):not(.chip),
.snack-svg circle:not(.chip) {
    transform-origin: center;
    animation: snack-bounce 5.5s ease-in-out infinite;
}

.snack:nth-child(1) .snack-svg > * { animation-delay: -0.5s; }
.snack:nth-child(2) .snack-svg > * { animation-delay: -1.5s; }
.snack:nth-child(3) .snack-svg > * { animation-delay: -2.5s; }
.snack:nth-child(4) .snack-svg > * { animation-delay: -3.5s; }
.snack:nth-child(5) .snack-svg > * { animation-delay: -4.5s; }

@keyframes snack-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.02); }
}

.snack-svg .chip {
    transform-origin: center;
}

.snack-svg .chip.drift-1 { animation: chip-drift-1 7s ease-in-out infinite; }
.snack-svg .chip.drift-2 { animation: chip-drift-2 8s ease-in-out infinite; }
.snack-svg .chip.drift-3 { animation: chip-drift-3 6.5s ease-in-out infinite; }
.snack-svg .chip.drift-4 { animation: chip-drift-4 9s ease-in-out infinite; }
.snack-svg .chip.drift-5 { animation: chip-drift-5 7.5s ease-in-out infinite; }

@keyframes chip-drift-1 { 0%,100%{transform: translate(0,0);} 50%{transform: translate(6px,-4px);} }
@keyframes chip-drift-2 { 0%,100%{transform: translate(0,0);} 50%{transform: translate(-5px,5px);} }
@keyframes chip-drift-3 { 0%,100%{transform: translate(0,0);} 50%{transform: translate(4px,6px);} }
@keyframes chip-drift-4 { 0%,100%{transform: translate(0,0);} 50%{transform: translate(-6px,-4px);} }
@keyframes chip-drift-5 { 0%,100%{transform: translate(0,0);} 50%{transform: translate(5px,3px);} }

.snack-name {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--cream);
    text-align: center;
    text-transform: lowercase;
}

.snack-desc {
    margin: 0;
    font-family: var(--body-font);
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(244, 233, 216, 0.6);
    text-align: center;
    text-transform: lowercase;
    line-height: 1.35;
}

/* ==========================================================
   7) THE FOOTER LOUNGE
   ========================================================== */

.footer-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.couch-svg {
    width: min(90vw, 600px);
    height: auto;
    display: block;
    filter: drop-shadow(0 0 30px rgba(61, 234, 255, 0.18));
}

.footer-wordmark {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.6vw, 2.6rem);
    letter-spacing: -0.05em;
    color: var(--cream);
    text-transform: lowercase;
    margin: 0;
    opacity: 0.85;
    text-shadow: 0 0 30px rgba(255, 79, 216, 0.3);
}

.footer-line {
    font-family: var(--body-font);
    font-style: italic;
    font-size: 1rem;
    color: rgba(244, 233, 216, 0.55);
    margin: 0;
    text-transform: lowercase;
}

.footer-meta {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(61, 234, 255, 0.5);
    margin: 0.4rem 0 0;
}

/* ==========================================================
   HUD strip — persistent
   ========================================================== */

.hud-strip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hud-h);
    z-index: 100;
    background: rgba(15, 8, 32, 0.78);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid var(--pink);
    box-shadow:
        0 -4px 24px rgba(255, 79, 216, 0.18),
        0 4px 0 rgba(61, 234, 255, 0.4),
        0 8px 30px rgba(61, 234, 255, 0.25);
    display: flex;
    align-items: center;
    transition: opacity 600ms ease, filter 600ms ease;
}

.hud-strip.dimmed {
    opacity: 0.42;
    filter: saturate(0.6) blur(0.4px);
}

.hud-inner {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pink);
    white-space: nowrap;
    overflow: hidden;
}

.hud-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    color: rgba(244, 233, 216, 0.7);
}

.hud-val {
    color: var(--cream);
    text-shadow: 0 0 8px rgba(244, 233, 216, 0.4);
    min-width: 0;
}

.hud-defendant .hud-val { color: var(--lime); text-shadow: 0 0 8px rgba(167, 255, 62, 0.5); }
.hud-status    .hud-val { color: var(--cyan); text-shadow: 0 0 8px rgba(61, 234, 255, 0.5); }

.hud-sep {
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(255, 233, 79, 0.6);
    font-size: 0.85rem;
}

.hud-val.tw-cursor::after {
    content: "_";
    color: var(--yellow);
    margin-left: 1px;
    animation: blink 0.8s steps(2, start) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ==========================================================
   Fade-reveal — single shared entrance pattern
   ========================================================== */

.fade-reveal {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px);
    transition:
        opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
        filter 900ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--stagger, 0) * 80ms);
}

.fade-reveal.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* odd/even case-pill keep their X transform after reveal */
.case-pill.fade-reveal:nth-child(odd) {
    transform: translateX(-3vw) translateY(24px);
}
.case-pill.fade-reveal:nth-child(even) {
    transform: translateX(3vw) translateY(24px);
}
.case-pill.fade-reveal.is-visible:nth-child(odd) {
    transform: translateX(-3vw) translateY(0);
}
.case-pill.fade-reveal.is-visible:nth-child(even) {
    transform: translateX(3vw) translateY(0);
}

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

@media (max-width: 920px) {
    .judges-row {
        grid-template-columns: 1fr;
        gap: 4rem;
        max-width: 360px;
        margin: 3rem auto 0;
    }
    .snack-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
    .snack:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        justify-self: center;
    }
    .case-pill {
        font-size: 1.1rem;
        padding: 1.1rem 1.6rem;
        gap: 1rem;
    }
    .hud-inner {
        gap: 0.8rem;
        padding: 0 1rem;
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }
}

@media (max-width: 560px) {
    .snack-row {
        grid-template-columns: 1fr;
    }
    .snack:last-child {
        max-width: 100%;
    }
    .verdict-text {
        font-size: clamp(2rem, 9vw, 3.6rem);
    }
    .wordmark {
        font-size: clamp(3.6rem, 22vw, 7rem);
    }
    .hud-inner .hud-slot:nth-of-type(2) .hud-sep,
    .hud-inner .hud-defendant {
        display: none;
    }
}