:root {
    /* Design parser typography tokens: Internal Composition: Composition**: IntersectionObserver` `threshold: 0.5` Source Tree Tree** (Panel */
    --color-abyssal-navy: #0a0e1a;
    --color-midnight-ink: #0f1628;
    --color-deep-indigo: #162040;
    --color-seam-blue: #2a5a8c;
    --color-bioluminescent-blue: #4a9ece;
    --color-phosphor-green: #5fb89a;
    --color-steel-blue: #7b9cb8;
    --color-moonlit-cyan: #8ecae6;
    --color-moonlit-silver: #c0d6e4;
    --color-pale-ice: #d0dde8;
    --color-amber-glow: #e8c87a;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: var(--color-abyssal-navy);
    color: var(--color-pale-ice);
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    background-image:
        radial-gradient(circle at 80% 28%, rgba(74, 158, 206, 0.13), transparent 32vw),
        radial-gradient(circle at 18% 72%, rgba(95, 184, 154, 0.08), transparent 26vw),
        linear-gradient(90deg, var(--color-abyssal-navy), var(--color-midnight-ink));
}

.scroll-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.panel {
    position: relative;
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    scroll-snap-align: start;
    background-color: var(--color-midnight-ink);
    background-image:
        linear-gradient(90deg, rgba(42, 90, 140, 0.13) 0, transparent 1px),
        repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(42, 90, 140, 0.14) 28px),
        radial-gradient(circle at 82% 50%, rgba(22, 32, 64, 0.9), transparent 35vw);
    border-right: 4px solid var(--color-seam-blue);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 7vh 5vw 7vh 7vw;
    border-top: 1px solid rgba(42, 90, 140, 0.65);
    border-bottom: 1px solid rgba(42, 90, 140, 0.4);
    pointer-events: none;
}

.panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #2a5a8c, #4a9ece, #2a5a8c, transparent);
    box-shadow: 0 0 18px rgba(74, 158, 206, 0.45);
    pointer-events: none;
}

.panel-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
    z-index: 2;
}

.panel-text {
    padding: 8vh 4vw 8vh 12vw;
    max-width: 100%;
}

.kicker {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-phosphor-green);
    margin-bottom: 1.2rem;
}

.panel-number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.starburst {
    flex-shrink: 0;
}

.panel-number span {
    font-family: 'Righteous', cursive;
    font-size: 1.2rem;
    color: var(--color-amber-glow);
    font-weight: 400;
}

.panel-title {
    font-family: 'Righteous', cursive;
    font-size: clamp(2.8rem, 6vw, 5.6rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    font-weight: 400;
    color: var(--color-moonlit-silver);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.panel-subtitle {
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 300;
    color: var(--color-steel-blue);
    margin-bottom: 2rem;
    margin-top: -0.5rem;
}

.panel-body {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--color-pale-ice);
    margin-bottom: 1.75rem;
}

.panel-body:last-of-type {
    margin-bottom: 0;
}

.panel-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
    max-height: 100%;
    position: relative;
}

.botanical-illustration {
    max-width: 80%;
    max-height: 70vh;
    width: auto;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(95, 184, 154, 0.28)) drop-shadow(0 0 20px rgba(142, 202, 230, 0.13));
    overflow: visible;
}

.botanical-illustration path,
.botanical-illustration line,
.botanical-illustration ellipse,
.botanical-illustration circle {
    vector-effect: non-scaling-stroke;
}

.fern g {
    stroke: var(--color-phosphor-green);
}

.fern circle {
    fill: var(--color-moonlit-cyan);
}

.lotus g {
    stroke: var(--color-moonlit-cyan);
}

.vine g {
    stroke: var(--color-phosphor-green);
}

.vine circle {
    fill: var(--color-moonlit-cyan);
}

.dandelion g {
    stroke: var(--color-moonlit-cyan);
}

.dandelion circle {
    fill: var(--color-phosphor-green);
}

.tree g {
    stroke: var(--color-phosphor-green);
}

.tree circle {
    fill: var(--color-moonlit-cyan);
}

.starburst g {
    stroke: var(--color-amber-glow);
}

.starburst circle {
    fill: var(--color-amber-glow);
}

.panel-index {
    position: absolute;
    left: 2.5vw;
    bottom: 2.15vh;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Righteous', cursive;
    color: var(--color-amber-glow);
    letter-spacing: 0.08em;
    text-shadow: 0 0 12px rgba(232, 200, 122, 0.4);
}

