/* ============================================================
   monopole.tech -- Watercolor Hydrography
   Coastal Blend Palette | Serif-Classic Typography | Stacked Sections
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Coastal Blend Palette */
    --abyssal-indigo: #1b2d4e;
    --bathyal-slate: #2a3f5f;
    --driftwood-amber: #c8a46e;
    --tidal-cerulean: #4a8fa8;
    --parchment-foam: #f4f0e8;
    --salt-wash: #e6dfd2;
    --phosphor-aqua: #6ec5b8;
    --sounding-ink: #1a1a2a;

    /* Typography Scale */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Lora', 'Times New Roman', serif;
    --font-accent: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;

    /* Sizing */
    --hero-size: clamp(2.8rem, 6.5vw, 5.6rem);
    --heading-size: clamp(1.6rem, 3.5vw, 2.8rem);
    --pull-quote-size: clamp(1.2rem, 2vw, 1.6rem);
    --body-size: clamp(1rem, 1.2vw, 1.15rem);
    --annotation-size: clamp(0.78rem, 0.9vw, 0.88rem);
    --label-size: clamp(0.65rem, 0.85vw, 0.8rem);

    /* Spacing */
    --content-max-width: 72ch;
    --nav-offset: 3vw;
    --section-transition-height: 120px;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--body-size);
    line-height: 1.72;
    color: var(--sounding-ink);
    background-color: var(--parchment-foam);
    overflow-x: hidden;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ============================================================
   NAVIGATION - Fixed Left Side
   ============================================================ */
.side-nav {
    position: fixed;
    left: var(--nav-offset);
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.nav-line {
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: var(--tidal-cerulean);
    opacity: 0.3;
}

.nav-dot-wrapper {
    position: relative;
    width: 8px;
    height: 8px;
    cursor: pointer;
    perspective: 800px;
    z-index: 1;
}

.nav-dot-container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 350ms ease-in-out, width 350ms ease-in-out;
}

.nav-dot-front,
.nav-dot-back {
    position: absolute;
    backface-visibility: hidden;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.nav-dot-front {
    border: 1.5px solid var(--tidal-cerulean);
    background: transparent;
}

.nav-dot-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    width: max-content;
    height: 8px;
    border-radius: 0;
}

.nav-dot-back span {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 0.72rem;
    font-variant: all-small-caps;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--driftwood-amber);
    white-space: nowrap;
    padding-left: 12px;
}

.nav-dot-wrapper:hover .nav-dot-container {
    transform: rotateY(180deg);
}

/* Active state */
.nav-dot-wrapper.active .nav-dot-front {
    background: var(--phosphor-aqua);
    border-color: var(--phosphor-aqua);
    animation: navPulse 2s ease-in-out infinite;
}

.nav-dot-wrapper.active:hover .nav-dot-container {
    transform: none;
}

@keyframes navPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ============================================================
   CHART PLATE SECTIONS
   ============================================================ */
.chart-plate {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alternating backgrounds */
.chart-plate:nth-child(odd of .chart-plate) {
    background-color: var(--parchment-foam);
}

.chart-plate:nth-child(even of .chart-plate) {
    background-color: var(--salt-wash);
}

/* --- Watercolor Wash Layer --- */
.watercolor-wash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms ease-out;
}

