/* ambient.css -- overlays for js/motion/ambient.js (gold glint) and js/motion/petals.js.
   Nothing here changes the resting frame: overlays exist only while in flight
   (glint) or while a petal is falling, and only ever when html.motion is set
   (JS creates them only when motion runs). */

/* C. Gold glint -- a soft light strip sweeping across one layer, masked by that
   layer's own alpha so it lights paper + gold only where the art is. Created per
   sweep and removed after it; only the strip's transform animates. */
.fx-glint {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.fx-glint > i {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(255, 246, 222, 0) 0%,
    rgba(255, 246, 222, 0.14) 28%,
    rgba(255, 251, 240, 0.52) 50%,
    rgba(255, 246, 222, 0.14) 72%,
    rgba(255, 246, 222, 0) 100%);
}
.fx-glint--thin > i { width: 30%; }

/* E. Petals -- one stage-sized, paint-free overlay; each petal is a small img. */
.fx-petals {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.fx-petal {
  position: absolute;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-glint, .fx-petals { display: none; }
}