/* ==========================================================================
   jeongchi.boo — Sunken Parliament
   Skeuomorphic underwater chamber. Full-bleed descent narrative.
   ========================================================================== */

:root {
    /* Ocean-Deep Parliament palette */
    --abyssal-blue: #0A1628;
    --parliamentary-teal: #12303A;
    --kelp-shadow: #1A4040;
    --verdigris-pale: #C4D4D0;
    --verdigris-paler: #D6E4DF;
    --teal-ink: #2A3A36;
    --teal-deep: #1A2A28;
    --drowned-brass: #B8976A;
    --polished-brass: #D4B896;
    --dark-brass: #9A7A52;
    --deeper-brass: #7A5F38;
    --waterlogged-parchment: #E8DFD0;
    --damask-tan: #D4C8B0;
    --jellyfish-glow: #4ECDC4;
    --trench-black: #060D18;
    --ripple-light: #6BBFAB;
    --deep-coral: #C17A5A;
    --wax-red: #8B3A3A;
    --sage: #8AABA3;

    /* Dynamic depth background — controlled by JS */
    --depth-bg-1: var(--kelp-shadow);
    --depth-bg-2: var(--abyssal-blue);
    --depth-vignette: 0.55;
    --caustic-intensity: 0.06;
}

/* --------------------------------------------------- Reset & Base */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--abyssal-blue);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'EB Garamond', 'Lora', Georgia, serif;
    color: var(--verdigris-pale);
    background:
        radial-gradient(ellipse 120% 80% at 50% 0%, var(--depth-bg-1) 0%, var(--depth-bg-2) 70%, var(--trench-black) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    min-height: 100vh;
    transition: background 1.8s ease;
    cursor: default;
}

img, svg { max-width: 100%; display: block; }

/* --------------------------------------------------- Caustic Light Layers */
#causticCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    opacity: var(--caustic-intensity);
}

.caustic-fallback {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        conic-gradient(from 0deg at 30% 20%, transparent 0deg, rgba(107,191,171,0.22) 40deg, transparent 80deg, rgba(107,191,171,0.18) 140deg, transparent 200deg, rgba(78,205,196,0.16) 280deg, transparent 360deg),
        conic-gradient(from 180deg at 70% 60%, transparent 0deg, rgba(78,205,196,0.18) 60deg, transparent 130deg, rgba(107,191,171,0.20) 220deg, transparent 320deg);
    opacity: 0.35;
    mix-blend-mode: screen;
    animation: causticDrift 24s ease-in-out infinite alternate;
    filter: blur(40px);
}

@keyframes causticDrift {
    0%   { transform: translate(0, 0) scale(1.0) rotate(0deg); }
    50%  { transform: translate(-3%, -2%) scale(1.15) rotate(8deg); }
    100% { transform: translate(2%, 4%) scale(1.05) rotate(-6deg); }
}

/* --------------------------------------------------- Section base */
.section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    margin-top: -2px; /* slight overlap for continuous depth */
    z-index: 2;
}

/* --------------------------------------------------- Bubbles */
.bubble-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.bubble {
    position: absolute;
    bottom: -12%;
    border-radius: 50%;
    will-change: transform;
    transform: translateZ(0);
    pointer-events: none;
}

.bubble-micro {
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.32), rgba(255,255,255,0.08) 40%, transparent 70%);
    border: 1px solid rgba(200,220,215,0.14);
    box-shadow:
        inset 0 0 4px rgba(255,255,255,0.18),
        0 0 4px rgba(78,205,196,0.10);
    animation: bubbleRise var(--rise, 22s) linear infinite,
               bubbleWobble var(--wob, 5s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s), var(--delay, 0s);
}

.bubble-medium {
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.14) 30%, transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(78,205,196,0.16), transparent 60%);
    border: 1px solid rgba(200,220,215,0.22);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:
        inset 0 0 12px rgba(255,255,255,0.18),
        inset -2px -4px 10px rgba(78,205,196,0.10),
        0 0 20px rgba(78,205,196,0.08);
    animation: bubbleRise var(--rise, 35s) linear infinite,
               bubbleWobble var(--wob, 7s) ease-in-out infinite alternate,
               bubbleScale var(--wob, 6s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s), var(--delay, 0s), var(--delay, 0s);
}

