/* =========================================================
   GEEN LEVEN — aftermath scene
   The takeover that plays after a visitor submits their e-mail:
   white flash + thud, fade to black, typed "acceptance" message,
   then a live countdown. Also the state a returning (already
   registered) visitor lands in directly.
   ========================================================= */

.aftermath {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none; /* transparent + inert until the scene is triggered */
  font-family: var(--font-serif);
}

.aftermath.is-active {
  pointer-events: auto;
}

/* Black backdrop that fades in to swallow the portal. */
.aftermath-bg {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 620ms ease;
}

.aftermath.show-bg .aftermath-bg {
  opacity: 1;
}

/* CRT power-off: a full-white screen that smoothly collapses to a bright line
   and dims out. Driven from JS via transform: scaleY() (GPU-composited, so the
   collapse stays smooth) rather than animating height (which forces layout). */
.aftermath-crt {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center center;
  pointer-events: none;
  box-shadow: 0 0 90px 24px rgba(255, 255, 255, 0.75);
  will-change: transform, opacity;
}

/* Phosphor afterglow: a soft horizontal band centred on the collapse line that
   lingers and slowly fades, like excited CRT pigments cooling after the electron
   beam. Not scaled, so it can bloom vertically around the line. */
.aftermath-glow {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 50%;
  height: 46vh;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 75% 50% at 50% 50%,
    rgba(255, 253, 247, 0.55),
    rgba(255, 253, 247, 0.16) 34%,
    transparent 72%
  );
  filter: blur(24px);
  mix-blend-mode: screen;
  will-change: opacity;
}

/* Typed message. */
.aftermath-console {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 8vw, 6rem);
  opacity: 0;
  transition: opacity 500ms ease;
}

.aftermath.show-console .aftermath-console {
  opacity: 1;
}

.aftermath-text {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  color: var(--bone);
  font-size: clamp(1.15rem, 3.6vw, 1.85rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  white-space: pre-wrap; /* preserves the blank line between "Hallo." and the sentence */
}

.aftermath-cursor {
  display: inline-block;
  margin-left: 0.06em;
  color: var(--bone);
  animation: aftermath-blink 1.05s steps(1, end) infinite;
}

@keyframes aftermath-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Countdown — takes CENTRE STAGE after the message crumbles away. Monospace +
   tabular figures so the digits do not jitter. */
.aftermath-countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: ui-monospace, "SF Mono", "Consolas", "Menlo", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--bone);
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.aftermath.show-countdown .aftermath-countdown {
  opacity: 1;
}

.aftermath-countdown .cd-label {
  display: block;
  margin-bottom: 0.9em;
  font-size: clamp(0.6rem, 1.5vw, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.aftermath-countdown .cd-value {
  display: block;
  font-size: clamp(2.4rem, 11vw, 6.5rem);
  white-space: nowrap;
  /* Breathing glow at the resting heart rate of a 45-yr-old male (~70 bpm):
     60 / 70 = 0.857s per beat. Double pulse = lub-dub. */
  animation: aftermath-heartbeat 0.857s ease-in-out infinite;
}

@keyframes aftermath-heartbeat {
  0%   { text-shadow: 0 0 6px rgba(232, 223, 200, 0.12); }
  9%   { text-shadow: 0 0 28px rgba(232, 223, 200, 0.7); }
  18%  { text-shadow: 0 0 10px rgba(232, 223, 200, 0.22); }
  28%  { text-shadow: 0 0 20px rgba(232, 223, 200, 0.5); }
  42%  { text-shadow: 0 0 6px rgba(232, 223, 200, 0.12); }
  100% { text-shadow: 0 0 6px rgba(232, 223, 200, 0.12); }
}

.aftermath.is-complete .aftermath-countdown .cd-value {
  color: var(--bone);
}

@media (prefers-reduced-motion: reduce) {
  .aftermath-bg,
  .aftermath-console,
  .aftermath-countdown {
    transition-duration: 240ms;
  }
  .aftermath-cursor {
    animation-duration: 1.6s;
  }
}