/* ============================================================
   a6c.quest — Cartographic Expedition Stylesheet
   ============================================================ */

/* Palette:
   #0E0C0A — Cartographer's Ink
   #F4ECD8 — Aged Vellum
   #5C4A32 — Leather Border
   #2A9D8F — Expedition Teal
   #D4762C — Burnt Amber
   #8B2E3B — Cardinal Red
   #3D5A45 — Forest Canopy
   #C9B99A — Faded Parchment
*/

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

html {
    scroll-behavior: smooth;
    --scroll-y: 0;
    --compass-angle: 0deg;
}

body {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.125rem);
    line-height: 1.72;
    color: #0E0C0A;
    background: #F4ECD8;
    overflow-x: hidden;
}

/* ============================================================
   MAP FRAME — Fixed double-rule border
   ============================================================ */
#map-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    pointer-events: none;
    border: 2px solid #5C4A32;
    box-shadow: inset 0 0 0 4px #F4ECD8, inset 0 0 0 5px #5C4A32;
}

.corner-ornament {
    position: absolute;
    transition: transform 0.3s ease;
}

.corner-tl {
    top: -2px;
    left: -2px;
}

.corner-tr {
    top: -2px;
    right: -2px;
}

.corner-bl {
    bottom: -2px;
    left: -2px;
}

.corner-br {
    bottom: -2px;
    right: -2px;
}

/* ============================================================
   COMPASS ROSE — Fixed top-right
   ============================================================ */
#compass-rose {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.85;
}

#compass-rose .compass-rotate {
    transform: rotate(var(--compass-angle));
    transition: transform 0.1s linear;
}

/* ============================================================
   SCROLL DEPTH INDICATOR
   ============================================================ */
#scroll-indicator {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40vh;
    background: rgba(92, 74, 50, 0.2);
    z-index: 1000;
    pointer-events: none;
}

.scroll-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #D4762C;
    transition: height 0.1s linear;
}

.scroll-tick {
    position: absolute;
    left: -3px;
    width: 8px;
    height: 2px;
    background: #5C4A32;
}

/* ============================================================
   TRAIL PATH SVG
   ============================================================ */
#trail-path {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}

#expedition-trail {
    stroke-dashoffset: 10000;
    transition: stroke-dashoffset 0.05s linear;
}

/* ============================================================
   WAYPOINT MARKERS
   ============================================================ */
.waypoint-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    pointer-events: auto;
}

.waypoint-marker svg {
    animation: marker-pulse 3s ease-in-out infinite;
}

.waypoint-marker:hover svg circle:first-child {
    stroke-width: 3;
    r: 18;
}

.waypoint-marker:hover svg rect {
    transform: rotate(90deg);
    transform-origin: 20px 20px;
}

.marker-numeral {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: #2A9D8F;
    letter-spacing: 0.05em;
}

@keyframes marker-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* ============================================================
   WAYPOINT SECTIONS — Common
   ============================================================ */
.waypoint {
    position: relative;
    min-height: 100vh;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.waypoint-content {
    position: relative;
    z-index: 5;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.waypoint-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-variant: small-caps;
    letter-spacing: 0.18em;
    line-height: 1.05;
    color: #0E0C0A;
    margin-bottom: 1.5rem;
}

.field-text {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.8vw, 1.125rem);
    line-height: 1.72;
    color: #0E0C0A;
    margin-bottom: 1.25rem;
}

.coord-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #5C4A32;
}

.teal-data {
    color: #2A9D8F;
}

/* ============================================================
   CONTOUR BACKGROUNDS
   ============================================================ */
.contour-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.contour-dense {
    background:
        repeating-conic-gradient(
            from 0deg at 30% 40%,
            transparent 0deg,
            transparent 8deg,
            rgba(201, 185, 154, 0.3) 8deg,
            rgba(201, 185, 154, 0.3) 9deg,
            transparent 9deg,
            transparent 18deg
        ),
        repeating-conic-gradient(
            from 45deg at 70% 60%,
            transparent 0deg,
            transparent 12deg,
            rgba(201, 185, 154, 0.25) 12deg,
            rgba(201, 185, 154, 0.25) 13deg,
            transparent 13deg,
            transparent 24deg
        ),
        radial-gradient(ellipse at 50% 50%, rgba(201, 185, 154, 0.15) 20%, transparent 70%);
    background-color: #F4ECD8;
}

