/* Entry 023 — The ten-second self
   Series: Useful Friction.
   Scene art direction: a cold foggy window at first light. Blue-grey mist, one soft
   cool daylight from the upper left — the temperature of a head that has finished
   cooling. A single frosted-glass compose panel floats in the fog. One accent: a warm
   ember on the unsent message, glowing hot when written and draining to cold blue as
   the delay runs. The heat going out of your own words, on purpose.
   Display voices: Fraunces (the soul — message, reading cue, aftermath) + IBM Plex Sans
   (the machine — chrome, buttons, the count). Distinct from prior entries' recipes. */

:root {
  --tss-deep: #0e151c;       /* darkest — keeps the blue */
  --tss-fog: #2d4e5c;        /* cold teal mid */
  --tss-haze: #728b94;       /* pale cold light */
  --tss-glass-tint: rgba(150, 178, 190, 0.10);
  --tss-ember: #ef6a3d;      /* the one warm accent — heat of the impulse */
  --tss-ember-glow: #ffb07e;
  --tss-cold: #8aa4af;       /* what the words cool to */
  --tss-on: #eaf1f4;         /* never pure white */
  --tss-radius: 22px;
}

.cool-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 780px;
  padding: 124px 32px;
  border-color: rgba(14, 21, 28, 0.7);
  /* background-first: a real photograph (cold fog on blue) carries the scene; a soft
     scrim keeps the panel and type legible. Light reads from the upper left. */
  background-image:
    linear-gradient(118deg, rgba(8, 13, 18, 0.30) 0%, rgba(8, 13, 18, 0.52) 52%, rgba(6, 11, 16, 0.74) 100%),
    url("../../public/media/backgrounds/dark-cool-05-chuttersnap.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer — cold condensation-light, blurred drift, lit from upper left */
.fog {
  position: absolute;
  z-index: 0;
  left: 38%;
  top: 40%;
  width: min(820px, 92%);
  height: 520px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(58% 58% at 42% 38%, rgba(146, 178, 196, 0.20), transparent 72%),
    radial-gradient(46% 46% at 64% 72%, rgba(45, 78, 92, 0.22), transparent 76%);
  filter: blur(58px);
  pointer-events: none;
  transition: opacity 900ms ease, filter 900ms ease;
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one frosted-glass compose panel                     */
/* ------------------------------------------------------------------ */

.composer {
  position: relative;
  z-index: 2;
  width: min(600px, 100%);
  display: grid;
  gap: 24px;
  padding: 48px 46px 38px;
  border-radius: var(--tss-radius);
  font-family: "IBM Plex Sans", var(--ui-sans);
  /* cold frosted glass: a thin film of cool light over the photograph */
  background:
    linear-gradient(166deg, rgba(160, 188, 200, 0.13), rgba(14, 26, 36, 0.30));
  border: 1px solid rgba(176, 202, 214, 0.22);
  box-shadow:
    0 1px 0 rgba(216, 232, 238, 0.26) inset,
    0 0 0 1px rgba(8, 14, 20, 0.20),
    0 60px 130px rgba(6, 12, 20, 0.66),
    0 16px 50px rgba(36, 64, 82, 0.30);
  backdrop-filter: blur(30px) saturate(1.25);
  -webkit-backdrop-filter: blur(30px) saturate(1.25);
  color: var(--tss-on);
  transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* machine chrome — small, sans, recessive */
.composer-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(196, 214, 222, 0.60);
}

.composer-meta .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tss-haze);
  box-shadow: 0 0 10px rgba(146, 178, 196, 0.8);
}

.composer-meta .sep { opacity: 0.5; }
.composer-meta .to { color: rgba(214, 230, 238, 0.80); }

/* ---- the message bubble: the hero, the one warm thing ---- */
.bubble-wrap {
  display: flex;
  justify-content: flex-end;
}

.msg {
  margin: 0;
  max-width: 92%;
  padding: 20px 24px;
  border-radius: 26px 26px 8px 26px;
  font-family: "Fraunces", "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 460;
  font-size: clamp(22px, 3.0vw, 30px);
  line-height: 1.28;
  letter-spacing: 0.002em;
  /* ember — the heat of the impulse */
  color: #fff3ec;
  background:
    linear-gradient(162deg, rgba(255, 150, 105, 0.30), rgba(239, 106, 61, 0.20));
  border: 1px solid rgba(255, 168, 122, 0.42);
  box-shadow:
    0 0 0 1px rgba(239, 106, 61, 0.10) inset,
    0 18px 48px rgba(239, 106, 61, 0.28),
    0 0 60px rgba(255, 138, 90, 0.18);
  text-wrap: pretty;
  transition:
    color 1100ms ease, background 1100ms ease, border-color 1100ms ease,
    box-shadow 1100ms ease, border-radius 700ms ease, transform 700ms ease;
}

/* ---- reading state: the words flip to "their" side and cool to blue ---- */
.composer[data-state="reading"] .bubble-wrap,
.composer[data-state="choices"] .bubble-wrap {
  justify-content: flex-start;
}

