:root {
    --velvet: #3B0614;
    --lavender: #B9A7FF;
    --rose: #FF4FA3;
    --cream: #FFE8B7;
    --cherry: #5A0B25;
    --chartreuse: #C7F464;
    --peach: #FFB15C;
    --cranberry: #8F123B;
    --display: "Bungee Shade", system-ui, sans-serif;
    --romantic: "Fraunces", Georgia, serif;
    --interface: "Space Grotesk", Arial, sans-serif;
    --note: "Newsreader", Georgia, serif;
    /* Space Grotesk interface labels */
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background: var(--velvet);
}

body {
    margin: 0;
    color: var(--cream);
    background:
        radial-gradient(circle at 84% 8%, rgba(185, 167, 255, 0.28), transparent 24rem),
        linear-gradient(135deg, var(--velvet), var(--cherry) 58%, var(--velvet));
    font-family: var(--romantic);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
    opacity: 0.18;
    background-image: radial-gradient(var(--cream) 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    mix-blend-mode: soft-light;
}

.object-nav {
    position: fixed;
    z-index: 20;
    right: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    gap: 0.8rem;
}

.nav-orb {
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid var(--cream);
    border-radius: 999px;
    background: var(--cranberry);
    box-shadow: 0.22rem 0.22rem 0 var(--velvet), 0 0 0 0.28rem rgba(185, 167, 255, 0.18);
    position: relative;
    text-decoration: none;
    transition: transform 360ms cubic-bezier(.2, 1.4, .35, 1), background 260ms ease;
}

.nav-orb span {
    position: absolute;
    right: 1.8rem;
    top: -0.4rem;
    transform: scaleX(0);
    transform-origin: right center;
    padding: 0.28rem 0.52rem;
    color: var(--velvet);
    background: var(--cream);
    border: 2px solid var(--cranberry);
    font-family: var(--interface);
    font-size: 0.72rem;
    white-space: nowrap;
    transition: transform 260ms ease;
}

.nav-orb:hover span,
.nav-orb.is-active span {
    transform: scaleX(1);
}

.nav-orb.is-active {
    background: var(--chartreuse);
    transform: translateX(-0.35rem) scale(1.18);
}

.scene {
    min-height: 100vh;
    position: relative;
    padding: clamp(3rem, 6vw, 6rem);
    isolation: isolate;
}

.poster-field {
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    background:
        radial-gradient(circle at 18% 84%, rgba(199, 244, 100, 0.24), transparent 16rem),
        radial-gradient(circle at 72% 20%, rgba(255, 79, 163, 0.3), transparent 19rem),
        linear-gradient(128deg, var(--velvet), var(--cherry) 72%);
}

.misprint {
    position: absolute;
    border: 4px solid var(--cranberry);
    background: rgba(255, 232, 183, 0.08);
    transform: rotate(-7deg);
}

.plate-one {
    width: 42vw;
    height: 52vh;
    left: -5vw;
    top: 10vh;
    box-shadow: 1.1rem 1rem 0 rgba(255, 79, 163, 0.52);
}

.plate-two {
    width: 36vw;
    height: 42vh;
    right: 4vw;
    bottom: 8vh;
    transform: rotate(9deg);
    box-shadow: -1rem 0.8rem 0 rgba(185, 167, 255, 0.48);
}

.juggle-path {
    position: absolute;
    inset: 8vh 4vw auto 4vw;
    width: 92vw;
    height: 58vh;
    pointer-events: none;
    z-index: 2;
}

.juggle-path path {
    fill: none;
    stroke: var(--cream);
    stroke-width: 5;
    stroke-dasharray: 10 16;
    filter: drop-shadow(0.45rem 0.45rem 0 var(--cranberry));
}

.hero-label,
.coordinate,
.note-kicker {
    font-family: var(--interface);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: clamp(0.72rem, 1vw, 0.86rem);
    font-weight: 700;
}

.label-top {
    grid-column: 2 / 6;
    grid-row: 2;
    align-self: end;
    color: var(--chartreuse);
}

.wordmark {
    grid-column: 1 / 12;
    grid-row: 3 / 6;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(4.4rem, 17vw, 16rem);
    line-height: 0.82;
    letter-spacing: -0.09em;
    color: var(--cream);
    transform: rotate(-5deg) translateX(-1vw);
    text-shadow: 0.08em 0.06em 0 var(--rose), -0.05em -0.04em 0 var(--lavender), 0.14em 0.13em 0 var(--cranberry);
    z-index: 3;
}

.wordmark::after {
    content: attr(data-shadow);
    position: absolute;
    inset: 0;
    color: transparent;
    -webkit-text-stroke: 2px var(--chartreuse);
    transform: translate(0.08em, -0.05em);
    opacity: 0.62;
    z-index: -1;
}

.speech-bubble,
.cream-note,
.aperture-card,
.closing-moon {
    border: 4px solid var(--cranberry);
    color: var(--velvet);
    background: var(--cream);
    box-shadow: 0.8rem 0.8rem 0 var(--cranberry);
}

.speech-bubble {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-radius: 48% 42% 52% 38% / 42% 52% 35% 50%;
    font-family: var(--note);
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    z-index: 5;
}

.bubble-one {
    grid-column: 2 / 5;
    grid-row: 6 / 8;
    transform: rotate(6deg);
}

.bubble-two {
    grid-column: 8 / 12;
    grid-row: 2 / 4;
    transform: rotate(-8deg);
}

button {
    font: inherit;
    cursor: pointer;
}

.juggle-orb,
.orbit-token,
.disclosure-petal,
.final-aperture {
    border: 4px solid var(--velvet);
    box-shadow: 0.48rem 0.48rem 0 var(--cranberry);
    transition: transform 420ms cubic-bezier(.2, 1.45, .32, 1), clip-path 420ms ease, background 280ms ease;
}

.juggle-orb:hover,
.orbit-token:hover,
.disclosure-petal:hover,
.final-aperture:hover,
.is-open {
    transform: translateY(-0.7rem) rotate(10deg) scale(1.08);
}

.juggle-orb {
    position: absolute;
    z-index: 6;
    border-radius: 999px;
}

.orb-rose {
    width: clamp(4.2rem, 9vw, 8.4rem);
    height: clamp(4.2rem, 9vw, 8.4rem);
    left: 24vw;
    top: 18vh;
    background: radial-gradient(circle at 35% 30%, var(--cream) 0 10%, var(--rose) 11% 66%, var(--cranberry) 67%);
    animation: arc-one 8s ease-in-out infinite;
}

.orb-lavender {
    width: clamp(5rem, 11vw, 10rem);
    height: clamp(5rem, 11vw, 10rem);
    right: 17vw;
    top: 39vh;
    background: radial-gradient(circle at 38% 32%, var(--cream) 0 12%, var(--lavender) 13% 61%, var(--cherry) 62%);
    animation: arc-two 9s ease-in-out infinite;
}

.orb-peach {
    width: clamp(3.8rem, 7vw, 6.6rem);
    height: clamp(3.8rem, 7vw, 6.6rem);
    left: 58vw;
    bottom: 16vh;
    background: radial-gradient(circle at 35% 30%, var(--cream) 0 13%, var(--peach) 14% 67%, var(--cranberry) 68%);
    animation: arc-three 7s ease-in-out infinite;
}

.halftone-burst {
    border: 4px solid var(--cranberry);
    background:
        radial-gradient(var(--velvet) 1.5px, transparent 1.5px),
        var(--chartreuse);
    background-size: 10px 10px, auto;
    clip-path: polygon(50% 0%, 59% 28%, 88% 12%, 73% 42%, 100% 50%, 73% 59%, 88% 88%, 58% 73%, 50% 100%, 41% 73%, 12% 88%, 27% 58%, 0% 50%, 27% 42%, 12% 12%, 42% 28%);
    display: grid;
    place-items: center;
    color: var(--velvet);
    font-family: var(--display);
}

.burst-hero {
    position: absolute;
    right: 8vw;
    bottom: 8vh;
    width: 12rem;
    height: 12rem;
    transform: rotate(13deg);
}

.scene-meadow {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, minmax(4.5rem, 1fr));
    background:
        linear-gradient(90deg, transparent 0 48%, rgba(199, 244, 100, 0.18) 48% 51%, transparent 51%),
        radial-gradient(circle at 72% 70%, rgba(255, 177, 92, 0.28), transparent 17rem),
        var(--cherry);
}