.bubble-large {
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 18%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(78,205,196,0.22), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(196,212,208,0.10), transparent 75%);
    border: 1.5px solid rgba(212,232,228,0.32);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow:
        inset 0 0 28px rgba(255,255,255,0.22),
        inset -4px -10px 22px rgba(78,205,196,0.18),
        0 0 50px rgba(78,205,196,0.08);
    animation: bubbleRise var(--rise, 60s) linear infinite,
               bubbleWobble var(--wob, 10s) ease-in-out infinite alternate,
               bubbleScale var(--wob, 9s) ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s), var(--delay, 0s), var(--delay, 0s);
}

@keyframes bubbleRise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    8%   { opacity: var(--op, 0.4); }
    92%  { opacity: var(--op, 0.4); }
    100% { transform: translate3d(0, calc(-100vh - 200px), 0); opacity: 0; }
}

@keyframes bubbleWobble {
    0%   { margin-left: calc(var(--wobX, 10px) * -1); }
    100% { margin-left: var(--wobX, 10px); }
}

@keyframes bubbleScale {
    0%   { scale: 0.94; }
    100% { scale: 1.06; }
}

/* --------------------------------------------------- Shared utilities */
.brass-text {
    background: linear-gradient(135deg, #D4B896 0%, #B8976A 30%, #9A7A52 55%, #D4B896 80%, #B8976A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 12px rgba(0,40,60,0.45);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
    letter-spacing: 0.02em;
}

.brass-element {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

/* ==========================================================================
   SECTION 1: THE SURFACE
   ========================================================================== */
.section-surface {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(196,212,208,0.18), transparent 70%),
        radial-gradient(ellipse 100% 80% at 50% -20%, rgba(78,205,196,0.10), transparent 60%),
        linear-gradient(180deg, #1A4848 0%, #12303A 60%, var(--abyssal-blue) 100%);
    z-index: 5;
}

.surface-light {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 40% at 30% -5%, rgba(220,235,230,0.45), transparent 70%),
        radial-gradient(ellipse 50% 35% at 70% -10%, rgba(212,232,228,0.30), transparent 65%);
    mix-blend-mode: screen;
    z-index: 3;
}

.surface-waves {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 32vh;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.wave {
    position: absolute;
    top: -10%;
    left: -50%;
    width: 200%;
    height: 60%;
    border-radius: 47% 53% 50% 50% / 30% 30% 70% 70%;
    opacity: 0.25;
    filter: blur(14px);
    animation: waveDrift 18s ease-in-out infinite alternate;
}

.wave-1 {
    background: radial-gradient(ellipse at 50% 100%, rgba(212,232,228,0.5), transparent 70%);
    animation-duration: 22s;
}

.wave-2 {
    top: -2%;
    background: radial-gradient(ellipse at 50% 100%, rgba(78,205,196,0.32), transparent 65%);
    animation-duration: 28s;
    animation-delay: -4s;
}

.wave-3 {
    top: 6%;
    background: radial-gradient(ellipse at 50% 100%, rgba(107,191,171,0.40), transparent 65%);
    animation-duration: 35s;
    animation-delay: -10s;
}

@keyframes waveDrift {
    0%   { transform: translateX(-3%) scaleY(1); }
    100% { transform: translateX(3%) scaleY(1.08); }
}

.hero-floating {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 6;
    width: min(92vw, 1100px);
    padding: 0 4vw;
    animation: heroSink 14s ease-in-out infinite alternate;
}

@keyframes heroSink {
    0%   { transform: translate(-50%, -52%); }
    100% { transform: translate(-50%, -46%); }
}

.hero-eyebrow {
    font-family: 'Cormorant Garamond', 'Cormorant', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 18px);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--sage);
    margin: 0 0 1.4em 0;
    text-shadow: 0 0 14px rgba(78,205,196,0.18);
}

.hero-title {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: clamp(58px, 11vw, 168px);
    line-height: 0.96;
    margin: 0;
    letter-spacing: 0.01em;
    cursor: default;
}

