/* ETELLIS host. The world is the interface; this file styles the few things
   that exist outside it: the one gesture at first light, the admission
   boundary, subtitles for the world's voice, and the smallest possible mail
   handoff. Graphite and cool light on the same black as the void. */

@font-face { font-family: "Manrope"; src: url("assets/fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: dark;
  --void: #000;
  --light: #e8eef3;
  --light-dim: rgba(232, 238, 243, 0.68);
  --light-faint: rgba(232, 238, 243, 0.42);
  --cool: #9fd4ef;
  --graphite: rgba(150, 160, 170, 0.28);
  --glass: rgba(6, 8, 10, 0.5);
  --label: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --bottom: max(18px, env(safe-area-inset-bottom, 0px));
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: var(--void); color: var(--light); }
body { font-family: var(--label); font-size: 16px; line-height: 1.55; overflow: hidden; -webkit-font-smoothing: antialiased; touch-action: none; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--cool); outline-offset: 4px; }
a { color: var(--cool); }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: auto 24px 24px 24px; font-size: 16px; max-width: 46ch; }

#world, #first-light { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#world { outline: none; background: var(--void); pointer-events: none; transition: opacity 1.2s ease; }
/* While the world warms its materials behind first light, it is not shown. */
body[data-scene="boot"] #world { opacity: 0; }
#first-light { pointer-events: none; z-index: 2; transition: opacity 1.4s ease; }
body:not([data-scene="boot"]) #first-light { opacity: 0; }
/* While the visitor's eyes are calibrated on the first light, it stays in
   front, and a resumed world waits behind it. */
body[data-lightcal="1"] #first-light { opacity: 1; z-index: 3; }
body[data-lightcal="1"] #world { opacity: 0; }

/* The one gesture, beneath the first point of light. */
.admission, .boundary { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom) + 14vh); z-index: 10; display: grid; justify-items: center; gap: 18px; padding-inline: var(--gutter) var(--gutter-r); text-align: center; animation: arrive 2.2s ease both; }
.boundary { top: 0; bottom: 0; align-content: center; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .86)); }
.boundary h2 { margin: 0; font: 300 clamp(20px, 3.2vw, 30px)/1.3 var(--label); letter-spacing: .01em; max-width: 30ch; }
.boundary p { margin: 0 auto; max-width: 46ch; color: var(--light-dim); font-size: 15px; }
.glow-button { font: 500 12px/1 var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--light); padding: 15px 26px 14px calc(26px + .3em); border: 1px solid var(--graphite); border-radius: 999px; background: radial-gradient(ellipse at 50% 120%, rgba(159, 212, 239, .16), transparent 70%), var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .4s, box-shadow .4s; }
.glow-button:hover, .glow-button:focus-visible { border-color: var(--cool); box-shadow: 0 0 28px rgba(159, 212, 239, .18); }
.fine { font: 400 12px/1.6 var(--label); letter-spacing: .02em; color: var(--light-faint); max-width: 52ch; margin: 0 auto; }

/* Subtitles: what the world's voice says, and what it heard. */
.caption { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); bottom: calc(var(--bottom) + 28px); width: min(640px, calc(100% - 32px)); margin: 0; text-align: center; font: 400 16px/1.5 var(--label); color: var(--light); text-shadow: 0 1px 18px #000, 0 0 2px #000; animation: arrive .6s ease both; }

/* The mail handoff gesture, only where the browser requires one. */
.handoff { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; cursor: pointer; background: radial-gradient(ellipse at 50% 50%, rgba(159, 212, 239, .08), transparent 60%); }
.handoff p { font: 500 12px/1 var(--label); letter-spacing: .3em; text-transform: uppercase; color: var(--light); animation: breathe 2.4s ease-in-out infinite; }

@keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.caption { animation-name: none; }
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* The pointing reticle (look, point, confirm): where the visitor's finger
   aims, before anything happens. Open while it rests on nothing, lit when it
   rests on a work, broken when it could be either of two. */
#reticle {
  position: fixed; left: 0; top: 0; z-index: 30; width: 0; height: 0;
  pointer-events: none; transition: transform 33ms linear;
}
#reticle::before {
  content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid rgba(220, 238, 255, 0.6);
  box-shadow: 0 0 12px rgba(196, 228, 255, 0.16);
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
/* The fingertip's own point: small and exact. */
#reticle::after {
  content: ""; position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(236, 244, 255, 0.95); box-shadow: 0 0 6px rgba(196, 228, 255, 0.6);
}
#reticle[data-state="on"]::before {
  border: 2px solid rgba(240, 232, 210, 0.95); transform: scale(0.82);
  box-shadow: 0 0 26px rgba(240, 222, 180, 0.45), inset 0 0 12px rgba(240, 222, 180, 0.25);
}
#reticle[data-state="ambiguous"]::before { border: 1px dashed rgba(220, 238, 255, 0.85); }
#reticle .reticle-label {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: 500 12px/1.3 Manrope, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(236, 240, 246, 0.92); text-shadow: 0 0 10px #000;
}
@media (prefers-reduced-motion: reduce) { #reticle, #reticle::before { transition: none; } }