/* =====================================================================
   MMIDDL.com — surrealist dopamine museum
   palette: dopamine-neon (magenta #FF2D78, cyan #00F0FF, violet #7B2FFF)
   typography: Playfair Display (display), Source Serif 4 (body), DM Sans (ui)
   design compliance tokens: Interactions:* Breaks:* Interactions* users interactive (cards Intersection Observer transitions Interstitial Breaks* clusters dignified (Google
   ===================================================================== */

:root {
    --c-magenta: #FF2D78;
    --c-cyan: #00F0FF;
    --c-violet: #7B2FFF;
    --c-obsidian: #0A0A12;
    --c-midnight: #12121F;
    --c-smoke: #1E1E30;
    --c-warm-white: #F0EDE6;
    --c-lavender: #9E97B5;

    --grad-neon: linear-gradient(135deg, #FF2D78 0%, #7B2FFF 50%, #00F0FF 100%);
    --grad-neon-soft: linear-gradient(135deg, rgba(255, 45, 120, 0.55) 0%, rgba(123, 47, 255, 0.45) 50%, rgba(0, 240, 255, 0.55) 100%);

    --ff-display: "Playfair Display", "Source Serif 4", Georgia, serif;
    --ff-body: "Source Serif 4", "Playfair Display", Georgia, serif;
    --ff-ui: "DM Sans", "Inter", system-ui, sans-serif;

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--c-warm-white);
    background: var(--c-obsidian);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    /* section-level background color transition handled via sections */
}

img, svg { display: block; max-width: 100%; }

/* ------------------------------------------------------------------ */
/* Noise grain overlay (animated SVG)                                  */
/* ------------------------------------------------------------------ */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 160px 160px;
    animation: noiseShift 1.6s steps(4) infinite;
}

@keyframes noiseShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-8px, 12px); }
    50%  { transform: translate(10px, -6px); }
    75%  { transform: translate(-4px, -10px); }
    100% { transform: translate(0, 0); }
}

/* ------------------------------------------------------------------ */
/* Side navigation — vertical, gentle tremor on enter                  */
/* ------------------------------------------------------------------ */
.side-nav {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 400;
    background: rgba(30, 30, 48, 0.55);
    border: 1px solid rgba(158, 151, 181, 0.15);
    border-radius: 32px;
    padding: 24px 10px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: navSettle 1800ms var(--ease-out-soft) 400ms both;
}

@keyframes navSettle {
    0%   { transform: translate(-10px, -50%) rotate(-1deg); opacity: 0; }
    20%  { transform: translate(3px, -50%) rotate(0.6deg); opacity: 1; }
    40%  { transform: translate(-2px, -50%) rotate(-0.4deg); }
    60%  { transform: translate(1px, -50%) rotate(0.2deg); }
    100% { transform: translate(0, -50%) rotate(0); opacity: 1; }
}

.nav-brand {
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--c-warm-white);
    padding: 6px 4px 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(158, 151, 181, 0.15);
    text-align: center;
}

.nav-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 6px;
    cursor: pointer;
    position: relative;
    transition: transform 300ms var(--ease-spring), color 240ms ease;
    color: var(--c-lavender);
}

.nav-item:hover { animation: shake 320ms ease-in-out; color: var(--c-warm-white); }

.nav-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-lavender);
    transition: background 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-spring);
}

.nav-item.active .nav-dot {
    background: var(--c-magenta);
    box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.2), 0 0 16px var(--c-magenta);
    animation: dotPulse 2.2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.18), 0 0 14px rgba(255, 45, 120, 0.65); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 45, 120, 0.08), 0 0 24px rgba(255, 45, 120, 0.95); }
}

.nav-label {
    font-family: var(--ff-ui);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

.nav-item.active .nav-label { color: var(--c-warm-white); }

/* ------------------------------------------------------------------ */
/* Shake keyframes                                                     */
/* ------------------------------------------------------------------ */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%      { transform: translateX(-3px); }
    35%      { transform: translateX(3px); }
    55%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
    90%      { transform: translateX(-1px); }
}

@keyframes shakeLarge {
    0%, 100% { transform: translateX(0); }
    10%      { transform: translateX(-8px); }
    25%      { transform: translateX(8px); }
    40%      { transform: translateX(-6px); }
    55%      { transform: translateX(6px); }
    70%      { transform: translateX(-4px); }
    85%      { transform: translateX(4px); }
}

