/* LUMA - the boxes the mascots sit in
   Sheet 8 of 9. Source order decides the cascade - see the link tags in luma.html. */

/* ============================================================
   THERE IS NO REDUCED-MOTION BLOCK HERE ANY MORE, AND THAT IS DELIBERATE

   This sheet used to open with ~40 rules inside
   @media (prefers-reduced-motion: reduce), which handed the decision to the
   phone. Maiko had "Reduce Motion" on in her iPhone's accessibility settings,
   so the installed app launched with every cat frozen, the coach orb paused and
   not one animation running — and nothing inside LUMA could bring them back.
   Deleted 2026-09-20 on Giorgi's call: LUMA's animations are part of LUMA, and
   the phone is not asked. There is no setting for it either; he was explicit
   that nobody wants a switch for this.

   So: do not reintroduce a prefers-reduced-motion query anywhere in css/ or js/.
   prefers-reduced-TRANSPARENCY is a different setting — it is about glow rather
   than movement — and all four of its blocks stay: 03-day.css, 07-nutrition.css
   and TWO in 05-progress.css. Do not sweep those out alongside these.
   ============================================================ */
/* ============================================================
   MASCOT — Layer 6 preview, DEMO MODE ONLY
   Two Lottie cats by one illustrator: "love" (awake, hearts) for
   praise moments, "sleep" (6s breathing loop) for rest and recovery.
   Sizes respect the readable floors measured in the preview harness —
   the happy cat holds together down to 40px, the sleeping one needs
   56px or it reads as an orange lump.
   ============================================================ */
.mascot { pointer-events: none; line-height: 0; }
.mascot svg { display: block; }

/* The coach card's host was #mascot-coach, an 88px floated box holding the orb's
   inline SMIL SVG. Both are gone (2026-09-22) — the card carries the cat now and
   its sizing lives on .coach-cat in 04-widgets.css, beside the bubble it belongs
   to rather than out here with the mounted hosts. */
/* The coach orb's sizing rule. The orb was inline markup rather than a mounted
   clip, so unlike every other host it needed this spelled out. It is gone. */

/* Celebration overlay. */
#mascot-cel { width: 128px; height: 128px; margin: 0 auto 4px; }

/* Empty states. Mounted *inside* the empty element so they inherit its
   display toggle and nothing has to keep visibility in sync. */
#mascot-workout-empty,
#mascot-chart-empty { width: 84px; height: 84px; margin: 0 auto 10px; }

/* Day-tab hero — the first item of the .day-topbar row, with the greeting and
   date to its right. The "love" clip is square (500x500), so a fixed px box
   paints the cat at exactly that size on every screen: no aspect-ratio, no
   max-height, nothing that varies with the shell width. That is deliberate.
   An earlier wide 1070x456 hero WAS width-driven and so measured 170px on a
   desktop screenshot but only 143px on a 375px phone. Do not swap these back
   to percentage sizing.
   flex-shrink is 0 so the cat keeps its size and the text column absorbs the
   squeeze instead. */
/* 2026-09-15 — the hero became a 56px avatar tile.

   A flat 56px box does NOT work: within its box the drawn cat covers only ~68%
   of the width and ~41% of the height (the source art carries its own padding
   and leaves headroom for the hearts), so it would paint at about 38x23 — under
   the ~40px floor at which this clip stops being readable.

   So the clip gets a larger box (--cat-zoom) and .mascot-tile crops the art's
   PADDING away, not the cat: at 72px the whole cat, its tail and both hearts
   sit inside the square with air around them. Chosen by rendering 56 / 64 / 72 /
   80 / 88 / 96 side by side — from 80 up the body touches the edges and it
   reads as a cut-off animal rather than an avatar.

   THE SIZE MUST LIVE ON THE BOX, NOT ON A CSS transform: lottie writes a
   transform: translate3d(0,0,0) inline on every SVG it builds, and an inline
   style beats any rule we could write here.

   --cat-shift pulls the framing up or down; 0 is correct at this zoom. Both are
   measured numbers — re-shoot before changing either. There is no phone media
   query any more: a fixed 56px tile renders identically at every width. */
/* RETIRED 2026-09-22 — the header tile is gone and nothing carries this class any
   more. The measured numbers are kept because they are the ONLY record of how this
   clip has to be framed, and .coach-cat below is framing the same art: the drawn cat
   covers ~68% of its box's width and ~41% of its height, so the box must be roughly
   1.3x the window you want to see, and the crop must take the art's PADDING rather
   than the cat. Re-shoot tests/cat-zoom-sweep.js before changing either number. */
.mascot-tile-retired {
  --cat-zoom: 72px;
  --cat-shift: 0px;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  /* 16, not 14: closer to the continuous-corner curvature iOS uses at this size,
     and it reads softer beside the 52px circles below it. */
  border-radius: 16px;
  /* A surface with a top edge, not a flat colour patch. The gradient is the
     material catching light from above and the inset hairline is that light
     landing on its top edge — the two together are most of why this now reads
     as an object sitting on the screen rather than a hole cut into it. */
  background: linear-gradient(180deg, #2A2420 0%, var(--hdr-cat) 78%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
              0 1px 3px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mascot-banner {
  flex: 0 0 auto;
  width: var(--cat-zoom);
  height: var(--cat-zoom);
  margin-top: var(--cat-shift);
}
#mascot-banner svg { width: 100%; height: 100%; }

/* Evening check-in, above the sleep stepper. Under the 7h scoring
   threshold the module dims and slows this one — same clip, two states. */
#mascot-sleep {
  width: 92px; height: 92px; margin: 0 auto 2px;
  transition: opacity var(--dur-mid) var(--ease-out);
}
#mascot-sleep.mascot-under { opacity: 0.45; }