:root {
  --bg-color: #cfe3f0;
  /* fallback shown only before Vanta paints */
  --text-primary: #0f172a;
  --text-muted: rgba(15, 23, 42, 0.55);
  --accent: #7c3aed;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-color);
  font-family: var(--font-main);
  color: var(--text-primary);
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* Vanta clouds sit behind everything. Vanta tracks the mouse on window,
   so pointer-events can stay off without losing the parallax drift. */
#vanta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* --- floating thoughts ---------------------------------------------------- */

/* Below the field, so bubbles emerge from behind its top edge. */
.bubble-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}

.bubble-anchor {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* Cheap glass. liquid-glass-react is reserved for the field — running its
   SVG displacement filters on 40 of these would collapse the frame rate. */
.bubble-body {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 220px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14));
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.75),
    inset 0 -8px 14px rgba(255, 255, 255, 0.18),
    0 4px 14px rgba(15, 23, 42, 0.05);
  will-change: transform, opacity;
  transition: box-shadow 25ms linear;
}

/* Still under review — the seconds between leaving the field and the judge in
   judge.js answering. Almost nothing: a slow breath in the rim, enough that a
   second look reads it as unsettled, not enough to announce itself. Only the
   border and highlight move, so this stays on the paint path and survives 40
   bubbles doing it at once. */
.bubble-body.is-pending {
  animation: bubble-pending 2600ms ease-in-out infinite;
}

@keyframes bubble-pending {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.75),
      inset 0 -8px 14px rgba(255, 255, 255, 0.18),
      0 4px 14px rgba(15, 23, 42, 0.05);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.95),
      inset 0 -8px 14px rgba(255, 255, 255, 0.3),
      0 4px 16px rgba(15, 23, 42, 0.07);
  }
}

/* Surface tension releasing, on the first frames of the pop. */
.bubble-body.is-flashing {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, 0.9),
    0 4px 14px rgba(15, 23, 42, 0.1);
  border-color: rgba(255, 255, 255, 0.95);
}

.bubble-text {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.bubble-drop {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  will-change: transform, opacity;
}

/* --- the field ------------------------------------------------------------ */

/* liquid-glass-react positions itself: it always emits top/left:50% plus a
   translate(-50%, -50%) and expects position:fixed to be passed in via its
   style prop (see glass-field.js). So this is just a passive full-screen layer
   — any centering applied here fights the library and pulls the field off
   centre. Do not add flex/grid centering.
   Deliberately no transform on this element either: an ancestor transform
   would make the field's position:fixed resolve against it instead of the
   viewport, breaking the centering. */
#glass-field-root {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* The field's drop shadow. liquid-glass-react hardcodes this inline on its
   .glass div, and with overLight:true it picks the heavier of its two options —
   0px 16px 70px rgba(0, 0, 0, 0.75). The style prop is not spread onto that
   element, so !important is the only way to reach it. Without this rule the
   field goes back to the library's 75% black.
   The last number is the dial: lower = fainter. */
.glass {
  box-shadow: 0 10px 34px rgba(15, 23, 42, 0.05) !important;
}

.thought-input {
  width: min(70vw, 420px);
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-main);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-primary);
  caret-color: var(--accent);
  user-select: text;
  pointer-events: auto;
  /* the root layer is click-through */
}

.thought-input::placeholder {
  color: var(--text-muted);
  font-weight: 300;
}

/* Fixed, not absolute: the field is fixed-positioned by the library, so there
   is no laid-out box to hang this beneath. Offset from the viewport centre by
   roughly half the field's height plus a gap. */
.field-error {
  position: fixed;
  top: calc(50% + 50px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 90vw;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}

.field-error.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .field-error {
    transition: opacity 200ms ease;
  }

  /* bubbles.js already drops the wobble here; drop the pending breath too. */
  .bubble-body.is-pending {
    animation: none;
  }
}

/* Back to the site index. Above every other layer here (max is 20). */
.back-link {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 30;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(24, 53, 80, 0.12);
  font-size: 14px;
  font-weight: 500;
  color: #14303d;
  text-decoration: none;
  white-space: nowrap;
  transition: background 200ms ease;
}

.back-link:hover {
  background: rgba(255, 255, 255, 0.78);
}