.hero-title .dot {
    color: var(--polished-brass);
    -webkit-text-fill-color: var(--polished-brass);
    background: none;
    margin: 0 -0.04em;
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.6;
    color: var(--verdigris-paler);
    margin: 1.6em auto 0;
    max-width: 620px;
    text-shadow: 0 1px 4px rgba(6,13,24,0.6);
}

/* Compass rose */
.compass-rose {
    position: absolute;
    bottom: 6vh;
    right: 8vw;
    z-index: 7;
    cursor: pointer;
    text-align: center;
    filter: drop-shadow(0 4px 12px rgba(6,13,24,0.7));
    animation: compassFloat 6s ease-in-out infinite alternate;
}

@keyframes compassFloat {
    0%   { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-8px) rotate(2deg); }
}

.compass-rose svg {
    border-radius: 50%;
    box-shadow:
        inset 0 2px 4px rgba(255,235,200,0.4),
        inset 0 -2px 4px rgba(0,0,0,0.4),
        0 6px 18px rgba(6,13,24,0.7),
        0 0 0 2px rgba(0,0,0,0.4);
}

.compass-caption {
    display: block;
    margin-top: 8px;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    color: var(--sage);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ==========================================================================
   DEPTH GAUGE (persistent right edge)
   ========================================================================== */
.depth-gauge {
    position: fixed;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    width: 64px;
    height: 60vh;
    max-height: 540px;
    z-index: 100;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-family: 'Cormorant Garamond', serif;
}

.gauge-tube {
    position: relative;
    width: 36px;
    flex: 1;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(212,232,228,0.06) 0%, rgba(10,22,40,0.45) 100%);
    box-shadow:
        inset 0 0 18px rgba(0,0,0,0.5),
        inset 0 0 0 1px rgba(184,151,106,0.4),
        0 6px 22px rgba(0,0,0,0.55);
    border: 2px solid rgba(184,151,106,0.55);
    overflow: hidden;
}

.gauge-tube::before {
    /* Brass cap top */
    content: '';
    position: absolute;
    top: -10px; left: -4px; right: -4px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(180deg, #D4B896 0%, #B8976A 50%, #7A5F38 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,235,200,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.5);
}

.gauge-tube::after {
    /* Brass cap bottom */
    content: '';
    position: absolute;
    bottom: -10px; left: -4px; right: -4px;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(0deg, #D4B896 0%, #B8976A 50%, #7A5F38 100%);
    box-shadow:
        inset 0 -1px 0 rgba(255,235,200,0.6),
        inset 0 1px 0 rgba(0,0,0,0.5),
        0 -2px 4px rgba(0,0,0,0.5);
}

.gauge-glass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.18) 0%, transparent 35%, transparent 65%, rgba(255,255,255,0.06) 100%);
    pointer-events: none;
    backdrop-filter: blur(2px);
}

.gauge-marks {
    position: absolute;
    inset: 8px 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.gauge-marks .mark {
    position: relative;
    color: var(--sage);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 10px;
    text-align: center;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    line-height: 1;
}

.gauge-marks .mark::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px; right: -2px;
    height: 1px;
    background: rgba(184,151,106,0.45);
    transform: translateY(-50%);
}

.gauge-marks .mark.major { color: var(--polished-brass); font-size: 9px; }
.gauge-marks .mark.minor { font-size: 0; }
.gauge-marks .mark.minor::before { background: rgba(184,151,106,0.25); left: 4px; right: 4px; }

.gauge-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    width: 30px;
    height: 16px;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #D4B896 0%, #B8976A 50%, #7A5F38 100%);
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255,235,200,0.7),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 2px 6px rgba(0,0,0,0.6),
        0 0 12px rgba(78,205,196,0.25);
    z-index: 4;
    transition: top 0.3s ease-out;
}

.gauge-indicator::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 1px 0 rgba(255,235,200,0.4);
}

