@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');

:root {
  color-scheme: dark;
  --ink: #e9e9e1;
  --muted: #777872;
  --acid: #d9ff43;
  --bg: #0a0a09;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body { color: var(--ink); font-family: 'DM Mono', monospace; cursor: none; }
button, a { color: inherit; font: inherit; }
button { cursor: none; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; filter:saturate(1.08) contrast(1.04); transition: opacity 1.4s ease .15s, filter .8s var(--ease); }
body.entered #scene { opacity: 1; }
.cursor-light { position:fixed; z-index:4; left:0; top:0; width:52vw; height:52vw; max-width:760px; max-height:760px; border-radius:50%; pointer-events:none; opacity:0; transform:translate(calc(var(--mx, 50vw) - 50%),calc(var(--my, 50vh) - 50%)); background:radial-gradient(circle,rgba(132,109,255,.2) 0%,rgba(79,64,185,.09) 23%,transparent 68%); mix-blend-mode:screen; transition:opacity .7s ease; will-change:transform; }
body.entered .cursor-light { opacity:.82; }
.grain { pointer-events: none; position: fixed; inset: -50%; z-index: 12; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); animation: grain .2s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,3%)} 100%{transform:translate(-2%,-2%)} }

.cursor { position: fixed; z-index: 99; width: 34px; height: 34px; border: 1px solid rgba(217,255,67,.52); border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); transition: width .35s var(--ease), height .35s var(--ease), background .35s; mix-blend-mode: difference; }
.cursor span { position:absolute; left:50%; top:50%; width:3px; height:3px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.cursor::after { content:''; position:absolute; inset:-16px; border-radius:50%; box-shadow:0 0 35px rgba(150,125,255,.45); opacity:.45; }
.cursor.is-hover { width: 68px; height: 68px; background: rgba(217,255,67,.2); }
body.over-sculpture .cursor { width:96px; height:96px; border-color:rgba(255,255,255,.78); background:rgba(139,112,255,.16); }

.intro { position:fixed; inset:0; z-index:50; display:grid; place-items:center; background:#0b0b0a; transition: clip-path 1.2s var(--ease), visibility 1.2s; clip-path:circle(150% at 50% 50%); }
.intro.leaving { clip-path:circle(0% at 50% 50%); visibility:hidden; }
.intro-mark { width:min(34vw,390px); aspect-ratio:1; position:absolute; }
.intro-mark svg { width:100%; overflow:visible; animation:float 4s ease-in-out infinite; }
.intro-mark path { fill:none; stroke:rgba(233,233,225,.55); stroke-width:.55; vector-effect:non-scaling-stroke; }
.intro-mark .ghost { stroke:rgba(217,255,67,.16); animation:turn 8s linear infinite reverse; transform-origin:center; }
@keyframes float { 50%{transform:scale(1.055) rotate(2deg)} }
@keyframes turn { to{transform:rotate(360deg)} }
.enter { position:relative; z-index:2; border:0; background:none; text-transform:uppercase; letter-spacing:.14em; font-size:12px; padding:70px; }
.enter span { display:block; }
.enter small { position:absolute; top:calc(100% + 66px); left:50%; white-space:nowrap; transform:translateX(-50%); color:var(--muted); font-size:10px; letter-spacing:.09em; }
.load-note { position:absolute; right:4.5vw; bottom:5vh; color:#666; text-transform:uppercase; font-size:9px; letter-spacing:.12em; }

.header, footer, .museum { opacity:0; transition:opacity .7s ease .65s, transform .9s var(--ease) .55s; }
.header { position:fixed; inset:5vh 4.5vw auto; z-index:10; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; transform:translateY(-18px); }
body.entered .header, body.entered footer, body.entered .museum { opacity:1; transform:none; }
.brand { width:max-content; color:inherit; text-decoration:none; display:flex; gap:28px; align-items:flex-start; }
.brand strong { font-size:12px; line-height:.85; letter-spacing:.02em; }
.brand span, .edition, .status, footer { color:var(--muted); font-size:10px; line-height:1.45; text-transform:uppercase; letter-spacing:.08em; }
.edition { margin:0; }
.status { margin:0; justify-self:end; display:flex; gap:10px; align-items:center; }
.status i { width:5px; height:5px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); }

.museum { position:fixed; inset:0; z-index:5; pointer-events:none; }
.museum button, .museum a { pointer-events:auto; }
.title-block { position:absolute; left:4.5vw; top:27vh; transition:opacity .6s var(--ease),transform .8s var(--ease); }
.kicker { margin:0 0 15px; color:var(--muted); font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font-family:Inter,sans-serif; font-size:clamp(52px,7.2vw,118px); font-weight:300; line-height:.78; letter-spacing:-.075em; }
.artist { margin:25px 0 0; color:var(--ink); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.artist span { color:var(--muted); margin-left:15px; }
.title-block h1, .artist, .caption p, .caption span { transition:opacity .22s, transform .45s var(--ease); }
.changing .title-block h1, .changing .artist, .changing .caption p, .changing .caption span { opacity:0; transform:translateY(18px); }

.rooms { position:absolute; right:4.5vw; top:25vh; width:min(23vw,310px); pointer-events:auto; transition:opacity .6s var(--ease),transform .8s var(--ease); }
.rooms > p { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.12em; margin:0 0 14px; }
.rooms ol { list-style:none; padding:0; margin:0; }
.rooms button { border:0; background:none; padding:3px 0; width:100%; display:flex; gap:22px; text-align:left; font-family:Inter,sans-serif; font-size:clamp(14px,1.12vw,19px); font-weight:300; color:#52534f; transition:color .35s, transform .45s var(--ease); }
.rooms button span { font:9px 'DM Mono',monospace; padding-top:6px; color:#51524e; }
.rooms button:hover, .rooms button.active { color:var(--ink); transform:translateX(-10px); }
.rooms button.active span { color:var(--acid); }

.caption { position:absolute; right:4.5vw; bottom:14vh; width:min(23vw,310px); display:grid; grid-template-columns:58px 1fr; gap:14px; color:var(--muted); font-size:9px; line-height:1.55; text-transform:uppercase; letter-spacing:.05em; }
.caption p { margin:0; color:#b5b5ae; }
.focus-control { position:absolute; left:50%; bottom:9.5vh; transform:translateX(-50%); display:flex; align-items:center; gap:28px; border:1px dashed rgba(233,233,225,.34); background:rgba(10,10,9,.18); backdrop-filter:blur(7px); padding:11px 13px 11px 17px; color:var(--ink); text-transform:uppercase; letter-spacing:.12em; font-size:9px; transition:background .35s,border-color .35s,transform .55s var(--ease); }
.focus-control i { font-style:normal;color:var(--acid);font-size:12px; }
.focus-control:hover { background:rgba(217,255,67,.1);border-color:rgba(217,255,67,.72);transform:translateX(-50%) scale(1.06); }
body.focused .focus-control { transform:translateX(-50%) scale(.94); }
body.focused .title-block { opacity:.18; transform:translateX(-24px); }
body.focused .rooms { opacity:.22; transform:translateX(20px); }
body.focused #scene { filter:saturate(1.18) contrast(1.08); }
.instructions { position:absolute; left:4.5vw; bottom:13vh; display:flex; align-items:center; gap:18px; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.1em; }
.instructions .line { width:110px; height:1px; background:#2c2d2a; overflow:hidden; }
.instructions i { display:block; height:100%; width:35%; background:var(--ink); animation:scan 2.1s var(--ease) infinite; }
@keyframes scan { from{transform:translateX(-110%)} to{transform:translateX(320%)} }
.mobile-only { display:none; }

footer { position:fixed; z-index:10; left:4.5vw; right:4.5vw; bottom:4.5vh; display:flex; justify-content:space-between; transform:translateY(15px); }
.info { border:0; border-bottom:1px solid #3d3e3a; background:none; padding:0 0 4px; text-transform:uppercase; font-size:10px; }
footer p { margin:0; }

.about { position:fixed; inset:0; z-index:30; background:#d9ff43; color:#10110e; padding:7vh 4.5vw; clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
.about.open { clip-path:inset(0); }
.about .close { position:absolute; right:4.5vw; top:7vh; border:0; background:none; text-transform:uppercase; font-size:10px; }
.about h2 { margin:12vh 0 0; font:300 clamp(48px,8.2vw,134px)/.82 Inter,sans-serif; letter-spacing:-.075em; }
.about-copy { position:absolute; right:7vw; bottom:9vh; width:min(430px,37vw); display:grid; grid-template-columns:1fr 1fr; gap:34px; font:400 12px/1.55 Inter,sans-serif; }

@media (max-width: 760px) {
  .cursor { display:none; }
  .cursor-light { width:120vw;height:120vw;opacity:.55; }
  body, button, a { cursor:auto; }
  .header { grid-template-columns:1fr 1fr; }
  .edition { display:none; }
  .title-block { top:20vh; }
  h1 { font-size:clamp(54px,17vw,82px); }
  .artist span { display:block; margin:7px 0 0; }
  .rooms { right:4.5vw; top:auto; bottom:20vh; width:55vw; }
  .rooms button { justify-content:flex-end; font-size:14px; padding:2px 0; }
  .caption { left:4.5vw; right:auto; bottom:21vh; width:30vw; display:block; }
  .caption p { display:none; }
  .instructions { bottom:13vh; }
  .focus-control { bottom:8.5vh; }
  .desktop-only { display:none; }
  .mobile-only { display:inline; }
  .intro-mark { width:70vw; }
  .about { padding-top:5vh; }
  .about .close { top:5vh; }
  .about h2 { margin-top:18vh; font-size:15vw; }
  .about-copy { left:4.5vw; right:auto; bottom:10vh; width:78vw; grid-template-columns:1fr; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}