:root {
    --design-phrase: "Interpret **holos** as wholeness *holo* *holos* **holo* **holos*";
    --aqua: #8EF9F3;
    --violet: #C6A6FF;
    --mint: #B8FFCB;
    --silver: #D7DEE8;
    --pearl: #F5F1E8;
    --rose: #FF9BD2;
    --slate: #22304A;
    --night: #080A12;
    --display: 'Syne', sans-serif;
    --serif: 'Cormorant Garamond', serif;
    --body: 'DM Sans', sans-serif;
    --mono: 'Azeret Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
    margin: 0;
    color: var(--silver);
    font-family: var(--body);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 16% 12%, rgba(142,249,243,.16), transparent 30vw),
        radial-gradient(circle at 80% 26%, rgba(198,166,255,.14), transparent 34vw),
        radial-gradient(circle at 54% 92%, rgba(255,155,210,.12), transparent 32vw),
        linear-gradient(135deg, #080A12 0%, #101827 47%, #080A12 100%);
}

.grain {
    position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .18; mix-blend-mode: screen;
    background-image: repeating-radial-gradient(circle at 30% 40%, rgba(245,241,232,.18) 0 1px, transparent 1px 4px);
}

.cursor-halo {
    position: fixed; width: 38vmin; height: 38vmin; border-radius: 50%; pointer-events: none; z-index: 2;
    transform: translate(-50%, -50%); opacity: .45; filter: blur(22px); mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(142,249,243,.23), rgba(198,166,255,.13) 38%, transparent 70%);
}

.orbit-map { position: fixed; inset: 50% auto auto 50%; width: 88vmin; height: 88vmin; transform: translate(-50%, -50%) rotate(var(--spin, 0deg)); z-index: 1; pointer-events: none; opacity: .72; }
#progressRing { fill: none; stroke: url(#orbitGlow); stroke-width: 1.3; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progress, 0)); filter: drop-shadow(0 0 12px rgba(142,249,243,.45)); }
.orbit-breath { fill: none; stroke: rgba(215,222,232,.13); stroke-width: 1; stroke-dasharray: 9 18; animation: breathe 18s ease-in-out infinite alternate; }

.atelier { position: relative; z-index: 3; }
.room { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 8vmin; overflow: hidden; isolation: isolate; }
.room::before { content: ""; position: absolute; inset: 9vmin; border: 1px solid rgba(215,222,232,.09); border-radius: 48% 52% 51% 49% / 52% 46% 54% 48%; transform: rotate(var(--room-tilt, -4deg)); opacity: .8; }
.room::after { content: ""; position: absolute; inset: -20%; background: repeating-conic-gradient(from 18deg, rgba(142,249,243,.045) 0 4deg, transparent 4deg 12deg); mix-blend-mode: screen; opacity: .34; animation: drift 30s linear infinite; }

.room-copy { max-width: 760px; position: relative; z-index: 5; }
.opening-copy { justify-self: start; align-self: center; margin-left: 4vw; max-width: 680px; }
.side-copy { justify-self: end; align-self: center; width: min(46vw, 650px); }
.side-copy.reverse { justify-self: start; }
.center-copy, .final-copy { text-align: center; }
.chapter { font-family: var(--display); text-transform: uppercase; letter-spacing: .34em; color: var(--aqua); font-size: clamp(.72rem, 1vw, .9rem); margin: 0 0 1.4rem; }
h1 { font-family: var(--display); font-size: clamp(4rem, 13vw, 12rem); line-height: .82; letter-spacing: .08em; margin: 0; color: transparent; -webkit-text-stroke: 1px rgba(245,241,232,.86); text-shadow: 0 0 24px rgba(142,249,243,.45), 0 0 80px rgba(198,166,255,.3); }
h2 { font-family: var(--serif); font-weight: 400; color: var(--pearl); font-size: clamp(2.6rem, 6vw, 6.8rem); line-height: .92; margin: 0 0 1.3rem; text-shadow: 0 0 28px rgba(255,155,210,.18); }
.poem, p { font-size: clamp(1.02rem, 1.55vw, 1.34rem); line-height: 1.75; color: rgba(215,222,232,.82); font-weight: 300; }

.holo-sphere { position: absolute; width: 48vmin; height: 48vmin; right: 10vw; top: 22vh; z-index: 4; transform-style: preserve-3d; transform: rotateX(61deg) rotateZ(var(--sphere, 0deg)); }
.arc { position: absolute; inset: 8%; border-radius: 50%; border: 1.5px solid transparent; filter: drop-shadow(0 0 14px rgba(142,249,243,.7)); }
.arc-one { border-top-color: var(--aqua); border-left-color: rgba(142,249,243,.55); transform: rotate(14deg); }
.arc-two { border-right-color: var(--rose); border-bottom-color: rgba(255,155,210,.55); transform: rotate(74deg) scale(.82); }
.arc-three { border-top-color: var(--mint); border-bottom-color: rgba(198,166,255,.55); transform: rotate(-38deg) scale(1.15); }
.plane { position: absolute; background: linear-gradient(120deg, rgba(245,241,232,.04), rgba(142,249,243,.2), rgba(255,155,210,.08)); border: 1px solid rgba(215,222,232,.16); backdrop-filter: blur(8px); box-shadow: inset 0 0 26px rgba(245,241,232,.07); }
.plane-a { width: 42%; height: 20%; left: 18%; top: 35%; transform: rotate(21deg); }
.plane-b { width: 34%; height: 28%; right: 14%; bottom: 20%; transform: rotate(-28deg); }
.plane-c { width: 22%; height: 46%; left: 45%; top: 12%; transform: rotate(48deg); }

