/* ════════════════════════════════════════════════════════════════════
   MOOPS — Animation layer (shared base)
   Loaded only on pages that render an <x-anim.*> hero component.
   Kept separate from public/css/moops.css so animation work can never
   touch the site's existing hero / section rules.

   Convention: each animated scene gets its own file
   public/css/anim/hero-<scene>.css, scoped under a .moops-anim wrapper.
   Shared, scene-agnostic rules live here.
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper every animated hero sits in. Self-contained — never styles
   html/body/:root (the source file did; that is deliberately dropped). */
.moops-anim {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.moops-anim svg { display: block; }

/* Visually-hidden (kept for screen readers / SEO H1) */
.moops-anim .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}