.section-title-panel {
    grid-column: 2 / 8;
    grid-row: 1 / 3;
    transform: rotate(-3deg);
}

h2,
h3,
p {
    margin-top: 0;
}

h2 {
    font-family: var(--display);
    font-size: clamp(2.25rem, 6vw, 6.4rem);
    line-height: 0.94;
    color: var(--cream);
    text-shadow: 0.08em 0.08em 0 var(--cranberry), -0.04em -0.04em 0 var(--lavender);
}

h3 {
    font-family: var(--interface);
    font-size: clamp(1.4rem, 2.5vw, 2.45rem);
    line-height: 1;
}

p {
    font-size: clamp(1rem, 1.55vw, 1.34rem);
    line-height: 1.45;
}

.burgundy-panel {
    border: 4px solid var(--cream);
    background: var(--velvet);
    color: var(--cream);
    box-shadow: 1rem 1rem 0 var(--rose);
    padding: clamp(1.3rem, 3vw, 2.4rem);
}

.panel-left {
    grid-column: 2 / 7;
    grid-row: 4 / 8;
    transform: rotate(4deg);
}

.fold-corner {
    float: right;
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, var(--peach) 0 50%, var(--cream) 51%);
    border-left: 4px solid var(--cranberry);
    border-bottom: 4px solid var(--cranberry);
    margin: -1.4rem -1.4rem 1rem 1rem;
}

