/* Hi-Whyders landing scene: layout of the depth layers (TCH-016 AP8 / D-010).
 * Needs the colour tokens in logo-build.css and the canvases made by hw-scene.js.
 * Back container: layers 0-2, the veil, layer 3, the vignette (in that order).
 * Front container: layer 4, in front of the page, kept away from the centre.
 */
.hw-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hw-scene--back {
  z-index: 0;
  animation: hw-scene-in 2.6s ease-out both;
}
.hw-scene--fx {                            /* the stars' sharp canvas (hw-scene.js v19): above the back, no fade-in */
  z-index: 0;
}
.hw-scene--front {
  z-index: 20;
  opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 46%, transparent 52%, #000 95%);
          mask-image: radial-gradient(ellipse 64% 60% at 50% 46%, transparent 52%, #000 95%);
}

/* oversized so the parallax shift never shows an edge */
.hw-scene__layer {
  position: absolute;
  top: -32px;
  left: -32px;
  width: calc(100% + 64px);
  height: calc(100% + 64px);
  will-change: transform;
}

/* calms the rain behind the logo (centre set by hw-scene.js) */
.hw-scene__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 46% 24% at var(--hw-fx, 50%) var(--hw-fy, 40%),
              color-mix(in srgb, var(--hw-bg-0) 82%, transparent), transparent 100%);
}
.hw-scene__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 82% 78% at 50% 45%, transparent 48%,
              color-mix(in srgb, var(--hw-bg-0) 90%, transparent) 100%);
}

@keyframes hw-scene-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hw-scene--back { animation: none; }
}