/* RINEASY — a name in relief on a dark wall, lit by the light you carry. */

:root {
  --bg: #07080b;
  --body: #15161c;          /* unlit face of a letter */
  --body-top: #20212a;
  --body-bot: #101117;
  --hint: #5c6070;
  --warm: 255 214 160;      /* tungsten: pool of light + ember */
  --sheen: 255 242 220;     /* specular on the letter face */

  /* driven by script.js */
  --lx: 50vw;
  --ly: 50vh;
  --pool: 0;
  --ember: 0;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

html {
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: #e7e1d6;
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", Georgia, serif;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* on a mouse, the ember replaces the arrow */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
}

/* ---------- the wall ---------- */

.wall,
.grain,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.wall {
  background: radial-gradient(
    circle 58vmax at var(--lx) var(--ly),
    rgb(var(--warm) / var(--pool)) 0%,
    rgb(var(--warm) / calc(var(--pool) * 0.38)) 24%,
    rgb(var(--warm) / 0) 62%
  );
}

.grain {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.vignette {
  background: radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / 0) 48%, rgb(0 0 0 / 0.55) 100%);
}

/* ---------- the name ---------- */

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  touch-action: none;
}

.word {
  margin: 0;
  font-weight: 620;
  font-size: clamp(2.6rem, 13vw, 12.5rem);
  line-height: 1;
  letter-spacing: 0.16em;
  padding-left: 0.16em;             /* balance the trailing tracking so the word sits centred */
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transition: opacity 0.9s ease-out;
}

.word.is-lit { opacity: 1; }

/* Each letter is two layers:
   - the element itself: a flat dark glyph that only exists to cast shadows
     (rim light toward the source, rim shadow away from it, and a soft cast shadow)
   - ::after on top: the visible face, a dark gradient plus a specular sheen
     that slides across the surface as the light moves. */
.letter {
  position: relative;
  display: inline-block;
  color: var(--body);
  text-shadow:
    var(--hx, 0px) var(--hy, 0px) 0   rgb(var(--hc, 226 178 118) / var(--ha, 0.1)),
    var(--hx, 0px) var(--hy, 0px) 1px rgb(var(--hc, 226 178 118) / calc(var(--ha, 0.1) * 0.5)),
    var(--sx, 0px) var(--sy, 0px) 0   rgb(0 0 0 / var(--sa, 0.35)),
    var(--cx, 0px) var(--cy, 0px) var(--cb, 6px) rgb(0 0 0 / var(--ca, 0.25));
}

.letter::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: none;                /* shadows belong to the layer beneath, not the face */
  pointer-events: none;
  background-image:
    radial-gradient(
      circle var(--gr, 1em) at var(--gx, 50%) var(--gy, -50%),
      rgb(var(--sheen) / var(--ga, 0)) 0%,
      rgb(var(--sheen) / calc(var(--ga, 0) * 0.35)) 42%,
      rgb(var(--sheen) / 0) 100%
    ),
    linear-gradient(180deg, var(--body-top), var(--body-bot));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- the light ---------- */

.ember {
  position: fixed;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff3dc;
  box-shadow:
    0 0 10px 2px rgb(var(--warm) / 0.75),
    0 0 36px 10px rgb(var(--warm) / 0.22);
  transform: translate3d(calc(var(--lx) - 3px), calc(var(--ly) - 3px), 0) scale(var(--ember));
  opacity: var(--ember);
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------- the hint ---------- */

.hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-style: italic;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--hint);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.hint.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .word, .hint { transition: none; }
}