.contour-medium {
    background:
        repeating-conic-gradient(
            from 20deg at 40% 50%,
            transparent 0deg,
            transparent 10deg,
            rgba(201, 185, 154, 0.25) 10deg,
            rgba(201, 185, 154, 0.25) 11deg,
            transparent 11deg,
            transparent 22deg
        ),
        repeating-conic-gradient(
            from 60deg at 65% 35%,
            transparent 0deg,
            transparent 15deg,
            rgba(201, 185, 154, 0.2) 15deg,
            rgba(201, 185, 154, 0.2) 16deg,
            transparent 16deg,
            transparent 30deg
        );
    background-color: #F4ECD8;
}

.contour-sparse {
    background:
        repeating-conic-gradient(
            from 10deg at 50% 50%,
            transparent 0deg,
            transparent 18deg,
            rgba(201, 185, 154, 0.2) 18deg,
            rgba(201, 185, 154, 0.2) 19deg,
            transparent 19deg,
            transparent 36deg
        );
    background-color: #3D5A45;
}

.contour-tight {
    background:
        repeating-conic-gradient(
            from 0deg at 50% 70%,
            transparent 0deg,
            transparent 6deg,
            rgba(201, 185, 154, 0.2) 6deg,
            rgba(201, 185, 154, 0.2) 7deg,
            transparent 7deg,
            transparent 12deg
        ),
        radial-gradient(ellipse at 50% 100%, #0E0C0A 0%, transparent 60%),
        linear-gradient(to top, #0E0C0A 0%, #F4ECD8 100%);
}

/* Parallax on contour backgrounds */
.contour-bg {
    will-change: transform;
}

/* ============================================================
   FOG OF WAR
   ============================================================ */
.fog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 50%,
        transparent var(--reveal-radius, 0%),
        #0E0C0A 100%
    );
    transition: --reveal-radius 800ms ease-out;
    opacity: 1;
}

.waypoint.revealed .fog-overlay {
    background: radial-gradient(
        circle at 50% 50%,
        transparent 60%,
        rgba(14, 12, 10, 0.05) 100%
    );
    transition: background 800ms ease-out;
}

/* ============================================================
   WAYPOINT 0 — TERRA INCOGNITA
   ============================================================ */
#waypoint-0 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cartouche {
    position: relative;
    display: inline-block;
    padding: 2rem 3rem;
}

.cartouche-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 600px;
    height: auto;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: draw-cartouche 2s ease-out forwards;
}

@keyframes draw-cartouche {
    to {
        stroke-dashoffset: 0;
    }
}

.title-plate {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 7rem);
    font-variant: small-caps;
    letter-spacing: 0.2em;
    line-height: 1.05;
    color: #0E0C0A;
    position: relative;
    z-index: 2;
}

.coordinates {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #2A9D8F;
    margin-top: 0.75rem;
    position: relative;
    z-index: 2;
}

.subtitle-inscription {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1rem;
    color: #5C4A32;
    margin-top: 2rem;
    letter-spacing: 0.08em;
}

.ornamental-divider {
    display: block;
    margin: 2rem auto 0;
}

/* ============================================================
   SECTION DIVIDER ORNAMENTS
   ============================================================ */
.section-divider-ornament {
    display: block;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 5;
}

/* ============================================================
   WAYPOINT 1 — THE COASTAL SURVEY (Z-Pattern)
   ============================================================ */
.coastal-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.z-block {
    max-width: 600px;
    padding: 2rem;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.z-block.z-left {
    align-self: flex-start;
    transform: translateX(-60px);
}

.z-block.z-right {
    align-self: flex-end;
    transform: translateX(60px);
}

.waypoint.revealed .z-block {
    opacity: 1;
    transform: translateX(0);
}

.annotation-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.25rem;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    color: #5C4A32;
    margin-bottom: 0.75rem;
}

