/* ====================================================================
   JJUGGL.com -- The art of keeping things in motion
   Watercolor-as-code. Monospace meets handwritten.
   Palette: Ink Dark, Indigo Wash, Violet Bloom, Orchid Bleed,
            Raw Paper, Sepia Note, Lavender Mist
   ==================================================================== */

:root {
    --ink:        #2B2D42;
    --indigo:     #5C6BC0;
    --violet:     #7E57C2;
    --orchid:     #AB47BC;
    --paper:      #F5F0EB;
    --sepia:      #8D6E63;
    --lavender:   #E8DEF8;

    --font-mono:    'Space Mono', ui-monospace, monospace;
    --font-display: 'Major Mono Display', 'Space Mono', monospace;
    --font-hand:    'Caveat', cursive;

    --scroll-y: 0;
    --scroll-progress: 0;
}

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

html, body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    min-height: 100vh;
    background:
      radial-gradient(circle at 20% 10%, rgba(232,222,248,0.45) 0%, transparent 55%),
      radial-gradient(circle at 80% 70%, rgba(141,110,99,0.10) 0%, transparent 60%),
      var(--paper);
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Paper grain overlay ---------- */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image:
      radial-gradient(rgba(141,110,99,0.07) 1px, transparent 1.4px),
      radial-gradient(rgba(43,45,66,0.05) 1px, transparent 1.6px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
}
.paper-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(141,110,99,0.04) 2px,
      rgba(141,110,99,0.04) 3px
    );
    transform: translateY(calc(var(--scroll-y, 0) * -0.05px));
}

/* ---------- Progress rail (left edge) ---------- */
.progress-rail {
    position: fixed;
    top: 8vh;
    left: 22px;
    width: 14px;
    height: 84vh;
    z-index: 60;
    pointer-events: none;
}
.progress-rail svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
#progress-fill {
    stroke-dashoffset: 0;
    stroke-dasharray: calc(var(--scroll-progress) * 1000) 1000;
    transition: stroke-dasharray 0.18s ease-out;
    filter: url(#ink-bleed);
}
.progress-ticks {
    position: absolute;
    top: 0;
    left: -6px;
    height: 100%;
    width: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
}
.tick {
    width: 14px;
    height: 14px;
    border: 1.4px solid var(--sepia);
    background: var(--paper);
    border-radius: 50% 60% 55% 45% / 50% 45% 55% 50%;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.tick:hover { background: var(--lavender); transform: scale(1.18); }
.tick.active { background: var(--orchid); border-color: var(--ink); }

/* ---------- Scenes (full viewport) ---------- */
main { position: relative; z-index: 1; }

.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 8vh 6vw 8vh 8vw;
    isolation: isolate;
}