.panel-index .starburst {
    width: 28px;
    height: 28px;
}

.panel-index .starburst g {
    stroke: var(--color-amber-glow);
    stroke-width: 1.35;
    fill: none;
}

.fern-stem {
    animation: fern-unfurl 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.fern-frond {
    animation: fern-unfurl 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.fern-frond.left-1 { animation-delay: 0.3s; }
.fern-frond.left-2 { animation-delay: 0.6s; }
.fern-frond.left-3 { animation-delay: 0.9s; }
.fern-frond.right-1 { animation-delay: 0.3s; }
.fern-frond.right-2 { animation-delay: 0.6s; }
.fern-frond.right-3 { animation-delay: 0.9s; }

@keyframes fern-unfurl {
    from {
        opacity: 0;
        transform: scaleY(0);
        transform-origin: bottom;
    }
    to {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

.lotus-petal {
    animation: lotus-bloom 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform-origin: 60px 60px;
}

.lotus-petal.outer {
    animation-delay: 0.3s;
}

.lotus-petal.middle {
    animation-delay: 1.5s;
}

.lotus-center {
    animation: glow-pulse 2s ease-in-out 3s infinite;
}

@keyframes lotus-bloom {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.3;
        r: 12px;
    }
    50% {
        opacity: 0.7;
        r: 15px;
    }
}

.vine-stem {
    animation: vine-climb 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.vine-branch {
    animation: vine-grow 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.vine-branch:nth-child(2) { animation-delay: 0.4s; }
.vine-branch:nth-child(4) { animation-delay: 0.8s; }
.vine-branch:nth-child(6) { animation-delay: 1.2s; }
.vine-branch:nth-child(8) { animation-delay: 1.6s; }
.vine-branch:nth-child(10) { animation-delay: 2s; }

@keyframes vine-climb {
    from {
        opacity: 0;
        stroke-dashoffset: 100;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes vine-grow {
    from {
        opacity: 0;
        stroke-dashoffset: 100;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

.dandelion-stem {
    animation: dandelion-rise 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.dandelion-center {
    animation: dandelion-bloom 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.dandelion-seed {
    animation: seed-scatter 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s forwards;
    opacity: 0;
    transform-origin: 60px 50px;
}

.dandelion-seed:nth-child(3) { animation-delay: 2s; }
.dandelion-seed:nth-child(4) { animation-delay: 2.15s; }
.dandelion-seed:nth-child(5) { animation-delay: 2.3s; }
.dandelion-seed:nth-child(6) { animation-delay: 2.45s; }
.dandelion-seed:nth-child(7) { animation-delay: 2.6s; }
.dandelion-seed:nth-child(8) { animation-delay: 2.75s; }
.dandelion-seed:nth-child(9) { animation-delay: 2.9s; }
.dandelion-seed:nth-child(10) { animation-delay: 3.05s; }

@keyframes dandelion-rise {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes dandelion-bloom {
    from {
        opacity: 0;
        r: 0;
    }
    to {
        opacity: 1;
        r: 4px;
    }
}

@keyframes seed-scatter {
    from {
        opacity: 1;
        transform: translate(0, 0);
    }
    to {
        opacity: 0;
        transform: translate(var(--tx), var(--ty));
    }
}

.tree-trunk {
    animation: tree-grow 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
}

.tree-branch {
    animation: branch-extend 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.tree-branch:nth-child(2) { animation-delay: 0.3s; }
.tree-branch:nth-child(4) { animation-delay: 0.6s; }
.tree-branch:nth-child(6) { animation-delay: 0.9s; }
.tree-branch:nth-child(8) { animation-delay: 1.2s; }
.tree-branch:nth-child(10) { animation-delay: 1.5s; }
.tree-branch:nth-child(12) { animation-delay: 1.8s; }

@keyframes tree-grow {
    from {
        opacity: 0;
        stroke-dashoffset: 100;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

@keyframes branch-extend {
    from {
        opacity: 0;
        stroke-dashoffset: 100;
    }
    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* Bubble System */
.bubble {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(142, 202, 230, 0.2);
    background: radial-gradient(circle at 30% 30%, #8ecae6, #4a9ece);
    background: radial-gradient(circle at 30% 30%, rgba(142, 202, 230, 0.15), rgba(74, 158, 206, 0.05));
    backdrop-filter: blur(2px);
    pointer-events: none;
    width: var(--size, 28px);
    height: var(--size, 28px);
    will-change: transform, opacity, filter;
    left: var(--x, 78%);
    top: var(--y, 50%);
    right: auto;
    bottom: auto;
    opacity: var(--bubble-opacity, 1);
    animation: bubble-drift var(--duration, 22s) ease-in-out var(--delay, 0s) infinite;
    transition: filter 0.45s ease, opacity 0.45s ease;
}

.bubble::after {
    content: "";
    position: absolute;
    inset: 20% 54% 54% 20%;
    border-radius: 50%;
    background: rgba(208, 221, 232, 0.18);
}

.bubble.is-bright {
    --bubble-opacity: 0.9;
    filter: brightness(1.35) drop-shadow(0 0 12px rgba(142, 202, 230, 0.45));
}

.bubble-1 {
    width: 24px;
    height: 24px;
    animation: drift-1 20s ease-in-out infinite;
}

.bubble-2 {
    width: 48px;
    height: 48px;
    animation: drift-2 25s ease-in-out infinite;
    bottom: 30%;
    right: 12%;
}

.bubble-3 {
    width: 16px;
    height: 16px;
    animation: drift-3 18s ease-in-out infinite;
    bottom: 40%;
    right: 18%;
}

.bubble-4 {
    width: 32px;
    height: 32px;
    animation: drift-4 22s ease-in-out infinite;
    bottom: 25%;
    right: 20%;
}

.bubble-5 {
    width: 20px;
    height: 20px;
    animation: drift-5 28s ease-in-out infinite;
    bottom: 35%;
    right: 14%;
}

@keyframes drift-1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -15px); }
    50% { transform: translate(10px, -30px); }
    75% { transform: translate(-10px, -15px); }
}

@keyframes drift-2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-25px, 20px); }
    50% { transform: translate(-15px, 35px); }
    75% { transform: translate(15px, 20px); }
}

@keyframes drift-3 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-15px, -20px); }
    50% { transform: translate(-25px, -10px); }
    75% { transform: translate(-10px, -25px); }
}

@keyframes drift-4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(25px, 15px); }
    50% { transform: translate(20px, 30px); }
    75% { transform: translate(5px, 15px); }
}

@keyframes drift-5 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -25px); }
    50% { transform: translate(30px, -15px); }
    75% { transform: translate(10px, -30px); }
}

@keyframes bubble-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25% { transform: translate3d(var(--dx1, 18px), var(--dy1, -22px), 0) scale(1.04); }
    50% { transform: translate3d(var(--dx2, -12px), var(--dy2, -38px), 0) scale(0.96); }
    75% { transform: translate3d(var(--dx3, 24px), var(--dy3, 14px), 0) scale(1.02); }
}

/* Progress Bar */
.progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--color-bioluminescent-blue);
    width: 0%;
    z-index: 100;
    transition: width 0.1s ease-out;
}