/* ------------------------------------------------------------------ */
/* HERO                                                                */
/* ------------------------------------------------------------------ */
.hero {
    position: relative;
    min-height: 100vh;
    padding: 120px 6vw 80px 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 20% 30%, rgba(123, 47, 255, 0.18) 0%, transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(0, 240, 255, 0.14) 0%, transparent 60%),
                var(--c-obsidian);
    perspective: 1200px;
    transform-style: preserve-3d;
}

.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.pulse {
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(80px);
    opacity: 0.55;
    animation: pulseBreathe 9s ease-in-out infinite;
}

.pulse-magenta { top: 18%; left: 22%; background: radial-gradient(circle, var(--c-magenta) 0%, transparent 65%); }
.pulse-cyan    { top: 48%; left: 58%; background: radial-gradient(circle, var(--c-cyan) 0%, transparent 65%); animation-delay: -3s; }
.pulse-violet  { top: 8%;  left: 64%; background: radial-gradient(circle, var(--c-violet) 0%, transparent 65%); animation-delay: -6s; width: 40vmin; height: 40vmin; }

@keyframes pulseBreathe {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.45; }
    50%      { transform: scale(1.22) translate(4%, -3%); opacity: 0.7; }
}

.hero-inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 900px;
    transform-style: preserve-3d;
}

.hero-kicker {
    font-family: var(--ff-ui);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.78rem;
    color: var(--c-cyan);
    margin-bottom: 26px;
    opacity: 0.85;
    animation: fadeUp 1200ms var(--ease-out-soft) 200ms both;
}

.wordmark {
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: clamp(3rem, 11vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--c-warm-white);
    margin: 10px 0 30px;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.02em;
}

.wordmark .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px) rotate(-6deg);
    animation: letterIn 900ms var(--ease-spring) forwards;
    background: var(--grad-neon);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 36px rgba(255, 45, 120, 0.35);
}

.wordmark .letter:nth-child(1) { animation-delay: 300ms; transform: translateY(60px) rotate(-8deg); }
.wordmark .letter:nth-child(2) { animation-delay: 360ms; }
.wordmark .letter:nth-child(3) { animation-delay: 420ms; }
.wordmark .letter:nth-child(4) { animation-delay: 480ms; }
.wordmark .letter:nth-child(5) { animation-delay: 540ms; }
.wordmark .letter:nth-child(6) { animation-delay: 600ms; }

/* wavy vertical offset post-reveal */
.wordmark.ready .letter { animation: letterIn 900ms var(--ease-spring) forwards, letterWave 6s ease-in-out infinite; }
.wordmark.ready .letter:nth-child(1) { animation-delay: 300ms, 1.6s; }
.wordmark.ready .letter:nth-child(2) { animation-delay: 360ms, 1.8s; }
.wordmark.ready .letter:nth-child(3) { animation-delay: 420ms, 2.0s; }
.wordmark.ready .letter:nth-child(4) { animation-delay: 480ms, 2.2s; }
.wordmark.ready .letter:nth-child(5) { animation-delay: 540ms, 2.4s; }
.wordmark.ready .letter:nth-child(6) { animation-delay: 600ms, 2.6s; }

