/* Canvas layer for the animated hero backgrounds.
 *
 * The canvas is inserted as the hero's FIRST child and positioned, which means
 * it would paint over the hero's own content: a positioned element beats
 * non-positioned in-flow siblings in the same stacking context regardless of
 * document order. So the hero's other direct children are lifted onto their own
 * layer above it. This is the only reason .nature-host > * exists.
 *
 * Nothing here has a hover, transition or pointer target — the layer is
 * decoration and must never intercept a click meant for the hero's buttons.
 */
/* No `isolation:isolate` here, deliberately. It made the hero its own stacking
   context, which trapped every descendant's z-index inside it — so the course
   page's search suggestions (z-index:40) could not rise above the sticky
   category strip (z-index:30) that follows the hero. The explicit z-index:0 on
   the background layer and z-index:1 on the content already keep the canvas
   behind the words, which is all the isolation was doing. */
.nature-host{position:relative}
/* Shared by both layers — the canvas and the uploaded-image div. Written on the
   class rather than on `canvas` so the image div gets its own z-index and
   pointer-events explicitly, instead of inheriting the right behaviour by
   accident from the content layer sitting above it. */
.nature-host .nature-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
}
/* Matched on the class, not on `canvas`: the uploaded-image layer is a <div>
   wearing the same .nature-bg, and a `:not(canvas.nature-bg)` here would lift
   it onto the content layer — putting the background in front of the words. */
.nature-host > *:not(.nature-clip){position:relative;z-index:1}

/* The scene has to be clipped — the drift keyframes scale it past the section
   edge — but clipping it on the HOST clipped everything else too, and that is
   what cut the course page's search dropdown off at the hero's bottom edge.
   The clip belongs to the background alone, so it gets its own box. */
.nature-clip{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
}

/* ── uploaded image layer ─────────────────────────────────────────────────
   A <div> rather than the canvas: the browser scales a background-image far
   better than drawImage does, and a still image should cost nothing per frame.
   Position and fit come from the admin panel as inline styles. */
.nature-host > .nature-img{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  will-change:transform;
}
/* Motion is optional and slow enough to read as "alive", not as "moving". */
@keyframes nature-drift{
  0%   {transform:translate3d(0,0,0) scale(1.06)}
  50%  {transform:translate3d(-2.2%,-1.1%,0) scale(1.06)}
  100% {transform:translate3d(0,0,0) scale(1.06)}
}
@keyframes nature-zoom{
  0%   {transform:scale(1.0)}
  100% {transform:scale(1.12)}
}
.nature-host > .nature-img.is-drift{animation:nature-drift 48s ease-in-out infinite}
.nature-host > .nature-img.is-zoom{animation:nature-zoom 40s ease-in-out infinite alternate}

/* Someone who asked their OS for no motion gets none — not a slower version. */
@media (prefers-reduced-motion: reduce){
  .nature-host > .nature-img{animation:none !important;transform:none !important}
}