.composer[data-state="reading"] .msg,
.composer[data-state="choices"] .msg {
  color: #dde8ee;
  background:
    linear-gradient(166deg, rgba(138, 164, 175, 0.20), rgba(30, 56, 70, 0.34));
  border: 1px solid rgba(160, 190, 202, 0.30);
  border-radius: 26px 26px 26px 8px;
  box-shadow:
    0 16px 44px rgba(8, 16, 24, 0.42);
}

/* the reading cue + countdown ring */
.reading-cue {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -4px 0 0;
}

/* honour the hidden attribute even where author display rules apply */
[hidden] { display: none !important; }

.reading-label {
  font-family: "Fraunces", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.4;
  color: rgba(214, 230, 238, 0.82);
}

.ring {
  --p: 0;            /* 0 → 1 progress, set by JS */
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--tss-cold) calc(var(--p) * 360deg), rgba(160, 190, 202, 0.16) 0);
  box-shadow: 0 0 0 1px rgba(160, 190, 202, 0.18) inset;
}
.ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(16, 28, 38, 0.62);
  backdrop-filter: blur(8px);
}
.ring b {
  position: relative;
  z-index: 1;
  font-family: "IBM Plex Sans", var(--ui-sans);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tss-on);
}

/* ---- actions ---- */
.composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
}

.hint {
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: rgba(190, 210, 220, 0.52);
}

.btn {
  font-family: "IBM Plex Sans", var(--ui-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

/* Send — warm ember pill, matches the heat of the unsent words */
.btn-send {
  border-color: rgba(255, 168, 122, 0.55);
  background: linear-gradient(180deg, #ff9a6a, #ef6a3d);
  color: #2a1206;
  box-shadow: 0 12px 34px rgba(239, 106, 61, 0.38);
}
.btn-send:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(239, 106, 61, 0.50);
}

/* the three cooled choices */
.btn-anyway {
  border-color: rgba(255, 168, 122, 0.40);
  background: rgba(239, 106, 61, 0.10);
  color: #ffd8c4;
}
.btn-anyway:hover { border-color: rgba(255, 168, 122, 0.7); color: #fff0e7; }

.btn-soften {
  border-color: rgba(176, 202, 214, 0.5);
  background: linear-gradient(180deg, #eef5f8, #cfe0e7);
  color: #12222b;
  box-shadow: 0 10px 28px rgba(120, 158, 176, 0.26);
}
.btn-soften:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(120, 158, 176, 0.36); }

.btn-cool {
  border-color: rgba(176, 202, 214, 0.26);
  background: rgba(150, 178, 190, 0.06);
  color: rgba(216, 230, 238, 0.82);
}
.btn-cool:hover { border-color: rgba(176, 202, 214, 0.5); color: #eef5f8; }

/* aftermath line — serif, quiet record of what the gap caught */
.aftermath { margin-top: 2px; animation: rise 540ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.aftermath-line {
  margin: 0;
  font-family: "Fraunces", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.45;
  color: rgba(222, 234, 240, 0.88);
}
.aftermath-line .tag {
  display: inline-block;
  margin-right: 8px;
  font-family: "IBM Plex Sans", var(--ui-sans);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tss-cold);
}
.aftermath-line.warm .tag { color: var(--tss-ember-glow); }

/* ---- the "who is this for?" toggle ---- */
.who-toggle {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(176, 202, 214, 0.16);
  cursor: pointer;
  user-select: none;
}
.who-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.who-toggle .track {
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: rgba(150, 178, 190, 0.20);
  border: 1px solid rgba(176, 202, 214, 0.28);
  transition: background 220ms ease, border-color 220ms ease;
  flex: none;
}
.who-toggle .thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #dfeaef;
  box-shadow: 0 2px 6px rgba(6, 12, 20, 0.4);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), background 220ms ease;
}
.who-toggle input:checked + .track { background: rgba(239, 106, 61, 0.28); border-color: rgba(255, 168, 122, 0.5); }
.who-toggle input:checked + .track .thumb { transform: translateX(18px); background: var(--tss-ember-glow); }
.who-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(196, 214, 222, 0.62);
}

.who-truth {
  margin: 2px 0 0;
  max-width: 50ch;
  font-family: "Fraunces", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 16.5px);
  line-height: 1.5;
  color: rgba(255, 196, 168, 0.86);
  animation: rise 460ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

/* when the colder use is revealed, the reading label tells the truth too */
.composer[data-who="hush"] .reading-label::after {
  content: " — or hushed.";
  color: rgba(255, 176, 126, 0.85);
}

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

/* dimmed / cooled away states tweak the mid glow */
.cool-scene:has(.composer[data-state="reading"]) .fog { opacity: 0.8; }
.cool-scene:has(.composer[data-state="cooled"]) .fog { opacity: 0.55; filter: blur(72px); }

.composer[data-state="cooled"] .bubble-wrap { opacity: 0; transition: opacity 900ms ease; }

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

@media (prefers-reduced-motion: reduce) {
  .aftermath, .who-truth { animation: none; }
  .msg { transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .cool-scene { padding: 72px 16px; min-height: 0; }
  .composer { padding: 36px 26px 30px; border-radius: 20px; gap: 20px; }
  .msg { font-size: 21px; padding: 17px 20px; }
  .btn { padding: 13px 22px; }
}