/* ============================================
   gabs.report — Pop-Art Field Report
   ============================================ */

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

:root {
    --earth-primary: #5c4a3a;
    --earth-secondary: #8b7355;
    --earth-light: #d9cfc2;
    --pop-magenta: #c2185b;
    --pop-teal: #00695c;
    --pop-amber: #e65100;
    --ground-black: #1a1510;
    --ground-white: #f5f0e8;
}

html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--ground-white);
    color: var(--ground-black);
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

/* --- Plate Indicator --- */
.plate-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--earth-primary);
    color: var(--ground-white);
    font-family: 'Inconsolata', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: background 0.6s ease;
}

.plate-indicator.dark-mode {
    background: var(--pop-magenta);
}

/* --- Plate Base --- */
.plate {
    position: relative;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Reveal Animation --- */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Background Text --- */
.bg-text {
    position: absolute;
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(8rem, 20vw, 18rem);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
    opacity: 0;
    color: var(--earth-primary);
    pointer-events: none;
    z-index: 0;
}
.bg-text.revealed { opacity: 0.06; transform: translateY(0); }

/* --- Typography --- */
.plate-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 0.95;
}

.body-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.65;
    letter-spacing: 0.005em;
    max-width: clamp(280px, 45vw, 520px);
}

.data-label {
    display: block;
    font-family: 'Inconsolata', monospace;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--earth-primary);
    margin-top: 1.5rem;
}

/* --- Watercolor Washes --- */
.watercolor-wash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    filter: url(#watercolor-warp);
}

.plate.active .watercolor-wash { opacity: 1; }