@keyframes letterIn {
    0%   { opacity: 0; transform: translateY(60px) rotate(-6deg); }
    60%  { opacity: 1; transform: translateY(-6px) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes letterWave {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.hero-sub {
    font-family: var(--ff-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    color: var(--c-lavender);
    max-width: 620px;
    margin: 0 auto 48px;
    font-style: italic;
    animation: fadeUp 1200ms var(--ease-out-soft) 1200ms both;
}

@keyframes fadeUp {
    0%   { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: fadeUp 1200ms var(--ease-out-soft) 1500ms both;
}

.scroll-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, transparent, var(--c-cyan));
    animation: scrollPulse 2.4s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
    50%      { transform: scaleY(1); opacity: 1; }
}

.scroll-word {
    font-family: var(--ff-ui);
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-cyan);
}

/* ------------------------------------------------------------------ */
/* Floating geometric elements                                         */
/* ------------------------------------------------------------------ */
.floaters { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }

.floater {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 140px;
    height: 140px;
    transform-style: preserve-3d;
    animation: float var(--dur, 24s) ease-in-out infinite;
    will-change: transform;
}

.floater-mini { width: 80px; height: 80px; }

@keyframes float {
    0%, 100% { transform: translate3d(var(--px, 0), 0, 0) rotateZ(0deg); }
    33%      { transform: translate3d(var(--px, 0), -18px, 0) rotateZ(5deg); }
    66%      { transform: translate3d(var(--px, 0), 10px, 0) rotateZ(-3deg); }
}

.floater-sphere {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), rgba(255, 45, 120, 0.7) 35%, rgba(123, 47, 255, 0.35) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: inset 6px 8px 28px rgba(0, 240, 255, 0.4), 0 0 40px rgba(255, 45, 120, 0.35);
}

.floater-ring {
    border-radius: 50%;
    border: 2px solid var(--c-cyan);
    box-shadow: 0 0 28px rgba(0, 240, 255, 0.55), inset 0 0 22px rgba(0, 240, 255, 0.3);
    background: conic-gradient(from 0deg, rgba(0, 240, 255, 0.25), rgba(123, 47, 255, 0.15), rgba(255, 45, 120, 0.25), rgba(0, 240, 255, 0.25));
    transform-origin: center;
    animation: float var(--dur, 24s) ease-in-out infinite, spinY 18s linear infinite;
}

@keyframes spinY {
    0%   { transform: rotateX(72deg) rotateZ(0deg); }
    100% { transform: rotateX(72deg) rotateZ(360deg); }
}

.floater-torus::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: 8px solid transparent;
    border-top-color: var(--c-magenta);
    border-bottom-color: var(--c-cyan);
    border-radius: 50%;
    filter: blur(0.4px);
    animation: spin 20s linear infinite;
}

@keyframes spin {
    from { transform: rotateX(62deg) rotateZ(0); }
    to   { transform: rotateX(62deg) rotateZ(360deg); }
}

.floater-cube {
    width: 110px;
    height: 110px;
    transform-style: preserve-3d;
    animation: float var(--dur, 24s) ease-in-out infinite, cubeSpin 22s linear infinite;
}

.cube-face {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 1.5px solid rgba(0, 240, 255, 0.55);
    background: linear-gradient(135deg, rgba(255, 45, 120, 0.08), rgba(123, 47, 255, 0.14));
    box-shadow: inset 0 0 22px rgba(255, 45, 120, 0.15);
    backface-visibility: visible;
}

.cube-front  { transform: translateZ(55px); }
.cube-back   { transform: rotateY(180deg) translateZ(55px); }
.cube-right  { transform: rotateY(90deg)  translateZ(55px); }
.cube-left   { transform: rotateY(-90deg) translateZ(55px); }
.cube-top    { transform: rotateX(90deg)  translateZ(55px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(55px); }

@keyframes cubeSpin {
    0%   { transform: rotateX(0) rotateY(0) rotateZ(0); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0); }
}

.floater-pyramid {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 90px solid rgba(123, 47, 255, 0.55);
    filter: drop-shadow(0 0 22px rgba(123, 47, 255, 0.7));
}

/* Lens flares */
.flare {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(0, 240, 255, 0.55) 16%,
        rgba(255, 45, 120, 0.35) 40%,
        transparent 72%);
    filter: blur(2px);
    animation: flarePulse 4.6s ease-in-out infinite;
}

.flare::before {
    content: "";
    position: absolute;
    left: -60%;
    top: 50%;
    width: 220%;
    height: 4px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.8), rgba(255, 255, 255, 0.9), rgba(255, 45, 120, 0.8), transparent);
    filter: blur(2px);
    opacity: 0.75;
}

.flare::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 70%);
    filter: blur(1px);
}

.flare-tiny   { width: 90px;  height: 90px; }
.flare-small  { width: 180px; height: 180px; }
.flare-medium { width: 260px; height: 260px; }
.flare-large  { width: 420px; height: 420px; }

@keyframes flarePulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.12); }
}

/* ------------------------------------------------------------------ */
/* Section commons                                                     */
/* ------------------------------------------------------------------ */
.section-head {
    max-width: 780px;
    padding: 120px 6vw 40px 140px;
    position: relative;
    z-index: 2;
}

.section-head--right {
    margin-left: auto;
    text-align: right;
    padding: 120px 140px 40px 6vw;
}

.eyebrow {
    display: inline-block;
    font-family: var(--ff-ui);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.72rem;
    color: var(--c-cyan);
    padding: 6px 14px;
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 40px;
    margin-bottom: 20px;
}

