/* mystery.boo - Watercolor Seance Design */
/* Palette: Obsidian Plum #0d0a1a, Bruised Violet #1a0e2e, Electric Magenta #ff2d95,
   Acid Cyan #00f0ff, Phosphor Lime #b8ff00, Phantom White #e8e0f0 */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #0d0a1a;
    color: #e8e0f0;
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.015em;
    overflow-x: hidden;
}

.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================
   CHAMBER BASE STYLES
   ============================ */

.chamber {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chamber-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 4rem 2rem;
}

/* ============================
   CHAMBER BLEED TRANSITIONS
   ============================ */

.chamber-bleed {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 3;
    pointer-events: none;
}

.chamber-1 .chamber-bleed {
    background:
        radial-gradient(ellipse 60% 80% at 30% 50%, rgba(255, 45, 149, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 50% 70% at 70% 60%, rgba(0, 240, 255, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 40%, rgba(184, 255, 0, 0.06) 0%, transparent 70%);
}

.chamber-2 .chamber-bleed {
    background:
        radial-gradient(ellipse 70% 80% at 40% 50%, rgba(0, 240, 255, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 50% 70% at 75% 40%, rgba(255, 45, 149, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 60% at 20% 60%, rgba(184, 255, 0, 0.05) 0%, transparent 70%);
}

.chamber-3 .chamber-bleed {
    background:
        radial-gradient(ellipse 55% 80% at 55% 50%, rgba(184, 255, 0, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 65% 70% at 30% 40%, rgba(255, 45, 149, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 80% 55%, rgba(0, 240, 255, 0.06) 0%, transparent 70%);
}

.chamber-4 .chamber-bleed {
    background:
        radial-gradient(ellipse 60% 75% at 50% 50%, rgba(255, 45, 149, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 70% 65% at 25% 45%, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
}

/* ============================
   ORGANIC BLOB BACKGROUNDS
   ============================ */

.blob-bg {
    position: absolute;
    border-radius: 42% 58% 37% 63% / 55% 45% 62% 38%;
    pointer-events: none;
    z-index: 0;
}

.blob-bg-1 {
    width: 500px;
    height: 500px;
    top: -10%;
    left: -5%;
    background: radial-gradient(ellipse at center, rgba(255, 45, 149, 0.1) 0%, transparent 70%);
    animation: blob-drift-1 30s ease-in-out infinite;
}

.blob-bg-2 {
    width: 400px;
    height: 350px;
    bottom: 10%;
    right: -5%;
    background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
    border-radius: 55% 45% 60% 40% / 48% 52% 44% 56%;
    animation: blob-drift-2 25s ease-in-out infinite;
}

.blob-bg-3 {
    width: 350px;
    height: 400px;
    top: 5%;
    right: 10%;
    background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
    border-radius: 48% 52% 55% 45% / 60% 40% 50% 50%;
    animation: blob-drift-3 35s ease-in-out infinite;
}

.blob-bg-4 {
    width: 300px;
    height: 300px;
    bottom: 15%;
    left: 5%;
    background: radial-gradient(ellipse at center, rgba(184, 255, 0, 0.06) 0%, transparent 70%);
    border-radius: 52% 48% 45% 55% / 50% 50% 55% 45%;
    animation: blob-drift-1 40s ease-in-out infinite reverse;
}

.blob-bg-5 {
    width: 600px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.12) 0%, rgba(255, 45, 149, 0.06) 50%, transparent 70%);
    border-radius: 45% 55% 50% 50% / 52% 48% 55% 45%;
    animation: blob-drift-2 28s ease-in-out infinite;
}

.blob-bg-6 {
    width: 300px;
    height: 350px;
    top: 20%;
    left: -3%;
    background: radial-gradient(ellipse at center, rgba(255, 45, 149, 0.07) 0%, transparent 70%);
    border-radius: 50% 50% 45% 55% / 55% 45% 50% 50%;
    animation: blob-drift-3 32s ease-in-out infinite;
}

.blob-bg-7 {
    width: 250px;
    height: 280px;
    bottom: 10%;
    right: 5%;
    background: radial-gradient(ellipse at center, rgba(184, 255, 0, 0.05) 0%, transparent 70%);
    border-radius: 55% 45% 52% 48% / 48% 52% 45% 55%;
    animation: blob-drift-1 36s ease-in-out infinite;
}

.blob-bg-8 {
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255, 45, 149, 0.08) 0%, rgba(0, 240, 255, 0.05) 60%, transparent 70%);
    border-radius: 48% 52% 42% 58% / 55% 45% 58% 42%;
    animation: blob-drift-2 34s ease-in-out infinite;
}

@keyframes blob-drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); border-radius: 42% 58% 37% 63% / 55% 45% 62% 38%; }
    25% { transform: translate(15px, -20px) scale(1.05); border-radius: 50% 50% 45% 55% / 48% 52% 55% 45%; }
    50% { transform: translate(-10px, 15px) scale(0.97); border-radius: 55% 45% 52% 48% / 42% 58% 48% 52%; }
    75% { transform: translate(20px, 10px) scale(1.03); border-radius: 45% 55% 58% 42% / 55% 45% 40% 60%; }
}

@keyframes blob-drift-2 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); border-radius: 45% 55% 50% 50% / 52% 48% 55% 45%; }
    33% { transform: translate(calc(-50% + 20px), calc(-50% - 15px)) scale(1.04); border-radius: 52% 48% 55% 45% / 45% 55% 48% 52%; }
    66% { transform: translate(calc(-50% - 15px), calc(-50% + 20px)) scale(0.96); border-radius: 48% 52% 42% 58% / 55% 45% 52% 48%; }
}