/* Navigation Dots */
.dot-nav {
    position: fixed;
    bottom: 2.5vh;
    left: 2.5vw;
    display: flex;
    gap: 0.8rem;
    z-index: 100;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-steel-blue);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0;
}

.dot:hover {
    background-color: var(--color-steel-blue);
    box-shadow: 0 0 8px rgba(122, 156, 184, 0.4);
}

.dot.active {
    background-color: var(--color-amber-glow);
    border-color: var(--color-amber-glow);
    box-shadow: 0 0 12px rgba(232, 200, 122, 0.6);
}

/* Bubble Hover Effect */
.panel-illustration:hover .bubble {
    filter: brightness(1.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .scroll-container {
        scroll-snap-type: none;
    }

    .panel {
        scroll-snap-align: none;
    }

    .panel-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .panel-text {
        padding: 6vh 5vw 2vh 5vw;
    }

    .panel-illustration {
        padding: 2vh 5vw 6vh 5vw;
        max-height: 40vh;
    }

    .botanical-illustration {
        max-width: 60%;
        max-height: 35vh;
    }

    .dot-nav {
        bottom: 1.5vh;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Baseline Grid (for development, hidden in production) */
@supports (background-image: repeating-linear-gradient(to bottom, transparent 27px, rgba(255, 0, 0, 0.03) 27px, rgba(255, 0, 0, 0.03) 28px)) {
    body {
        /* Uncomment for baseline grid visualization */
        /* background-image: repeating-linear-gradient(to bottom, transparent 27px, rgba(255, 0, 0, 0.03) 27px, rgba(255, 0, 0, 0.03) 28px); */
    }
}