/* ============================================================
   Error page — space / black-hole theme
   Relies on the home.css design tokens (--bg/--surface/--text/
   --muted/--stroke) and the cyan accent (#3FAEDC / #8AD0E8).
   Only holds what Tailwind utilities can't express: the black
   hole visual, the starfield, and the astronaut/typography sizing.
   ============================================================ */

/* ---- Fixed space backdrop + starfield ---------------------- */
.err-space {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(63, 174, 220, 0.10) 0%, transparent 55%),
    hsl(var(--bg));
}
/* subtle static starfield — layered pin-point radial gradients */
.err-space::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(205, 214, 227, 0.9), transparent),
    radial-gradient(1px 1px at 80% 20%, rgba(205, 214, 227, 0.7), transparent),
    radial-gradient(1px 1px at 65% 70%, rgba(205, 214, 227, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(205, 214, 227, 0.6), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(205, 214, 227, 0.7), transparent),
    radial-gradient(1px 1px at 10% 65%, rgba(205, 214, 227, 0.6), transparent),
    radial-gradient(1px 1px at 50% 15%, rgba(205, 214, 227, 0.5), transparent);
  background-repeat: repeat;
  background-size: 100% 100%;
  opacity: 0.5;
  animation: err-twinkle 6s ease-in-out infinite;
}

@keyframes err-twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.6; }
}

/* ---- Nav: fluid gutters, scales continuously 320px -> 800px  */
nav.err-nav {
  padding-top: clamp(1rem, 0.667rem + 1.667vw, 1.5rem);
  padding-left: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
  padding-right: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
}

/* ---- Hero: fluid horizontal gutter, scales continuously ---- */
main.err-main {
  padding-left: clamp(1rem, 0.667rem + 1.667vw, 1.5rem);
  padding-right: clamp(1rem, 0.667rem + 1.667vw, 1.5rem);
}

/* ---- Stage: black hole + astronaut, centred as one group --- */
.err-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the min(..vh..) term keeps the whole hero inside the viewport (no scroll) */
  width: min(74vw, 58vh, 440px);
  aspect-ratio: 1 / 1;
}

/* ---- Black hole (fills the stage) -------------------------- */
.err-hole {
  position: absolute;
  inset: 0;
  filter: blur(0.4px);
}

.err-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform;
}

/* bright accretion arc, spinning */
.err-disk-1 {
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(63, 174, 220, 0.05) 40deg,
      rgba(138, 208, 232, 0.55) 120deg,
      rgba(63, 174, 220, 0.15) 200deg,
      transparent 300deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 46%, #000 58%, transparent 66%);
          mask: radial-gradient(circle, transparent 40%, #000 46%, #000 58%, transparent 66%);
  animation: err-spin 18s linear infinite;
}

/* fainter counter-rotating halo */
.err-disk-2 {
  background:
    radial-gradient(circle,
      transparent 42%,
      rgba(63, 174, 220, 0.28) 50%,
      rgba(138, 208, 232, 0.10) 60%,
      transparent 72%);
  animation: err-spin-rev 26s linear infinite;
}

/* dark event-horizon core with cyan rim glow */
.err-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #000 55%, rgba(10, 10, 10, 0.9) 100%);
  box-shadow:
    0 0 60px 8px rgba(63, 174, 220, 0.35),
    inset 0 0 40px 6px rgba(0, 0, 0, 0.9);
}

@keyframes err-spin { to { transform: rotate(360deg); } }
@keyframes err-spin-rev { to { transform: rotate(-360deg); } }

/* ---- Astronaut (floats in the centre of the hole) --------- */
.err-astro {
  position: relative;
  z-index: 3;
  width: 54%;
  filter: drop-shadow(0 24px 48px rgba(63, 174, 220, 0.4));
}

/* ---- Big status code — faint backdrop behind the astronaut - */
.err-code {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* blends vh and vw so the backdrop never outgrows a narrow viewport, not just a short one */
  font-size: clamp(3.25rem, min(30vh, 26vw), 14rem);
  line-height: 1;
  letter-spacing: -0.04em;
  opacity: 0.22;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Kicker row + copy block + actions: fluid rhythm ------- */
/* all clamps below are anchored 320px -> 800px so spacing/type
   scale continuously across every step in between, not just at
   a couple of fixed breakpoints */
.err-kicker {
  margin-top: clamp(0.875rem, 0.292rem + 2.917vw, 1.75rem);
  margin-bottom: clamp(0.5rem, 0.333rem + 0.833vw, 0.75rem);
}
.err-copy {
  width: min(100%, 36rem);
}
.err-title {
  font-size: clamp(1.25rem, 0.75rem + 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: hsl(var(--text));
}
.err-sub {
  margin-top: 0.75rem;
  font-size: clamp(0.85rem, 0.783rem + 0.333vw, 0.95rem);
  line-height: 1.65;
  color: hsl(var(--muted));
}
.err-actions {
  margin-top: clamp(0.875rem, 0.458rem + 2.083vw, 1.5rem);
}

#changeLanguage [data-lang-label] { color: hsl(var(--muted)); }
#changeLanguage[aria-checked="false"] [data-lang-label="fr"] { color: hsl(var(--text)); }
#changeLanguage[aria-checked="true"]  [data-lang-label="en"] { color: hsl(var(--text)); }
#changeLanguage[aria-checked="false"] #lang-knob { transform: translate(0, -50%); }
#changeLanguage[aria-checked="true"]  #lang-knob { transform: translate(18px, -50%); }

/* ---- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .err-disk-1,
  .err-disk-2,
  .err-space::before {
    animation: none;
  }
}