.gauge-readout {
    width: 64px;
    padding: 8px 4px 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, #1A2A28 0%, #060D18 100%);
    border: 1.5px solid rgba(184,151,106,0.55);
    box-shadow:
        inset 0 1px 0 rgba(184,151,106,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 4px 12px rgba(0,0,0,0.55);
    text-align: center;
    line-height: 1;
}

.readout-depth {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    color: var(--jellyfish-glow);
    text-shadow: 0 0 10px rgba(78,205,196,0.55);
    letter-spacing: 0.04em;
}

.readout-unit {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    color: var(--polished-brass);
    letter-spacing: 0.2em;
    margin-top: 2px;
}

.readout-pressure {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 10px;
    color: var(--sage);
    margin-top: 4px;
    letter-spacing: 0.06em;
}

/* ==========================================================================
   ZONE HEADERS (shared)
   ========================================================================== */
.zone-header {
    position: absolute;
    top: 6vh;
    left: 5vw;
    z-index: 8;
    max-width: 56vw;
}

.zone-header-center {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width: 80vw;
}

.zone-header-right {
    left: auto;
    right: 6vw;
    text-align: right;
}

.zone-numeral {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 30px);
    letter-spacing: 0.18em;
    color: var(--drowned-brass);
    margin-bottom: 0.4em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.zone-title {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: clamp(40px, 5.5vw, 84px);
    line-height: 1.1;
    margin: 0 0 0.4em 0;
    letter-spacing: 0.02em;
    cursor: default;
}

.zone-meta {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(14px, 1.2vw, 17px);
    color: var(--sage);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}

/* ==========================================================================
   SECTION 2: THE ATRIUM (plaques)
   ========================================================================== */
.section-atrium {
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(78,205,196,0.08), transparent 70%),
        linear-gradient(180deg, var(--kelp-shadow) 0%, var(--parliamentary-teal) 60%, #0E2030 100%);
    padding: 0 0 8vh;
    z-index: 5;
}

/* Plaque base */
.plaque {
    position: absolute;
    width: var(--w, 32%);
    top: var(--top, 20%);
    left: var(--left, 10%);
    transform: rotate(var(--rot, 0deg));
    padding: 36px 38px 32px;
    z-index: 9;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20 L20 0 L20 20 L40 0 L40 20 L20 40 L20 20 L0 40 Z' fill='rgba(138,171,163,0.04)'/><path d='M0 0 L20 20 M20 0 L0 20 M20 20 L40 40 M40 20 L20 40' stroke='rgba(196,212,208,0.07)' stroke-width='0.5'/></svg>"),
        linear-gradient(145deg, #2A3A36 0%, var(--teal-deep) 60%, #14201E 100%);
    border: 2px solid var(--drowned-brass);
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(212,184,150,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        inset 0 0 60px rgba(0,0,0,0.4),
        0 14px 38px rgba(6,13,24,0.7),
        0 4px 14px rgba(6,13,24,0.55);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
    will-change: transform;
}

/* leather noise overlay using SVG filter via pseudo */
.plaque::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(184,151,106,0.06), transparent 60%),
        radial-gradient(ellipse at 70% 70%, rgba(0,0,0,0.18), transparent 60%);
    mix-blend-mode: overlay;
    opacity: 0.7;
}

.plaque::after {
    /* Subtle inner gold rule */
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(184,151,106,0.32);
    border-radius: 2px;
    pointer-events: none;
}

.plaque-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: auto;
    background:
        linear-gradient(135deg, #D4B896 0%, #B8976A 40%, #9A7A52 70%, #D4B896 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,235,200,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 1px 3px rgba(0,0,0,0.45);
    z-index: 4;
}

.plaque-corner.tl {
    top: -4px; left: -4px;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 30% 30%, 30% 100%, 0 100%);
    border-radius: 4px 0 0 0;
}

.plaque-corner.tr {
    top: -4px; right: -4px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 100%, 70% 30%, 0 30%);
    border-radius: 0 4px 0 0;
}

.plaque-corner.bl {
    bottom: -4px; left: -4px;
    clip-path: polygon(0 0, 30% 0, 30% 70%, 100% 70%, 100% 100%, 0 100%);
    border-radius: 0 0 0 4px;
}