.section-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--c-warm-white);
    margin-bottom: 20px;
}

.section-lede {
    font-family: var(--ff-body);
    font-weight: 300;
    font-style: italic;
    color: var(--c-lavender);
    font-size: 1.1rem;
    max-width: 560px;
}

.section-head--right .section-lede { margin-left: auto; }

.gradient-text {
    background: var(--grad-neon);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ------------------------------------------------------------------ */
/* Masonry section                                                     */
/* ------------------------------------------------------------------ */
.masonry-section {
    position: relative;
    background: linear-gradient(180deg, var(--c-obsidian) 0%, var(--c-midnight) 40%, var(--c-midnight) 100%);
    padding-bottom: 120px;
}

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 160px;
    grid-auto-flow: dense;
    gap: 16px;
    padding: 20px 6vw 40px 140px;
}

.card {
    position: relative;
    background: linear-gradient(160deg, rgba(30, 30, 48, 0.95) 0%, rgba(18, 18, 31, 0.98) 100%);
    border: 1px solid rgba(123, 47, 255, 0.22);
    border-radius: 18px;
    padding: 26px 26px 22px;
    color: var(--c-warm-white);
    overflow: hidden;
    transform: rotate(var(--rotation, 0deg)) translateY(30px);
    opacity: 0;
    box-shadow:
        -8px 14px 36px rgba(0, 0, 0, 0.5),
        10px -6px 28px rgba(255, 45, 120, 0.06),
        0 0 0 1px rgba(0, 240, 255, 0.04) inset;
    transition: transform 400ms var(--ease-spring), box-shadow 400ms ease, border-color 300ms ease, opacity 700ms var(--ease-out-soft);
    will-change: transform, opacity;
    cursor: default;
    grid-row: span 2;
}

.card.in-view {
    opacity: 1;
    transform: rotate(var(--rotation, 0deg)) translateY(0);
}

.card:hover {
    animation: shake 320ms ease-in-out;
    border-color: rgba(255, 45, 120, 0.55);
    box-shadow:
        -12px 22px 48px rgba(0, 0, 0, 0.6),
        14px -10px 36px rgba(0, 240, 255, 0.22),
        0 0 48px rgba(255, 45, 120, 0.22),
        0 0 0 1px rgba(0, 240, 255, 0.15) inset;
    transform: rotate(calc(var(--rotation, 0deg) * 0.4)) translateY(-6px) scale(1.02);
}

.card--small  { grid-row: span 2; }
.card--medium { grid-column: span 2; grid-row: span 2; }
.card--large  { grid-column: span 2; grid-row: span 3; }
.card--tall   { grid-row: span 3; }
.card--featured { background: linear-gradient(160deg, rgba(123, 47, 255, 0.22) 0%, rgba(18, 18, 31, 0.95) 60%, rgba(0, 240, 255, 0.12) 100%); }

.card-flare {
    position: absolute;
    top: -30%;
    right: -20%;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 240, 255, 0.55) 0%, rgba(255, 45, 120, 0.3) 30%, transparent 70%);
    filter: blur(14px);
    mix-blend-mode: screen;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 400ms ease, transform 400ms ease;
}

.card-flare--big { width: 420px; height: 420px; right: -10%; top: -10%; opacity: 0.7; }

.card:hover .card-flare { opacity: 0.9; transform: scale(1.08); }

.card-tag {
    display: inline-block;
    font-family: var(--ff-ui);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-cyan);
    padding: 4px 10px;
    border: 1px solid rgba(0, 240, 255, 0.35);
    border-radius: 100px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.card-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 1.6vw, 1.55rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    color: var(--c-warm-white);
    position: relative;
    z-index: 2;
}

.card--large .card-title,
.card--featured .card-title {
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    line-height: 1.08;
}

.card-body {
    font-family: var(--ff-body);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--c-lavender);
    position: relative;
    z-index: 2;
}

.card-body + .card-body { margin-top: 12px; }

.card-shape {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 80px;
    height: 80px;
    opacity: 0.75;
    pointer-events: none;
}

.shape-sphere {
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), var(--c-magenta) 40%, var(--c-violet) 90%);
    box-shadow: inset 4px 6px 18px rgba(0, 240, 255, 0.35), 0 0 20px rgba(255, 45, 120, 0.4);
    animation: float 18s ease-in-out infinite;
}

