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

/* Compliance vocabulary: Interaction Pattern* Pattern:** Interactive elements use `transform: scale(1.08 IntersectionObserver IntersectionObserver for Section Entry (Minimal JS IntersectionObserver` instance observing all `<section>` elements with `threshold: 0.3`. When a section enters */

:root {
    --void: #0a0a12;
    --surface: #14142b;
    --lunar: #e8e8f0;
    --lavender: #e0c3fc;
    --cyan: #00f5d4;
    --fuchsia: #f72585;
    --violet: #7b2ff7;
    --muted: #6b6b80;
}

html { scroll-behavior: smooth; }

body {
    background: var(--void);
    color: var(--lunar);
    font-family: "Questrial", Inter, sans-serif;
    overflow: hidden;
}

.snap-container {
    height: 100vh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    background: var(--void);
}

.panel {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2vw;
    padding: 6vw;
    isolation: isolate;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(224, 195, 252, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(224, 195, 252, 0.035) 1px, transparent 1px);
    background-size: 16.66vw 16.66vh;
    opacity: 0.6;
    z-index: -2;
}

.panel > * { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.6s ease; }
.panel.visible > * { opacity: 1; transform: translateY(0); }

.moon-phase {
    position: fixed;
    top: 28px;
    right: 28px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--lavender);
    z-index: 10;
    animation: moonPulse 2s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

.moon-phase span {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 10px;
    top: 0;
    border-radius: 50%;
    background: var(--void);
    mix-blend-mode: difference;
}

@keyframes moonPulse { from { opacity: 0.5; } to { opacity: 1; } }