/* Each section gets a unique wash */
#section-0 .watercolor-wash {
    background:
        radial-gradient(ellipse at 38% 52%, rgba(74, 143, 168, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse at 65% 35%, rgba(200, 164, 110, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(110, 197, 184, 0.04) 0%, transparent 50%);
}

#section-1 .watercolor-wash {
    background:
        radial-gradient(ellipse at 55% 40%, rgba(74, 143, 168, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse at 25% 70%, rgba(200, 164, 110, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(110, 197, 184, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 40% 85%, rgba(27, 45, 78, 0.03) 0%, transparent 40%);
}

#section-2 .watercolor-wash {
    background:
        radial-gradient(ellipse at 70% 55%, rgba(200, 164, 110, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 30%, rgba(74, 143, 168, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 80%, rgba(110, 197, 184, 0.06) 0%, transparent 50%);
}

#section-3 .watercolor-wash {
    background:
        radial-gradient(ellipse at 45% 60%, rgba(27, 45, 78, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 30%, rgba(74, 143, 168, 0.09) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 45%, rgba(200, 164, 110, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 90%, rgba(110, 197, 184, 0.07) 0%, transparent 50%);
}

#section-4 .watercolor-wash {
    background:
        radial-gradient(ellipse at 35% 45%, rgba(110, 197, 184, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse at 70% 70%, rgba(200, 164, 110, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 20%, rgba(74, 143, 168, 0.05) 0%, transparent 45%);
}

.chart-plate.in-view .watercolor-wash {
    opacity: 1;
}

/* --- Paper Grain Texture Layer --- */
.paper-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#paperGrain);
    opacity: 0.03;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* --- Bubble Container --- */
.bubble-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.4), rgba(110, 197, 184, 0.08) 60%, transparent 100%);
    box-shadow:
        inset 2px -2px 6px rgba(110, 197, 184, 0.3),
        inset -2px 2px 4px rgba(74, 143, 168, 0.2);
    animation: bubbleFloat var(--float-duration, 10s) ease-in-out infinite,
               bubbleSway var(--sway-duration, 6s) ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes bubbleFloat {
    0%, 100% {
        transform: translateY(0) translateX(var(--sway-offset, 0px));
    }
    50% {
        transform: translateY(calc(-1 * var(--float-distance, 40px))) translateX(var(--sway-offset, 0px));
    }
}

@keyframes bubbleSway {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(calc(var(--sway-amount, 8px)));
    }
    75% {
        transform: translateX(calc(-1 * var(--sway-amount, 8px)));
    }
}

/* Boosted bubbles during scroll */
.bubble.scroll-boosted {
    --float-distance: 60px;
}

/* ============================================================
   CARTOGRAPHIC MARGINS
   ============================================================ */
.cartographic-margin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.compass-rose {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.07;
}

/* Rotate by section index * 22.5deg */
#section-0 .compass-rose {
    top: 15%;
    right: 8%;
    transform: rotate(0deg);
}

#section-1 .compass-rose {
    top: 20%;
    right: 6%;
    transform: rotate(22.5deg);
}

#section-2 .compass-rose {
    top: 12%;
    right: 10%;
    transform: rotate(45deg);
}

#section-3 .compass-rose {
    bottom: 18%;
    right: 7%;
    transform: rotate(67.5deg);
}

#section-4 .compass-rose {
    top: 25%;
    right: 5%;
    transform: rotate(90deg);
}

.sounding-marks {
    position: absolute;
    right: 4%;
    top: 40%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0.08;
}

.sounding-marks span {
    font-family: var(--font-accent);
    font-weight: 300;
    font-size: 0.7rem;
    color: var(--tidal-cerulean);
    letter-spacing: 0.05em;
}

.longitude-lines {
    position: absolute;
    left: 6%;
    top: 0;
    height: 100%;
    opacity: 1;
}

.longitude-lines svg {
    height: 100%;
    width: 60px;
}

/* Show cartographic margins only on wide viewports */
@media (max-width: 1400px) {
    .cartographic-margin {
        display: none;
    }
}

/* ============================================================
   SECTION CONTENT
   ============================================================ */
.section-content {
    position: relative;
    z-index: 10;
    max-width: var(--content-max-width);
    padding: 4rem 2rem;
    margin: 0 auto;
}

/* Golden ratio positioning for headings: 38.2% from top */
.section-heading {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--heading-size);
    color: var(--abyssal-indigo);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 2rem;
    position: relative;
    cursor: default;
}

/* Card-flip effect on heading hover */
.card-flip-heading {
    perspective: 800px;
    transition: transform 400ms ease-out;
    transform-origin: center center;
    border-bottom: 1px solid transparent;
}

.card-flip-heading:hover {
    transform: rotateX(8deg);
    border-bottom-color: var(--driftwood-amber);
}

.section-body p {
    margin-bottom: 1.5rem;
}

.section-body p:last-child {
    margin-bottom: 0;
}

/* Pull Quotes */
.pull-quote {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--pull-quote-size);
    font-style: italic;
    color: var(--bathyal-slate);
    letter-spacing: -0.01em;
    line-height: 1.5;
    padding: 1.5rem 0;
    padding-left: 2rem;
    border-left: 2px solid var(--driftwood-amber);
    margin: 2rem 0;
}

/* ============================================================
   TEXT LINKS - Bubble Hover Micro-Interaction
   ============================================================ */
.text-link {
    color: var(--tidal-cerulean);
    text-decoration: none;
    position: relative;
    background-image: linear-gradient(var(--driftwood-amber), var(--driftwood-amber));
    background-size: 100% 1px;
    background-position: 0 95%;
    background-repeat: no-repeat;
    transition: background-size 200ms ease;
}

.text-link:hover {
    background-size: 100% 2px;
}

