/* moot.ing — Underwater Moot Court */

:root {
    --deep-indigo: #1b1b3a;
    --warm-sand: #e8dcc8;
    --coral-flash: #ff6b6b;
    --glitch-cyan: #4ecdc4;
    --dark-tint: #252550;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--deep-indigo);
    color: var(--warm-sand);
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
}

/* Noise texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#noise);
    opacity: 0.03;
    pointer-events: none;
    z-index: 1000;
}

/* Horizontal scroll container */
#scroll-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: max-content;
    transition: transform 0.1s cubic-bezier(0.22, 1.0, 0.36, 1.0);
}

/* Chamber base */
.chamber {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deep-indigo);
    overflow: hidden;
}

.chamber-content {
    max-width: 65ch;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

/* Breathing gaps */
.breathing-gap {
    width: 30vw;
    height: 100vh;
    flex-shrink: 0;
    background: var(--dark-tint);
}

/* ========== CAUSTICS ========== */
.caustics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.caustics::before,
.caustics::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    opacity: 0.04;
}

.caustics::before {
    top: -50%;
    left: -50%;
    background: radial-gradient(ellipse at center, var(--warm-sand) 0%, transparent 60%);
    animation: caustic1 18s ease-in-out infinite;
}

.caustics::after {
    top: -30%;
    left: -70%;
    background: radial-gradient(ellipse at center, var(--warm-sand) 0%, transparent 50%);
    animation: caustic2 23s ease-in-out infinite;
}

@keyframes caustic1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10%, 5%) scale(1.1); }
    66% { transform: translate(-5%, 10%) scale(0.9); }
}

@keyframes caustic2 {
    0%, 100% { transform: translate(0, 0) scale(1.1); }
    50% { transform: translate(15%, -8%) scale(0.95); }
}

/* ========== CHAMBER 1: THE THRESHOLD ========== */
.chamber-1-content {
    text-align: center;
}

.title-moot {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(10rem, 20vw, 28rem);
    letter-spacing: 0.1em;
    color: var(--warm-sand);
    line-height: 1;
    animation: drift 20s ease-in-out infinite;
}

.title-sub {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 2rem;
    color: #e8dcc880;
    margin-top: 2rem;
    letter-spacing: 0.15em;
    animation: drift 20s ease-in-out infinite;
    animation-delay: -2s;
}

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

.scroll-arrow {
    position: absolute;
    right: 4vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #e8dcc866;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.scroll-arrow.visible {
    opacity: 1;
}

.scroll-arrow.fading {
    opacity: 0;
}

/* ========== CHAMBER 2: THE ARGUMENT ========== */
.chamber-2-content {
    max-width: 55ch;
}

.body-text {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--warm-sand);
}

/* Fade-reveal */
.fade-reveal {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1.0),
                transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.fade-reveal.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* ========== CHAMBER 3: THE DISRUPTION ========== */
.chamber-3 {
    background: var(--deep-indigo);
    animation: flicker 4s ease-in-out infinite;
}

@keyframes flicker {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(0.9); }
}

.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        #1b1b3a 0px,
        #1b1b3a 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.15;
    pointer-events: none;
    z-index: 3;
}

.glitch-fragment {
    position: absolute;
    left: var(--x);
    top: var(--y);
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: 1rem;
    color: var(--warm-sand);
    transform: rotate(var(--rot));
    white-space: nowrap;
    z-index: 2;
    animation: jitter 0.2s steps(3) infinite;
    animation-delay: var(--delay);
}

/* Chromatic aberration via pseudo-elements */
.glitch-fragment::before,
.glitch-fragment::after {
    content: attr(style);
    display: none;
}

.glitch-fragment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    display: block;
}

/* Use text-shadow for chromatic aberration */
.glitch-fragment {
    text-shadow:
        2px -1px 0 var(--coral-flash),
        -2px 1px 0 var(--glitch-cyan);
}

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

/* ========== CHAMBER 4: THE FISH ========== */
.chamber-4 {
    background: var(--deep-indigo);
}

.fish-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation: swim-across 30s linear infinite, fish-sway 3s ease-in-out infinite;
    right: 10vw;
}

.moorish-idol {
    width: 200px;
    height: auto;
}

@keyframes swim-across {
    0% { right: 10vw; }
    100% { right: 90vw; }
}

@keyframes fish-sway {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    25% { transform: translateY(-50%) rotate(2deg); }
    75% { transform: translateY(-50%) rotate(-2deg); }
}

/* ========== CHAMBER 5: THE DELIBERATION ========== */
.chamber-5-content {
    max-width: 55ch;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.chamber-5 .fade-reveal[data-stagger="1"] {
    transition-delay: 200ms;
}

.chamber-5 .fade-reveal[data-stagger="2"] {
    transition-delay: 400ms;
}

.ripple-divider {
    width: 100%;
    height: 10px;
    opacity: 0.5;
}

/* ========== CHAMBER 6: THE VERDICT ========== */
.chamber-6-content {
    text-align: center;
}

.verdict-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.02em;
    color: var(--warm-sand);
    line-height: 1.3;
    opacity: 0;
    transition: opacity 3000ms ease-in;
}

.verdict-text.revealed {
    opacity: 1;
}

/* ========== CHAMBER 7: THE SILENCE ========== */
.chamber-7 {
    background: var(--deep-indigo);
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    #scroll-container {
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .chamber {
        scroll-snap-align: start;
    }

    .title-moot {
        font-size: clamp(4rem, 15vw, 10rem);
    }

    .body-text {
        font-size: 1rem;
    }

    .chamber-content {
        padding: 1.5rem;
        max-width: 90vw;
    }

    .breathing-gap {
        width: 15vw;
    }
}