@keyframes blob-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-25px, 20px) scale(1.06); }
}

/* ============================
   LENS FLARE EFFECTS
   ============================ */

.lens-flare {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.flare-hero {
    top: 15%;
    left: 10%;
    width: 400px;
    height: 400px;
    background:
        radial-gradient(circle at center, rgba(255, 45, 149, 0.9) 0%, rgba(255, 45, 149, 0.3) 4px, transparent 6px),
        radial-gradient(circle at center, rgba(255, 45, 149, 0.3) 0%, transparent 40px),
        radial-gradient(circle at center, rgba(255, 45, 149, 0.05) 0%, transparent 200px);
}

.flare-mid {
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    background:
        radial-gradient(circle at center, rgba(0, 240, 255, 0.8) 0%, rgba(0, 240, 255, 0.3) 5px, transparent 8px),
        radial-gradient(circle at center, rgba(0, 240, 255, 0.25) 0%, transparent 60px),
        radial-gradient(circle at center, rgba(0, 240, 255, 0.04) 0%, transparent 250px);
}

.flare-seal {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background:
        radial-gradient(circle at 48% 50%, rgba(255, 45, 149, 0.7) 0%, transparent 8px),
        radial-gradient(circle at 52% 50%, rgba(0, 240, 255, 0.7) 0%, transparent 8px),
        radial-gradient(circle at 48% 50%, rgba(255, 45, 149, 0.2) 0%, transparent 50px),
        radial-gradient(circle at 52% 50%, rgba(0, 240, 255, 0.2) 0%, transparent 50px),
        radial-gradient(circle at center, rgba(255, 45, 149, 0.04) 0%, transparent 300px),
        radial-gradient(circle at center, rgba(0, 240, 255, 0.04) 0%, transparent 300px);
}

/* ============================
   FADE-REVEAL ANIMATION
   ============================ */

.reveal {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1.2s ease-out, filter 1.4s ease-out;
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.visible {
    opacity: 1;
    filter: blur(0px);
}

/* ============================
   CHAMBER 1 — THE ENVELOPE
   ============================ */

.chamber-1 {
    background-color: #0d0a1a;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 45, 149, 0.08) 0%, transparent 70%);
}

.wet-ink {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.05;
    color: #ff2d95;
    text-align: center;
    text-shadow:
        0 0 2px #ff2d95,
        0 0 8px rgba(255, 45, 149, 0.5),
        0 0 20px rgba(255, 45, 149, 0.25),
        0 0 40px rgba(255, 45, 149, 0.12),
        0 0 80px rgba(255, 45, 149, 0.06);
    animation: ink-spread 4s ease-out forwards;
}

@keyframes ink-spread {
    0% {
        text-shadow:
            0 0 1px #ff2d95,
            0 0 2px rgba(255, 45, 149, 0.3),
            0 0 4px rgba(255, 45, 149, 0.1),
            0 0 6px rgba(255, 45, 149, 0.05),
            0 0 8px rgba(255, 45, 149, 0.02);
        filter: blur(2px);
        opacity: 0.6;
    }
    100% {
        text-shadow:
            0 0 2px #ff2d95,
            0 0 8px rgba(255, 45, 149, 0.5),
            0 0 20px rgba(255, 45, 149, 0.25),
            0 0 40px rgba(255, 45, 149, 0.12),
            0 0 80px rgba(255, 45, 149, 0.06);
        filter: blur(0px);
        opacity: 1;
    }
}

/* ============================
   CHAMBER 2 — THE EVIDENCE
   ============================ */

.chamber-2 {
    background-color: #0d0a1a;
    background-image:
        radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0, 240, 255, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 70% 60%, rgba(255, 45, 149, 0.04) 0%, transparent 70%);
}

.evidence-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.specimen {
    padding: 2.5rem;
    position: relative;
    background: rgba(26, 14, 46, 0.6);
    border-radius: 48% 52% 43% 57% / 51% 49% 54% 46%;
    filter: url(#watercolor-edge-subtle);
}

.specimen-1 {
    grid-column: 1 / 2;
    justify-self: end;
    background-image: radial-gradient(ellipse at center, rgba(255, 45, 149, 0.06) 0%, transparent 70%);
}

.specimen-2 {
    grid-column: 2 / 3;
    justify-self: start;
    background-image: radial-gradient(ellipse at center, rgba(0, 240, 255, 0.06) 0%, transparent 70%);
}

.specimen-3 {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 70%;
    background-image: radial-gradient(ellipse at center, rgba(184, 255, 0, 0.04) 0%, transparent 70%);
}

.specimen-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00f0ff;
    display: block;
    margin-bottom: 0.8rem;
}

.specimen-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.05;
    color: #e8e0f0;
    margin-bottom: 1rem;
}

