/* ============================================================================
   decor.css — the ambient girly layer: drifting school doodles behind the binder.

   INVENTORY
     .decor            the fixed, inert host (index.html)
     .fx-canvas        the confetti canvas (index.html, drawn by js/fx.js)
     .decor-glyph      one drifting doodle, positioned and delayed inline by
                       js/decor.js via --dx / --dur / --delay / --scale / --spin
     .decor-corner .decor-corner--tl .decor-corner--br
                       soft brand-tinted wash in two opposite corners

   TWO HARD RULES
     1. Everything here is decorative and MUST be inert. The host is aria-hidden
        and pointer-events:none, and nothing in it may ever sit above an
        interactive control. A full-screen decorative layer that eats clicks is
        the classic way this kind of thing breaks an app.
     2. Every animation stops under prefers-reduced-motion. tokens.css zeroes the
        duration tokens globally, but these carry their own durations and an
        infinite iteration count, so they need the explicit guard at the bottom.
   ============================================================================ */

.decor {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Behind the binder card, which is opaque — so this reads as texture on the
     desk rather than as clutter over the content. */
  contain: strict;
}

/* Two soft washes tinted with the live brand, so the background belongs to
   whatever palette the teacher built rather than being a fixed pink. */
.decor-corner {
  position: absolute;
  width: 46vmax; height: 46vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
}
.decor-corner--tl {
  top: -18vmax; left: -14vmax;
  background: radial-gradient(circle, var(--brand-soft) 0%, transparent 70%);
}
.decor-corner--br {
  bottom: -20vmax; right: -16vmax;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}

/* One drifting doodle. js/decor.js sets the custom properties inline; the
   animation itself lives here so the browser can composite it off the main
   thread and 20 of these cost almost nothing. */
.decor-glyph {
  position: absolute;
  bottom: -12vh;
  left: var(--dx, 50%);
  font-size: calc(1.5rem * var(--scale, 1));
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  animation: decor-drift var(--dur, 26s) linear var(--delay, 0s) infinite;
}

@keyframes decor-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .5; }
  92%  { opacity: .5; }
  100% { transform: translate3d(var(--sway, 3vw), -118vh, 0) rotate(var(--spin, 220deg)); opacity: 0; }
}

/* The confetti canvas. Above content, below modals and toasts, never
   interactive — a full-screen canvas that swallows clicks would make every
   celebration break the page underneath it. */
.fx-canvas {
  position: fixed; inset: 0; z-index: 55;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Rule 2. The glyphs are removed from the DOM entirely by js/decor.js when the
   preference is set; this is the belt to that braces, and also covers the
   corner washes, which would otherwise keep their blur cost for nothing. */
@media (prefers-reduced-motion: reduce) {
  .decor-glyph { display: none; }
  .decor-corner { opacity: .35; }
}

/* A phone should not be compositing twenty animated layers while a teacher is
   trying to type a parent's phone number. js/decor.js already scales the count
   down; this halves the visual weight of what is left. */
@media (max-width: 640px) {
  .decor-corner { opacity: .32; filter: blur(42px); }
}