/* MOTION LAYER styles. Pairs with motion.js.

   Everything here animates TRANSFORM and OPACITY only (rule 2), and every
   block has a prefers-reduced-motion escape that leaves the CONTENT fully
   visible — reduced motion must never mean missing information.

   Colours come through custom properties so a report's own theme owns them.
   Defaults suit a dark surface. */

:root {
  --a3-glow-a: rgba(226, 50, 34, .10);    /* the warm core */
  --a3-glow-b: rgba(127, 216, 232, .05);  /* the cool falloff */
  --a3-glow-size: 620px;
  --a3-mood-fade: 900ms;
  --a3-reveal-rise: 18px;
  --a3-reveal-ms: 620ms;
  /* Cinematic ease-out: fast start, long settle. The single most useful
     curve in UI motion — linear reads as mechanical, ease-in-out as sluggish. */
  --a3-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------- reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--a3-reveal-rise));
  transition: opacity var(--a3-reveal-ms) var(--a3-ease),
              transform var(--a3-reveal-ms) var(--a3-ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ glow */
.a3-glow {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease-out;
  background: radial-gradient(
    var(--a3-glow-size) circle at var(--a3-mx, 50%) var(--a3-my, 35%),
    var(--a3-glow-a), var(--a3-glow-b) 42%, transparent 70%);
}
.a3-glow.is-on { opacity: 1; }

/* ------------------------------------------------------------------ mood */
.a3-mood {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background-color var(--a3-mood-fade) linear;
}

/* The glow and mood layers sit at z-index 0, so the page content needs a
   stacking context above them. Set this on whatever wraps your report. */
.a3-above { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ tilt */
[data-tilt] { transition: transform .35s var(--a3-ease); transform-style: preserve-3d; }
/* While the pointer is actually driving it, the transition must be near-zero
   or the card lags a frame behind the cursor and feels like syrup. */
[data-tilt].is-tilting { transition: transform .09s linear; }

/* ------------------------------------------------------------------ HOLD
   One switch turns the whole layer off. Reduced motion is not "less
   motion" — it is none. Content stays visible; only movement stops. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-tilt] { transform: none !important; transition: none !important; }
  .a3-glow, .a3-mood { display: none !important; }
  [data-parallax] { transform: none !important; opacity: 1 !important; }
}

/* Touch gets none of the pointer effects. They render nothing a finger can
   aim and still cost a frame budget. */
@media (hover: none), (pointer: coarse) {
  .a3-glow { display: none !important; }
  [data-tilt] { transform: none !important; }
}

/* Printing a report: no motion artefacts, everything visible. */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .a3-glow, .a3-mood { display: none !important; }
}