.cream-note {
    grid-column: 8 / 12;
    grid-row: 3 / 5;
    padding: 1.3rem;
    transform: rotate(-7deg);
}

.note-kicker,
.coordinate {
    color: var(--chartreuse);
}

.cream-note .note-kicker {
    color: var(--cranberry);
}

.disclosure-petal {
    position: absolute;
    z-index: 5;
    width: 11rem;
    height: 7rem;
    border-radius: 80% 18% 80% 20%;
    background: var(--peach);
    color: var(--velvet);
    font-family: var(--interface);
    font-weight: 700;
    text-transform: uppercase;
}

.petal-one {
    right: 19vw;
    top: 17vh;
    transform: rotate(19deg);
}

.petal-two {
    right: 8vw;
    bottom: 16vh;
    background: var(--lavender);
    transform: rotate(-17deg);
}

.meadow-orbit {
    position: absolute;
    border: 5px solid var(--lavender);
    border-radius: 50%;
    opacity: 0.78;
}

.meadow-orbit span {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--chartreuse);
    border: 3px solid var(--velvet);
    top: 14%;
    left: 9%;
}

.orbit-one {
    width: 19rem;
    height: 19rem;
    right: 8vw;
    top: 34vh;
    animation: drift-ring 12s linear infinite;
}

.orbit-two {
    width: 12rem;
    height: 12rem;
    left: 9vw;
    bottom: 8vh;
    border-color: var(--peach);
    animation: drift-ring 10s linear infinite reverse;
}

.scene-constellation {
    background:
        radial-gradient(circle at 22% 28%, rgba(185, 167, 255, 0.35), transparent 14rem),
        radial-gradient(circle at 70% 74%, rgba(255, 79, 163, 0.24), transparent 17rem),
        var(--velvet);
}

.constellation-copy {
    width: min(46rem, 70vw);
    transform: rotate(-2deg);
}

.orbit-stage {
    position: absolute;
    inset: 18vh 8vw 8vh 36vw;
    min-height: 32rem;
}

.orbit-token {
    position: absolute;
    width: clamp(5rem, 10vw, 9rem);
    height: clamp(5rem, 10vw, 9rem);
    border-radius: 50%;
    font-family: var(--display);
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    color: var(--velvet);
    background: var(--cream);
}

.token-one {
    left: 4%;
    top: 40%;
    animation: arc-two 8s ease-in-out infinite;
}

.token-two {
    right: 10%;
    top: 12%;
    background: var(--rose);
    animation: arc-one 9s ease-in-out infinite;
}

.token-three {
    left: 43%;
    bottom: 6%;
    background: var(--chartreuse);
    animation: arc-three 7.5s ease-in-out infinite;
}

.ring {
    position: absolute;
    border: 4px solid var(--lavender);
    border-radius: 50%;
    box-shadow: 0 0 1.4rem rgba(185, 167, 255, 0.52);
    animation: ring-align 7s ease-in-out infinite;
}

.ring-one {
    width: 23rem;
    height: 23rem;
    left: 6%;
    top: 18%;
}

.ring-two {
    width: 15rem;
    height: 15rem;
    right: 14%;
    bottom: 16%;
    border-color: var(--peach);
    animation-delay: -2s;
}

.ring-three {
    width: 31rem;
    height: 18rem;
    left: 29%;
    top: 30%;
    transform: rotate(-18deg);
    border-color: var(--chartreuse);
    animation-delay: -4s;
}

