/* Entry 016 — The loneliness meter
   Series: Soulware.
   Scene art direction: a wide indigo dusk — the blue hour, the loneliest hour. One
   frosted-glass instrument floats in a calm cool field, its gauge the only warm thing
   in the frame: a lit window seen from outside in the cold. The serif state name is
   the soul voice; the sans chrome is the machine. One accent: a warm peach-coral, lit
   only on the meter's fill and the one line it offers when the reading runs low.
   Background-first: Dileepa Nipun / Unsplash (dark-cool-06), indigo dusk. */

.lm-scene {
  --lm-deep: #0f1a34;
  --lm-mid: #2d3653;
  --lm-ink: #e9ecf6;
  --lm-accent: #f4a772;
  --lm-accent-deep: #e07d4a;
  --lm-cool: #7f97c9;

  display: grid;
  place-items: center;
  min-height: 780px;
  padding: 120px 32px;
  border-color: rgba(10, 16, 36, 0.7);
  /* background-first: a real photograph (indigo dusk) carries the mood; a soft scrim
     keeps the panel and type legible. */
  background-image:
    linear-gradient(178deg, rgba(9, 14, 32, 0.62) 0%, rgba(13, 20, 44, 0.30) 46%, rgba(7, 11, 26, 0.72) 100%),
    url("../../public/media/backgrounds/dark-cool-06-dileepa.jpg");
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer — the last warm light in the cooling sky, low and to the right */
.lm-glow {
  position: absolute;
  z-index: 0;
  right: 8%;
  bottom: 6%;
  width: min(680px, 80%);
  height: 440px;
  background:
    radial-gradient(58% 58% at 70% 80%, rgba(244, 167, 114, 0.20), transparent 70%);
  filter: blur(64px);
  pointer-events: none;
  transition: opacity 900ms ease;
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one frosted-glass connection meter                  */
/* ------------------------------------------------------------------ */

.meter {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  display: grid;
  gap: 24px;
  padding: 46px 46px 38px;
  border-radius: 24px;
  font-family: "DM Sans", var(--ui-sans);
  /* cool frosted glass: a thin film of dusk-light over the photograph */
  background:
    linear-gradient(165deg, rgba(150, 170, 220, 0.12), rgba(14, 22, 46, 0.30));
  border: 1px solid rgba(170, 192, 240, 0.22);
  box-shadow:
    0 1px 0 rgba(214, 226, 255, 0.26) inset,
    0 0 0 1px rgba(7, 11, 24, 0.20),
    0 60px 130px rgba(5, 9, 22, 0.62),
    0 18px 54px rgba(30, 50, 110, 0.26);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  color: var(--lm-ink);
  transition: filter 700ms ease, transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* machine chrome — small, sans, recessive */
.meter-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(196, 208, 236, 0.6);
}

.meter-head .lm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lm-accent);
  box-shadow: 0 0 10px rgba(244, 167, 114, 0.9);
}

.meter-head .lm-sep { opacity: 0.45; }
.meter-head .lm-week { color: rgba(210, 222, 246, 0.78); }

/* the soul voice — the hero. serif, large, light, never pure white */
.meter-state {
  margin: -2px 0 2px;
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(40px, 6.4vw, 66px);
  line-height: 0.98;
  letter-spacing: 0.004em;
  color: #f3f1ea;
  text-wrap: balance;
}

/* ---- the gauge: a battery for the soul ---- */
.gauge {
  display: flex;
  align-items: center;
  gap: 16px;
}

.gauge-track {
  position: relative;
  flex: 1;
  height: 22px;
  border-radius: 999px;
  background: rgba(13, 20, 44, 0.5);
  border: 1px solid rgba(170, 192, 240, 0.2);
  box-shadow: inset 0 2px 6px rgba(5, 9, 22, 0.5);
  overflow: hidden;
}

