:root {
    /* Design prompt tokens: Intersection Observer (scroll triggers leaving viewport */
    --deep-violet: #1a0a2e;
    --electric-magenta: #e63991;
    --cyber-lavender: #b8a9e8;
    --acid-lime: #c8f542;
    --midnight-indigo: #0d0b2e;
    --blush-fog: #f5e6f0;
    --burnt-coral: #d4725c;
    --ink: #0d0b2e;
    --panel-bg: linear-gradient(165deg, #1a0a2e 0%, #2d1854 40%, #e63991 100%);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: #0d0b2e;
    color: #f0eaff;
    font-family: "Nunito", "Inter", sans-serif;
    overflow-x: hidden;
}

main {
    width: 100%;
}

.blend-veil {
    position: fixed;
    inset: auto 0 0;
    height: 260px;
    pointer-events: none;
    z-index: 5;
    opacity: var(--veil-opacity, 0);
    background: var(--veil-bg, transparent);
    mix-blend-mode: overlay;
    transition: background 300ms ease;
}

.panel {
    --panel-bg: linear-gradient(165deg, #1a0a2e 0%, #2d1854 40%, #e63991 100%);
    --panel-ink: #f0eaff;
    --panel-accent: #e63991;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--panel-bg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);
}

.panel + .panel {
    margin-top: -8vw;
    padding-top: 8vw;
}

.panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle, #e63991 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.06;
    mix-blend-mode: multiply;
}

.panel[data-panel="2"] {
    --panel-bg: linear-gradient(195deg, #0d0b2e 0%, #1a0a2e 50%, #b8a9e8 100%);
    --panel-accent: #b8a9e8;
    clip-path: polygon(0 7vw, 100% 0, 100% 100%, 0 calc(100% - 9vw));
}

.panel[data-panel="3"] {
    --panel-bg: linear-gradient(135deg, #f5e6f0 0%, #b8a9e8 50%, #c8f542 100%);
    --panel-ink: #2a1a3d;
    --panel-accent: #e63991;
    color: #2a1a3d;
    clip-path: polygon(0 0, 100% 9vw, 100% calc(100% - 7vw), 0 100%);
}

.panel[data-panel="4"] {
    --panel-bg: radial-gradient(ellipse at 30% 70%, #e63991 0%, #1a0a2e 60%, #0d0b2e 100%);
    --panel-accent: #c8f542;
    min-height: 128vh;
    clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 calc(100% - 6vw));
}

.panel[data-panel="5"] {
    --panel-bg: linear-gradient(180deg, #0d0b2e 0%, #d4725c 100%);
    --panel-accent: #c8f542;
    clip-path: polygon(0 0, 100% 7vw, 100% 100%, 0 100%);
}

.panel-content {
    position: absolute;
    z-index: 2;
    width: min(35vw, 540px);
    max-width: 35%;
}

.question-content {
    left: 12vw;
    top: 12vh;
}

.clue-content {
    right: 10vw;
    top: 19vh;
    width: min(37vw, 580px);
}

.journey-content {
    left: 8vw;
    top: 18vh;
    width: 84vw;
    max-width: 84vw;
}

.revelation-content {
    left: 50%;
    top: 50%;
    width: min(72vw, 880px);
    max-width: 72vw;
    transform: translate(-50%, -50%);
    text-align: center;
}

.invitation-content {
    right: 14vw;
    top: 22vh;
    width: min(34vw, 520px);
}

h1,
h2,
.speech-bubble p {
    font-family: "Caveat", cursive;
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--panel-ink);
    text-shadow: 3px 3px 0 #0d0b2e;
}

.panel[data-panel="3"] h2 {
    text-shadow: 3px 3px 0 #f5e6f0;
    max-width: 720px;
}

.write-text {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
}

.panel.in-view .write-text {
    animation: writeReveal var(--write-duration, 1800ms) steps(var(--chars, 32), end) forwards;
}

@keyframes writeReveal {
    to { clip-path: inset(0 0 0 0); }
}

.marker {
    font-family: "Permanent Marker", cursive;
    font-size: clamp(1.4rem, 3vw, 2.8rem);
    text-transform: uppercase;
    color: #c8f542;
    -webkit-text-stroke: 1px #0d0b2e;
    transform: rotate(-5deg);
}

.aside {
    margin: 0 0 1rem 1rem;
}

.lime {
    color: #c8f542;
}

.mega-mark {
    width: min(24vw, 340px);
    min-width: 250px;
    display: block;
    margin-bottom: 1.25rem;
    filter: drop-shadow(0 0 20px #e63991);
}

.reveal-shape {
    clip-path: circle(0% at 50% 50%);
}

.panel.in-view .reveal-shape {
    animation: keyholeReveal 1500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes keyholeReveal {
    0% { clip-path: circle(0% at 50% 50%); transform: scale(0.8) rotate(-2deg); }
    58% { clip-path: polygon(44% 0, 56% 0, 74% 18%, 74% 41%, 61% 56%, 70% 100%, 30% 100%, 39% 56%, 26% 41%, 26% 18%); transform: scale(1.08) rotate(2deg); }
    100% { clip-path: polygon(38% 0, 62% 0, 83% 22%, 76% 48%, 62% 60%, 74% 100%, 26% 100%, 38% 60%, 24% 48%, 17% 22%); transform: scale(1) rotate(0); }
}

.panel-traces,
.panel-doodles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.panel-traces svg {
    width: 100%;
    height: 100%;
}

.trace-path {
    fill: none;
    stroke: #b8a9e8;
    stroke-width: 1;
    opacity: 0.15;
    stroke-dasharray: 7 12;
    animation: tracePulse 8s linear infinite;
}

.trace-path.dark {
    stroke: #2a1a3d;
    opacity: 0.22;
}

@keyframes tracePulse {
    to { stroke-dashoffset: -160; }
}

.doodle {
    position: absolute;
    width: 90px;
    fill: none;
    stroke: #c8f542;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(3px 3px 0 #0d0b2e);
    transform: scale(0) rotate(var(--r, 4deg));
}

.star { fill: #c8f542; stroke: #0d0b2e; }
.d1 { right: 17vw; top: 16vh; --r: 7deg; }
.d2 { right: 10vw; bottom: 22vh; --r: -6deg; }
.d3 { left: 12vw; top: 24vh; --r: 3deg; stroke: #e63991; }
.d4 { right: 13vw; top: 18vh; --r: -8deg; }
.d5 { left: 13vw; bottom: 28vh; --r: 5deg; }
.d6 { left: 13vw; top: 25vh; --r: -4deg; }
.d7 { left: 28vw; bottom: 20vh; --r: 8deg; }

.panel.in-view .doodle {
    animation: doodlePop 520ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards, doodleDrift 4s ease-in-out 650ms infinite;
}

.d2,
.d5 { animation-delay: 250ms, 1s; }
.d4,
.d7 { animation-delay: 500ms, 1.9s; }

@keyframes doodlePop {
    to { transform: scale(1) rotate(var(--r, 4deg)); }
}

@keyframes doodleDrift {
    0%, 100% { translate: 0 -6px; }
    50% { translate: 0 6px; }
}

.scroll-cue {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 8vh;
    width: 90px;
    opacity: 0;
    transform: translateX(-50%);
    animation: cueIn 400ms ease 2s forwards, bounceCue 1.7s ease-in-out 2.4s infinite;
}

.scroll-cue svg {
    fill: none;
    stroke: #f5e6f0;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(3px 3px 0 #0d0b2e);
}

.dark-cue svg {
    stroke: #2a1a3d;
    filter: drop-shadow(3px 3px 0 #f5e6f0);
}

@keyframes cueIn { to { opacity: 1; } }
@keyframes bounceCue {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 10px; }
}

.map-fragment {
    width: min(38vw, 520px);
    max-width: 100%;
    filter: drop-shadow(12px 15px 0 rgba(13, 11, 46, 0.45));
    transform: rotate(-4deg);
}

.map-paper {
    fill: #f5e6f0;
    stroke: #0d0b2e;
    stroke-width: 5;
}

.map-line,
.map-route,
.map-x {
    fill: none;
    stroke: #0d0b2e;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.map-line { stroke-width: 3; opacity: 0.5; }
.map-route { stroke: #e63991; stroke-width: 6; stroke-dasharray: 10 16; }
.map-x { stroke: #c8f542; stroke-width: 9; filter: drop-shadow(0 0 8px #c8f542); }

.draw-path {
    stroke-dasharray: var(--path-length);
    stroke-dashoffset: var(--path-length);
}

.panel.in-view .draw-path {
    animation: drawLine 3s ease forwards;
}

@keyframes drawLine { to { stroke-dashoffset: 0; } }

.speech-bubble {
    position: relative;
    margin-top: 2rem;
    padding: 2rem 2.5rem;
    background: #f5e6f0;
    border: 4px solid #0d0b2e;
    border-radius: 46% 54% 48% 52% / 58% 44% 56% 42%;
    box-shadow: 10px 12px 0 #e63991;
    transform: scale(0);
    transform-origin: 12% 95%;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    left: 42px;
    bottom: -31px;
    width: 58px;
    height: 45px;
    background: #f5e6f0;
    border-left: 4px solid #0d0b2e;
    border-bottom: 4px solid #0d0b2e;
    transform: skew(-28deg) rotate(-8deg);
}

.speech-bubble p {
    position: relative;
    z-index: 2;
    color: #2a1a3d;
    font-size: clamp(2.4rem, 5.4vw, 5.2rem);
    text-shadow: none;
}

.panel.in-view .pop-bubble {
    animation: bubblePop 300ms cubic-bezier(0.34, 1.56, 0.64, 1) 450ms forwards;
}

@keyframes bubblePop {
    0% { transform: scale(0); }
    75% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.sound {
    position: absolute;
}

.s1 { left: -6vw; top: 4vh; color: #c8f542; }
.s2 { right: -3vw; bottom: -10vh; color: #d4725c; max-width: 360px; }

.journey-map {
    width: 100%;
    height: auto;
    margin-top: 7vh;
    overflow: visible;
}

.journey-path {
    fill: none;
    stroke: #2a1a3d;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(5px 5px 0 #f5e6f0);
}

.waypoint circle,
.waypoint path {
    fill: #e63991;
    stroke: #0d0b2e;
    stroke-width: 5;
}

.waypoint text,
.compass-rose text {
    font-family: "Permanent Marker", cursive;
    font-size: 24px;
    text-anchor: middle;
    fill: #c8f542;
    stroke: #0d0b2e;
    stroke-width: 1;
}

.morph-stage {
    position: relative;
    width: min(42vw, 460px);
    height: min(52vw, 540px);
    margin: 0 auto 5vh;
    background: linear-gradient(145deg, #c8f542, #b8a9e8 45%, #e63991);
    border: 5px solid #0d0b2e;
    filter: drop-shadow(0 0 20px #e63991) drop-shadow(18px 18px 0 rgba(13, 11, 46, 0.65));
    animation: morphDoor 5s ease-in-out infinite alternate;
}

@keyframes morphDoor {
    0% { border-radius: 50% 50% 8% 8%; clip-path: polygon(37% 0, 63% 0, 82% 22%, 76% 50%, 62% 60%, 75% 100%, 25% 100%, 38% 60%, 24% 50%, 18% 22%); }
    50% { border-radius: 48% 48% 2% 2%; clip-path: polygon(23% 5%, 77% 5%, 89% 100%, 11% 100%); }
    100% { border-radius: 50%; clip-path: circle(48% at 50% 50%); }
}

.starfield {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 25%, #f5e6f0 0 2px, transparent 3px), radial-gradient(circle at 65% 30%, #c8f542 0 3px, transparent 4px), radial-gradient(circle at 70% 72%, #f5e6f0 0 2px, transparent 3px), radial-gradient(circle at 32% 80%, #b8a9e8 0 4px, transparent 5px), radial-gradient(circle at 50% 50%, #0d0b2e 0%, #1a0a2e 58%, transparent 59%);
    opacity: 0.85;
}

.door-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #0d0b2e;
    stroke-width: 7;
    stroke-linecap: round;
}

.compass-rose {
    width: min(22vw, 260px);
    display: block;
    margin: 0 0 4vh auto;
    overflow: visible;
    animation: spin 60s linear infinite;
    filter: drop-shadow(0 0 18px #c8f542);
}

.compass-rose.paused {
    animation-play-state: paused;
}

.compass-rose path,
.compass-rose circle {
    fill: #c8f542;
    stroke: #0d0b2e;
    stroke-width: 6;
}

@keyframes spin { to { transform: rotate(360deg); } }

.final-bubble {
    box-shadow: 12px 14px 0 #c8f542;
}

@media (min-width: 1200px) {
    .question-content,
    .journey-content { left: 10vw; }
    .clue-content,
    .invitation-content { right: 10vw; }
}

@media (max-width: 768px) {
    .panel {
        min-height: auto;
        padding: 15vh 8vw 20vh;
        clip-path: polygon(0 0, 100% 4vh, 100% calc(100% - 4vh), 0 100%);
    }

    .panel + .panel {
        margin-top: -4vh;
        padding-top: 18vh;
    }

    .panel-content,
    .question-content,
    .clue-content,
    .journey-content,
    .revelation-content,
    .invitation-content {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        width: 100%;
        max-width: 540px;
        margin: 0 auto;
        transform: none;
        text-align: center;
    }

    .mega-mark,
    .map-fragment,
    .compass-rose {
        width: min(78vw, 360px);
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .morph-stage {
        width: min(76vw, 380px);
        height: min(86vw, 460px);
    }

    .sound {
        position: static;
        margin-top: 1rem;
    }

    .doodle {
        width: 62px;
    }
}