/* Motion primitives. Durations/easings come from tokens.css (--q-dur-*, --q-ease-*).
   Entrance choreography follows the MotionSites reference (Northstar/Palomar): headline
   masked-rise, staggered fade-rise for everything else, translate/scale/clip-path kept
   SEPARATE from `transform` so they compose instead of fighting layout transforms
   (the pixel-fitter/ring-style transforms other code may apply).

   Contract:
   - Add `data-enter` to an element (or an ancestor with `data-enter-group`) and it starts
     hidden per the rules below, revealed by enter.js when allowed.
   - Nothing ever depends on JS to become visible: `.no-js` and prefers-reduced-motion
     both resolve to the fully-visible resting state. */

[data-enter] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

html.js-enter [data-enter="rise"] { opacity: 0; translate: 0 12px; }
html.js-enter [data-enter="rise-sm"] { opacity: 0; translate: 0 8px; }
html.js-enter [data-enter="scale"] { opacity: 0; translate: 0 10px; scale: .985; }
html.js-enter [data-enter="headline"] {
  opacity: 0;
  translate: 0 60%;
  clip-path: inset(100% 0 -30% 0);
}

.q-stagger > * { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html.js-enter [data-enter] { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; clip-path: none !important; }
  .q-ring, .q-pulse, .q-spin { animation: none !important; }
}

/* Press feedback shared by every interactive control. */
.q-pressable { transition: transform var(--q-dur-instant) var(--q-ease-settle), filter var(--q-dur-instant) var(--q-ease-settle); }
.q-pressable:active { transform: translateY(1px) scale(.99); }

/* Glass material: sticky headers, sheets, announcement pills. Falls back to a solid
   surface when the OS/browser turns transparency off. */
.q-glass {
  background: color-mix(in srgb, var(--q-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
  backdrop-filter: blur(var(--q-glass-blur)) saturate(var(--q-glass-saturate));
  border: 1px solid color-mix(in srgb, var(--q-text) 10%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  .q-glass { background: var(--q-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@keyframes q-pulse-ring {
  0% { transform: scale(1); opacity: .75; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}
.q-pulse { animation: q-pulse-ring 2.8s var(--q-ease-standard); }