/* warm fill — real contact. the one warm light in the frame */
.gauge-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lm-accent-deep), var(--lm-accent));
  box-shadow: 0 0 22px rgba(244, 167, 114, 0.5);
  transition: width 760ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* cool sliver — the parasocial portion. present, but it never warms */
.gauge-cool {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, rgba(127, 151, 201, 0.0), rgba(127, 151, 201, 0.85));
  box-shadow: none;
  transition: width 760ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gauge-read {
  flex: none;
  min-width: 3.2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: rgba(244, 167, 114, 0.95);
  transition: filter 500ms ease, color 400ms ease;
}

/* the one line offered when the reading runs low — serif, tender, accent */
.meter-offer {
  margin: -4px 0 2px;
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  color: rgba(247, 200, 168, 0.92);
  transition: opacity 500ms ease, max-height 500ms ease;
}

/* ---- log controls ---- */
.meter-log { display: grid; gap: 11px; margin-top: 2px; }

.log-prompt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(196, 208, 236, 0.5);
}

.log-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.lm-btn {
  font-family: "DM Sans", var(--ui-sans);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  border-radius: 13px;
  padding: 13px 15px;
  cursor: pointer;
  color: rgba(224, 232, 248, 0.9);
  border: 1px solid rgba(170, 192, 240, 0.2);
  background: rgba(150, 170, 220, 0.05);
  transition: transform 160ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
}

.lm-btn:hover { transform: translateY(-2px); }

/* real contact reads warm on hover; parasocial stays cool */
.lm-btn.real:hover {
  border-color: rgba(244, 167, 114, 0.55);
  background: rgba(244, 167, 114, 0.1);
  color: #fff4ea;
}

.lm-btn.para:hover {
  border-color: rgba(127, 151, 201, 0.5);
  background: rgba(127, 151, 201, 0.1);
  color: #eef2fb;
}

/* ---- privacy toggle: the real question ---- */
.meter-privacy {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "DM Sans", var(--ui-sans);
}

.pv-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(244, 167, 114, 0.85);
  box-shadow: inset 0 1px 3px rgba(5, 9, 22, 0.4);
  transition: background 280ms ease;
  flex: none;
}

.pv-knob {
  position: absolute;
  top: 3px;
  left: 21px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fbf6ef;
  box-shadow: 0 2px 5px rgba(5, 9, 22, 0.4);
  transition: left 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pv-text {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(210, 222, 246, 0.78);
}

/* private state — the knob slides off, the track cools, the number hides */
.meter[data-private="true"] .pv-track { background: rgba(127, 151, 201, 0.4); }
.meter[data-private="true"] .pv-knob { left: 3px; }

.meter[data-private="true"] .gauge-read {
  color: rgba(200, 212, 238, 0.5);
  filter: blur(7px);
}

.meter[data-private="true"] .gauge-fill,
.meter[data-private="true"] .gauge-cool { filter: blur(8px) saturate(0.7); }

.meter[data-private="true"] .meter-state { filter: blur(6px); }

/* unobtrusive photo attribution */
.scene-credit {
  position: absolute;
  right: 16px;
  bottom: 13px;
  z-index: 3;
  font-family: var(--ui-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(220, 228, 244, 0.32);
  pointer-events: none;
}

/* ---- state shading: the warmer the reading, the warmer the room ---- */
.lm-scene:has(.meter[data-state="low"]) .lm-glow { opacity: 0.55; }
.lm-scene:has(.meter[data-state="warming"]) .lm-glow { opacity: 0.85; }
.lm-scene:has(.meter[data-state="nourished"]) .lm-glow { opacity: 1; }

/* when the reading isn't low, the offer line steps back */
.meter[data-state="warming"] .meter-offer,
.meter[data-state="nourished"] .meter-offer { opacity: 0.78; }

@keyframes lm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-fill, .gauge-cool, .pv-knob, .meter { transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .lm-scene { padding: 72px 16px; min-height: 0; }
  .meter { padding: 34px 24px 30px; border-radius: 20px; gap: 20px; }
  .log-btns { grid-template-columns: 1fr; }
}