/* ─────────────────────────────────────────────────────────────
   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; } }

/* The animations switch: a line in the footer, and a small offer for devices that ask for less motion. */
.fx-switch { flex-basis: 100%; margin: .4rem 0 0; font-size: .9em; opacity: .85; }
.fx-switch button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fx-ask { position: fixed; left: 1rem; bottom: 1rem; z-index: 40; display: flex; align-items: center; gap: .2rem; padding: .25rem; border-radius: 999px;
  background: rgba(10,10,16,.92); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 8px 24px rgba(0,0,0,.45); font: 600 .95rem/1 system-ui, sans-serif; }
.fx-ask button { font: inherit; color: #f4f2ee; background: none; border: 0; border-radius: 999px; padding: .55rem .9rem; cursor: pointer; }
.fx-ask button:hover, .fx-ask button:focus-visible { background: rgba(255,255,255,.12); }
.fx-ask .fx-ask-no { padding: .55rem .7rem; font-size: 1.1rem; opacity: .75; }