/* Studio page motion layer (sm)
   ONE reveal system for /studio. Armed only by sm.js (html.sm-on), so with
   no JavaScript nothing here applies and every element stays visible.

   Motion language: opacity + small translateY, subtle scale on the founder
   surface and principle numbers, scaleX on existing rules.
   Nothing here changes layout, size, spacing, colour, typography or Fold. */

html.sm-on {
  --sr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 1. neutralise the legacy reveal states ----------
   The original stylesheet hides .reveal / .split-word > span / .gold-seg /
   .fold-reveal until its own observer adds .is-in. Two systems on one node
   glitch, so while sm is live the legacy states are inert. */
html.sm-on .reveal,
html.sm-on .reveal.is-in,
html.sm-on .is-in .reveal,
html.sm-on .split-word > span,
html.sm-on .gold-seg,
html.sm-on .gold-seg.is-in {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

html.sm-on .fold-reveal,
html.sm-on .fold-reveal.is-in {
  clip-path: none;
  opacity: 1;
  transition: none;
}

/* ---------- 2. the single sm reveal state ---------- */
html.sm-on [data-sr]:not([data-sr-in]) {
  opacity: 0;
  transform: translateY(var(--sr-y, 10px)) scale(var(--sr-s, 1));
  transition: none;
}

html.sm-on [data-sr][data-sr-in] {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sr-d, 560ms) var(--sr-ease),
    transform var(--sr-d, 560ms) var(--sr-ease);
  transition-delay: var(--sr-delay, 0ms);
}

/* Existing gold rules / dividers: draw, never move. */
html.sm-on [data-sr="rule"]:not([data-sr-in]) {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
}
html.sm-on [data-sr="rule"][data-sr-in] {
  opacity: 1;
  transform: none;
  transform-origin: left center;
  transition: transform var(--sr-d, 500ms) var(--sr-ease);
  transition-delay: var(--sr-delay, 0ms);
}

/* Deep links, restored scroll and fast flicks: settle with no late replay. */
html.sm-on [data-sr][data-sr-instant] {
  transition: none !important;
  transition-delay: 0ms !important;
}

/* ---------- mobile: same choreography, lighter travel and scale ---------- */
@media (max-width: 700px) {
  html.sm-on [data-sr]:not([data-sr-in]) {
    transform: translateY(calc(var(--sr-y, 10px) * 0.7)) scale(calc(1 + (var(--sr-s, 1) - 1) * 0.5));
  }
}

/* ---------- reduced motion ----------
   sm.js never arms in this mode; this is belt and braces. */
@media (prefers-reduced-motion: reduce) {
  html.sm-on [data-sr] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}