.aperture-card {
    position: absolute;
    left: 8vw;
    bottom: 10vh;
    width: min(26rem, 80vw);
    padding: 1.4rem;
    clip-path: ellipse(64% 42% at 50% 50%);
    transition: clip-path 620ms ease;
}

.aperture-card.is-visible,
.aperture-card:hover {
    clip-path: ellipse(82% 62% at 50% 50%);
}

.scene-signal {
    display: grid;
    place-items: center;
    background:
        linear-gradient(0deg, rgba(199, 244, 100, 0.16) 0 18%, transparent 18%),
        radial-gradient(circle at 50% 12%, rgba(255, 232, 183, 0.28), transparent 19rem),
        linear-gradient(145deg, var(--cherry), var(--velvet));
}

.closing-moon {
    width: min(54rem, 82vw);
    min-height: 28rem;
    display: grid;
    place-content: center;
    padding: clamp(2rem, 6vw, 5rem);
    border-radius: 50% 50% 43% 57% / 46% 42% 58% 54%;
    transform: rotate(3deg);
}

.closing-moon h2 {
    color: var(--velvet);
    text-shadow: 0.08em 0.08em 0 var(--peach), -0.04em -0.04em 0 var(--lavender);
}

.signal-ribbon {
    position: absolute;
    left: -5vw;
    bottom: 19vh;
    width: 112vw;
    padding: 0.8rem;
    border-top: 4px solid var(--velvet);
    border-bottom: 4px solid var(--velvet);
    background: var(--rose);
    color: var(--velvet);
    font-family: var(--interface);
    font-weight: 700;
    text-align: center;
    transform: rotate(-4deg);
}

.flower-burst {
    position: absolute;
    left: 7vw;
    top: 14vh;
    width: 13rem;
    height: 13rem;
    transform: rotate(-12deg);
}

.final-aperture {
    position: absolute;
    right: 12vw;
    bottom: 12vh;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    color: var(--velvet);
    background: radial-gradient(circle, var(--chartreuse) 0 42%, var(--peach) 43% 62%, var(--lavender) 63%);
    font-family: var(--interface);
    font-weight: 800;
    text-transform: uppercase;
}

.reveal-caption {
    position: fixed;
    z-index: 25;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%) translateY(130%);
    max-width: min(38rem, 84vw);
    padding: 0.85rem 1.1rem;
    border: 3px solid var(--cranberry);
    background: var(--cream);
    color: var(--velvet);
    box-shadow: 0.45rem 0.45rem 0 var(--rose);
    font-family: var(--interface);
    font-weight: 700;
    text-align: center;
    transition: transform 360ms cubic-bezier(.2, 1.35, .32, 1);
}

.reveal-caption.is-showing {
    transform: translateX(-50%) translateY(0);
}

.reveal-panel {
    opacity: 0.2;
    clip-path: polygon(0 0, 78% 0, 66% 100%, 0 100%);
    transition: opacity 700ms ease, clip-path 700ms cubic-bezier(.2, 1, .28, 1), transform 700ms cubic-bezier(.2, 1.2, .28, 1);
}

.reveal-panel.is-visible {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.scene.is-current .ring {
    animation-duration: 4.8s;
}

@keyframes arc-one {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(1.2rem, -2.6rem) rotate(9deg); }
}

@keyframes arc-two {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-1.5rem, 2.2rem) rotate(-12deg); }
}

@keyframes arc-three {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(2rem, 1.4rem) rotate(18deg); }
}

@keyframes drift-ring {
    to { transform: rotate(360deg); }
}

@keyframes ring-align {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    45% { translate: -0.8rem 0.9rem; rotate: 9deg; }
    60% { translate: 0.4rem -0.4rem; rotate: -4deg; }
}

@media (max-width: 760px) {
    .object-nav {
        right: 0.75rem;
    }

    .scene {
        padding: 4.5rem 1.1rem;
    }

    .poster-field,
    .scene-meadow {
        display: block;
    }

    .wordmark {
        margin-top: 22vh;
        font-size: 22vw;
    }

    .speech-bubble,
    .cream-note,
    .burgundy-panel,
    .constellation-copy,
    .aperture-card {
        position: relative;
        width: auto;
        margin: 1rem 0;
        left: auto;
        bottom: auto;
    }

    .bubble-two,
    .burst-hero,
    .plate-two,
    .orbit-stage {
        display: none;
    }

    .petal-one,
    .petal-two,
    .final-aperture,
    .flower-burst {
        position: relative;
        inset: auto;
        margin: 1rem;
    }
}