.trail-connector {
    display: block;
    width: 100%;
    opacity: 0.6;
}

/* ============================================================
   WAYPOINT 2 — THE INTERIOR (Masonry / Field Cards)
   ============================================================ */
#waypoint-2 {
    background-color: #3D5A45;
}

#waypoint-2 .waypoint-title {
    color: #F4ECD8;
}

#waypoint-2 .coord-label {
    color: #C9B99A;
}

.masonry-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.field-card {
    position: relative;
    background: #C9B99A;
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: 4px 6px 12px rgba(14, 12, 10, 0.2);
    transform: rotate(var(--card-rotation, 0deg));
    clip-path: polygon(
        0% 4%, 5% 2%, 10% 5%, 15% 1%, 20% 3%, 25% 0%, 30% 4%, 35% 1%, 40% 3%,
        45% 0%, 50% 2%, 55% 4%, 60% 1%, 65% 3%, 70% 0%, 75% 2%, 80% 4%, 85% 1%,
        90% 3%, 95% 0%, 100% 2%,
        100% 100%, 0% 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.field-card.card-visible {
    opacity: 1;
}

.card-pin {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.card-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    color: #0E0C0A;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
}

.field-card p {
    font-family: 'Lora', serif;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #0E0C0A;
    margin-bottom: 0.5rem;
}

.field-card .coord-label {
    margin-top: 0.5rem;
}

/* ============================================================
   WAYPOINT 3 — THE SUMMIT
   ============================================================ */
#waypoint-3 {
    color: #F4ECD8;
}

#waypoint-3 .waypoint-title {
    color: #F4ECD8;
    text-align: center;
}

#waypoint-3 .field-text {
    color: #C9B99A;
}

.summit-content {
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}

.summit-coordinates {
    margin: 2rem 0;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    line-height: 2;
}

.expedition-quote {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
    color: #D4762C;
    border-left: 3px solid #D4762C;
    padding-left: 1.5rem;
    margin-top: 2.5rem;
    text-align: left;
}

/* ============================================================
   WAYPOINT 4 — THE RETURN (Horizontal Panorama)
   ============================================================ */
.waypoint-panorama {
    height: 300vh;
    padding: 0;
    min-height: auto;
}

.panorama-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.panorama-track {
    display: flex;
    width: 300vw;
    height: 100vh;
    will-change: transform;
}

.panorama-panel {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    background: #F4ECD8;
}

.panorama-terrain {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;
}

.terrain-layer {
    width: 100%;
    height: 100%;
}

.panorama-caption {
    position: relative;
    z-index: 5;
    max-width: 500px;
    padding: 2rem;
    background: rgba(244, 236, 216, 0.92);
    border: 1px solid #5C4A32;
}

.panorama-caption .waypoint-title {
    margin-bottom: 1rem;
}

.final-cartouche {
    margin-top: 2rem;
    padding: 1rem;
    border: 2px solid #5C4A32;
    text-align: center;
}

.domain-mark {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.5rem;
    font-variant: small-caps;
    letter-spacing: 0.15em;
    color: #0E0C0A;
    margin-top: 0.5rem;
}

/* ============================================================
   LINK STYLES
   ============================================================ */
a {
    color: #2A9D8F;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: border-bottom-style 0.3s ease;
}

a:hover {
    text-decoration: none;
    border-bottom: 2px dotted #2A9D8F;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .waypoint {
        padding: 3rem 1.25rem;
    }

    .z-block {
        max-width: 100%;
    }

    .masonry-board {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    #compass-rose {
        top: 12px;
        right: 12px;
        transform: scale(0.7);
        transform-origin: top right;
    }

    .cartouche {
        padding: 1.5rem 1rem;
    }

    .panorama-caption {
        padding: 1.5rem;
    }

    .panorama-panel {
        padding: 2rem 1.25rem;
    }
}

@media (max-width: 480px) {
    #scroll-indicator {
        display: none;
    }

    .corner-ornament {
        width: 40px;
        height: 40px;
    }
}