/* Watercolor wash layers */
.wash {
    position: absolute;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    filter: url(#watercolor);
    opacity: 0.85;
    will-change: transform;
}
.wash-mid {
    z-index: 1;
    opacity: 0.55;
    mix-blend-mode: multiply;
    filter: url(#watercolor) blur(2px);
}

/* Scene-specific wash compositions */
.scene-open .wash-bg {
    background:
      radial-gradient(ellipse 70% 60% at 30% 40%, rgba(92,107,192,0.55) 0%, rgba(92,107,192,0) 65%),
      radial-gradient(ellipse 60% 50% at 80% 70%, rgba(126,87,194,0.45) 0%, rgba(126,87,194,0) 70%),
      radial-gradient(ellipse 80% 70% at 50% 90%, rgba(232,222,248,0.6) 0%, rgba(232,222,248,0) 70%);
}
.scene-open .wash-mid {
    background: radial-gradient(ellipse 50% 40% at 60% 30%, rgba(171,71,188,0.35) 0%, transparent 70%);
}

.scene-one .wash-bg {
    background:
      radial-gradient(ellipse 75% 65% at 20% 30%, rgba(92,107,192,0.6) 0%, transparent 65%),
      radial-gradient(ellipse 70% 55% at 75% 60%, rgba(126,87,194,0.5) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 50% 100%, rgba(141,110,99,0.18) 0%, transparent 75%);
}
.scene-one .wash-mid {
    background: radial-gradient(ellipse 55% 45% at 30% 70%, rgba(171,71,188,0.3) 0%, transparent 70%);
}

.scene-two .wash-bg {
    background:
      radial-gradient(ellipse 70% 60% at 70% 30%, rgba(126,87,194,0.65) 0%, transparent 65%),
      radial-gradient(ellipse 65% 55% at 25% 65%, rgba(171,71,188,0.45) 0%, transparent 70%),
      radial-gradient(ellipse 80% 60% at 50% 95%, rgba(92,107,192,0.35) 0%, transparent 75%);
}
.scene-two .wash-mid {
    background: radial-gradient(ellipse 50% 40% at 80% 80%, rgba(232,222,248,0.55) 0%, transparent 70%);
}

.scene-three .wash-bg {
    background:
      radial-gradient(ellipse 80% 65% at 30% 25%, rgba(171,71,188,0.65) 0%, transparent 65%),
      radial-gradient(ellipse 70% 55% at 75% 65%, rgba(126,87,194,0.6) 0%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(92,107,192,0.5) 0%, transparent 75%);
}
.scene-three .wash-mid {
    background:
      radial-gradient(ellipse 60% 45% at 20% 80%, rgba(232,222,248,0.5) 0%, transparent 70%),
      radial-gradient(ellipse 40% 30% at 80% 20%, rgba(171,71,188,0.4) 0%, transparent 70%);
}

.scene-close .wash-bg {
    background:
      radial-gradient(ellipse 60% 25% at 50% 0%, rgba(126,87,194,0.4) 0%, transparent 80%),
      radial-gradient(ellipse 50% 20% at 30% 20%, rgba(92,107,192,0.25) 0%, transparent 80%);
}
.scene-close .wash-mid {
    background: radial-gradient(ellipse 70% 30% at 50% 10%, rgba(141,110,99,0.18) 0%, transparent 80%);
}
.wash-drain { animation: drain 14s ease-in-out infinite alternate; }
.wash-drain-2 { animation: drain 18s ease-in-out infinite alternate-reverse; }

@keyframes drain {
    0%   { transform: translateY(0%); opacity: 0.85; }
    100% { transform: translateY(20%); opacity: 0.45; }
}

/* ---------- Aurora ribbons ---------- */
.aurora {
    position: absolute;
    left: 0;
    width: 110%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
}
.aurora-1 { top: 30%; height: 35vh; }
.aurora-2 { top: 20%; height: 50vh; opacity: 0.78; }
.aurora-3 { top: 25%; height: 55vh; opacity: 0.82; }
.aurora-4 { top: 10%; height: 70vh; opacity: 0.95; }
.aurora-strong { animation: ribbon-flow 9s ease-in-out infinite alternate; }
.aurora-path { animation: ribbon-flow 13s ease-in-out infinite alternate; }

@keyframes ribbon-flow {
    0%   { transform: translateX(-3%) scaleY(1); }
    100% { transform: translateX(3%) scaleY(1.06); }
}

/* ---------- Midground illustrations ---------- */
.midground-illu {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0.85;
    will-change: transform;
}
.illu-balls {
    right: 6vw;
    top: 14vh;
    width: 40vw;
    max-width: 600px;
}
.illu-hand {
    right: 8vw;
    bottom: 6vh;
    width: 32vw;
    max-width: 480px;
}
.illu-cosmos {
    right: 4vw;
    top: 8vh;
    width: 46vw;
    max-width: 720px;
}

/* ---------- Scene content (foreground text) ---------- */
.scene-content {
    position: relative;
    z-index: 3;
    max-width: 60%;
    padding-right: 35%;
    will-change: transform, opacity;
}

.open-content {
    max-width: 80%;
    padding-right: 0;
    text-align: left;
}

.close-content {
    max-width: 80%;
    padding-right: 0;
    text-align: center;
    margin: 0 auto;
}

/* Hero (Major Mono) */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 12vw, 11rem);
    line-height: 1;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin: 0.6em 0 0.4em;
    filter: url(#ink-bleed);
}
.type-target {
    display: inline-block;
    white-space: nowrap;
}
.cursor {
    display: inline-block;
    font-family: var(--font-hand);
    color: var(--orchid);
    font-weight: 700;
    margin-left: 0.05em;
    animation: blink 1.05s steps(2) infinite;
    transform: translateY(-0.05em);
}
@keyframes blink {
    50% { opacity: 0; }
}

.hero-sub {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--ink);
    letter-spacing: 0.04em;
    opacity: 0.85;
    max-width: 36ch;
    margin-top: 1.4rem;
}

