/* The spirit animal survey device: Değil Gezegeni's corner attraction
   (js/tasks/survey.js). A garage-built machine in the manuscript palette:
   dark panel, thin gold trim, a lit screen behind glass, a panel of answers
   under it, and a slot that prints. Evren stands OUTSIDE it and talks
   (.survey-line): the machine never speaks for him. */

.survey-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  margin-top: 1em;
  /* The printed paper hangs out of the slot and must not shove the page. */
  padding-bottom: 7em;
  width: 100%;
}

/* Evren, outside the machine. Same voice as any narration. */
.survey-line {
  font-family: var(--serif);
  font-size: clamp(0.98rem, 3vw, 1.12rem);
  line-height: 1.62;
  color: var(--cream);
  text-align: center;
  max-width: 34ch;
  min-height: 3.4em;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.survey-line.show { opacity: 1; animation: survey-line-in 0.5s ease both; }
@keyframes survey-line-in {
  from { opacity: 0; transform: translateY(0.35em); }
}

/* ---------- the machine ---------- */

.survey-device {
  position: relative;
  width: min(30em, 92vw);
  border: 1px solid rgba(232, 193, 106, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(24, 20, 48, 0.92), rgba(13, 11, 30, 0.95));
  box-shadow:
    0 0 34px rgba(42, 27, 74, 0.55),
    inset 0 1px 0 rgba(232, 193, 106, 0.14),
    inset 0 0 26px rgba(11, 10, 31, 0.85);
  padding: 0.9em 1.15em 1.5em;
}

/* Where the smoke rises from: a strip along the top lip, spilling upward. */
.survey-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.2em;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

.survey-lights {
  display: flex;
  justify-content: center;
  gap: 0.55em;
  margin-bottom: 0.85em;
}
.survey-bulb {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  border: 1px solid rgba(154, 147, 184, 0.55);
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.survey-bulb.on {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(232, 193, 106, 0.75);
}
.survey-bulb.overtime { border-style: dashed; border-color: rgba(232, 119, 106, 0.8); }
.survey-bulb.overtime.on {
  background: #E8776A;
  border-color: #E8776A;
  box-shadow: 0 0 10px rgba(232, 119, 106, 0.75);
}

/* The screen: a lit pane sunk into the panel, behind glass. */
.survey-screen {
  position: relative;
  border-radius: 10px;
  padding: 3px;
  background: linear-gradient(180deg, rgba(232, 193, 106, 0.16), rgba(232, 193, 106, 0.04));
  box-shadow: inset 0 0 0 1px rgba(232, 193, 106, 0.12);
}
.survey-glass {
  position: relative;
  min-height: 8.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1em 1em;
  border-radius: 8px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(58, 42, 94, 0.55), rgba(11, 10, 31, 0.92) 70%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* Scanlines and a soft sheen: it is a screen, not a hole in the box. */
.survey-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 3px);
  pointer-events: none;
}
.survey-glass::after {
  content: '';
  position: absolute;
  left: -20%;
  top: -60%;
  width: 90%;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.06), transparent 60%);
  transform: rotate(8deg);
  pointer-events: none;
}

.survey-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  text-align: center;
  animation: survey-face-in 0.45s ease both;
}
@keyframes survey-face-in {
  from { opacity: 0; transform: translateY(0.4em); }
}

.survey-q {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  line-height: 1.25;
  color: var(--cream);
  text-shadow: 0 0 22px rgba(232, 193, 106, 0.18);
}

/* The machine thinking: three dots, no language. */
.survey-dots { display: flex; gap: 0.55em; }
.survey-dots i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.35;
  animation: survey-dot 1.3s ease-in-out infinite;
}
@keyframes survey-dot {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 0.95; transform: translateY(-0.22em); }
}
/* Overtime: the same thought, running hot. */
.survey-face-tie .survey-dots i {
  background: #E8776A;
  animation-duration: 0.5s;
}

/* ---------- the answer panel (inside the machine) ---------- */