.plaque-corner.br {
    bottom: -4px; right: -4px;
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%, 0 70%, 70% 70%);
    border-radius: 0 0 4px 0;
}

.plaque-title {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.25;
    margin: 0 0 16px 0;
    color: var(--polished-brass);
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(184,151,106,0.28);
    padding-bottom: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    position: relative;
    z-index: 2;
}

.plaque-body {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.7;
    color: var(--verdigris-paler);
    margin: 0 0 14px 0;
    position: relative;
    z-index: 2;
}

.plaque-italic {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.6;
    color: var(--verdigris-pale);
    margin: 0 0 12px 0;
    position: relative;
    z-index: 2;
}

.plaque-attr {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 13px;
    color: var(--sage);
    letter-spacing: 0.06em;
    margin: 0;
    position: relative;
    z-index: 2;
}

.plaque-small {
    padding: 28px 30px 24px;
}

/* ==========================================================================
   SECTION 3: THE CHAMBER FLOOR
   ========================================================================== */
.section-chamber {
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(78,205,196,0.06), transparent 65%),
        linear-gradient(180deg, #0E2030 0%, var(--abyssal-blue) 50%, #08111F 100%);
    padding: 0 0 12vh;
    z-index: 5;
    min-height: 130vh;
}

/* Parliamentary seal in massive bubble */
.seal-container {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.seal-bubble {
    position: relative;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.10) 22%, transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(78,205,196,0.16), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(196,212,208,0.05), transparent 80%);
    border: 2px solid rgba(212,232,228,0.32);
    box-shadow:
        inset 0 0 50px rgba(255,255,255,0.10),
        inset -8px -16px 40px rgba(78,205,196,0.18),
        0 0 80px rgba(78,205,196,0.12),
        0 24px 60px rgba(6,13,24,0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: grid;
    place-items: center;
    animation: sealFloat 9s ease-in-out infinite alternate;
    pointer-events: auto;
}

@keyframes sealFloat {
    0%   { transform: translateY(0) rotate(-1deg); }
    100% { transform: translateY(-14px) rotate(2deg); }
}

.seal-svg {
    width: 320px;
    height: 320px;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
    cursor: default;
}

/* Law book pages */
.lawbook {
    position: absolute;
    width: var(--w, 30%);
    top: var(--top, 20%);
    left: var(--left, 10%);
    transform: rotate(var(--rot, 0deg));
    z-index: 9;
    animation: lawbookDrift var(--driftDur, 18s) ease-in-out infinite alternate;
}

@keyframes lawbookDrift {
    0%   { transform: rotate(var(--rot, 0deg)) translateY(0); }
    100% { transform: rotate(calc(var(--rot, 0deg) + 0.6deg)) translateY(-10px); }
}

.lawbook:nth-child(odd) { --driftDur: 22s; }
.lawbook:nth-child(even) { --driftDur: 17s; animation-delay: -3s; }