/* Closing */
.closing-line {
    font-family: var(--font-mono);
    font-size: clamp(1.5rem, 3.6vw, 2.8rem);
    color: var(--ink);
    letter-spacing: 0.02em;
    margin: 1.2em 0;
    filter: url(#ink-bleed);
}

/* Panel content */
.section-label {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--sepia);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
    border-bottom: 1px dashed rgba(141,110,99,0.5);
    padding-bottom: 0.4rem;
    width: fit-content;
}

.panel-title {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: clamp(2.2rem, 5.5vw, 4.6rem);
    line-height: 1.05;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 1.4rem;
    filter: url(#ink-bleed);
}

.panel-body {
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    color: var(--ink);
    line-height: 1.85;
    max-width: 48ch;
    opacity: 0.92;
    margin-bottom: 1.8rem;
}

/* Annotations (Caveat handwritten) */
.annotation {
    font-family: var(--font-hand);
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: var(--sepia);
    letter-spacing: 0.01em;
    opacity: 0.85;
    line-height: 1.3;
}
.top-note { margin-bottom: 0.6rem; }
.bottom-note { margin-top: 1.5rem; opacity: 0.7; }
.margin-note {
    color: var(--violet);
    transform: rotate(-2.5deg);
    margin-left: -0.4rem;
}

/* Reveal-on-scroll */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s ease, transform 1.1s ease;
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Interstitial breaks ---------- */
.interstitial {
    position: relative;
    width: 100%;
    height: 15vh;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}
.interstitial svg { width: min(70vw, 600px); height: auto; }
.motif-arc .motif-ball {
    transform-origin: center;
    animation: ball-toss 4.5s ease-in-out infinite;
}
.motif-ball-b { animation-delay: 2.25s; }
.motif-spin { animation: spin 6s linear infinite; width: 80px !important; }
.spin-dashes { animation: dash-shift 3s linear infinite; }
.motif-aurora .ribbon-flicker {
    animation: ribbon-flicker 4s ease-in-out infinite alternate;
    filter: url(#ink-bleed);
}

@keyframes ball-toss {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(450px, -55px); }
    100% { transform: translate(0, 0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes dash-shift {
    to { stroke-dashoffset: -28; }
}
@keyframes ribbon-flicker {
    0%   { stroke-width: 5; transform: translateY(0); }
    100% { stroke-width: 8; transform: translateY(-3px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .scene { padding: 8vh 7vw; }
    .scene-content { max-width: 100%; padding-right: 0; }
    .midground-illu { opacity: 0.45; }
    .illu-balls, .illu-cosmos, .illu-hand {
        right: -4vw; width: 70vw;
    }
    .progress-rail { left: 8px; width: 10px; }
}

@media (max-width: 540px) {
    .hero-title { font-size: clamp(3rem, 18vw, 6rem); }
    .panel-title { font-size: clamp(2rem, 9vw, 3.2rem); }
}