/* Canvas for particle background */
#page-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-canvas);
  pointer-events: none;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  #page-bg-canvas {
    opacity: 0.001;
  }
}

/* Static gradient behind canvas */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-canvas) - 1);
  pointer-events: none;
  background: var(--bg-color), var(--bg-linear);
  background-attachment: fixed;
}

/* Positioning helpers for stacked elements */
.louise-logo,
.site-header > * {
  position: relative;
  z-index: 2;
}

/* control offset uses safe-area inset for devices with a notch */
:root {
  --control-offset: calc(env(safe-area-inset-top, 0px));
}

/* Place language & theme switches using the safe area vars (they inherit pointer-events from container) */
.language-switch,
.theme-switch {
  top: var(--control-offset);
  z-index: var(--z-ui);
  pointer-events: auto;
  gap: 1rem;
}

.language-switch button,
.theme-switch button {
  pointer-events: auto;
}

/* Keep focus consistent */
.language-switch button:focus,
.theme-switch button:focus {
  outline: 3px solid rgba(255, 255, 255, 0.12);
  outline-offset: 3px;
}

/* align switches to edges safely */
.language-switch,
.theme-switch {
  left: env(safe-area-inset-left, 0px);
}

/* small screen adjustments */
@media (max-width: 480px) {
  :root {
    --control-offset: calc(env(safe-area-inset-top, 0px));
  }

  .language-switch,
  .theme-switch {
    top: var(--control-offset);
  }
}