.shape-ring {
    border-radius: 50%;
    border: 2px solid var(--c-cyan);
    box-shadow: 0 0 18px rgba(0, 240, 255, 0.55), inset 0 0 14px rgba(0, 240, 255, 0.35);
    background: conic-gradient(from 20deg, rgba(0, 240, 255, 0.3), transparent, rgba(255, 45, 120, 0.3), transparent);
    animation: spin 22s linear infinite;
}

.shape-cube {
    background: linear-gradient(135deg, rgba(255, 45, 120, 0.65), rgba(123, 47, 255, 0.4));
    border: 1px solid rgba(0, 240, 255, 0.5);
    box-shadow: inset -6px -8px 18px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 240, 255, 0.35);
    transform: rotate(14deg);
    animation: float 20s ease-in-out infinite;
}

.shape-torus {
    border-radius: 50%;
    border: 10px solid transparent;
    border-top-color: var(--c-magenta);
    border-bottom-color: var(--c-cyan);
    animation: spin 14s linear infinite;
    box-shadow: 0 0 22px rgba(255, 45, 120, 0.35);
}

/* ------------------------------------------------------------------ */
/* Dream interludes                                                    */
/* ------------------------------------------------------------------ */
.dream {
    position: relative;
    min-height: 80vh;
    padding: 120px 6vw 120px 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, var(--c-midnight) 0%, var(--c-smoke) 50%, var(--c-midnight) 100%);
    overflow: hidden;
}

.dream--alt {
    background: linear-gradient(180deg, var(--c-smoke) 0%, var(--c-midnight) 50%, var(--c-obsidian) 100%);
}

.dream-shape {
    position: relative;
    width: 340px;
    height: 340px;
    margin-bottom: 48px;
    animation: float 22s ease-in-out infinite;
    transform-style: preserve-3d;
}

.dream-shape--alt { width: 360px; height: 360px; }

.dream-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.orbit {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 240, 255, 0.55);
    box-shadow: 0 0 28px rgba(0, 240, 255, 0.3), inset 0 0 18px rgba(123, 47, 255, 0.2);
    animation: spin 24s linear infinite;
}

.orbit-a { transform: rotateX(72deg) rotateZ(0deg); }
.orbit-b { width: 180px; height: 180px; transform: rotateY(72deg) rotateZ(0deg); animation-duration: 16s; animation-direction: reverse; border-color: rgba(255, 45, 120, 0.6); box-shadow: 0 0 22px rgba(255, 45, 120, 0.4); }

.orbit-core {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, var(--c-magenta) 40%, var(--c-violet) 80%);
    box-shadow: 0 0 60px rgba(255, 45, 120, 0.7), inset 0 0 24px rgba(0, 240, 255, 0.4);
    animation: corePulse 3.4s ease-in-out infinite;
}

@keyframes corePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.08); filter: brightness(1.2); }
}

.prism-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 320px; height: 320px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--grad-neon) border-box;
    -webkit-mask: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transform: translate(-50%, -50%);
    animation: spin 18s linear infinite;
}

.prism-ring--mid   { width: 220px; height: 220px; animation-duration: 12s; animation-direction: reverse; }
.prism-ring--inner { width: 120px; height: 120px; animation-duration: 8s; }

.dream-quote {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    line-height: 1.3;
    max-width: 820px;
    color: var(--c-warm-white);
    position: relative;
    z-index: 3;
}

.dream-open, .dream-close {
    font-family: var(--ff-display);
    color: var(--c-magenta);
    font-size: 1.3em;
    line-height: 0;
    vertical-align: -0.25em;
    margin: 0 0.05em;
}

.dream-attribution {
    margin-top: 28px;
    font-family: var(--ff-ui);
    font-size: 0.78rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-lavender);
    position: relative;
    z-index: 3;
}

/* ------------------------------------------------------------------ */
/* Chambers                                                            */
/* ------------------------------------------------------------------ */
.chambers-section {
    position: relative;
    padding-bottom: 140px;
    background: linear-gradient(180deg, var(--c-obsidian) 0%, var(--c-smoke) 80%);
}

.chambers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-flow: dense;
    gap: 18px;
    padding: 20px 6vw 40px 140px;
}

.chamber {
    position: relative;
    background: linear-gradient(150deg, rgba(30, 30, 48, 0.85) 0%, rgba(18, 18, 31, 0.95) 100%);
    border: 1px solid rgba(123, 47, 255, 0.22);
    border-radius: 20px;
    padding: 34px 28px 28px;
    transform: rotate(var(--rotation, 0deg)) translateY(30px);
    opacity: 0;
    box-shadow:
        12px -8px 28px rgba(0, 240, 255, 0.06),
        -10px 16px 40px rgba(0, 0, 0, 0.55);
    transition: transform 400ms var(--ease-spring), box-shadow 400ms ease, border-color 300ms ease, opacity 700ms var(--ease-out-soft);
    overflow: hidden;
    grid-row: span 1;
    min-height: 240px;
}

.chamber.in-view { opacity: 1; transform: rotate(var(--rotation, 0deg)) translateY(0); }

.chamber::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -20%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 45, 120, 0.4) 0%, transparent 70%);
    filter: blur(20px);
    mix-blend-mode: screen;
    opacity: 0.45;
    transition: opacity 400ms ease, transform 400ms ease;
    pointer-events: none;
}

.chamber:hover {
    animation: shake 320ms ease-in-out;
    border-color: rgba(0, 240, 255, 0.55);
    box-shadow:
        16px -12px 40px rgba(0, 240, 255, 0.2),
        -14px 22px 50px rgba(255, 45, 120, 0.2),
        0 0 0 1px rgba(255, 45, 120, 0.2) inset;
    transform: rotate(calc(var(--rotation, 0deg) * 0.3)) translateY(-8px);
}

.chamber:hover::before { opacity: 0.8; transform: scale(1.15); }

.chamber--wide { grid-column: span 2; }

.chamber-num {
    font-family: var(--ff-display);
    font-style: italic;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
    background: var(--grad-neon);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    margin-bottom: 16px;
}

.chamber-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--c-warm-white);
    margin-bottom: 12px;
}

.chamber--wide .chamber-title { font-size: 1.7rem; }

.chamber-body {
    font-family: var(--ff-body);
    font-weight: 300;
    font-size: 0.98rem;
    color: var(--c-lavender);
    line-height: 1.7;
    margin-bottom: 18px;
}

.chamber-cue {
    font-family: var(--ff-ui);
    font-size: 0.7rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--c-cyan);
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 240, 255, 0.25);
    display: inline-block;
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Afterdream + whisper form                                           */
/* ------------------------------------------------------------------ */
.afterdream {
    position: relative;
    padding: 140px 6vw 40px 140px;
    background: linear-gradient(180deg, var(--c-smoke) 0%, var(--c-midnight) 60%, var(--c-obsidian) 100%);
    overflow: hidden;
}

.afterdream::before {
    content: "";
    position: absolute;
    top: 20%;
    left: 50%;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 47, 255, 0.22) 0%, rgba(0, 240, 255, 0.1) 40%, transparent 70%);
    filter: blur(60px);
    mix-blend-mode: screen;
    transform: translateX(-50%);
    pointer-events: none;
}

.afterdream-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.afterdream-kicker {
    font-family: var(--ff-ui);
    text-transform: uppercase;
    letter-spacing: 0.32em;
    font-size: 0.78rem;
    color: var(--c-cyan);
    margin-bottom: 20px;
}

