/* =============================================================================
   webvitrina — the fogged vitrina.
   Two realities: the DOM (sharp, behind the glass) and the WebGL canvas (the
   glass itself). Everything here is the DOM reality plus the decals ON the glass.

   Light states ride on html[data-lang]:  lt = light on (warm morning),
   en = light off (same street at night). Text colors transition in CSS; the
   background gradients crossfade via two stacked layers driven by JS, because
   background-image gradients don't interpolate.
   ============================================================================= */

:root {
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --ease-light: 1.15s cubic-bezier(.4, .1, .2, 1);
}

html[data-lang="lt"] {
  --bg: #efe8db;
  --ink: #221d18;
  --ink-soft: rgba(34, 29, 24, .66);
  --ink-faint: rgba(34, 29, 24, .38);
  --line: rgba(34, 29, 24, .32);
  --knob: #221d18;
}

html[data-lang="en"] {
  --bg: #090a0d;
  --ink: #e8e5de;
  --ink-soft: rgba(232, 229, 222, .62);
  --ink-faint: rgba(232, 229, 222, .34);
  --line: rgba(232, 229, 222, .30);
  --knob: #e8e5de;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  /* One viewport, no scroll. dvh so mobile URL bars don't leave a gap.
     touch-action/overscroll: the whole screen is a wipe surface — without
     these, a horizontal finger stroke triggers Chrome's swipe-back
     navigation and leaves the page. */
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  transition: background-color var(--ease-light), color var(--ease-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Once a real mouse is confirmed we replace the cursor with the dot. */
body.has-mouse, body.has-mouse * { cursor: none; }

/* ---------------------------------------------------------------------------
   The warmth behind the glass — the SHARP version of what the shader shows
   diffused. Day: amber lamp + milk light. Night: one cold pool from a
   streetlamp. Opacity of each layer is written per-frame by the light envelope.
   --------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg--day {
  background:
    radial-gradient(58% 64% at 37% 44%, rgba(224, 164, 84, .42), transparent 72%),
    radial-gradient(44% 52% at 71% 28%, rgba(255, 251, 240, .85), transparent 70%),
    radial-gradient(120% 110% at 50% 50%, transparent 42%, rgba(34, 29, 24, .16) 100%),
    #efe8db;
}

.bg--night {
  opacity: 0;
  background:
    radial-gradient(46% 54% at 40% 40%, rgba(112, 132, 168, .17), transparent 70%),
    radial-gradient(34% 40% at 70% 26%, rgba(150, 168, 198, .08), transparent 70%),
    radial-gradient(120% 110% at 50% 50%, transparent 40%, rgba(0, 0, 0, .5) 100%),
    #090a0d;
}

/* ---------------------------------------------------------------------------
   The room — the typographic truth.
   --------------------------------------------------------------------------- */
.room {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 clamp(1.4rem, 6vw, 4rem);
}

.soul {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 4.4vw, 3.35rem);
  line-height: 1.34;
  letter-spacing: .005em;
  max-inline-size: 24ch;
  text-wrap: balance;
  transition: color var(--ease-light);
}

.claim {
  margin-top: clamp(1.6rem, 3.2vh, 2.6rem);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(.66rem, 1.05vw, .84rem);
  letter-spacing: .34em;
  /* Centered tracked caps: the last letter carries a phantom .34em of space —
     the indent rebalances it. */
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-inline-size: 46ch;
  line-height: 2;
  transition: color var(--ease-light);
}

/* ---------------------------------------------------------------------------
   The plaque — a small brass plate by the door. The only interactive thing
   in the room. Magnetic pull + ripple + "Nukopijuota" handled in JS.
   --------------------------------------------------------------------------- */
.plaque {
  position: relative;
  margin-top: clamp(2.6rem, 6vh, 4.4rem);
  padding: .78rem 1.5rem;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .18em;
  overflow: hidden;
  transition: color var(--ease-light), border-color var(--ease-light);
  /* transform is owned by the magnet loop in JS — no CSS transition on it. */
  will-change: transform;
}

.plaque__mail { position: relative; z-index: 1; display: inline-block; }

.plaque.is-copied .plaque__mail { font-weight: 700; letter-spacing: .3em; }

/* Expanding ring on copy. */
.plaque__ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}

.plaque.is-copied .plaque__ripple {
  animation: ripple .9s cubic-bezier(.2, .6, .3, 1) forwards;
}

@keyframes ripple {
  0%   { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(34); }
}

.plaque:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   The glass.
   --------------------------------------------------------------------------- */
#glass {
  position: fixed;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* No WebGL: leave the room visible, add a still breath of fog at the edges so
   the page doesn't feel naked. */
body.no-gl #glass { display: none; }

body.no-gl::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(90% 86% at 50% 48%, transparent 52%, rgba(255, 255, 255, .28) 100%);
}

html[data-lang="en"] body.no-gl::after {
  background: radial-gradient(90% 86% at 50% 48%, transparent 52%, rgba(150, 168, 198, .14) 100%);
}

/* ---------------------------------------------------------------------------
   ON the glass: decals + the light switch. Above the fog, never wiped.
   --------------------------------------------------------------------------- */
.etched {
  position: fixed;
  z-index: 3;
  top: clamp(1.1rem, 3.4vh, 2.2rem);
  left: clamp(1.3rem, 4vw, 2.6rem);
  right: clamp(1.3rem, 4vw, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none; /* re-enabled on the switch itself */
}

.mark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .24em;
  color: var(--ink-soft);
  transition: color var(--ease-light);
  user-select: none;
}

.coords {
  position: fixed;
  z-index: 3;
  right: clamp(1.3rem, 4vw, 2.6rem);
  bottom: clamp(1rem, 3vh, 1.9rem);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--ink-faint);
  transition: color var(--ease-light);
  user-select: none;
  pointer-events: none;
}

/* The light switch. Up = LT = light on. Down = EN = light off.
   A real wall switch, drawn with restraint: a plate, a knob, two labels. */
.switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: auto;
}

.switch__lab {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--ink-faint);
  transition: color var(--ease-light), opacity .4s;
  user-select: none;
}

html[data-lang="lt"] .switch__lab--lt,
html[data-lang="en"] .switch__lab--en { color: var(--ink); }

.switch__btn {
  width: 26px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: none;
  position: relative;
  transition: border-color var(--ease-light);
}

.switch__knob {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--knob);
  transform: translateX(-50%);
  transition: top .38s cubic-bezier(.5, 1.6, .4, 1), background-color var(--ease-light);
}

html[data-lang="en"] .switch__knob { top: 25px; }

.switch__btn:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   The finger — a small inverted dot replacing the cursor. Grows near the plaque.
   --------------------------------------------------------------------------- */
.dot {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  transition: width .25s, height .25s, margin .25s, opacity .3s;
}

body.has-mouse .dot { opacity: 1; }

/* Near an interactive piece the dot opens into a ring, so it frames the
   target instead of covering its label. */
.dot.is-hot {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  background: transparent;
  border: 1.5px solid #fff;
}

/* ---------------------------------------------------------------------------
   Small screens: the room tightens, the glass works by touch.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .soul { font-size: clamp(1.5rem, 7.4vw, 1.95rem); max-inline-size: 22ch; }
  .claim { letter-spacing: .26em; text-indent: .26em; font-size: .6rem; max-inline-size: 32ch; }
  .coords { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .switch__knob { transition: top .01s, background-color .01s; }
}