/* Decorative background only: content never depends on WebGL or JavaScript. */
body {
  overflow-x: clip;
}

:root {
  --atmosphere-cool: #56897f;
  --atmosphere-warm: #bf9151;
}

:root[data-theme="dark"] {
  --atmosphere-cool: #28685f;
  --atmosphere-warm: #8b653b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --atmosphere-cool: #28685f;
    --atmosphere-warm: #8b653b;
  }
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 65svh, 640px);
  align-items: center;
  padding: 76px 0 96px;
}

.hero-atmosphere {
  position: absolute;
  /* Explicit nonnegative layers avoid negative-canvas compositing on mobile. */
  z-index: 0;
  top: -28px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 62% 38%, color-mix(in srgb, var(--atmosphere-cool) 28%, transparent), transparent 70%),
    radial-gradient(ellipse at 38% 65%, color-mix(in srgb, var(--atmosphere-warm) 16%, transparent), transparent 65%),
    var(--paper);
}

.hero-atmosphere canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 400ms ease;
}

.hero[data-atmosphere="running"] canvas,
.hero[data-atmosphere="paused"] canvas {
  opacity: 1;
}

/* One edge fade, not a mask plus two scrims washing out the mobile image. */
.hero-atmosphere::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(var(--paper), transparent 16%, transparent 76%, var(--paper));
}

/* Fixed, low-contrast film grain; never flashes or moves with the text. */
.hero-atmosphere::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.hero-copy,
.hero > .portrait {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .hero {
    min-height: 460px;
    gap: 28px;
    padding: 40px 0 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-atmosphere canvas { display: none; transition: none; }
}

@media (forced-colors: active), print {
  .hero-atmosphere { display: none; }
  .hero { min-height: 0; padding: 36px 0 44px; }
}