/* LUZ, interactions layer (builder B).
   Toasts, the secret cards, the debug lens, the moon, the sun badge and the
   404 game. Every colour comes from the custom properties core keeps updated. */

/* The overlay chrome (toasts, cards, lens, radio) always sits on --sea-deep,
   which core keeps dark at every hour of the day. Its foreground is therefore
   pinned light and is deliberately NOT derived from --ink: --ink follows the
   page, and on a daylight palette it turns dark, which would put dark text on
   the dark overlay surface. The accent is the sun lifted toward a warm cream,
   with enough cream in the mix to stay legible at three in the morning when
   the sun colour itself is almost black. */
:root {
  --luz-surface: var(--sea-deep, #0a1b2a);
  --luz-fg: #f6efe2;
  --luz-dim: #b9c9d6;
  --luz-accent: #ffcf7a;
  --luz-accent: color-mix(in srgb, var(--sun, #ffcf7a) 40%, #ffe0a8);
}

/* ---------- canvases on the chapter stages ---------- */

.luz-stage-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* the copy sits on top of these, so they never take the pointer */
  pointer-events: none;
}

/* ---------- the hidden line the constellation reveals ---------- */

.luz-stars-line {
  margin: 1.4rem auto 0;
  max-width: min(30rem, calc(100vw - 3rem));
  padding: 0.55rem 1rem;
  text-align: center;
  transform: translateY(12px);
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  line-height: 1.35;
  color: var(--luz-fg, #f6efe2);
  background: rgba(8, 14, 26, 0.42);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 900ms ease, transform 900ms ease;
  pointer-events: auto;
}

.luz-stars-line.in {
  opacity: 1;
  transform: none;
}

/* ---------- the moon in the noite copy ---------- */

.luz-moon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 1px solid var(--luz-dim, #b9c9d6);
  border-radius: 50%;
  background: transparent;
  color: var(--luz-fg, #f6efe2);
  cursor: pointer;
  opacity: 0.42;
  transition: opacity 320ms ease, transform 320ms ease, border-color 320ms ease;
}

.luz-moon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.luz-moon:hover,
.luz-moon:focus-visible {
  opacity: 0.95;
  border-color: var(--luz-accent, #ffcf7a);
  color: var(--luz-accent, #ffcf7a);
}

.luz-moon.pulse {
  animation: luz-moon-pulse 520ms ease;
}

@keyframes luz-moon-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* a comfortable target on touch */
@media (pointer: coarse) {
  .luz-moon { width: 2.75rem; height: 2.75rem; }
  .luz-moon svg { width: 1.3rem; height: 1.3rem; }
}

/* ---------- toasts ---------- */

#luz-toasts {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 9997;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 2rem));
  pointer-events: none;
}

/* scoped to my own container: builder C uses the same class name in #postcard */
#luz-toasts .luz-toast {
  max-width: 100%;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--luz-fg, #f6efe2);
  background: var(--luz-surface, #0a1b2a);
  background: color-mix(in srgb, var(--luz-surface, #0a1b2a) 92%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}

#luz-toasts .luz-toast.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- the secret cards ---------- */

.luz-card-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 300ms ease;
}

.luz-card-wrap.in { opacity: 1; }

.luz-card-back {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 16, 0.66);
  backdrop-filter: blur(3px);
}

.luz-card {
  position: relative;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(82vh, 44rem);
  overflow: auto;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: var(--luz-fg, #f6efe2);
  background: var(--luz-surface, #0a1b2a);
  background: color-mix(in srgb, var(--luz-surface, #0a1b2a) 96%, transparent);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: translateY(12px) scale(0.985);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: "Manrope", system-ui, sans-serif;
}

.luz-card-wrap.in .luz-card { transform: none; }

.luz-card-title {
  margin: 0 2rem 0.9rem 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  line-height: 1.15;
  color: var(--luz-accent, #ffcf7a);
}

.luz-card-close {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--luz-fg, #f6efe2);
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 200ms ease;
}

.luz-card-close:hover,
.luz-card-close:focus-visible { opacity: 1; }

.luz-recipe { font-size: 0.92rem; line-height: 1.6; }

.luz-recipe-lead {
  margin: 0 0 1rem;
  color: var(--luz-dim, #b9c9d6);
}

.luz-recipe h3 {
  margin: 1.1rem 0 0.4rem;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--luz-accent, #ffcf7a);
}

.luz-recipe ul,
.luz-recipe ol {
  margin: 0;
  padding-left: 1.15rem;
}

.luz-recipe li { margin: 0.22rem 0; }

.luz-recipe-alt {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--luz-dim, #b9c9d6);
  font-size: 0.86rem;
}

/* ---------- the debug lens ---------- */

.luz-lens {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 9.5rem;
  max-width: calc(100vw - 1.5rem);
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--luz-fg, #f6efe2);
  background: rgba(6, 12, 20, 0.82);
  pointer-events: none;
}

.luz-lens b {
  margin-bottom: 0.15rem;
  color: var(--luz-accent, #ffcf7a);
  letter-spacing: 0.22em;
  font-weight: 700;
}

/* ---------- the fireworks overlay ---------- */

#eggs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9996;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

#eggs-overlay.on { opacity: 1; }

/* ---------- negativo ----------
   A filter on body would make body the containing block for every
   position: fixed layer on the page (the sky canvas, the aura, the grain, the
   loader, the toasts, the cards, this module's own overlays), and they would
   all detach and scroll away. So the inversion is done by a fixed overlay that
   filters what is painted behind it and never touches body.
   It sits under the toasts, the lens and the cards so those stay readable. */

#eggs-negativo {
  position: fixed;
  inset: 0;
  z-index: 9995;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
  -webkit-backdrop-filter: invert(1) hue-rotate(180deg);
  backdrop-filter: invert(1) hue-rotate(180deg);
}

html.luz-negativo #eggs-negativo { opacity: 1; }

/* where backdrop-filter is missing, white over difference is a plain invert */
@supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) {
  #eggs-negativo {
    background: #fff;
    mix-blend-mode: difference;
  }
}

/* ---------- background scroll lock while a card is open ---------- */

/* only the root: overflow hidden on body would make body a clip container
   and every position: sticky inside the chapters would stop sticking */
html.luz-noscroll {
  overflow: hidden;
}

.luz-word {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.luz-word.hit { animation: luz-word-hit 340ms ease; }

@keyframes luz-word-hit {
  0% { opacity: 1; }
  40% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ---------- the fisherman radio card ---------- */

.luz-radio {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9997;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: min(17rem, calc(100vw - 2rem));
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--luz-fg, #f6efe2);
  background: var(--luz-surface, #0a1b2a);
  background: color-mix(in srgb, var(--luz-surface, #0a1b2a) 94%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.luz-radio.in { opacity: 1; transform: translateY(0); }

.luz-radio strong {
  color: var(--luz-accent, #ffcf7a);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.64rem;
}

.luz-radio-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-bottom: 0.2rem;
}

.luz-radio-bars b {
  width: 3px;
  height: 100%;
  background: var(--luz-accent, #ffcf7a);
  opacity: 0.5;
  transform-origin: bottom;
  animation: luz-bars 1.1s ease-in-out infinite;
}

.luz-radio-bars b:nth-child(2) { animation-delay: 0.14s; }
.luz-radio-bars b:nth-child(3) { animation-delay: 0.28s; }
.luz-radio-bars b:nth-child(4) { animation-delay: 0.42s; }
.luz-radio-bars b:nth-child(5) { animation-delay: 0.56s; }

@keyframes luz-bars {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* ---------- the thank you and the sun badge ---------- */

.luz-credits-thanks { color: var(--luz-accent, #ffcf7a); }

.luz-sun-badge {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.35em;
  vertical-align: -0.14em;
  animation: luz-badge-in 900ms ease;
}

.luz-sun-badge svg {
  width: 100%;
  height: 100%;
  fill: var(--luz-accent, #ffcf7a);
  stroke: var(--luz-accent, #ffcf7a);
  stroke-width: 1.7;
}

.luz-sun-badge svg g { fill: none; }

@keyframes luz-badge-in {
  0% { opacity: 0; transform: scale(0.4) rotate(-40deg); }
  100% { opacity: 1; transform: none; }
}

/* ---------- the 404 lighthouse game ---------- */

.luz-lh {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  max-height: 62vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.luz-lh:focus-visible {
  outline: 2px solid var(--luz-accent, #ffcf7a);
  outline-offset: 3px;
}

.luz-lh-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.luz-lh-hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.7rem;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--luz-fg, #f6efe2);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.luz-lh-home {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}

.luz-lh.won .luz-lh-home {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.luz-lh-link {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--luz-accent, #ffcf7a);
  border-radius: 999px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--luz-accent, #ffcf7a);
  background: rgba(6, 12, 20, 0.7);
  transition: color 260ms ease, background-color 260ms ease;
}

.luz-lh-link:hover,
.luz-lh-link:focus-visible {
  color: var(--luz-surface, #0a1b2a);
  background: var(--luz-accent, #ffcf7a);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  #luz-toasts .luz-toast,
  .luz-card-wrap,
  .luz-card,
  .luz-radio,
  .luz-stars-line,
  .luz-lh-home,
  #eggs-overlay {
    transition-duration: 1ms;
  }

  .luz-stars-line,
  .luz-radio,
  .luz-lh-home { transform: none; }

  .luz-moon.pulse,
  .luz-word.hit,
  .luz-sun-badge { animation: none; }

  .luz-radio-bars b {
    animation: none;
    transform: scaleY(0.62);
  }

  #eggs-negativo { transition: none; }
}