.lawbook-page {
    position: relative;
    padding: 38px 42px 34px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><pattern id='d' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'><path d='M40 0 C50 12 68 18 80 30 C68 42 50 48 40 60 C30 48 12 42 0 30 C12 18 30 12 40 0 Z' fill='none' stroke='%239A7A52' stroke-width='0.6' opacity='0.32'/><circle cx='40' cy='30' r='3' fill='%23B8976A' opacity='0.28'/></pattern><rect width='80' height='80' fill='url(%23d)'/></svg>"),
        linear-gradient(145deg, var(--waterlogged-parchment) 0%, #DDD2BE 60%, var(--damask-tan) 100%);
    color: var(--teal-ink);
    border-radius: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(140,110,60,0.3),
        inset 0 0 60px rgba(212,200,176,0.4),
        0 14px 36px rgba(6,13,24,0.65),
        0 4px 12px rgba(6,13,24,0.5);
    /* deckled edges via clip-path */
    clip-path: polygon(
        0% 2%, 1% 0%, 8% 1%, 16% 0%, 28% 1%, 40% 0%, 52% 1%, 64% 0%, 76% 1%, 88% 0%, 99% 1%, 100% 4%,
        99% 12%, 100% 24%, 99% 36%, 100% 48%, 99% 60%, 100% 72%, 99% 84%, 100% 96%, 98% 100%,
        88% 99%, 76% 100%, 64% 99%, 52% 100%, 40% 99%, 28% 100%, 16% 99%, 8% 100%, 1% 99%, 0% 96%,
        1% 84%, 0% 72%, 1% 60%, 0% 48%, 1% 36%, 0% 24%, 1% 12%
    );
}

.lawbook-page::before {
    /* Faint margin rule */
    content: '';
    position: absolute;
    left: 22px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: rgba(193,122,90,0.35);
}

.page-folio {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    color: var(--dark-brass);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    margin-bottom: 14px;
    text-align: center;
}

.lawbook-title {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.3;
    color: var(--teal-ink);
    margin: 0 0 18px 0;
    text-align: center;
    border-bottom: 1px solid rgba(154,122,82,0.35);
    padding-bottom: 14px;
}

.lawbook-title em {
    display: block;
    font-style: italic;
    font-weight: 400;
    font-size: 0.72em;
    color: var(--dark-brass);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.lawbook-page p {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.75;
    color: var(--teal-ink);
    margin: 0 0 12px 0;
    text-indent: 1.4em;
}

.lawbook-page p:first-of-type { text-indent: 0; }

/* Wax seal */
.wax-seal-container {
    position: absolute;
    bottom: 8vh;
    right: 6vw;
    z-index: 11;
    text-align: center;
    transform: rotate(-6deg);
}

.wax-seal {
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.65));
    cursor: default;
}

.wax-caption {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    color: var(--sage);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 8px 0 0 0;
    transform: rotate(6deg);
}

/* ==========================================================================
   SECTION 4: THE ARCHIVES
   ========================================================================== */
.section-archives {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(78,205,196,0.05), transparent 65%),
        linear-gradient(180deg, #08111F 0%, var(--trench-black) 70%, #04080F 100%);
    padding: 0 0 14vh;
    z-index: 5;
    min-height: 110vh;
}

.biolume-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.biolume {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--jellyfish-glow);
    box-shadow:
        0 0 8px var(--jellyfish-glow),
        0 0 22px rgba(78,205,196,0.55),
        0 0 40px rgba(78,205,196,0.25);
    animation: biolumePulse var(--d, 10s) ease-in-out infinite alternate;
}

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

.archive-row {
    position: absolute;
    top: 36%;
    left: 8vw;
    right: 8vw;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    justify-content: space-between;
    z-index: 9;
}

.nameplate {
    flex: 1 1 240px;
    min-width: 240px;
    padding: 22px 26px;
    transform: rotate(var(--rot, 0deg));
    background:
        linear-gradient(135deg, #D4B896 0%, #B8976A 30%, #9A7A52 55%, #B8976A 80%, #D4B896 100%);
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255,235,200,0.65),
        inset 0 -1px 0 rgba(0,0,0,0.55),
        inset 0 0 24px rgba(0,0,0,0.18),
        0 10px 24px rgba(6,13,24,0.6),
        0 0 22px rgba(78,205,196,0.05);
    color: var(--abyssal-blue);
    text-align: center;
    cursor: default;
    position: relative;
}

.nameplate::before {
    /* Cross-hatch engraving overlay */
    content: '';
    position: absolute;
    inset: 6px;
    background:
        repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(0,0,0,0.06) 4px, rgba(0,0,0,0.06) 5px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 5px);
    border: 1px solid rgba(0,0,0,0.25);
    border-radius: 2px;
    pointer-events: none;
}

.np-numeral {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.22em;
    color: rgba(10,22,40,0.85);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}

.np-title {
    display: block;
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.35;
    color: rgba(10,22,40,0.9);
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 0 rgba(255,235,200,0.4);
}

.np-meta {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 12px;
    color: rgba(10,22,40,0.7);
    letter-spacing: 0.1em;
    position: relative;
    z-index: 2;
}

