/* Entry 014 — The free-will toggle
   Series: Future Defaults.
   Scene art direction: an open desert at the last hour of light — warm rock under a
   clean cool sky. One frosted-glass panel floats in the calm air, holding a single
   hardware switch: Choose for me / I choose. The switch is the hero; the stream it
   governs sits above it, the readout below. One accent: an electric ultraviolet, lit
   only when the switch is thrown to manual — the colour of a decision made by hand.
   Display font for this entry: Space Grotesk (a grotesque, to vary from the serifs of
   011/013). Soul voice stays Newsreader italic. */

.will-scene {
  --uv: #7c5cff;
  --uv-soft: rgba(124, 92, 255, 0.5);
  --steel: #6f93ad;
  --on-dark: #eef2f7;
  --glass-edge: rgba(196, 214, 236, 0.26);

  display: grid;
  place-items: center;
  min-height: 780px;
  padding: 120px 32px;
  border-color: rgba(28, 38, 52, 0.6);
  /* background-first: a real photograph (warm rock, cool dusk sky) carries the scene;
     a soft cool scrim keeps the panel and type legible without killing the light. */
  background-image:
    linear-gradient(
      178deg,
      rgba(22, 32, 46, 0.50) 0%,
      rgba(20, 30, 44, 0.24) 38%,
      rgba(16, 24, 36, 0.40) 72%,
      rgba(12, 18, 28, 0.62) 100%
    ),
    url("../../public/media/backgrounds/cool-10-jakob.jpg");
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
}

/* mid layer — the switch's own light, spilled and blurred into the dusk air.
   Cool by default; warms to ultraviolet when the machine is on manual. */
.halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 56%;
  width: min(720px, 86%);
  height: 440px;
  transform: translate(-50%, -50%);
  background: radial-gradient(58% 58% at 50% 50%, rgba(96, 132, 176, 0.16), transparent 72%);
  filter: blur(58px);
  pointer-events: none;
  transition: background 900ms ease, opacity 900ms ease;
}

.will-scene:has(.machine[data-mode="manual"]) .halo {
  background: radial-gradient(58% 58% at 50% 52%, rgba(124, 92, 255, 0.26), transparent 72%);
}

/* ------------------------------------------------------------------ */
/* THE COMPONENT — one frosted-glass panel, one hardware switch        */
/* ------------------------------------------------------------------ */

.machine {
  position: relative;
  z-index: 2;
  width: min(540px, 100%);
  display: grid;
  gap: 24px;
  padding: 38px 40px 32px;
  border-radius: 22px;
  font-family: "Space Grotesk", var(--ui-sans);
  color: var(--on-dark);
  /* cool frosted glass: a thin film of steel-light over the photograph */
  background: linear-gradient(166deg, rgba(150, 178, 206, 0.13), rgba(16, 26, 42, 0.32));
  border: 1px solid var(--glass-edge);
  box-shadow:
    0 1px 0 rgba(214, 230, 248, 0.26) inset,
    0 0 0 1px rgba(8, 14, 24, 0.22),
    0 60px 130px rgba(6, 12, 24, 0.62),
    0 16px 44px rgba(40, 64, 110, 0.22);
  backdrop-filter: blur(28px) saturate(1.25);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  transition: box-shadow 700ms ease;
}

.machine[data-mode="manual"] {
  box-shadow:
    0 1px 0 rgba(214, 230, 248, 0.26) inset,
    0 0 0 1px rgba(8, 14, 24, 0.22),
    0 60px 130px rgba(6, 12, 24, 0.62),
    0 18px 60px rgba(124, 92, 255, 0.28);
}

/* ---- the governed stream — what the switch is deciding for you ---- */
.stream {
  min-height: 132px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 22px 22px;
  border-radius: 14px;
  background: rgba(10, 18, 30, 0.30);
  border: 1px solid rgba(170, 196, 224, 0.14);
}

.card {
  display: grid;
  gap: 8px;
  animation: feedin 520ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

.card-kicker {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 200, 224, 0.55);
}

