/**
 * PPF Pro Blueprint LMS - iOS 27 motion layer (v0.3.56, seat K).
 *
 * Companion to assets/js/ppfb-motion.js. Implements the visual half of the
 * motion spec (SPEC-ios27-motion-v0356.md): first-frame-guard start states
 * for sheet layers, the law-MR reduced preset overrides, and the M8
 * grabber. (v0.3.101: the M5 toggle-mirror styles were removed with the
 * Motion card.)
 *
 * Palette discipline (spec section 4, AC-61): only the six approved hexes
 * appear here, with var() fallbacks so the layer works on pages where the
 * token stylesheets are not enqueued. The single alpha variant is the
 * scrim (warm ink at alpha), which the spec permits for scrim layers only
 * (JC-11). Spacing uses phi tokens (5/8/13/21/34/55/89); the 44px touch
 * targets and the 12px helper line are functional sizes, not phi-derived.
 *
 * N1 standing refusal: nothing here moves on tilt. No deviceorientation or
 * devicemotion listeners exist in the motion build; glass accents keep
 * static top/bottom edge highlights only.
 *
 * No-JS: every rule below degrades to visible static content. Nothing is
 * hidden by CSS alone; start states are applied by JS inline styles only
 * after the layer is ready to animate (first-frame-guard build rule).
 */

/* ---------------------------------------------------------------------------
 * Sheet layers (M2 quiz sheet, M8 bottom sheet). Positioning and the
 * grabber live here; start states (first-frame guards) are set by JS
 * inline styles immediately before the layer becomes visible, never by
 * an inherited rule (embarrassment-audit build rule 1).
 * ------------------------------------------------------------------------- */
.ppfb-motion-scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(34, 26, 18, 0.5);
}

.ppfb-motion-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  max-height: 89vh;
  display: flex;
  flex-direction: column;
  background: var(--course-egret, #000000);
  color: var(--course-text-primary, #F5F5F7);
  border-radius: 21px 21px 0 0;
  overflow: hidden;
  touch-action: pan-y;
}

.ppfb-motion-grabber {
  width: 55px;
  height: 5px;
  border-radius: 3px;
  background: var(--course-candied-ginger, #1D1D1F);
  margin: 8px auto 5px;
  flex: 0 0 auto;
}

[data-ppfb-sheet-scroll] {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* M2 WAAPI-absent fallback: fade plus 8px rise via a CSS class (AC-15). */
.ppfb-motion-fallback {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.ppfb-motion-fallback.ppfb-motion-hidden-start {
  opacity: 0;
  transform: translateY(8px);
}

/* M8 WAAPI-absent fallback: CSS transition on transform (spec section 6). */
.ppfb-motion-sheet.ppfb-motion-fallback {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
 * Law MR: the reduced preset. Every mapped transition collapses to a
 * 120ms ease-out opacity crossfade; no transform, backdrop-filter, or
 * stroke-dashoffset records except the D5 ring settle (JC-08 carves D5
 * out of AC-30; AC-54 asserts the 120ms settle, which the JS performs).
 *
 * These overrides also bind the landed dashboard components whose JS
 * only reads the OS signal: under the user's M5 preset choice the
 * reveals, tracks, and dismissals resolve instantly.
 * ------------------------------------------------------------------------- */
html[data-motion="reduced"] .ppfb-10k-js [data-ppfb-reveal],
html[data-motion="reduced"] .ppfb-10k-js .ppfb-10k-reveal,
html[data-motion="reduced"] .ppfb-10k-js [data-ppfb-reveal].is-visible,
html[data-motion="reduced"] .ppfb-10k-js .ppfb-10k-reveal.is-visible {
  transition: none;
  opacity: 1;
  transform: none;
}

html[data-motion="reduced"] [data-ppfb-track] {
  transition: none !important;
}

html[data-motion="reduced"] [data-ppfb-dismissable] {
  transition: none !important;
}

html[data-motion="reduced"] .ppfb-motion-sheet {
  transition: none;
}

html[data-motion="reduced"] .ppfb-motion-scrim {
  transition: none;
}