/* atmosphere: film grain, cursor glow, slow fades (see atmosphere.js) */

/* film grain: oversized noise layer nudged around in slow discrete steps */
html::after {
  content: "";
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  will-change: transform;
  animation: fx-grain 7s steps(1) infinite;
}

@keyframes fx-grain {
  0%   { transform: translate3d(0, 0, 0); }
  10%  { transform: translate3d(-3%, 2%, 0); }
  20%  { transform: translate3d(2%, -4%, 0); }
  30%  { transform: translate3d(-5%, -1%, 0); }
  40%  { transform: translate3d(4%, 3%, 0); }
  50%  { transform: translate3d(-2%, 5%, 0); }
  60%  { transform: translate3d(5%, -2%, 0); }
  70%  { transform: translate3d(-4%, -5%, 0); }
  80%  { transform: translate3d(1%, 4%, 0); }
  90%  { transform: translate3d(-1%, -3%, 0); }
}

/* cursor glow: element is created by atmosphere.js on fine-pointer devices only */
.fx-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(255, 70, 50, 0.09) 0%, rgba(255, 70, 50, 0.04) 35%, rgba(255, 70, 50, 0) 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}

.fx-glow.fx-on { opacity: 1; }

/* slow fades: html.fx is only set by atmosphere.js, so content stays visible without JS.
   once an element has faded in it gets .fx-done and drops back to its own styles. */
html.fx main > *:not(.fx-done),
html.fx .stage:not(.fx-done),
html.fx img:not(.fx-done):not(.hero-art) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

html.fx .fx-in.fx-in:not(.fx-done) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html::after { animation: none; }
  .fx-glow { display: none; }
}

/* slow cross-fade between pages (supported browsers only; others just navigate) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.7s;
    animation-timing-function: ease;
  }
}