.card-title {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 3.1vw, 27px);
  line-height: 1.22;
  color: #f2f5fb;
  text-wrap: balance;
}

/* manual mode: the stream stops choosing and hands you two real options */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.choice {
  font-family: "Space Grotesk", var(--ui-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-align: left;
  color: #eaf0f8;
  padding: 16px 16px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(124, 92, 255, 0.07);
  border: 1px solid rgba(150, 130, 235, 0.30);
  transition: transform 160ms ease, background 200ms ease, border-color 200ms ease;
}

.choice:hover {
  transform: translateY(-2px);
  background: rgba(124, 92, 255, 0.14);
  border-color: rgba(150, 130, 235, 0.6);
}

.choice .c-no {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uv);
}

.choices-q {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 200, 224, 0.55);
}

/* ---- the soul line — serif italic, the one human voice in the machine ---- */
.soul {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.42;
  letter-spacing: 0.003em;
  color: rgba(220, 228, 244, 0.82);
  text-wrap: balance;
  transition: color 500ms ease;
}

/* ---- the hardware switch — the hero ---- */
.switch-rig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 4px 0 2px;
}

.pole {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(186, 204, 226, 0.5);
  transition: color 320ms ease, text-shadow 320ms ease;
  user-select: none;
}

.pole-auto { text-align: right; }
.pole-manual { text-align: left; }

.machine[data-mode="auto"] .pole-auto {
  color: rgba(228, 236, 248, 0.92);
}
.machine[data-mode="manual"] .pole-manual {
  color: #fff;
  text-shadow: 0 0 18px var(--uv-soft);
}

.switch {
  position: relative;
  width: 128px;
  height: 56px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(180, 200, 226, 0.26);
  background: linear-gradient(180deg, rgba(14, 22, 36, 0.66), rgba(28, 40, 58, 0.5));
  box-shadow:
    inset 0 2px 8px rgba(4, 8, 16, 0.6),
    inset 0 -1px 0 rgba(214, 230, 248, 0.12);
  cursor: pointer;
  padding: 0;
  transition: border-color 300ms ease, background 400ms ease;
}

.switch:focus-visible {
  outline: 2px solid var(--uv);
  outline-offset: 4px;
}

.machine[data-mode="manual"] .switch {
  border-color: rgba(124, 92, 255, 0.6);
  background: linear-gradient(180deg, rgba(40, 28, 78, 0.6), rgba(60, 46, 110, 0.5));
}

.knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #f1f4fa, #cdd8e8);
  box-shadow:
    0 6px 16px rgba(6, 12, 24, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 360ms cubic-bezier(0.34, 1.4, 0.5, 1), background 360ms ease;
}

.machine[data-mode="manual"] .knob {
  transform: translateX(72px);
  background: linear-gradient(180deg, #b6a4ff, #8a6cf0);
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(120, 140, 168, 0.55);
  transition: background 360ms ease, box-shadow 360ms ease;
}

.machine[data-mode="manual"] .led {
  background: #fff;
  box-shadow: 0 0 12px 2px var(--uv), 0 0 4px #fff;
}

/* ---- the readout — tabular, machine-cold, the running score ---- */
.readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(170, 196, 224, 0.16);
}

.read-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(186, 204, 226, 0.6);
}

.read-value {
  font-family: "Space Grotesk", var(--ui-sans);
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--on-dark);
  transition: color 300ms ease;
}

.machine[data-mode="manual"] .read-value {
  color: #c9bcff;
}

/* a quiet aside line under the readout, when there's a verdict to keep */
.aside {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.4;
  color: rgba(208, 216, 234, 0.7);
}

/* unobtrusive photo attribution, bottom-right of the scene */
.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(224, 230, 244, 0.34);
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .card, .knob { animation: none; transition: none; }
}

/* ---- small screens ---- */
@media (max-width: 720px) {
  .will-scene { padding: 76px 16px; min-height: 0; }
  .machine { padding: 30px 24px 28px; border-radius: 20px; gap: 22px; }
  .switch-rig { gap: 16px; }
  .read-value { font-size: 26px; }
}