:root {
  --void: #07060a;
  --milk: #f3efe6;
  --acid: #ffdd00;
  --pink: #ff2d87;
  --cyan: #2ec5d3;
  --ui: "Space Mono", ui-monospace, monospace;
  --big: "Unbounded", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: auto; }
body { background: var(--void); color: var(--milk); font-family: var(--ui); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
main { position: relative; z-index: 1; pointer-events: none; }
#hero-space { height: 320vh; }
#tunnel-space { height: 1600vh; }  /* resized in JS from the number of works */

/* ---------- HUD over the canvas ---------- */
#hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#sig {
  position: absolute; left: 50%; top: 20%; width: min(78vw, 820px);
  transform: translate(-50%, -50%); overflow: visible;
  filter: drop-shadow(0 0 18px rgba(255, 45, 135, .45));
}
#sig .stroke { fill: none; stroke: var(--milk); stroke-width: 7; stroke-linecap: square; stroke-linejoin: miter; }
#sig .drip { fill: var(--pink); }
#ring {
  position: absolute; left: 50%; top: 50%;
  width: min(118vw, 118vh * .82); height: min(118vw / .82, 118vh);
  transform: translate(-50%, -50%); overflow: visible; opacity: 0;
}
#ring text {
  font-family: var(--big); font-weight: 900; font-size: 64px; letter-spacing: -3px;
  fill: var(--acid); stroke: var(--acid); stroke-width: 3px; paint-order: stroke; stroke-linejoin: round;
  text-transform: uppercase;
}
#chapter {
  position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%);
  text-align: center; opacity: 0; mix-blend-mode: difference;
}
#chapter-title { display: block; font-family: var(--big); font-weight: 900; font-size: clamp(56px, 16vw, 220px); letter-spacing: -.03em; line-height: .9; }
#chapter-sub { display: block; font-size: 14px; letter-spacing: .3em; margin-top: 10px; text-transform: uppercase; }
#scrollcue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0;
  font-size: 12px; letter-spacing: .3em; animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 8px); opacity: .5; } }

/* ---------- top bar ---------- */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  mix-blend-mode: difference;
}
#top a, #top button { text-decoration: none; }
#top span { display: flex; gap: 18px; }
#home { font-family: var(--big); font-weight: 900; letter-spacing: .02em; font-size: 14px; }
#top a:hover, #top button:hover { color: var(--acid); }

/* ---------- end: buy my art ---------- */
#end {
  position: relative; pointer-events: auto; min-height: 100vh;
  background: var(--milk); color: var(--void);
  padding: 120px 16px 48px; display: grid; justify-items: center; gap: 48px;
}
.buy-oval { margin: 0; }
.buy-oval a {
  display: grid; place-items: center; text-decoration: none;
  width: min(86vw, 640px); aspect-ratio: 1.6;
  border-radius: 50%; background: var(--acid); color: var(--void);
  font-family: var(--big); font-weight: 900; text-transform: uppercase;
  font-size: clamp(40px, 10vw, 104px); letter-spacing: -.06em; line-height: .82; text-align: center; -webkit-text-stroke: 2px currentColor;
  box-shadow: 0 0 0 10px var(--void), 0 0 0 22px var(--pink);
  transition: transform .5s cubic-bezier(.2, .9, .2, 1.4);
}
.buy-oval a:hover { transform: scale(1.05) rotate(-3deg); }
.who { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1100px; }
.who figure { margin: 0; width: min(42vw, 230px); background: #fff; padding: 8px 8px 30px; box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.who img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.tilt-a { transform: rotate(-4deg); } .tilt-b { transform: rotate(3deg) translateY(16px); }
.tilt-c { transform: rotate(-2deg); } .tilt-d { transform: rotate(5deg) translateY(10px); }
.about { max-width: 52ch; font-size: 16px; line-height: 1.55; text-align: center; margin: 0; }
.contact { font-family: var(--big); font-weight: 700; font-size: 18px; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin: 0; }
.fine { font-size: 11px; opacity: .5; margin: 0; }

/* ---------- viewer ---------- */
#viewer {
  position: fixed; inset: 0; z-index: 10; background: rgba(7, 6, 10, .92);
  display: grid; place-items: center; padding: 56px 16px 76px;
  backdrop-filter: blur(14px) saturate(1.6);
}
#viewer .v-stage { position: relative; display: grid; place-items: center; width: 100%; height: calc(100vh - 140px); touch-action: pan-y; }
#viewer .v-stage img { grid-area: 1 / 1; max-width: 100%; max-height: 100%; object-fit: contain; }
#v-img { animation: melt .7s ease-out; }
#v-img.enter { animation: enter .75s cubic-bezier(.2, .8, .2, 1); }
@keyframes enter { from { filter: blur(14px) saturate(2.4) hue-rotate(-60deg); transform: translateX(calc(var(--dir) * 18%)) scale(.94); opacity: .2; } }
/* the painting you leave stays on top for a moment, double-exposed over the next one, and slides out */
#v-ghost { pointer-events: none; opacity: 0; mix-blend-mode: screen; }
#v-ghost.go { animation: ghost .8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes ghost {
  0% { opacity: 1; transform: none; filter: none; }
  35% { opacity: .85; filter: hue-rotate(90deg) saturate(1.8); }
  100% { opacity: 0; transform: translateX(calc(var(--dir) * -35%)) scale(1.12) rotate(calc(var(--dir) * -4deg)); filter: hue-rotate(180deg) blur(6px); }
}
.v-toast { position: absolute; left: 50%; top: 18px; translate: -50% 0; z-index: 3; margin: 0; max-width: calc(100% - 80px);
  background: var(--acid); color: var(--void); font: 700 13px/1.3 var(--big); padding: 8px 14px; border-radius: 999px; text-align: center; }