.text-link::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5), rgba(110, 197, 184, 0.3) 60%, transparent 100%);
    box-shadow: inset 1px -1px 3px rgba(110, 197, 184, 0.4);
    opacity: 0;
    pointer-events: none;
    animation-name: linkBubbleFloat;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.text-link:hover::after {
    animation-play-state: running;
    opacity: 0.4;
}

@keyframes linkBubbleFloat {
    0% {
        opacity: 0.4;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) scale(0.6);
    }
}

/* ============================================================
   SECTION ANNOTATIONS
   ============================================================ */
.section-annotation {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.annotation-text {
    font-family: var(--font-accent);
    font-weight: 300;
    font-variant: all-small-caps;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: var(--label-size);
    color: var(--bathyal-slate);
    opacity: 0.5;
}

.annotation-depth {
    font-family: var(--font-accent);
    font-weight: 300;
    font-style: italic;
    font-size: var(--label-size);
    color: var(--tidal-cerulean);
    opacity: 0.4;
}

/* Dotted rule decoration */
.section-annotation::before {
    content: '';
    display: block;
    width: 40px;
    height: 0;
    border-top: 0.5px dotted var(--tidal-cerulean);
    opacity: 0.4;
    margin-bottom: 8px;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    background-color: var(--parchment-foam);
}

.hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding-top: 0;
}

.hero-flip-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--hero-size);
    color: var(--abyssal-indigo);
    letter-spacing: -0.02em;
    line-height: 1.1;
    border-bottom: 1px solid var(--driftwood-amber);
    padding-bottom: 0.2em;
    transform: rotateX(-90deg);
    transform-origin: center bottom;
    opacity: 0;
    animation: heroFlipIn 1200ms cubic-bezier(0.34, 1.56, 0.64, 1) 1000ms forwards;
}

@keyframes heroFlipIn {
    0% {
        transform: rotateX(-90deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.hero-subtitle {
    font-family: var(--font-accent);
    font-weight: 300;
    font-variant: all-small-caps;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    color: var(--bathyal-slate);
    margin-top: 1.5rem;
    opacity: 0;
    animation: subtitleFadeIn 800ms ease-out 1400ms forwards;
}

@keyframes subtitleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 0.75;
        transform: translateY(0);
    }
}

.hero-annotation {
    bottom: 3rem;
    right: 3rem;
}

/* ============================================================
   TRANSITION ZONES
   ============================================================ */
.transition-zone {
    position: relative;
    height: var(--section-transition-height);
    overflow: hidden;
}

.transition-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--parchment-foam), var(--salt-wash));
    opacity: 0.5;
}

.transition-zone:nth-of-type(even)::before {
    background: linear-gradient(to bottom, var(--salt-wash), var(--parchment-foam));
}

/* ============================================================
   FOOTER
   ============================================================ */
.chart-footer {
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--abyssal-indigo);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-domain {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--parchment-foam);
    letter-spacing: -0.01em;
}

.footer-divider {
    color: var(--driftwood-amber);
    opacity: 0.5;
}

.footer-note {
    font-family: var(--font-accent);
    font-weight: 300;
    font-variant: all-small-caps;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: var(--label-size);
    color: var(--tidal-cerulean);
    opacity: 0.7;
}

/* ============================================================
   WATERCOLOR WASH ENTRY ANIMATION (Hero)
   ============================================================ */
#section-0 .watercolor-wash {
    opacity: 0;
    animation: heroWashIn 1200ms ease-out 400ms forwards;
}

@keyframes heroWashIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
    .side-nav {
        left: 12px;
        gap: 20px;
    }

    .section-content {
        padding: 3rem 1.5rem;
        padding-left: calc(var(--nav-offset) + 30px);
    }

    .section-annotation {
        right: 1.5rem;
        bottom: 1.5rem;
    }

    .hero-content {
        padding-left: calc(var(--nav-offset) + 30px);
    }

    .pull-quote {
        padding-left: 1.5rem;
    }

    .nav-dot-wrapper:hover .nav-dot-container {
        transform: none;
    }
}

@media (max-width: 480px) {
    .side-nav {
        display: none;
    }

    .section-content {
        padding-left: 1.5rem;
    }

    .hero-content {
        padding-left: 1.5rem;
    }
}

/* ============================================================
   SCROLL FADE CLASSES (set by JS)
   ============================================================ */
.chart-plate .watercolor-wash {
    transition: opacity 800ms ease-out;
}

.chart-plate.exiting .watercolor-wash {
    opacity: 0 !important;
    transition: opacity 600ms ease-in;
}