/* Stone tablet */
.stone-tablet {
    position: absolute;
    top: 64%;
    left: 50%;
    transform: translateX(-50%) rotate(0.6deg);
    width: min(560px, 70vw);
    padding: 36px 44px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(196,212,208,0.10), transparent 60%),
        linear-gradient(145deg, #1F2D2D 0%, #16201F 60%, #0E1716 100%);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(196,212,208,0.10),
        inset 0 -2px 4px rgba(0,0,0,0.6),
        0 14px 36px rgba(0,0,0,0.7);
    z-index: 9;
    text-align: center;
}

.stone-tablet::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(196,212,208,0.18);
    border-radius: 4px;
    pointer-events: none;
}

.tablet-text {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(15px, 1.3vw, 20px);
    line-height: 1.7;
    color: var(--verdigris-pale);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow:
        0 1px 1px rgba(0,0,0,0.7),
        0 -1px 0 rgba(196,212,208,0.10);
    margin: 0;
}

.tablet-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--drowned-brass);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255,235,200,0.5),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        0 1px 3px rgba(0,0,0,0.55);
}

.tc-tl { top: -6px; left: -6px; }
.tc-tr { top: -6px; right: -6px; }
.tc-bl { bottom: -6px; left: -6px; }
.tc-br { bottom: -6px; right: -6px; }

.archive-quote {
    position: absolute;
    bottom: 6vh;
    left: 8vw;
    max-width: 480px;
    z-index: 9;
}

.aq-mark {
    font-family: 'EB Garamond', serif;
    font-weight: 600;
    font-size: 80px;
    line-height: 0.5;
    color: var(--drowned-brass);
    margin: 0 0 -14px 0;
    text-shadow: 0 0 20px rgba(78,205,196,0.18);
}

.aq-text {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.6;
    color: var(--verdigris-paler);
    margin: 0 0 12px 0;
}

.aq-attr {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    color: var(--sage);
    letter-spacing: 0.12em;
    margin: 0;
}

/* ==========================================================================
   SECTION 5: THE TRENCH (Footer)
   ========================================================================== */
.section-trench {
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(78,205,196,0.10), transparent 70%),
        linear-gradient(180deg, #04080F 0%, var(--trench-black) 50%, #02050A 100%);
    min-height: 90vh;
    z-index: 5;
}

.trench-jelly {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9;
    width: min(90vw, 720px);
}

.jelly-bell {
    position: relative;
    width: 100px;
    height: 70px;
    margin: 0 auto 0;
    border-radius: 50% 50% 40% 40%;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(78,205,196,0.6) 0%, rgba(78,205,196,0.18) 50%, transparent 80%);
    box-shadow:
        0 0 30px rgba(78,205,196,0.4),
        0 0 70px rgba(78,205,196,0.2),
        inset 0 -8px 14px rgba(78,205,196,0.4);
    animation: jellyDrift 8s ease-in-out infinite alternate;
}

@keyframes jellyDrift {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-12px) scale(1.06); }
    100% { transform: translateY(0) scale(0.96); }
}

.jelly-pulse {
    position: absolute;
    inset: -10%;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 30%, rgba(78,205,196,0.4), transparent 70%);
    animation: jellyPulse 3.5s ease-in-out infinite;
    pointer-events: none;
}

.jelly-pulse-2 {
    animation-delay: -1.6s;
    inset: -25%;
    opacity: 0.5;
}

@keyframes jellyPulse {
    0%   { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}

.jelly-tendrils {
    position: relative;
    width: 100px;
    height: 100px;
    margin: -8px auto 24px;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
}

.jelly-tendrils span {
    display: block;
    width: 1.5px;
    height: 100%;
    background: linear-gradient(180deg, rgba(78,205,196,0.6) 0%, transparent 100%);
    border-radius: 1px;
    animation: tendrilSway 4s ease-in-out infinite alternate;
    transform-origin: top center;
    box-shadow: 0 0 6px rgba(78,205,196,0.4);
}

.jelly-tendrils span:nth-child(1) { animation-delay: -0.2s; }
.jelly-tendrils span:nth-child(2) { animation-delay: -0.6s; height: 86%; }
.jelly-tendrils span:nth-child(3) { animation-delay: -1.0s; height: 110%; }
.jelly-tendrils span:nth-child(4) { animation-delay: -1.5s; height: 78%; }
.jelly-tendrils span:nth-child(5) { animation-delay: -1.9s; height: 96%; }

@keyframes tendrilSway {
    0%   { transform: rotate(-6deg) scaleY(0.95); }
    100% { transform: rotate(6deg) scaleY(1.05); }
}

.jelly-text {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--verdigris-pale);
    letter-spacing: 0.1em;
    margin: 0 0 8px 0;
}