.specimen-text {
    color: rgba(232, 224, 240, 0.8);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    line-height: 1.75;
}

/* ============================
   CHAMBER 3 — THE PHENOMENON
   ============================ */

.chamber-3 {
    background-color: #1a0e2e;
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0, 240, 255, 0.06) 0%, transparent 70%);
}

.phenomenon-blob {
    width: min(80vw, 700px);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: rgba(13, 10, 26, 0.7);
    background-image:
        radial-gradient(ellipse 80% 70% at 40% 50%, rgba(0, 240, 255, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 60% 40%, rgba(255, 45, 149, 0.06) 0%, transparent 70%);
    border-radius: 42% 58% 37% 63% / 55% 45% 62% 38%;
    position: relative;
    filter: url(#watercolor-edge);
    overflow: hidden;
}

.phenomenon-inner {
    padding: 4rem 3rem;
    text-align: center;
    max-width: 520px;
}

.phenomenon-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00f0ff;
    display: block;
    margin-bottom: 1.5rem;
}

.phenomenon-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.05;
    color: #ff2d95;
    text-shadow:
        0 0 4px rgba(255, 45, 149, 0.4),
        0 0 15px rgba(255, 45, 149, 0.15);
    margin-bottom: 2rem;
}

.phenomenon-text {
    color: rgba(232, 224, 240, 0.85);
    line-height: 1.85;
    margin-bottom: 1.2rem;
}

.phenomenon-text:last-child {
    margin-bottom: 0;
}

/* ============================
   CHAMBER 4 — THE ARCHIVE
   ============================ */

.chamber-4 {
    background-color: #0d0a1a;
    background-image:
        radial-gradient(ellipse 50% 40% at 50% 30%, rgba(255, 45, 149, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 40% 70%, rgba(184, 255, 0, 0.03) 0%, transparent 70%);
}

.archive-column {
    max-width: 42ch;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.archive-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00f0ff;
    display: block;
    margin-bottom: 2.5rem;
    text-align: center;
}

.archive-text {
    color: #e8e0f0;
    line-height: 1.85;
    letter-spacing: 0.015em;
    margin-bottom: 1.8rem;
}

.archive-text:last-child {
    margin-bottom: 0;
}

.pulse-highlight {
    text-decoration: none;
    background-image: linear-gradient(#b8ff00, #b8ff00);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
    color: #e8e0f0;
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        background-image: linear-gradient(rgba(184, 255, 0, 0.4), rgba(184, 255, 0, 0.4));
        box-shadow: none;
    }
    50% {
        background-image: linear-gradient(#b8ff00, #b8ff00);
        box-shadow: 0 2px 8px rgba(184, 255, 0, 0.25);
    }
}

/* ============================
   CHAMBER 5 — THE SEAL
   ============================ */

.chamber-5 {
    background-color: #0d0a1a;
    background-image:
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(26, 14, 46, 0.8) 0%, transparent 70%);
}

.seal-monogram {
    text-align: center;
}

.seal-glyph {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(8rem, 20vw, 16rem);
    line-height: 1;
    color: #ff2d95;
    display: block;
    margin-bottom: 1rem;
}

.drying-ink {
    text-shadow:
        0 0 30px rgba(255, 45, 149, 0.5),
        0 0 60px rgba(255, 45, 149, 0.25),
        0 0 100px rgba(255, 45, 149, 0.1);
    animation: ink-dry 3s ease-in forwards;
}

@keyframes ink-dry {
    0% {
        text-shadow:
            0 0 30px rgba(255, 45, 149, 0.5),
            0 0 60px rgba(255, 45, 149, 0.25),
            0 0 100px rgba(255, 45, 149, 0.1);
        filter: blur(3px);
    }
    100% {
        text-shadow:
            0 0 2px rgba(255, 45, 149, 0.6),
            0 0 4px rgba(255, 45, 149, 0.2),
            0 0 8px rgba(255, 45, 149, 0.05);
        filter: blur(0px);
    }
}

.seal-subtitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.7);
    display: block;
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 768px) {
    .evidence-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1rem;
    }

    .specimen-1,
    .specimen-2,
    .specimen-3 {
        grid-column: 1 / -1;
        justify-self: stretch;
        max-width: 100%;
    }

    .specimen {
        border-radius: 38% 62% 45% 55% / 50% 50% 48% 52%;
        padding: 2rem 1.5rem;
    }

    .phenomenon-blob {
        width: 92vw;
        min-height: 50vh;
        border-radius: 35% 65% 40% 60% / 50% 50% 45% 55%;
    }

    .phenomenon-inner {
        padding: 2.5rem 1.5rem;
    }

    .chamber-content {
        padding: 3rem 1.5rem;
    }

    .flare-hero {
        width: 250px;
        height: 250px;
        top: 10%;
        left: 5%;
    }

    .flare-mid {
        width: 300px;
        height: 300px;
    }

    .flare-seal {
        width: 350px;
        height: 350px;
    }
}