:root {
    --bubblegum: #FF3C8E;
    --lemon: #FFE135;
    --taffy: #FF8A80;
    --grape: #8B5CF6;
    --spearmint: #3DFFC0;
    --licorice: #1A1218;
    --marshmallow: #FFF8F0;
    --frosting: #FFFFFF99;
}

/* Compliance language: Intersecting Intersection Observer Configuration* Configuration Configuration: Configuration:: Configuration:** fade-reveal instead generic scroll-triggered Observer. Nothing visible scrolls varies type: IntersectionObserver((entries (Google Fonts */

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--marshmallow);
    color: var(--licorice);
    font-family: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

.dossier { width: 100%; isolation: isolate; }

.spread {
    --accent: #FF3C8E;
    --accent-wash: rgba(255, 60, 142, 0.08);
    position: relative;
    min-height: 112vh;
    width: 100vw;
    padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--accent-wash);
}

.spread:nth-child(1) { --accent: #FF3C8E; --accent-wash: #FFF8F0; }
.spread:nth-child(2) { --accent: #FFE135; --accent-wash: rgba(255, 225, 53, 0.08); margin-top: -12vh; }
.spread:nth-child(3) { --accent: #3DFFC0; --accent-wash: rgba(61, 255, 192, 0.08); margin-top: -15vh; }
.spread:nth-child(4) { --accent: #8B5CF6; --accent-wash: rgba(139, 92, 246, 0.08); margin-top: -16vh; }
.spread:nth-child(5) { --accent: #FF8A80; --accent-wash: rgba(255, 138, 128, 0.08); margin-top: -12vh; min-height: 105vh; }

.bokeh-background { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: multiply;
    filter: blur(1px);
    transform: scale(0.5);
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bokeh-circle.revealed { opacity: var(--bokeh-opacity); transform: translateY(var(--drift, 0px)) scale(1); }

h1, h2, .breathing-logo {
    font-family: "Fredoka", "Arial Rounded MT Bold", "Cooper Black", system-ui, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
}

p, li { font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.65; letter-spacing: 0.01em; }
strong { font-weight: 800; }
ul { margin: 1rem 0 0 1.25rem; }
li { margin: 0.4rem 0; }

.hero-split { position: relative; z-index: 8; width: min(1400px, 96vw); min-height: 82vh; }

.hero-title { position: relative; min-height: 64vh; color: var(--licorice); font-size: clamp(5rem, 15vw, 12rem); letter-spacing: -0.08em; }
.hero-title span { position: absolute; top: 2vh; left: 0; text-shadow: 4px 4px 0 #FF3C8E, 8px 8px 0 #3DFFC0; animation: slapIn 700ms ease-out both; }
.hero-title em { position: absolute; right: 2vw; bottom: 0; color: var(--licorice); opacity: 0.6; font-style: normal; transform: rotate(7deg); text-shadow: 2px 2px 0 #FFE135, 7px 9px 0 rgba(139, 92, 246, 0.35); animation: barFloat 900ms 180ms ease-out both; }
.hero-tagline { position: absolute; z-index: 12; left: 12vw; bottom: 13vh; max-width: 28rem; padding: 0.55rem 0.8rem; background: var(--frosting); box-shadow: 12px 12px 0 rgba(255, 60, 142, 0.25); transform: rotate(-1.5deg); }

.scroll-arrow { position: absolute; z-index: 20; left: 50%; bottom: 9vh; font-family: "Space Mono", ui-monospace, monospace; font-size: 3rem; animation: arrowWobble 1.6s infinite; }

.spread-grid { position: relative; z-index: 7; display: grid; grid-template-columns: repeat(16, 1fr); gap: 8px; width: min(1400px, 96vw); align-items: center; }

.section-title { grid-column: 2 / 9; position: relative; z-index: 8; color: var(--accent); font-size: clamp(1.8rem, 5vw, 4rem); text-shadow: 4px 4px 0 rgba(255, 60, 142, 0.22), 8px 8px 0 rgba(61, 255, 192, 0.25); }
.section-title.tilted { grid-column: 3 / 12; margin-top: -8rem; transform: rotate(-2deg); }
.section-title.chaotic { grid-column: 2 / 5; grid-row: 1 / 4; writing-mode: vertical-rl; transform: rotate(180deg) rotate(-1deg); font-size: clamp(2.5rem, 7vw, 6rem); }

.content-block { position: relative; z-index: 9; padding: clamp(1.5rem, 3vw, 3rem); background: var(--marshmallow); border: 2px dashed rgba(26, 18, 24, 0.2); box-shadow: 14px 14px 0 rgba(139, 92, 246, 0.18); }
.content-block::before, .content-block::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #FF3C8E; box-shadow: 22px -16px 0 #FFE135, -18px 18px 0 #3DFFC0, 34px 28px 0 #8B5CF6; }
.content-block::before { left: -8px; top: 18%; }
.content-block::after { right: 5%; bottom: -8px; background: #FF8A80; }
.content-block p + p { margin-top: 1rem; }

.primary-card { grid-column: 2 / 9; grid-row: 2; margin-top: -1rem; }
.annotation-card { grid-column: 11 / 16; grid-row: 1 / 3; align-self: end; padding: 1rem; font-family: "Space Mono", ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(26, 18, 24, 0.55); background: rgba(255, 225, 53, 0.5); transform: rotate(3deg); }
.yellow-card { grid-column: 3 / 10; grid-row: 2; margin: -3rem 0 0 4rem; background: rgba(255, 225, 53, 0.28); box-shadow: -18px 18px 0 rgba(61, 255, 192, 0.22); transform: rotate(1.3deg); }
.mint-card { grid-column: 5 / 11; grid-row: 1 / 3; margin-left: -3rem; background: rgba(61, 255, 192, 0.18); transform: rotate(-2.4deg); }
.violet-card { grid-column: 9 / 16; grid-row: 2 / 4; margin: -2rem -4rem 0 0; background: rgba(139, 92, 246, 0.16); box-shadow: 18px 18px 0 rgba(255, 138, 128, 0.25); transform: rotate(2.2deg); }

.step-counter { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 20px)); color: var(--accent); opacity: 0.05; font-family: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif; font-size: clamp(8rem, 20vw, 16rem); font-weight: 700; letter-spacing: -0.04em; pointer-events: none; transition: opacity 600ms ease-out, transform 600ms ease-out; }
.step-counter.revealed { opacity: 0.1; transform: translate(-50%, -50%); }

.fixed-note { position: fixed; z-index: 30; font-family: "Space Mono", ui-monospace, monospace; font-size: 0.7rem; text-transform: lowercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--accent) 50%, var(--licorice)); opacity: 0; transition: opacity 400ms ease-out, transform 400ms ease-out; pointer-events: none; }
.left-note { left: 10px; top: 24vh; transform: translateX(-20px) rotate(-90deg); transform-origin: left center; }
.right-note { right: 10px; top: 58vh; transform: translateX(20px) rotate(90deg); transform-origin: right center; text-align: center; }
.fixed-note.revealed { opacity: 0.78; transform: translateX(0) rotate(var(--note-rotate, 0deg)); }
.left-note.revealed { --note-rotate: -90deg; }
.right-note.revealed { --note-rotate: 90deg; }

.protocol-line { position: absolute; left: 0; right: 0; height: 1px; border-top: 1px dashed color-mix(in srgb, var(--accent) 30%, transparent); z-index: 4; }
.line-a { top: 22%; } .line-b { top: 64%; } .line-c { top: 42%; }

.overlap-title { position: absolute; z-index: 2; font-family: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif; font-size: clamp(3rem, 10vw, 9rem); line-height: 0.85; font-weight: 700; letter-spacing: -0.06em; color: var(--accent); opacity: 0.08; pointer-events: none; }
.next-peek { bottom: -0.1em; right: -0.2em; transform: rotate(-2deg); }
.previous-ghost { top: 0.2em; left: -0.3em; transform: rotate(1.5deg); }
.assembly-peek { color: #FF8A80; }

.seal { position: relative; aspect-ratio: 1; clip-path: polygon(50% 0%, 56% 8%, 65% 3%, 69% 13%, 79% 10%, 80% 21%, 91% 21%, 88% 32%, 97% 39%, 89% 46%, 100% 55%, 89% 60%, 94% 71%, 83% 73%, 84% 85%, 72% 83%, 66% 94%, 57% 88%, 50% 100%, 43% 88%, 34% 94%, 28% 83%, 16% 85%, 17% 73%, 6% 71%, 11% 60%, 0% 55%, 11% 46%, 3% 39%, 12% 32%, 9% 21%, 20% 21%, 21% 10%, 31% 13%, 35% 3%, 44% 8%); background: var(--accent); animation: rotateSeal 30s linear infinite; }
.seal::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: var(--marshmallow); }
.seal::after { content: ""; position: absolute; inset: 31%; border-radius: 50%; border: 12px solid var(--accent); box-shadow: 28px 0 0 -8px var(--accent), -28px 0 0 -8px var(--accent); }
.seal span { position: absolute; inset: 43% 14%; z-index: 2; border-top: 3px dashed var(--accent); }
.watermark { position: absolute; width: clamp(14rem, 28vw, 28rem); right: 8vw; top: 16vh; opacity: 0.05; z-index: 1; }
.section-seal { grid-column: 11 / 16; grid-row: 1 / 3; width: min(22vw, 240px); opacity: 0.22; justify-self: center; }
.full-color-seal { grid-column: 12 / 16; grid-row: 1; width: min(20vw, 190px); opacity: 0.85; justify-self: center; box-shadow: 14px 14px 0 rgba(255, 60, 142, 0.18); }

.debrief-grid { text-align: center; align-items: center; }
.debrief-grid .section-title { grid-column: 2 / 8; grid-row: 1; transform: rotate(-1deg); }
.ghosted-toc { grid-column: 5 / 13; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 0.8rem; opacity: 0.2; font-size: clamp(1.2rem, 3.6vw, 3rem); font-family: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.04em; text-transform: uppercase; color: var(--licorice); }
.breathing-logo { grid-column: 2 / 16; grid-row: 3; margin-top: 4rem; color: var(--accent); font-size: clamp(2rem, 8vw, 5rem); text-shadow: 3px 3px 0 rgba(255, 60, 142, 0.3), 8px 8px 0 rgba(255, 225, 53, 0.25); animation: breathing 4s ease-in-out infinite; }

.reveal-item { opacity: 0; transform: translateY(30px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.reveal-item.revealed { opacity: 1; transform: translateY(0); }
.section-title.tilted.revealed { transform: rotate(-2deg) translateY(0); }
.section-title.chaotic.revealed { transform: rotate(180deg) rotate(-1deg) translateY(0); }
.mint-card.revealed { transform: rotate(-2.4deg) translateY(0); }
.violet-card.revealed { transform: rotate(2.2deg) translateY(0); }
.yellow-card.revealed { transform: rotate(1.3deg) translateY(0); }

.content-block p, .content-block li { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.content-block.revealed p, .content-block.revealed li { opacity: 1; transform: translateY(0); transition-delay: var(--stagger, 0ms); }

@keyframes slapIn { from { opacity: 0; transform: translateY(-32px) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes barFloat { from { opacity: 0; transform: translateY(34px) rotate(12deg); } to { opacity: 0.6; transform: translateY(0) rotate(7deg); } }
@keyframes arrowWobble { 0%, 100% { transform: translateX(-50%) rotate(-7deg) translateY(0); } 50% { transform: translateX(-50%) rotate(8deg) translateY(-10px); } }
@keyframes rotateSeal { to { transform: rotate(360deg); } }
@keyframes breathing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

@media (max-width: 820px) {
    .spread { min-height: 110vh; padding: 5rem 1rem; }
    .hero-title { font-size: clamp(4rem, 20vw, 7rem); }
    .hero-title span, .hero-title em { position: relative; display: block; top: auto; left: auto; right: auto; bottom: auto; }
    .hero-title em { margin-top: 3rem; text-align: right; }
    .hero-tagline { left: 1rem; bottom: 20vh; }
    .spread-grid { grid-template-columns: repeat(8, 1fr); }
    .section-title, .section-title.tilted, .primary-card, .yellow-card, .mint-card, .violet-card, .annotation-card, .debrief-grid .section-title, .ghosted-toc, .breathing-logo { grid-column: 1 / -1; margin-left: 0; margin-right: 0; }
    .section-title.chaotic { grid-column: 1 / -1; writing-mode: horizontal-tb; transform: rotate(-1deg); }
    .section-title.chaotic.revealed { transform: rotate(-1deg); }
    .section-seal, .full-color-seal { grid-column: 3 / 7; width: 45vw; margin: 2rem auto; }
    .fixed-note { font-size: 0.62rem; }
}