.wash-1 {
    background:
        radial-gradient(ellipse 60% 50% at 25% 35%, rgba(92,74,58,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 45% 60% at 70% 65%, rgba(194,24,91,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 80%, rgba(92,74,58,0.05) 0%, transparent 70%);
    mix-blend-mode: multiply;
}

.wash-2 {
    background:
        radial-gradient(ellipse 55% 55% at 70% 30%, rgba(139,115,85,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 50% 65% at 30% 60%, rgba(0,105,92,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 70% 35% at 50% 90%, rgba(139,115,85,0.05) 0%, transparent 70%);
    mix-blend-mode: multiply;
}

.wash-3 {
    background:
        radial-gradient(ellipse 50% 50% at 75% 25%, rgba(230,81,0,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 60% 45% at 30% 50%, rgba(92,74,58,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 70% at 60% 75%, rgba(230,81,0,0.06) 0%, transparent 70%);
    mix-blend-mode: multiply;
}

.wash-4 {
    background:
        radial-gradient(ellipse 60% 60% at 40% 40%, rgba(194,24,91,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 70% 70%, rgba(194,24,91,0.08) 0%, transparent 70%);
    mix-blend-mode: screen;
}

.wash-5 {
    background:
        radial-gradient(ellipse 40% 50% at 20% 30%, rgba(194,24,91,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 45% 45% at 60% 25%, rgba(0,105,92,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(230,81,0,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 55% at 40% 60%, rgba(92,74,58,0.06) 0%, transparent 70%);
    mix-blend-mode: multiply;
}

/* --- Ben-Day Dots --- */
.ben-day-dots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    filter: url(#watercolor-warp);
}

.dots-1 {
    top: 66%;
    background: radial-gradient(circle 2px at 4px 4px, rgba(194,24,91,0.08) 2px, transparent 2px);
    background-size: 8px 8px;
}

/* ============================================
   PLATE 1 — Signal Received
   ============================================ */
.plate-1 { background: var(--ground-white); }

.plate-1 .bg-text {
    top: 5%;
    left: -5%;
}

.plate-1-title {
    position: absolute;
    top: 12%;
    left: 5%;
    color: var(--earth-primary);
    z-index: 2;
    max-width: 70vw;
    overflow: hidden;
}

.plate-1-body {
    position: absolute;
    bottom: 25%;
    left: 8%;
    z-index: 2;
}
.plate-1 .body-text { color: var(--ground-black); }
.plate-1 .data-label { color: var(--pop-magenta); }

.svg-concentric {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: clamp(200px, 35vw, 400px);
    height: clamp(200px, 35vw, 400px);
    z-index: 1;
}

.ring {
    fill: none;
    stroke-width: 1.5px;
}
.plate-1 .ring { stroke: var(--pop-magenta); }
.ring-outer { stroke-dasharray: 12 6; animation: rotate-ring 90s linear infinite; transform-origin: center; }
.ring-mid { stroke-dasharray: 8 4; animation: rotate-ring 70s linear infinite reverse; transform-origin: center; }
.ring-inner { stroke-dasharray: 6 8; animation: rotate-ring 50s linear infinite; transform-origin: center; }
.ring-core { stroke-dasharray: 4 10; animation: rotate-ring 35s linear infinite reverse; transform-origin: center; }
.ring-center { fill: var(--pop-magenta); opacity: 0.3; stroke: none; }

@keyframes rotate-ring { to { transform: rotate(360deg); } }

/* ============================================
   PLATE 2 — Depth Mapping
   ============================================ */
.plate-2 { background: var(--ground-white); }

.depth-lines {
    position: absolute;
    top: 15%;
    left: 5%;
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    z-index: 2;
}

.depth-line {
    height: 2px;
    background: var(--earth-secondary);
    position: relative;
}
.depth-line .data-label {
    position: absolute;
    right: -3.5rem;
    top: -0.6rem;
    margin: 0;
    color: var(--pop-teal);
    font-size: 0.75rem;
}

.plate-2-body {
    position: absolute;
    top: 20%;
    right: 8%;
    z-index: 2;
    text-align: right;
}
.plate-2 .plate-title { color: var(--earth-secondary); }
.plate-2 .body-text { margin-left: auto; color: var(--ground-black); }
.plate-2 .data-label { color: var(--pop-teal); }

.svg-polygon-mesh {
    position: absolute;
    bottom: 8%;
    left: 5%;
    width: clamp(180px, 30vw, 350px);
    height: clamp(180px, 30vw, 350px);
    z-index: 1;
}

.mesh-poly {
    fill: rgba(139,115,85,0.06);
    stroke: var(--pop-teal);
    stroke-width: 1.5px;
}
.mesh-line {
    stroke: var(--pop-teal);
    stroke-width: 0.75px;
    opacity: 0.4;
}

/* ============================================
   PLATE 3 — Erosion Pattern
   ============================================ */
.plate-3 { background: var(--ground-white); }

.massive-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Archivo Black', sans-serif;
    font-size: 95vh;
    line-height: 1;
    color: rgba(92,74,58,0.07);
    pointer-events: none;
    z-index: 0;
}
.massive-letter.revealed { opacity: 1; transform: translate(-50%, -50%); }

.plate-3-body {
    position: absolute;
    top: 30%;
    left: 15%;
    z-index: 2;
}
.plate-3 .plate-title { color: var(--pop-amber); }
.plate-3 .body-text { color: var(--ground-black); }
.plate-3 .data-label { color: var(--pop-amber); }

.svg-waves {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: clamp(200px, 40vw, 500px);
    height: auto;
    z-index: 1;
}

.wave-path {
    fill: none;
    stroke-width: 1.5px;
}
.wave-1 { stroke: var(--pop-amber); opacity: 0.6; }
.wave-2 { stroke: var(--earth-primary); opacity: 0.4; }
.wave-3 { stroke: var(--pop-amber); opacity: 0.3; }

/* ============================================
   PLATE 4 — Night Survey
   ============================================ */
.plate-4 { background: var(--ground-black); }

.plate-4-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
}
.plate-4 .body-text {
    color: var(--earth-light);
    max-width: clamp(280px, 50vw, 560px);
    text-align: center;
}
.plate-4 .data-label { color: var(--pop-magenta); text-align: center; }

.svg-node-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.node-line {
    stroke: var(--pop-magenta);
    stroke-width: 1px;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: flow-line 8s linear infinite;
}
.node-line:nth-child(2n) { animation-delay: -2s; }
.node-line:nth-child(3n) { animation-delay: -4s; }

@keyframes flow-line {
    0% { stroke-dashoffset: 200; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -200; }
}

.node-dot {
    fill: var(--pop-magenta);
    animation: pulse-node 4s ease-in-out infinite;
}
.node-dot:nth-child(2n) { animation-delay: -1.5s; }
.node-dot:nth-child(3n) { animation-delay: -3s; }

@keyframes pulse-node {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ============================================
   PLATE 5 — Report Filed
   ============================================ */
.plate-5 {
    background: var(--earth-primary);
    position: relative;
}

.contour-border {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(217,207,194,0.15);
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
    filter: url(#contour-warp);
}
.contour-border::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(217,207,194,0.10);
}
.contour-border::after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(217,207,194,0.06);
}

.plate-5-body {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 3;
}
.plate-5 .plate-title { color: var(--ground-white); }
.plate-5 .body-text { color: var(--earth-light); }
.plate-5 .data-label { color: var(--pop-teal); }

.colophon-date {
    font-family: 'Inconsolata', monospace;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    color: var(--pop-amber);
    margin-top: 2rem;
}

.svg-composite {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    z-index: 2;
}

.comp-ring {
    fill: none;
    stroke-width: 1px;
    stroke-dasharray: 10 5;
    transform-origin: center;
}
.comp-ring-1 { stroke: var(--pop-magenta); opacity: 0.4; animation: rotate-ring 90s linear infinite; }
.comp-ring-2 { stroke: var(--pop-teal); opacity: 0.4; animation: rotate-ring 70s linear infinite reverse; }
.comp-ring-3 { stroke: var(--pop-amber); opacity: 0.4; animation: rotate-ring 50s linear infinite; }

.comp-line { stroke-width: 1.5px; opacity: 0.5; }
.comp-line-magenta { stroke: var(--pop-magenta); }
.comp-line-teal { stroke: var(--pop-teal); }
.comp-line-amber { stroke: var(--pop-amber); }

.comp-poly {
    fill: rgba(92,74,58,0.08);
    stroke: var(--earth-light);
    stroke-width: 0.75px;
    opacity: 0.5;
}

.comp-node { }
.comp-node-magenta { fill: var(--pop-magenta); }
.comp-node-teal { fill: var(--pop-teal); }
.comp-node-amber { fill: var(--pop-amber); }

/* --- Interstitial Bleed --- */
.plate + .plate::before {
    content: '';
    position: absolute;
    top: -5vh;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(217,207,194,0.3) 40%,
        rgba(217,207,194,0.3) 60%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 5;
    filter: url(#watercolor-warp);
}

.plate-4::before {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(26,21,16,0.5) 40%,
        rgba(26,21,16,0.5) 60%,
        transparent 100%
    );
}

.plate-5::before {
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(92,74,58,0.4) 40%,
        rgba(92,74,58,0.4) 60%,
        transparent 100%
    );
}