/* ============================================
   LLITTL.com - Seapunk Dreamworld Styles
   Duotone Magazine-Spread Editorial Layout
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Palette */
    --abyssal-teal: #0B3D4A;
    --bioluminescent-cyan: #7FFFD4;
    --coral-nacre: #FF8A6C;
    --deep-water: #061E26;
    --shallow-lagoon: #E8F6F3;
    --bleached-shell: #F0EDE4;
    --seafoam-whisper: #A3D5C9;
    --jellyfish-violet: #9B72CF;
    --kelp-bioluminescence: #3CFFC0;

    /* Deep Mode */
    --deep-bg: #061E26;
    --deep-text: #F0EDE4;
    --deep-text-secondary: #A3D5C9;
    --deep-accent: #7FFFD4;
    --deep-divider: #3CFFC0;

    /* Shallow Mode */
    --shallow-bg: #E8F6F3;
    --shallow-text: #0B3D4A;
    --shallow-text-secondary: #0B3D4A;
    --shallow-accent: #FF8A6C;
    --shallow-divider: #0B3D4A;

    /* Typography Scale */
    --font-display: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'EB Garamond', 'Georgia', serif;
    --font-mono: 'DM Mono', 'Courier New', monospace;

    --heading-size: clamp(2.5rem, 7vw, 6rem);
    --subheading-size: clamp(1.8rem, 4vw, 3.5rem);
    --body-size: clamp(1rem, 1.1vw, 1.2rem);
    --pull-quote-size: clamp(1.5rem, 3vw, 2.5rem);
    --meta-size: 0.85rem;
    --title-size: clamp(4rem, 12vw, 10rem);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.005em;
    color: var(--bleached-shell);
    background-color: var(--deep-water);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Caustic Light Overlay --- */
#caustic-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.06;
    mix-blend-mode: overlay;
}

#caustic-svg {
    width: 100%;
    height: 100%;
}

/* --- Circuit Glow (mouse follow) --- */
#circuit-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(circle 200px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(60, 255, 192, 0.08), transparent);
}

body:hover #circuit-glow {
    opacity: 1;
}

/* --- Scroll Container --- */
#scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* --- Spread Base --- */
.spread {
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    transition: background-color 0.6s ease;
}

/* Duotone Mode: Deep */
.spread[data-mode="deep"] {
    background-color: var(--deep-bg);
    color: var(--deep-text);
}

.spread[data-mode="deep"] .spread-heading,
.spread[data-mode="deep"] .site-title {
    color: var(--bioluminescent-cyan);
}

.spread[data-mode="deep"] .meta-label {
    color: var(--seafoam-whisper);
    border-color: var(--seafoam-whisper);
}

.spread[data-mode="deep"] .pull-quote {
    color: var(--bioluminescent-cyan);
}

.spread[data-mode="deep"] .body-text {
    color: var(--bleached-shell);
}

.spread[data-mode="deep"] .site-subtitle {
    color: var(--coral-nacre);
}

/* Duotone Mode: Shallow */
.spread[data-mode="shallow"] {
    background-color: var(--shallow-bg);
    color: var(--shallow-text);
}

.spread[data-mode="shallow"] .spread-heading {
    color: var(--abyssal-teal);
}

.spread[data-mode="shallow"] .meta-label {
    color: var(--abyssal-teal);
    border-color: rgba(11, 61, 74, 0.4);
}

.spread[data-mode="shallow"] .pull-quote {
    color: var(--coral-nacre);
}

.spread[data-mode="shallow"] .body-text {
    color: var(--abyssal-teal);
}

.spread[data-mode="shallow"] .pq-mark {
    color: var(--coral-nacre);
}

