/* sprint 38 — the house motion, chosen off /attention-lab/ and applied to the site.
 *
 * Amanda picked the tasteful end of the board and Beth picked option 5 by name, so three of the
 * eight are here: things settle as they arrive, the gold rule under a hero draws itself, and lists
 * arrive one item at a time. The other five stay on the board, four of them because they need a
 * person to decide which phrase deserves them and one because it was on the board as a warning.
 *
 * Three rules from sprint_38/attention_animation.md hold everything below:
 *
 * 1. **Once, then stop.** Attention is caught by motion starting, not by motion. Nothing here loops
 *    and nothing repeats when you scroll back past it.
 * 2. **Never while she is reading.** Everything fires as a section arrives, before it is read. What
 *    is already on screen when the page loads is not animated at all, because that is content
 *    somebody is looking at now.
 * 3. **Nothing is hidden by CSS.** Every rule below is behind an attribute the script writes. A
 *    reader whose script never arrives, or whose script throws, gets the whole page with no motion,
 *    which is the state the site was in yesterday.
 *
 * The homepage is deliberately excluded in functions.php. It has its own motion, built for it.
 */

/* the waiting state exists only where the script has put it, and reveal.js has a failsafe that
   clears it after three seconds however the page is doing */
.obc-mv [data-reveal="wait"] { opacity: 0; }

.obc-mv [data-reveal="in"] {
  animation: obc-settle 520ms cubic-bezier(0.22, 0.7, 0.28, 1) both;
}

@keyframes obc-settle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* option 5. The index is written by the script and capped there, so a list of forty items cannot
   keep the fortieth one waiting three seconds. */
.obc-mv [data-reveal="in"][data-reveal-i] {
  animation-delay: calc(var(--obc-i, 0) * 70ms);
}

/* option 2, the rule drawing itself. It applies to the gold keyline the hero already has, so this
   animates something that was on the page rather than adding a new mark to it. Nothing changes
   position, which is why it is the cheapest device on the board. */
.obc-mv [data-reveal="in"].mv-hero-title::after {
  animation: obc-draw 560ms cubic-bezier(0.22, 0.7, 0.28, 1) 140ms both;
  transform-origin: left center;
}
@keyframes obc-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- available, and used only where somebody points at a line --------------------------------
 *
 * Options 3 and 4 are not applied to anything automatically and never should be. They mark one
 * phrase, and which phrase is an editorial decision rather than a rule a script can hold. The
 * mechanics are here so that marking a line is adding a class to it in the editor.
 *
 * The highlighter is a background behind the ink, never a change to the text colour: Warm Gold
 * under Ink reads at full contrast, Warm Gold as text does not.
 */
.obc-mv .mv-mark {
  display: inline;
  background-image: linear-gradient(var(--mv-highlight), var(--mv-highlight));
  background-repeat: no-repeat;
  background-position: 0 0.08em;
  background-size: 0% 1.05em;
  border-radius: 2px;
  padding: 0 2px;
  transition: background-size 640ms cubic-bezier(0.22, 0.7, 0.28, 1);
}
.obc-mv .mv-mark[data-reveal="in"] { background-size: 100% 1.05em; animation: none; }

.obc-mv .mv-lift {
  color: var(--mv-deep);
  transition: font-weight 260ms ease, font-variation-settings 260ms ease;
}
.obc-mv .mv-lift[data-reveal="in"] {
  font-weight: 700;
  font-variation-settings: "wght" 700;
  animation: none;
}

/* --- motion turned down ------------------------------------------------------------------------
 *
 * Everything lands in its finished state. Reported reactions to motion include nausea and migraine,
 * so this is a floor rather than a courtesy, and it is the same floor WCAG 2.3.3 sets.
 */
@media (prefers-reduced-motion: reduce) {
  .obc-mv [data-reveal="wait"] { opacity: 1; }
  .obc-mv [data-reveal="in"],
  .obc-mv [data-reveal="in"].mv-hero-title::after { animation: none; }
  .obc-mv .mv-mark { transition: none; }
  .obc-mv .mv-mark[data-reveal="in"] { background-size: 100% 1.05em; }
  .obc-mv .mv-lift { transition: none; }
}