:root {
  --bg: #000;
  --fg: rgba(255, 255, 255, 0.86);
  --track: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: block;
  opacity: 0;
  transition: opacity 2.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
body.is-playing #scene { opacity: 1; }
body.is-playing { cursor: none; }
body.is-playing.cursor-visible { cursor: default; }

/* ---- loader: one hairline, then one breathing ring. Nothing else. ---- */
#loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  z-index: 10;
  transition: opacity 1.8s ease, visibility 0s linear 1.8s;
}
#loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#loader.is-ready { cursor: pointer; }

#loader > * { grid-area: 1 / 1; }

.loader-bar {
  position: relative;
  width: 120px;
  height: 1px;
  background: var(--track);
  overflow: hidden;
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.loader-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#loader.is-ready .loader-bar { opacity: 0; transform: scaleX(0.15); }

.loader-enter {
  appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--fg);
  border-radius: 50%;
  background: none;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  cursor: pointer;
  transition: opacity 1s ease 0.35s, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
#loader.is-ready .loader-enter {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  animation: breathe 3.4s ease-in-out 1.4s infinite;
}
#loader.is-leaving .loader-enter {
  animation: none;
  opacity: 0;
  transform: scale(2.2);
  transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.loader-enter:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.35); outline-offset: 8px; }

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.5; }
}

/* only ever shown when the experience cannot start */
.loader-error {
  align-self: end;
  margin: 0 0 max(28px, env(safe-area-inset-bottom));
  padding: 0 24px;
  max-width: 420px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font: 12px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
#loader.is-error .loader-bar, #loader.is-error .loader-enter { opacity: 0.25; animation: none; }

noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.5);
  font: 12px/1.5 system-ui, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  #loader.is-ready .loader-enter { animation: none; }
}