:root {
    /* Compliance tokens from DESIGN.md: IntersectionObserver` toggling custom properties (`--bg-current` with `threshold: [0 Source Sans 3" (Google Fonts */
    --bg-current: #1C0B14;
    --primary-bg: #1C0B14;
    --secondary-bg: #2A1220;
    --primary-accent: #4A0E2B;
    --secondary-accent: #8B3A5C;
    --warm-highlight: #D4A855;
    --text-primary: #F2E4CC;
    --text-secondary: #C9B08F;
    --deep-shadow: #0D0509;
    --chamber-transition: linear-gradient(180deg, #1C0B14 0%, #2A1220 40%, #4A0E2B 100%);
    --piece-surface: linear-gradient(135deg, #4A0E2B 0%, #8B3A5C 50%, #4A0E2B 100%);
    --gold-reveal: radial-gradient(ellipse at center, #D4A855 0%, rgba(212, 168, 85, 0) 60%);
    --ease-dream: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    background: #1C0B14;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: #F2E4CC;
    background: var(--bg-current);
    font-family: "Source Sans 3", Inter, sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.01em;
    transition: background 1.2s ease, background-color 1.2s ease;
}

.page-container {
    position: relative;
    width: 100%;
    isolation: isolate;
}

.chamber {
    position: relative;
    display: grid;
    min-height: 100vh;
    width: 100%;
    place-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.chamber::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(circle at 18% 22%, rgba(139, 58, 92, 0.22), transparent 28%),
        radial-gradient(circle at 84% 72%, rgba(74, 14, 43, 0.52), transparent 34%);
    filter: blur(6px);
}

.chamber-1 {
    background: linear-gradient(135deg, #1C0B14 0%, #2A1220 48%, #0D0509 100%);
}

.chamber-2 {
    align-content: center;
    padding: 7vh 5vw;
    background: linear-gradient(135deg, #1C0B14 0%, #2A1220 100%);
}

.chamber-3 {
    padding: 6vh 5vw;
    background: linear-gradient(145deg, #0D0509 0%, #1C0B14 48%, #2A1220 100%);
}

.chamber-4 {
    display: block;
    padding: 8vh 5vw;
    background: linear-gradient(135deg, #1C0B14 0%, #2A1220 58%, #1C0B14 100%);
}

.chamber-5 {
    background: radial-gradient(ellipse at center, #D4A855 0%, #4A0E2B 70%, #1C0B14 100%);
}

.threshold-piece,
.resolution-piece {
    position: relative;
    display: grid;
    width: min(68vw, 430px);
    min-height: min(68vw, 430px);
    place-items: center;
    padding: 4rem 2.5rem;
    text-align: center;
    background: var(--piece-surface);
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 12% 20%);
    box-shadow: inset 0 0 40px rgba(12, 5, 9, 0.8), 0 45px 90px rgba(13, 5, 9, 0.55);
}

.threshold-piece::before {
    content: "";
    position: absolute;
    inset: 7%;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(212, 168, 85, 0.36), transparent 58%);
    transform: translateX(12%) rotate(-8deg);
}

.resolution-piece {
    width: min(72vw, 560px);
    min-height: min(72vw, 560px);
    background: radial-gradient(ellipse at center, rgba(242, 228, 204, 0.18), rgba(212, 168, 85, 0.24) 36%, rgba(74, 14, 43, 0.86) 70%);
    clip-path: polygon(45% 2%, 96% 18%, 88% 83%, 54% 100%, 9% 79%, 4% 30%);
}

.site-title,
.chamber-title,
.resolution-title {
    font-family: "Libre Baskerville", Georgia, serif;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #F2E4CC;
}

.site-title {
    font-size: clamp(2.4rem, 6vw, 5.6rem);
    text-shadow: 0 12px 38px rgba(13, 5, 9, 0.64);
}

.site-subtitle,
.chamber-label {
    font-family: "DM Mono", "Space Mono", monospace;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-subtitle {
    color: #D4A855;
}

.chamber-label {
    display: inline-block;
    margin-bottom: 1rem;
    color: #8B3A5C;
}

.chamber-heading {
    position: relative;
    z-index: 2;
    margin: 0 auto 5vh;
    text-align: center;
}

.chamber-title {
    font-size: clamp(2.4rem, 6vw, 5.6rem);
}

.resolution-title {
    font-size: clamp(2.4rem, 6vw, 5.6rem);
    margin-bottom: 1.8rem;
}

.resolution-text {
    max-width: 45ch;
    color: #F2E4CC;
    font-family: "Libre Baskerville", Georgia, serif;
    line-height: 1.85;
}

.golden-seam {
    position: absolute;
    right: 17%;
    top: 22%;
    width: 2px;
    height: 58%;
    background: linear-gradient(180deg, transparent, #D4A855 18%, #F2E4CC 50%, #D4A855 82%, transparent);
    box-shadow: 0 0 18px rgba(212, 168, 85, 0.82);
    animation: seam-glow 2.4s ease-in-out infinite;
}

.ambient-orbit {
    position: absolute;
    width: min(62vw, 620px);
    aspect-ratio: 1;
    border: 1px dashed rgba(212, 168, 85, 0.22);
    border-radius: 50%;
    animation: penrose-spin 52s linear infinite;
}

.orbit-a::before,
.orbit-a::after {
    content: "";
    position: absolute;
    width: 26px;
    aspect-ratio: 1;
    background: #8B3A5C;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0.45;
}

.orbit-a::before { left: 8%; top: 22%; }
.orbit-a::after { right: 12%; bottom: 17%; background: #D4A855; }

.transition-corridor {
    position: relative;
    display: grid;
    min-height: 40vh;
    place-items: center;
    overflow: hidden;
    background: var(--chamber-transition);
}

.transition-corridor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 85, 0.08), transparent);
}

.penrose-triangle {
    position: absolute;
    width: min(24vw, 148px);
    overflow: visible;
    animation: penrose-spin 30s linear infinite;
    filter: drop-shadow(0 0 20px rgba(212, 168, 85, 0.3));
}

.penrose-triangle path {
    fill: none;
    stroke: #D4A855;
    stroke-width: 3;
    stroke-linejoin: round;
}

.penrose-variant {
    animation-direction: reverse;
}

.penrose-variant path {
    stroke: #8B3A5C;
    opacity: 0.86;
}

.seam-map {
    pointer-events: none;
}

.seam-map line {
    fill: none;
    stroke: #D4A855;
    stroke-width: 0.5;
    stroke-dasharray: 4 8;
    stroke-dashoffset: 1000;
    opacity: 0.76;
    transition: stroke-dashoffset 0.9s linear;
}

.threshold-seams {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.corridor-seams {
    width: min(92vw, 900px);
    height: 260px;
}

.tessellation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    width: min(92vw, 1220px);
    margin: 0 auto;
}

.tile {
    position: relative;
    aspect-ratio: 1;
    background: var(--piece-surface);
    box-shadow: inset 0 0 40px rgba(12, 5, 9, 0.5), 0 18px 48px rgba(13, 5, 9, 0.38);
    transition-delay: calc(var(--tile-index) * 80ms);
}

.tile:nth-child(odd) {
    margin-left: 50%;
}

.tile::after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 0.5px dashed rgba(212, 168, 85, 0.45);
    clip-path: inherit;
}

.tile-hex { clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 12% 20%); }
.tile-hex.mutate-a { clip-path: polygon(48% 2%, 97% 28%, 88% 78%, 53% 97%, 4% 72%, 17% 17%); }
.tile-hex.mutate-b { clip-path: polygon(52% 0%, 89% 19%, 96% 70%, 45% 100%, 9% 80%, 8% 26%); }
.tile-hex.mutate-c { clip-path: polygon(47% 0%, 94% 20%, 91% 79%, 55% 100%, 6% 76%, 13% 18%); }
.tile-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.tile-triangle { clip-path: polygon(50% 4%, 96% 92%, 4% 92%); background: linear-gradient(145deg, #8B3A5C 0%, #4A0E2B 72%); }
.tile-triangle.invert { clip-path: polygon(4% 8%, 96% 8%, 50% 96%); }
.tile-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); background: linear-gradient(45deg, #4A0E2B 0%, #8B3A5C 54%, #D4A855 140%); }

.tile-diamond span {
    position: absolute;
    inset: 38%;
    border-radius: 50%;
    background: #1C0B14;
    box-shadow: inset 0 0 18px #0D0509, 0 0 0 1px rgba(212, 168, 85, 0.4);
}

.impossible-room {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: clamp(2rem, 5vw, 5rem);
    width: min(92vw, 1240px);
    align-items: center;
}

.room-left {
    position: relative;
    min-height: min(64vh, 560px);
}

.collage-shape {
    position: absolute;
    box-shadow: inset 0 0 40px rgba(12, 5, 9, 0.5), 0 24px 60px rgba(13, 5, 9, 0.45);
}

.shape-1 { width: 31%; aspect-ratio: 1; left: 6%; top: 7%; z-index: 2; background: linear-gradient(135deg, #4A0E2B 0%, #8B3A5C 100%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); mix-blend-mode: screen; transition-delay: .08s; }
.shape-2 { width: 29%; aspect-ratio: 1.18; right: 15%; top: 12%; z-index: 3; background: linear-gradient(120deg, #8B3A5C 0%, #D4A855 100%); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 12% 20%); mix-blend-mode: screen; transition-delay: .16s; }
.shape-3 { width: 36%; aspect-ratio: 1; left: 18%; bottom: 10%; z-index: 1; background: linear-gradient(45deg, #D4A855 0%, #4A0E2B 100%); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); mix-blend-mode: multiply; transition-delay: .24s; }
.shape-4 { width: 25%; aspect-ratio: 1; right: 29%; top: 34%; z-index: 4; background: radial-gradient(circle, #8B3A5C, #4A0E2B); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); mix-blend-mode: screen; transition-delay: .32s; }
.shape-5 { width: 32%; aspect-ratio: 1.35; right: 6%; bottom: 11%; z-index: 2; background: linear-gradient(90deg, #4A0E2B, #8B3A5C, #D4A855); clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%); mix-blend-mode: multiply; transition-delay: .4s; }
.shape-6 { width: 18%; aspect-ratio: 1; left: 46%; top: 2%; z-index: 5; background: #1C0B14; border: 1px solid rgba(212, 168, 85, .42); clip-path: polygon(50% 0%, 96% 90%, 4% 90%); mix-blend-mode: screen; transition-delay: .48s; }

.room-seams {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.room-right {
    max-width: 45ch;
}

.room-right .chamber-title {
    margin-bottom: 2rem;
    font-size: clamp(2rem, 4.6vw, 4.2rem);
}

.text-reveal {
    overflow: hidden;
    margin: 0 0 1.5rem;
}

.room-text {
    color: #C9B08F;
    font-family: "Libre Baskerville", Georgia, serif;
    line-height: 1.85;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.9s var(--ease-dream), opacity 0.9s var(--ease-dream);
}

.text-reveal:nth-of-type(3) .room-text { transition-delay: 120ms; }
.text-reveal:nth-of-type(4) .room-text { transition-delay: 240ms; }
.text-reveal:nth-of-type(5) .room-text { transition-delay: 360ms; }

.text-reveal.in-view .room-text {
    transform: translateY(0);
    opacity: 1;
}

.room-text.caption {
    color: #8B3A5C;
    font-family: "Source Sans 3", Inter, sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.05em;
}

.floating-gallery {
    columns: 3;
    column-gap: 2rem;
    width: min(92vw, 1180px);
    margin: 0 auto;
}

.fragment {
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 170px;
    margin: 0 0 2rem;
    padding: 2rem;
    break-inside: avoid;
    background: var(--piece-surface);
    box-shadow: inset 0 0 40px rgba(12, 5, 9, 0.5), 0 22px 48px rgba(13, 5, 9, 0.35);
    clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
}

.fragment::after {
    content: "";
    position: absolute;
    inset: 13px;
    border-top: 0.5px dashed rgba(212, 168, 85, 0.48);
    border-bottom: 0.5px dashed rgba(212, 168, 85, 0.2);
}

.fragment p {
    position: relative;
    z-index: 1;
    color: #F2E4CC;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1.6;
}

.fragment-1 { rotate: 2deg; min-height: 210px; transition-delay: .08s; }
.fragment-2 { rotate: -1.5deg; min-height: 270px; transition-delay: .16s; }
.fragment-3 { rotate: 1deg; min-height: 310px; transition-delay: .24s; }
.fragment-4 { rotate: -2deg; min-height: 185px; transition-delay: .32s; }
.fragment-5 { rotate: 1.5deg; min-height: 230px; transition-delay: .4s; }
.fragment-6 { rotate: -1deg; min-height: 255px; transition-delay: .48s; }

.peripheral-motifs {
    position: absolute;
    inset: -22%;
    pointer-events: none;
}

.motif {
    position: absolute;
    opacity: 0.72;
    box-shadow: inset 0 0 28px rgba(12, 5, 9, 0.45);
}

.motif-1 { width: 80px; aspect-ratio: 1; top: 11%; left: 8%; background: linear-gradient(135deg, #4A0E2B, #8B3A5C); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.motif-2 { width: 108px; aspect-ratio: 1; top: 17%; right: 4%; background: radial-gradient(circle, #8B3A5C, #4A0E2B); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 12% 20%); transition-delay: .12s; }
.motif-3 { width: 72px; aspect-ratio: 1; bottom: 14%; left: 13%; background: linear-gradient(45deg, #D4A855, #4A0E2B); clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); transition-delay: .24s; }
.motif-4 { width: 98px; aspect-ratio: 1; bottom: 10%; right: 12%; background: linear-gradient(90deg, #4A0E2B, #D4A855); clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%); transition-delay: .36s; }
.motif-5 { width: 54px; aspect-ratio: 1; top: 48%; left: -2%; background: #8B3A5C; clip-path: polygon(50% 0%, 96% 92%, 4% 92%); transition-delay: .48s; }

.floating-particle {
    position: fixed;
    z-index: 20;
    pointer-events: none;
    opacity: 0.28;
    mix-blend-mode: screen;
    animation: particle-drift 28s ease-in-out infinite;
}

.particle-1 { width: 6px; height: 6px; left: 20%; top: 20%; border-radius: 50%; background: #8B3A5C; }
.particle-2 { width: 8px; height: 8px; right: 25%; top: 40%; background: #D4A855; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); animation-duration: 34s; animation-direction: reverse; }
.particle-3 { width: 7px; height: 7px; left: 15%; top: 60%; background: #8B3A5C; clip-path: polygon(50% 0%, 96% 92%, 4% 92%); animation-duration: 31s; }
.particle-4 { width: 7px; height: 7px; right: 30%; top: 30%; background: #D4A855; border-radius: 50%; animation-duration: 38s; animation-direction: reverse; }
.particle-5 { width: 6px; height: 6px; left: 40%; top: 70%; background: #8B3A5C; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); animation-duration: 26s; }
.particle-6 { width: 10px; height: 10px; right: 12%; top: 64%; background: #8B3A5C; clip-path: polygon(50% 0%, 96% 92%, 4% 92%); animation-duration: 40s; }

.reveal-zoom {
    opacity: 0;
    filter: blur(3px);
    transform: scale(0.85);
    transition: opacity 0.9s var(--ease-dream), filter 0.9s var(--ease-dream), transform 0.9s var(--ease-dream);
}

.reveal-zoom.in-view {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.tile.reveal-zoom.in-view:nth-child(odd) {
    transform: scale(1);
}

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

@keyframes seam-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(212, 168, 85, 0.42), 0 0 22px rgba(212, 168, 85, 0.28); }
    50% { box-shadow: 0 0 18px rgba(242, 228, 204, 0.88), 0 0 46px rgba(212, 168, 85, 0.72); }
}

@keyframes particle-drift {
    0% { translate: 0 0; opacity: 0.2; }
    45% { translate: 42px -96px; opacity: 0.4; }
    100% { translate: -18px -190px; opacity: 0.18; }
}

@media (max-width: 768px) {
    .chamber-2,
    .chamber-3,
    .chamber-4 {
        padding: 6vh 1.25rem;
    }

    .tessellation-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .tile:nth-child(odd) {
        margin-left: 0;
    }

    .impossible-room {
        grid-template-columns: 1fr;
    }

    .room-left {
        min-height: 360px;
    }

    .floating-gallery {
        columns: 1;
    }

    .floating-particle:nth-of-type(n+4) {
        display: none;
    }

    .threshold-piece,
    .resolution-piece {
        width: min(88vw, 390px);
        min-height: min(88vw, 390px);
    }
}