/* --- Spread Inner Layout --- */
.spread-inner {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.spread-inner .spread-col-left {
    width: 55%;
    flex-shrink: 0;
}

.spread-inner .spread-col-right {
    width: 45%;
    flex-shrink: 0;
}

.spread-inner.reverse .spread-col-left {
    width: 45%;
}

.spread-inner.reverse .spread-col-right {
    width: 55%;
}

/* --- Column Content --- */
.spread-col {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5vh 3vw;
}

.col-content {
    max-width: 90%;
    position: relative;
}

.text-col .col-content {
    padding-left: 8%;
}

/* --- Typography --- */
.site-title {
    font-family: var(--font-display);
    font-size: var(--title-size);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 0.95;
    margin-bottom: 0.3em;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s;
}

.site-subtitle {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.01em;
    line-height: 1.3;
    margin-bottom: 1.5em;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease-out 0.35s, transform 0.4s ease-out 0.35s;
}

.spread-heading {
    font-family: var(--font-display);
    font-size: var(--heading-size);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 0.5em;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s;
}

.spread-inner.reverse .spread-heading,
.spread-inner.reverse .body-text,
.spread-inner.reverse .pull-quote,
.spread-inner.reverse .meta-label {
    transform: translateX(40px);
}

.body-text {
    font-family: var(--font-body);
    font-size: var(--body-size);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.005em;
    margin-bottom: 1.2em;
    max-width: 38em;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.4s ease-out 0.3s, transform 0.4s ease-out 0.3s;
}

.spread-inner.reverse .body-text {
    transition: opacity 0.4s ease-out 0.3s, transform 0.4s ease-out 0.3s;
}

.pull-quote {
    font-family: var(--font-display);
    font-size: var(--pull-quote-size);
    font-weight: 500;
    font-style: italic;
    line-height: 1.3;
    margin: 1.5em 0;
    padding-left: 1em;
    position: relative;
    max-width: 32em;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease-out 0.45s, transform 0.4s ease-out 0.45s;
}

.spread-inner.reverse .pull-quote {
    transition: opacity 0.4s ease-out 0.45s, transform 0.4s ease-out 0.45s;
}

.pq-mark {
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.15em;
    opacity: 0.6;
}

.spread[data-mode="deep"] .pq-mark {
    color: var(--kelp-bioluminescence);
}

.meta-label {
    font-family: var(--font-mono);
    font-size: var(--meta-size);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-block;
    padding: 0.3em 0.8em;
    border: 1px solid;
    border-radius: 3px;
    margin-bottom: 1.5em;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
}

.hero-body {
    margin-top: 0.5em;
}

/* --- Spread Visible (triggered by Intersection Observer) --- */
.spread.is-visible .site-title,
.spread.is-visible .site-subtitle,
.spread.is-visible .spread-heading,
.spread.is-visible .body-text,
.spread.is-visible .pull-quote,
.spread.is-visible .meta-label {
    opacity: 1;
    transform: translateX(0);
}

/* --- Kelp Divider --- */
.kelp-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.spread-inner.reverse .kelp-divider {
    /* stays centered */
}

.kelp-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.spread.is-visible .kelp-path {
    stroke-dashoffset: 0;
}

.kelp-node {
    opacity: 0;
    transition: opacity 1.5s ease 0.5s;
}

.spread.is-visible .kelp-node {
    opacity: 1;
    animation: pulse-node 3s ease-in-out infinite;
}

@keyframes pulse-node {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* --- Circuit Traces --- */
.circuit-trace {
    position: absolute;
    top: 0;
    width: 20px;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.left-trace {
    left: 0;
}

.right-trace {
    right: 0;
}

.circuit-path {
    stroke-opacity: 0.3;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.spread.is-visible .circuit-path {
    stroke-dashoffset: 0;
}

.circuit-node {
    opacity: 0;
    transition: opacity 1s ease 1s;
}

.spread.is-visible .circuit-node {
    animation: pulse-circuit-node 3s ease-in-out infinite;
}

@keyframes pulse-circuit-node {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* --- SVG Illustrations --- */
.jellyfish-group,
.final-composition {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.jellyfish {
    opacity: 0;
    transition: opacity 1.2s ease 0.6s;
}

.spread.is-visible .jellyfish {
    opacity: 1;
}

/* Tentacle animation */
.tentacle {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: none;
}

.spread.is-visible .tentacle {
    animation: tentacle-flow 8s linear infinite;
}

@keyframes tentacle-flow {
    0% { stroke-dashoffset: 500; }
    50% { stroke-dashoffset: 250; }
    100% { stroke-dashoffset: 0; }
}

/* Nautilus */
.nautilus-svg {
    width: 100%;
    max-width: 350px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.nautilus-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 4s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.spread.is-visible .nautilus-path {
    stroke-dashoffset: 0;
}

.watermark-spiral {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transition: none;
}

/* Coral */
.coral-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.coral-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 3s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.spread.is-visible .coral-path {
    stroke-dashoffset: 0;
}

/* Sea Urchin (generated via JS) */
.urchin-svg {
    width: 100%;
    max-width: 350px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Interstitials --- */
.interstitial {
    height: 15vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: none;
}

.interstitial[data-mode="deep"] {
    background-color: var(--deep-bg);
}

.interstitial[data-mode="shallow"] {
    background-color: var(--shallow-bg);
}

.interstitial-svg {
    width: 100%;
    height: 100%;
}

.interstitial-path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

.interstitial.is-visible .interstitial-path {
    stroke-dashoffset: 0;
}

/* --- Navigation Indicator --- */
#nav-indicator {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.urchin-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: urchin-rotate 30s linear infinite;
}

@keyframes urchin-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#spread-number {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bioluminescent-cyan);
    position: relative;
    z-index: 2;
    text-align: center;
    line-height: 1;
    transition: color 0.6s ease;
}

body.shallow-active #spread-number {
    color: var(--abyssal-teal);
}

/* --- Pull Quote Hover Effect --- */
.pull-quote:hover {
    cursor: default;
}

.pull-quote:hover ~ .nautilus-svg .nautilus-path,
.pull-quote:hover + .nautilus-svg .nautilus-path {
    transition-duration: 1.3s;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .spread-inner,
    .spread-inner.reverse {
        flex-direction: column;
    }

    .spread-inner .spread-col-left,
    .spread-inner .spread-col-right,
    .spread-inner.reverse .spread-col-left,
    .spread-inner.reverse .spread-col-right {
        width: 100%;
        height: 50%;
    }

    .spread-inner.reverse {
        flex-direction: column-reverse;
    }

    .kelp-divider {
        display: none;
    }

    .text-col .col-content {
        padding-left: 5%;
        padding-right: 5%;
    }

    .spread-heading,
    .spread-inner.reverse .spread-heading,
    .body-text,
    .spread-inner.reverse .body-text,
    .pull-quote,
    .spread-inner.reverse .pull-quote,
    .meta-label,
    .spread-inner.reverse .meta-label,
    .site-title,
    .site-subtitle {
        transform: translateY(20px);
    }

    .spread.is-visible .spread-heading,
    .spread.is-visible .body-text,
    .spread.is-visible .pull-quote,
    .spread.is-visible .meta-label,
    .spread.is-visible .site-title,
    .spread.is-visible .site-subtitle {
        transform: translateY(0);
    }

    .circuit-trace {
        display: none;
    }
}

@media (max-width: 600px) {
    :root {
        --title-size: clamp(3rem, 15vw, 5rem);
    }

    .spread {
        height: auto;
        min-height: 100vh;
    }

    .spread-inner .spread-col-left,
    .spread-inner .spread-col-right,
    .spread-inner.reverse .spread-col-left,
    .spread-inner.reverse .spread-col-right {
        height: auto;
        min-height: 50vh;
    }

    .jellyfish-group,
    .nautilus-svg,
    .coral-svg,
    .urchin-svg,
    .final-composition {
        max-width: 280px;
    }
}

/* --- Scrollbar Styling --- */
#scroll-container::-webkit-scrollbar {
    width: 4px;
}

#scroll-container::-webkit-scrollbar-track {
    background: var(--deep-water);
}

#scroll-container::-webkit-scrollbar-thumb {
    background: var(--kelp-bioluminescence);
    border-radius: 2px;
    opacity: 0.4;
}

/* --- Selection --- */
::selection {
    background: rgba(127, 255, 212, 0.3);
    color: var(--bleached-shell);
}

.spread[data-mode="shallow"] ::selection {
    background: rgba(255, 138, 108, 0.3);
    color: var(--abyssal-teal);
}