.survey-answers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  min-height: 3.2em;
  margin-top: 1em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(232, 193, 106, 0.12);
}
.survey-pill { margin: 0; }
.survey-pill.picked {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(232, 193, 106, 0.22);
}

/* ---------- smoke ---------- */

.survey-puff {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.6em;
  height: 2.6em;
  margin-left: -1.3em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%,
    rgba(196, 200, 210, 0.55),
    rgba(150, 154, 168, 0.22) 55%,
    rgba(140, 144, 158, 0) 72%);
  filter: blur(7px);
  opacity: 0;
  animation: survey-puff-rise var(--dur, 2.6s) ease-out forwards;
}
.survey-puff.heavy {
  width: 3.6em;
  height: 3.6em;
  margin-left: -1.8em;
  filter: blur(9px);
}
@keyframes survey-puff-rise {
  0% { transform: translate(var(--px, 0), 0) scale(0.35); opacity: 0; }
  18% { opacity: 0.8; }
  100% {
    transform: translate(calc(var(--px, 0px) + var(--drift, 0px)), -9em) scale(var(--scale, 2.2));
    opacity: 0;
  }
}

/* The panel itself, unhappy. */
.survey-device.smoking { animation: survey-smoke 1.6s ease-in-out infinite; }
@keyframes survey-smoke {
  0%, 100% { transform: rotate(0deg); box-shadow: 0 0 34px rgba(42, 27, 74, 0.55); }
  30% { transform: rotate(-0.7deg); box-shadow: 0 0 40px rgba(232, 119, 106, 0.3); }
  70% { transform: rotate(0.6deg); box-shadow: 0 0 44px rgba(232, 119, 106, 0.4); }
}
.survey-device.broken { animation: survey-broken 0.5s ease-in-out 4; }
@keyframes survey-broken {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1.8deg) translateY(1px); }
  75% { transform: rotate(1.5deg) translateY(-1px); }
}
.survey-spark {
  position: absolute;
  left: 50%;
  top: 55%;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.9);
  animation: survey-spark-fly 0.9s ease-out both;
  pointer-events: none;
}
@keyframes survey-spark-fly {
  from { transform: translate(0, 0) scale(0.6); opacity: 1; }
  to { transform: translate(var(--sx), var(--sy)) scale(1.15); opacity: 0; }
}

/* ---------- the slot and what comes out of it ---------- */

.survey-slot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55em;
  height: 0;
}
/* The mouth: a thin dark line across the bottom lip of the machine. */
.survey-slot::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7em;
  height: 5px;
  margin-left: -3.5em;
  border-radius: 3px;
  background: rgba(6, 5, 16, 0.9);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(232, 193, 106, 0.14);
}
.survey-device.printing .survey-slot::before { animation: survey-grind 0.26s linear 5; }
@keyframes survey-grind {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1.5px); }
}

.survey-paper {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6.4em;
  height: 5.6em;
  margin-left: -3.2em;
  border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #F6EFE0, #E6DAC2);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top center;
  animation: survey-print-out 1s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
/* A torn bottom edge, so it reads as a strip and not a card. */
.survey-paper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 6px;
  background:
    repeating-linear-gradient(135deg, #E6DAC2 0 5px, transparent 5px 10px);
}
@keyframes survey-print-out {
  0% { transform: scaleY(0.04); opacity: 0.7; }
  75% { transform: scaleY(1) rotate(0deg); opacity: 1; }
  100% { transform: scaleY(1) rotate(-1.6deg); opacity: 1; }
}
/* The ink lands after the paper is out, so the emoji never squashes. */
.survey-mark {
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0;
  animation: survey-ink 0.5s ease 0.55s forwards;
}
@keyframes survey-ink {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .survey-line.show { animation: none; }
  .survey-face { animation: none; }
  .survey-dots i { animation: none; opacity: 0.6; }
  .survey-device.smoking,
  .survey-device.broken,
  .survey-device.printing .survey-slot::before { animation: none; }
  .survey-puff, .survey-spark { display: none; }
  .survey-paper { animation: none; }
  .survey-mark { animation: none; opacity: 1; }
}