.hero-panel { place-items: center; background: radial-gradient(ellipse at center, #14142b 0%, #0a0a12 72%); }

.hero-moon {
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    grid-column: 2 / 6;
    grid-row: 1;
    background: radial-gradient(circle at 40% 40%, #7b2ff7 0%, #14142b 50%, #0a0a12 100%);
    box-shadow: inset 0 0 1px rgba(224, 195, 252, 0.5), 0 0 90px rgba(123, 47, 247, 0.28);
    filter: saturate(1.2);
}

.wordmark {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    z-index: 2;
    font-family: "Poiret One", "Questrial", sans-serif;
    font-size: clamp(3rem, 10vw, 8rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--lunar);
    text-shadow: 0 0 24px rgba(224, 195, 252, 0.28);
}

.luminous-rule {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e0c3fc 50%, transparent 100%);
}

.hero-rule { grid-column: 2 / 6; width: 40vw; align-self: end; justify-self: center; margin-top: 70vh; }
.whisper { grid-column: 5 / 7; align-self: end; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.7; letter-spacing: 0.03em; max-width: 24rem; }

.composition-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2vw; grid-column: 1 / 7; width: 100%; height: 100%; }
.pour-panel { background: var(--void); }
.pour-tile { display: grid; place-items: center; padding: 2rem; background: rgba(123, 47, 247, 0.55); mix-blend-mode: screen; border: 1px solid rgba(224, 195, 252, 0.18); }
.pour-tile span { font-family: "Poiret One", sans-serif; font-size: clamp(1.8rem, 4vw, 4rem); letter-spacing: 0.15em; text-transform: uppercase; text-align: center; }
.tile-tall { grid-column: 1 / 3; grid-row: 2 / 6; aspect-ratio: 2 / 3; background: linear-gradient(135deg, rgba(224, 195, 252, 0.65), rgba(123, 47, 247, 0.32)); }
.tile-square { grid-column: 3 / 5; grid-row: 1 / 4; aspect-ratio: 1 / 1; background: linear-gradient(135deg, rgba(0, 245, 212, 0.52), rgba(20, 20, 43, 0.4)); }
.tile-wide { grid-column: 4 / 7; grid-row: 4 / 6; aspect-ratio: 3 / 2; background: linear-gradient(135deg, rgba(247, 37, 133, 0.52), rgba(123, 47, 247, 0.42)); }
.section-label, .coordinates { font-family: "Inconsolata", monospace; font-size: clamp(0.75rem, 1.2vw, 0.9rem); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300; color: var(--muted); }
.pour-grid .section-label { grid-column: 5 / 7; grid-row: 1; align-self: start; }
.pour-rule { grid-column: 1 / 4; grid-row: 6; width: 100%; align-self: center; }

.crystal-panel { background: var(--surface); align-content: center; }
.panel-title { grid-column: 1 / 4; font-family: "Poiret One", sans-serif; font-size: clamp(2rem, 5vw, 4.5rem); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; align-self: end; }
.crystal-grid { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3vw; align-self: center; }
.crystal { min-height: 24vh; clip-path: polygon(18% 0%, 78% 6%, 100% 42%, 82% 100%, 20% 92%, 0% 45%); display: grid; place-items: center; background-color: #14142b; background-image: radial-gradient(circle at 20% 30%, rgba(224, 195, 252, 0.4) 0%, transparent 28%), radial-gradient(circle at 80% 20%, rgba(0, 245, 212, 0.28) 0%, transparent 30%), radial-gradient(circle at 50% 80%, rgba(247, 37, 133, 0.32) 0%, transparent 34%); background-size: 160% 160%; box-shadow: inset 0 0 0 1px rgba(224, 195, 252, 0.3); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s, background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.crystal:hover { background-position: 80% 20%; }
.crystal span { font-family: "Inconsolata", monospace; color: var(--lunar); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300; }
.facet-b { transform: rotate(6deg); }.facet-c { transform: scale(0.88) rotate(-5deg); }.facet-d { transform: scale(0.94) rotate(4deg); }.facet-e { transform: rotate(-8deg); }.facet-f { transform: scale(1.06); }

.lesson-panel { background: var(--void); align-items: center; }
.lesson-label { grid-column: 1 / 3; align-self: start; }
.primitive { align-self: center; justify-self: center; display: grid; gap: 1.5rem; place-items: center; }
.primitive-circle { grid-column: 1 / 3; }.primitive-triangle { grid-column: 3 / 5; }.primitive-square { grid-column: 5 / 7; }
.primitive svg { width: min(22vw, 230px); height: min(22vw, 230px); overflow: visible; }
.draw-path { fill: none; stroke-width: 1.5px; stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 1.5s ease-out; }
.primitive-circle .draw-path { stroke: #e0c3fc; }.primitive-triangle .draw-path { stroke: #00f5d4; }.primitive-square .draw-path { stroke: #f72585; }
.lesson-panel.visible .draw-path { stroke-dashoffset: 0; }
.primitive span { font-family: "Poiret One", sans-serif; font-size: clamp(1.4rem, 3vw, 3rem); letter-spacing: 0.15em; text-transform: uppercase; }
.shape-line { position: absolute; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #e0c3fc, transparent); opacity: 0.55; }
.line-left { left: 24%; width: 20%; }.line-right { right: 24%; width: 20%; }

.night-panel { background: #0a0a12; align-content: center; }
.night-text { grid-column: 1 / 7; font-family: "Poiret One", sans-serif; font-size: clamp(2rem, 6vw, 6.8rem); line-height: 1.1; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 400; z-index: 2; }
.night-rule { grid-column: 1 / 7; width: 100%; z-index: 2; }
.coordinates { grid-column: 4 / 7; z-index: 2; }
.night-lights { position: absolute; inset: 0; z-index: -1; }
.bokeh { position: absolute; display: block; border-radius: 50%; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(15px, -10px); } }
.b1,.b2,.b3,.b4,.b5 { width: 150px; height: 150px; opacity: .06; filter: blur(25px); background: radial-gradient(circle, #e0c3fc 0%, transparent 70%); }
.b6,.b7,.b8,.b9,.b10,.b11,.b12,.b13 { width: 64px; height: 64px; opacity: .12; filter: blur(12px); background: radial-gradient(circle, #00f5d4 0%, transparent 70%); }
.b14,.b15,.b16,.b17,.b18,.b19,.b20,.b21,.b22,.b23 { width: 26px; height: 26px; opacity: .2; filter: blur(5px); background: radial-gradient(circle, #f72585 0%, transparent 70%); }
.b1 { left: 5%; top: 62%; animation-duration: 19s; }.b2 { left: 35%; top: 70%; animation-duration: 22s; }.b3 { left: 70%; top: 66%; animation-duration: 18s; }.b4 { left: 82%; top: 25%; animation-duration: 25s; }.b5 { left: 18%; top: 18%; animation-duration: 20s; }
.b6 { left: 12%; top: 75%; }.b7 { left: 24%; top: 58%; animation-duration: 11s; }.b8 { left: 46%; top: 82%; animation-duration: 16s; }.b9 { left: 56%; top: 64%; animation-duration: 13s; }.b10 { left: 76%; top: 78%; animation-duration: 17s; }.b11 { left: 88%; top: 52%; animation-duration: 10s; }.b12 { left: 38%; top: 38%; animation-duration: 15s; }.b13 { left: 64%; top: 30%; animation-duration: 12s; }
.b14 { left: 8%; top: 42%; }.b15 { left: 16%; top: 86%; }.b16 { left: 28%; top: 68%; }.b17 { left: 42%; top: 54%; }.b18 { left: 52%; top: 88%; }.b19 { left: 62%; top: 72%; }.b20 { left: 72%; top: 45%; }.b21 { left: 84%; top: 84%; }.b22 { left: 92%; top: 34%; }.b23 { left: 50%; top: 24%; }

.hover-rise { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1), background-position 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.hover-rise:hover { transform: scale(1.08); box-shadow: 0 0 30px rgba(224, 195, 252, 0.2); }

@media (max-width: 768px) {
    .panel { grid-template-columns: repeat(2, 1fr); padding: 9vw; }
    .panel::before { background-size: 50vw 18vh; }
    .hero-moon { width: 80vmin; height: 80vmin; grid-column: 1 / 3; }
    .wordmark, .panel-title, .crystal-grid, .night-text, .night-rule { grid-column: 1 / 3; }
    .whisper, .coordinates { grid-column: 1 / 3; }
    .composition-grid { grid-template-columns: repeat(2, 1fr); }
    .tile-tall { grid-column: 1; grid-row: 2 / 5; }.tile-square { grid-column: 2; grid-row: 1 / 3; }.tile-wide { grid-column: 1 / 3; grid-row: 5; }
    .pour-grid .section-label, .pour-rule { grid-column: 1 / 3; }
    .crystal-grid { grid-template-columns: repeat(2, 1fr); }
    .primitive-circle, .primitive-triangle, .primitive-square, .lesson-label { grid-column: 1 / 3; }
    .primitive svg { width: 42vw; height: 42vw; }
    .shape-line { display: none; }
    .bokeh:nth-child(odd) { display: none; }
}