.jelly-year {
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-weight: 700;
    color: var(--polished-brass);
    letter-spacing: 0.18em;
    font-size: 0.92em;
}

.jelly-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(12px, 1vw, 14px);
    color: var(--sage);
    letter-spacing: 0.08em;
    margin: 0;
    opacity: 0.8;
}

/* --------------------------------------------------- Cursor halo (subtle) */
.cursor-halo {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,184,150,0.18) 0%, rgba(78,205,196,0.10) 50%, transparent 80%);
    transform: translate(-50%, -50%);
    z-index: 200;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    mix-blend-mode: screen;
}

.cursor-halo.is-active {
    opacity: 1;
}

.cursor-halo.is-magnetic {
    width: 64px;
    height: 64px;
    background: radial-gradient(circle, rgba(212,184,150,0.32) 0%, rgba(78,205,196,0.18) 50%, transparent 80%);
}

/* --------------------------------------------------- Responsive: tablet */
@media (max-width: 980px) {
    .depth-gauge { right: 10px; width: 52px; }
    .gauge-readout { width: 52px; }

    .hero-title { font-size: clamp(48px, 14vw, 92px); }

    .plaque {
        position: relative;
        width: 90vw !important;
        top: auto !important;
        left: 5vw !important;
        margin-bottom: 36px;
    }

    .section-atrium {
        padding-top: 32vh;
        padding-bottom: 8vh;
    }

    .section-atrium .zone-header { position: relative; top: 0; left: 0; padding: 8vh 5vw 4vh; max-width: 90vw; }

    .lawbook {
        position: relative;
        width: 90vw !important;
        top: auto !important;
        left: 5vw !important;
        margin: 24px 0;
    }

    .seal-container {
        position: relative;
        top: 0; left: 50%;
        transform: translateX(-50%);
        margin: 32px auto 24px;
    }

    .seal-bubble { width: 280px; height: 280px; }
    .seal-svg { width: 240px; height: 240px; }

    .section-chamber {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 6vh;
    }

    .section-chamber .zone-header {
        position: relative;
        top: 0; left: 50%;
        transform: translateX(-50%);
        max-width: 90vw;
    }

    .archive-row {
        position: relative;
        top: 0; left: 0; right: 0;
        flex-direction: column;
        padding: 20vh 8vw 4vh;
    }

    .stone-tablet {
        position: relative;
        top: 0; left: 50%;
        transform: translateX(-50%) rotate(0.6deg);
        margin: 20px auto;
    }

    .archive-quote {
        position: relative;
        top: 0; left: 5vw;
        max-width: 90vw;
        margin: 32px 0 4vh;
    }

    .section-archives {
        display: flex;
        flex-direction: column;
        padding-top: 2vh;
        min-height: auto;
    }

    .section-archives .zone-header {
        position: relative;
        top: 0; right: auto; left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .wax-seal-container { position: relative; bottom: 0; right: 0; margin: 20px auto; }
}

@media (max-width: 600px) {
    .depth-gauge { right: 4px; width: 44px; transform: translateY(-50%) scale(0.85); transform-origin: right center; }
    .compass-rose { right: 4vw; bottom: 14vh; }
    .hero-floating { padding: 0 6vw; top: 36%; }
    .seal-bubble { width: 240px; height: 240px; }
    .seal-svg { width: 200px; height: 200px; }
}

/* --------------------------------------------------- Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bubble, .wave, .seal-bubble, .lawbook, .hero-floating, .biolume,
    .jelly-bell, .jelly-pulse, .jelly-tendrils span, .compass-rose, .caustic-fallback {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
    }
}