/* ─────────────────────────────────────────────────────────────
   Nimbus Hollow site effects: the pieces every page shares.
   Each page's own <style id="fx-theme"> says which things reveal
   and how its world moves. Everything that moves lives under
   html.fx, which is only set when motion is welcome.
   ───────────────────────────────────────────────────────────── */
:root { --fx-ease: cubic-bezier(.2, .75, .2, 1); }

/* The particle field sits behind the page and never catches a click. */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* Reveal shapes. A page picks one with animation-name. */
@keyframes fx-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-pop { from { opacity: 0; scale: .9; } }
@keyframes fx-slide { from { opacity: 0; translate: -18px 0; } }
@keyframes fx-pin {
  from { opacity: 0; translate: 0 -46px; rotate: -6deg; }
  65% { opacity: 1; translate: 0 5px; rotate: 1.5deg; }
}
/* Text that types itself in, left to right. */
@keyframes fx-type { from { clip-path: inset(0 100% 0 0); } }
/* A bright band that sweeps across a bar once. */
@keyframes fx-sweep { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* Round Trip's ricochet canvas fills its field. */
.fx-bullet-canvas { position: absolute; inset: 0; display: block; }
/* A glint that crosses quickly, then rests off to the side until the next pass. */
@keyframes fx-glint { 0% { background-position: 200% 0; } 28%, 100% { background-position: -100% 0; } }
/* Snapping in from the left with a little overshoot: the studio's way of arriving. */
@keyframes fx-snap { from { opacity: 0; translate: -42px 0; } 55% { opacity: 1; } }