/* ══════════════════════════════════════════════════════════════
   ABOUT — Oklahoma map, full-page scroll background
   Geometry and camera live in /assets/okmap.js, which writes
   --x --y (percent), --k, --rx, --rz (deg) and --cx --cy (map units,
   0..1000 x 0..500) onto .o-stage.
   ══════════════════════════════════════════════════════════════ */

.o-stage {
    --W: min(44vw, 80vh);             /* map width at k = 1 */
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 50% at 68% 48%, rgba(16, 201, 138, 0.16), rgba(16, 201, 138, 0) 70%),
        #0d110f;
    perspective: 1600px;
    perspective-origin: 50% 35%;
}

.o-cam {
    position: absolute;
    left: calc(var(--x, 50) * 1%);
    top: calc(var(--y, 55) * 1%);
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    transform:
        scale3d(var(--k, 1), var(--k, 1), var(--k, 1))
        rotateX(calc(var(--rx, 58) * 1deg))
        rotateZ(calc(var(--rz, 0) * 1deg));
}

/* the map plane, shifted so (--cx, --cy) sits on the camera origin */
.o-plane {
    position: absolute;
    width: var(--W);
    height: calc(var(--W) / 2);
    left: calc(var(--W) / -2);
    top: calc(var(--W) / -4);
    transform-style: preserve-3d;
    transform: translate3d(
        calc((500 - var(--cx, 500)) * var(--W) / 1000),
        calc((250 - var(--cy, 250)) * var(--W) / 1000),
        0);
}
.o-plane svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* slab thickness */
.o-edge { transform: translateZ(calc(var(--d) * var(--W) * -0.0028)); }
.o-edge path { fill: #070a08; stroke: rgba(16, 201, 138, calc(0.22 - var(--d) * 0.025)); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

.o-land { fill: #101713; }
.o-grid { stroke: rgba(16, 201, 138, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.o-contour { fill: none; stroke: rgba(16, 201, 138, calc(var(--west, 0.5) * 0.7)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.o-contour.major { stroke: rgba(62, 224, 168, 0.55); stroke-width: 1.3; }
.o-border { fill: none; stroke: #10c98a; stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(16, 201, 138, 0.7)); }

.o-route {
    fill: none;
    stroke: #3ee0a8;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px rgba(16, 201, 138, 0.9));
}
.o-town { fill: #e9fff6; opacity: 0; filter: drop-shadow(0 0 5px #10c98a); transition: opacity 0.3s; }
.o-label {
    font: 700 13px 'Space Mono', monospace;
    letter-spacing: 1px;
    fill: rgba(240, 240, 237, 0.8);
    paint-order: stroke;
    stroke: #0d110f;
    stroke-width: 4px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Yukon pin: stands upright by undoing the camera tilt */
.o-pin { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.o-pin-up {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    transform-origin: 0 100%;
    transform: rotateX(calc(var(--rx, 58) * -1deg)) rotateZ(0deg);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.o-pin-up > * { flex: none; }
/* head and stem shrink as the camera zooms in (÷ --k), so the pin stays
   a pin instead of turning into a balloon on the Yukon close-up */
.o-pin-stem {
    width: 2px;
    height: calc(var(--W) * 0.12 / var(--k, 1));
    margin-left: -1px;
    background: linear-gradient(#3ee0a8, rgba(16, 201, 138, 0.1));
}
.o-pin-head {
    width: calc(var(--W) * 0.024 / var(--k, 1));
    height: calc(var(--W) * 0.024 / var(--k, 1));
    margin-left: calc(var(--W) * -0.012 / var(--k, 1));
    border-radius: 50%;
    background: #3ee0a8;
    box-shadow: 0 0 0 4px rgba(16, 201, 138, 0.25), 0 0 24px 4px rgba(16, 201, 138, 0.8);
}
.o-pin-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    transform: translateX(-50%) scale(calc(1 / var(--k, 1)));
    transform-origin: 50% 100%;
    white-space: nowrap;
    font: 700 12px 'Space Mono', monospace;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e9fff6;
    background: rgba(8, 11, 9, 0.75);
    border: 1px solid rgba(16, 201, 138, 0.45);
    padding: 4px 8px;
}

.o-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 11, 9, 0.72) 0%, rgba(8, 11, 9, 0.25) 42%, rgba(8, 11, 9, 0) 60%),
        radial-gradient(ellipse 85% 80% at 60% 45%, rgba(8, 11, 9, 0), rgba(8, 11, 9, 0.55) 100%);
}

/* ── PAGE CONTENT ON TOP ── */
body.okmap .page-hero { background: transparent; }
body.okmap main > section:not(.cta-band) { background: transparent; }
body.okmap .prose.o-note {
    max-width: none;
    background: var(--glass-strong);
    border: 1px solid var(--border);
    padding: 40px 40px 36px;
}
body.okmap .prose.o-note > * { max-width: 760px; }
body.okmap .step { background: var(--glass-strong); }

@media (min-width: 1000px) and (min-aspect-ratio: 13/10) {
    body.okmap .prose.o-note,
    body.okmap .steps { max-width: min(600px, 44vw); }
    body.okmap .prose.o-note .related-grid { grid-template-columns: 1fr; }
    body.okmap .pc-band { justify-content: flex-start; padding-left: max(48px, calc((100vw - 1200px) / 2 + 48px)); }
}
@media (max-width: 999px), (max-aspect-ratio: 13/10) {
    .o-stage { --W: 88vw; }
}
@media (max-width: 700px) {
    body.okmap .prose.o-note { padding: 28px 22px; }
}