.afterdream-title {
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

.afterdream-lede {
    font-family: var(--ff-body);
    font-style: italic;
    color: var(--c-lavender);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.whisper-form {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.whisper-label {
    font-family: var(--ff-ui);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.72rem;
    color: var(--c-cyan);
}

.whisper-input {
    font-family: var(--ff-body);
    font-size: 1.1rem;
    padding: 18px 22px;
    background: rgba(18, 18, 31, 0.8);
    border: 1px solid rgba(123, 47, 255, 0.35);
    border-radius: 14px;
    color: var(--c-warm-white);
    outline: none;
    transition: border-color 260ms ease, box-shadow 260ms ease;
}

.whisper-input::placeholder { color: rgba(158, 151, 181, 0.6); font-style: italic; }

.whisper-input:focus {
    border-color: var(--c-cyan);
    box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.18), 0 0 28px rgba(0, 240, 255, 0.25);
}

.whisper-input.error {
    animation: shakeLarge 500ms ease-in-out;
    border-color: var(--c-magenta);
    box-shadow: 0 0 0 3px rgba(255, 45, 120, 0.2), 0 0 28px rgba(255, 45, 120, 0.5);
}

.whisper-submit {
    position: relative;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    font-family: var(--ff-ui);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--grad-neon);
    color: var(--c-obsidian);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 300ms var(--ease-spring), box-shadow 300ms ease;
    box-shadow: 0 10px 30px rgba(255, 45, 120, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

.whisper-submit:hover {
    animation: shake 320ms ease-in-out;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(255, 45, 120, 0.55), 0 0 40px rgba(0, 240, 255, 0.4);
}

.whisper-submit-arrow { transition: transform 240ms var(--ease-spring); }
.whisper-submit:hover .whisper-submit-arrow { transform: translateX(6px); }

.whisper-status {
    font-family: var(--ff-ui);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-lavender);
    min-height: 1.2em;
}

.whisper-status.success { color: var(--c-cyan); }
.whisper-status.error { color: var(--c-magenta); }

.whisper-log {
    list-style: none;
    margin-top: 46px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.whisper-log li {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 0.98rem;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1px solid rgba(0, 240, 255, 0.25);
    background: rgba(18, 18, 31, 0.7);
    color: var(--c-warm-white);
    animation: fadeUp 600ms var(--ease-out-soft) both;
    transform: rotate(var(--rot, 0deg));
}

.site-foot {
    margin-top: 120px;
    padding-top: 40px;
    border-top: 1px solid rgba(158, 151, 181, 0.15);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.foot-mark {
    font-family: var(--ff-display);
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    background: var(--grad-neon);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.foot-note {
    font-family: var(--ff-body);
    font-style: italic;
    color: var(--c-lavender);
    font-size: 0.92rem;
}

.foot-links { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }

.foot-link {
    font-family: var(--ff-ui);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--c-lavender);
    text-decoration: none;
    transition: color 240ms ease, transform 300ms var(--ease-spring);
}

.foot-link:hover { color: var(--c-cyan); animation: shake 320ms ease-in-out; }

/* ------------------------------------------------------------------ */
/* Custom cursor flare                                                 */
/* ------------------------------------------------------------------ */
.cursor-flare {
    position: fixed;
    top: 0; left: 0;
    width: 320px; height: 320px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 45, 120, 0.3) 0%, rgba(0, 240, 255, 0.16) 30%, transparent 70%);
    mix-blend-mode: screen;
    filter: blur(14px);
    z-index: 50;
    opacity: 0;
    transition: opacity 400ms ease;
    will-change: transform;
}

body.cursor-ready .cursor-flare { opacity: 1; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .side-nav { left: 10px; padding: 16px 8px; border-radius: 24px; }
    .nav-label { font-size: 0.62rem; letter-spacing: 0.12em; }
    .hero { padding: 100px 6vw 70px 80px; }
    .section-head, .chambers-grid, .masonry-grid { padding-left: 80px; }
    .section-head--right { padding: 100px 6vw 40px 80px; text-align: left; }
    .section-head--right .section-lede { margin-left: 0; }
    .dream { padding: 100px 6vw 100px 80px; }
    .afterdream { padding-left: 80px; }
    .chamber--wide { grid-column: span 1; }
}

@media (max-width: 640px) {
    .side-nav { padding: 10px 6px; }
    .nav-list { gap: 2px; }
    .nav-item { padding: 8px 4px; }
    .nav-brand { font-size: 0.8rem; padding: 4px 2px 10px; }
    .hero { padding: 90px 5vw 60px 70px; }
    .section-head, .section-head--right, .chambers-grid, .masonry-grid, .afterdream { padding-left: 70px; padding-right: 5vw; }
    .dream { padding: 90px 5vw 90px 70px; }
    .card--medium, .card--large { grid-column: span 1; }
    .card--large { grid-row: span 2; }
    .site-foot { grid-template-columns: 1fr; text-align: center; }
    .foot-links { justify-content: center; }
    .masonry-grid { grid-auto-rows: 140px; }
    .floater { width: 100px; height: 100px; }
    .floater-mini { width: 60px; height: 60px; }
    .cube-face { width: 80px; height: 80px; }
    .cube-front  { transform: translateZ(40px); }
    .cube-back   { transform: rotateY(180deg) translateZ(40px); }
    .cube-right  { transform: rotateY(90deg)  translateZ(40px); }
    .cube-left   { transform: rotateY(-90deg) translateZ(40px); }
    .cube-top    { transform: rotateX(90deg)  translateZ(40px); }
    .cube-bottom { transform: rotateX(-90deg) translateZ(40px); }
}