.fragment { position: absolute; width: 14vmin; height: 18vmin; z-index: 3; clip-path: polygon(18% 0, 100% 22%, 76% 100%, 0 72%); background: linear-gradient(135deg, rgba(245,241,232,.05), rgba(142,249,243,.22), rgba(198,166,255,.08)); border: 1px solid rgba(215,222,232,.2); box-shadow: 0 0 32px rgba(142,249,243,.12), inset 0 0 25px rgba(245,241,232,.05); transform: translate(var(--mx,0), var(--my,0)) rotate(var(--rot, 0deg)); }
.f1 { left: 6vw; top: 12vh; --rot: -18deg; }.f2 { right: 5vw; bottom: 14vh; --rot: 32deg; }.f3 { left: 18vw; bottom: 9vh; --rot: 64deg; }.f4 { right: 28vw; top: 9vh; --rot: -44deg; }.f5 { left: 48vw; top: 62vh; --rot: 12deg; }

.alignment-table { --room-tilt: 8deg; background: radial-gradient(circle at 24% 70%, rgba(184,255,203,.09), transparent 34vw); }
.glass-table { position: absolute; left: 8vw; top: 16vh; width: 58vw; height: 62vh; border: 1px solid rgba(215,222,232,.18); border-radius: 44% 56% 49% 51% / 45% 51% 49% 55%; background: linear-gradient(145deg, rgba(245,241,232,.045), rgba(142,249,243,.08), transparent); box-shadow: inset 0 0 70px rgba(142,249,243,.08), 0 0 80px rgba(198,166,255,.08); transform: rotate(-9deg); }
.rule { position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(215,222,232,.35), transparent); }
.r1 { top: 28%; }.r2 { top: 52%; transform: rotate(7deg); }.r3 { top: 72%; transform: rotate(-6deg); }
.repair-note { position: absolute; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pearl); border: 1px solid rgba(245,241,232,.16); padding: .7rem 1rem; background: rgba(8,10,18,.42); backdrop-filter: blur(8px); }
.note-one { top: 12%; left: 11%; transform: rotate(-8deg); }.note-two { bottom: 16%; right: 8%; transform: rotate(7deg); }

.resonance-pool { background: radial-gradient(circle at 50% 55%, rgba(198,166,255,.16), transparent 42vw); }
.pool { position: absolute; width: 74vmin; height: 74vmin; border-radius: 50%; background: radial-gradient(circle, rgba(142,249,243,.08), rgba(34,48,74,.18) 42%, transparent 70%); }
.pool span { position: absolute; inset: calc(var(--i, 0) * 8%); border: 1px solid rgba(142,249,243,.26); border-radius: 50%; animation: ripple 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.8s); }
.pool span:nth-child(1) { --i: 1; }.pool span:nth-child(2) { --i: 2; border-color: rgba(255,155,210,.26); }.pool span:nth-child(3) { --i: 3; border-color: rgba(184,255,203,.26); }.pool span:nth-child(4) { --i: 4; border-color: rgba(198,166,255,.26); }

.seam-kiln { background: radial-gradient(circle at 72% 46%, rgba(255,155,210,.13), transparent 34vw); }
.kiln-window { position: absolute; right: 8vw; width: min(52vw, 620px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,155,210,.22); background: radial-gradient(circle, rgba(255,155,210,.12), rgba(142,249,243,.05), transparent 68%); box-shadow: 0 0 80px rgba(255,155,210,.13), inset 0 0 80px rgba(245,241,232,.04); }
.seam-lines { width: 100%; height: 100%; }
.seam-lines path { fill: none; stroke: url(#orbitGlow); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 10 16; filter: drop-shadow(0 0 10px rgba(255,155,210,.8)); animation: seam 4.5s linear infinite; }

.whole-room { background: radial-gradient(circle at 50% 42%, rgba(245,241,232,.12), transparent 36vw); }
.whole-emblem { position: relative; width: 58vmin; height: 58vmin; display: grid; place-items: center; margin-bottom: 8vh; }
.whole-ring { position: absolute; inset: 0; border: 1px solid rgba(245,241,232,.45); border-radius: 48% 52% 51% 49%; box-shadow: 0 0 38px rgba(142,249,243,.25); animation: rotate 24s linear infinite; }
.whole-ring.offset { inset: 11%; border-color: rgba(255,155,210,.42); animation-direction: reverse; }
.whole-core { font-family: var(--display); letter-spacing: .42em; text-transform: uppercase; color: var(--mint); text-shadow: 0 0 28px rgba(184,255,203,.55); }
.final-copy { position: absolute; bottom: 10vh; }

.room-index { position: fixed; right: 2.2vw; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: .6rem; }
.room-index button { color: rgba(215,222,232,.62); background: rgba(8,10,18,.48); border: 1px solid rgba(215,222,232,.14); border-radius: 999px; padding: .55rem .8rem; font: 500 .72rem var(--display); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: color .3s, border-color .3s, transform .3s; }
.room-index button.active, .room-index button:hover { color: var(--pearl); border-color: var(--aqua); transform: translateX(-.35rem); }

@keyframes breathe { to { stroke-dashoffset: -220; transform: scale(1.03); } }
@keyframes drift { to { transform: rotate(360deg); } }
@keyframes ripple { 50% { transform: scale(1.08); opacity: .45; } }
@keyframes seam { to { stroke-dashoffset: -52; } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .room { padding: 12vmin 6vmin; }
    .opening-copy, .side-copy, .side-copy.reverse { justify-self: center; width: auto; margin: 0; }
    .holo-sphere, .glass-table, .kiln-window { opacity: .45; right: auto; left: 50%; transform: translateX(-50%) rotate(-8deg); width: 78vmin; }
    .room-index { display: none; }
}