.four-d { margin: 0; width: min(78vw, 360px); aspect-ratio: 3 / 4; border-radius: 50% / 42%; overflow: hidden;
  box-shadow: 0 0 0 8px var(--void), 0 0 0 16px var(--acid), 0 20px 40px rgba(0,0,0,.3); transform: rotate(-3deg); }
.four-d video { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes melt { from { filter: blur(18px) hue-rotate(90deg); transform: scale(.92) skewY(3deg); opacity: 0; } }
.v-bar {
  position: absolute; left: 16px; right: 16px; bottom: 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .15em;
}
.v-bar span:last-child { display: flex; gap: 18px; font-size: 20px; }
#v-buy {
  font-family: var(--big); font-weight: 900; text-decoration: none;
  background: var(--acid); color: var(--void); padding: 10px 20px; border-radius: 999px;
}
.x { position: absolute; top: 14px; right: 16px; font-size: 20px; z-index: 2; }

/* ---------- all works grid ---------- */
#grid { position: fixed; inset: 0; z-index: 9; overflow: auto; background: var(--milk); color: var(--void); }
#grid-body { max-width: 1200px; margin: 0 auto; padding: 64px 16px; }
#grid h3 { font-family: var(--big); font-weight: 900; font-size: clamp(32px, 7vw, 64px); margin: 40px 0 6px; letter-spacing: -.02em; }
#grid h3 small { display: block; font-family: var(--ui); font-weight: 400; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tiles button img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: border-radius .4s, transform .4s; }
.tiles button:hover img { border-radius: 50%; transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  #scrollcue { animation: none; }
  #viewer img { animation: none; }
}

/* ---------- jelly on hover ---------- */
@keyframes jelly {
  0% { transform: scale(1, 1); } 25% { transform: scale(1.12, .88); } 40% { transform: scale(.9, 1.1); }
  55% { transform: scale(1.05, .95); } 70% { transform: scale(.98, 1.02); } 100% { transform: scale(1, 1); }
}
.jelly:hover, #top a:hover, #top button:hover, #v-buy:hover, .tiles button:hover, .who figure:hover, .corner:hover { animation: jelly .6s ease-out; }
.buy-oval a:hover { animation: jelly .7s ease-out; transform: none; }
#top a, #top button, #v-buy { display: inline-block; }
#top a[href="#end"] { font-family: var(--big); font-weight: 900; letter-spacing: -.04em; font-size: 15px; }

/* ---------- BUY / MY / ART stuck in the corners while you travel ---------- */
.corner {
  position: fixed; z-index: 4; font-family: var(--big); font-weight: 900; letter-spacing: -.06em; line-height: .8;
  font-size: clamp(34px, 6vw, 84px); color: var(--acid); text-decoration: none;
  -webkit-text-stroke: 2px var(--acid); text-shadow: 3px 3px 0 var(--pink);
  opacity: 0; transition: opacity .6s, translate .6s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: auto;
}
.corner.c1 { left: 14px; top: 52px; translate: -40px -40px; rotate: -6deg; }
.corner.c2 { right: 14px; top: 52px; translate: 40px -40px; rotate: 5deg; }
.corner.c3 { left: 14px; bottom: 12px; translate: -40px 40px; rotate: 4deg; }
.corner.c4 { right: 14px; bottom: 12px; translate: 40px 40px; rotate: -5deg; color: var(--pink); -webkit-text-stroke-color: var(--pink); text-shadow: 3px 3px 0 var(--acid); }
body.corners-on .corner { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .jelly:hover, .corner:hover, .buy-oval a:hover { animation: none; } }

/* no blue box when tapping on phones; keyboard users still get a visible outline */
html { -webkit-tap-highlight-color: transparent; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; }
.critter, .critter img, .corner, .buy-oval a, .deer, .poster, .sticker, .postit { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }