/*
 * motion.css - shared "Imprenta" entrance motion for the San Ignacio artboards
 * ============================================================================
 *
 * HOW TO USE
 *   1. Link it after theme.css:   <link rel="stylesheet" href="./motion.css">
 *   2. Put an enter class on the artboard root. It must toggle between
 *      "enter-a" and "enter-b" to replay (keyframe names differ per class, so
 *      the browser restarts every animation when the class flips):
 *        <div class="[enterCls]"> ... </div>
 *      renderVals():  enterCls: 'enter-' + enterKey,
 *                     replay:   () => this.setState({ enterKey: enterKey === 'a' ? 'b' : 'a' })
 *   3. Opt elements in with a class and (optionally) a delay custom property:
 *        <h2 class="m-stamp" style="--d: 300ms">...</h2>
 *      Delays are ordered by reading priority; the whole entrance stays <= 1.6s.
 *   4. Add the replay chip (position classes: desk | phone | phone tablet):
 *        <button type="button" class="press desk" data-replay="1" onClick="[replay]">...</button>
 *      and, in componentDidMount, listen for BroadcastChannel('si-anim') and the
 *      'si-anim-replay' storage key, calling renderVals().replay().
 *
 * RULES THIS FILE FOLLOWS
 *   - Resting state == the design. Keyframes only declare `from` (or early
 *     stops) and animations use `backwards` fill, so nothing is left behind.
 *   - Individual `scale` / `rotate` properties are animated, never `transform`,
 *     so inline `transform: rotate(...)` on the element stays intact.
 *   - Only transform-ish properties + opacity move (plus background-size for
 *     the marker sweep, which is paint-only on a small inline span).
 *   - All motion lives in @media (prefers-reduced-motion: no-preference).
 *     Only the replay chip's positioning is outside it.
 *   - Colors come from theme variables, always with a fallback.
 *
 * CLASSES
 *   .m-card    card/section fade + scale 1.02 -> 1            (240ms)
 *   .m-stamp   headline/label stamp, scale 1.06 -> 1 + fade    (200ms)
 *   .m-c       modifier: stamp from the center (use when the element has an
 *              inline rotate, so the transform-origin does not shift it)
 *   .m-label   "Aviso" label stamp with rotate overshoot       (260ms)
 *   .m-thunk   big numeral thunk (scale + rotate settle)       (320ms)
 *   .m-slap    polaroid / button slap (scale + rotate settle)  (220ms)
 *   .m-tape    tape strip slaps on last (default delay 1300ms) (200ms)
 *   .m-grow    bars/progress fills: scaleX 0 -> 1 from left    (600ms)
 *   .m-grow-y  vertical chart bars: scaleY 0 -> 1 from bottom (600ms)
 *   .m-sweep   marker highlight sweep (background-size 0 -> 100%, 450ms,
 *              default delay 560ms); put it on the element whose highlight
 *              is a background gradient (e.g. <span class="hl m-sweep">)
 *   .lnk       link underline draws on hover (pointer: fine) / on press
 *   .lnk-row   modifier: underline sits at the bottom edge (row links)
 *   .press     press feedback, scale .97
 *   [data-replay] chip (.desk / .phone / .phone.tablet)
 *
 * Delay: --d (default 0ms). Curve: --m-out, cubic-bezier(.23, 1, .32, 1).
 */

/* No grey tap flash on touch (not motion). */
.lnk, .press { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .enter-a, .enter-b { --m-out: cubic-bezier(0.23, 1, 0.32, 1); }

  /* Transform origins (only matter while the animation runs). */
  .m-stamp { transform-origin: 0 50%; }
  .m-stamp.m-c { transform-origin: 50% 50%; }
  .m-grow  { transform-origin: 0 50%; }
  .m-grow-y { transform-origin: 50% 100%; }
  .m-thunk { transform-origin: 0 100%; }

  /* Marker sweep needs a non-repeating, box-clone background. */
  .m-sweep { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  /* ---- Keyframes: one copy per enter class so replay restarts them ---- */
  @keyframes m-card-a { from{opacity:0;scale:1.02} }
  @keyframes m-card-b { from{opacity:0;scale:1.02} }
  @keyframes m-stamp-a { from{opacity:0;scale:1.06} }
  @keyframes m-stamp-b { from{opacity:0;scale:1.06} }
  @keyframes m-label-a { 0%{opacity:0;scale:1.5;rotate:-12deg}55%{opacity:1;scale:0.96;rotate:3deg} }
  @keyframes m-label-b { 0%{opacity:0;scale:1.5;rotate:-12deg}55%{opacity:1;scale:0.96;rotate:3deg} }
  @keyframes m-thunk-a { 0%{opacity:0;scale:1.12;rotate:-3deg}45%{opacity:1;scale:0.97;rotate:1deg} }
  @keyframes m-thunk-b { 0%{opacity:0;scale:1.12;rotate:-3deg}45%{opacity:1;scale:0.97;rotate:1deg} }
  @keyframes m-slap-a { from{opacity:0;scale:1.08;rotate:3deg} }
  @keyframes m-slap-b { from{opacity:0;scale:1.08;rotate:3deg} }
  @keyframes m-tape-a { from{opacity:0;scale:1.25;rotate:-8deg} }
  @keyframes m-tape-b { from{opacity:0;scale:1.25;rotate:-8deg} }
  @keyframes m-grow-a { from{scale:0 1} }
  @keyframes m-grow-b { from{scale:0 1} }
  @keyframes m-grow-y-a { from{scale:1 0} }
  @keyframes m-grow-y-b { from{scale:1 0} }
  @keyframes m-sweep-a { from{background-size:0% 100%} }
  @keyframes m-sweep-b { from{background-size:0% 100%} }

  /* ---- Animations (reading-priority order is set per page via --d) ---- */
  .enter-a .m-card { animation: m-card-a 240ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-card { animation: m-card-b 240ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-stamp { animation: m-stamp-a 200ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-stamp { animation: m-stamp-b 200ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-label { animation: m-label-a 260ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-label { animation: m-label-b 260ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-thunk { animation: m-thunk-a 320ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-thunk { animation: m-thunk-b 320ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-slap { animation: m-slap-a 220ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-slap { animation: m-slap-b 220ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-tape { animation: m-tape-a 200ms var(--m-out) var(--d, 1300ms) backwards; }
  .enter-b .m-tape { animation: m-tape-b 200ms var(--m-out) var(--d, 1300ms) backwards; }
  .enter-a .m-grow { animation: m-grow-a 600ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-grow { animation: m-grow-b 600ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-grow-y { animation: m-grow-y-a 600ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-b .m-grow-y { animation: m-grow-y-b 600ms var(--m-out) var(--d, 0ms) backwards; }
  .enter-a .m-sweep { background-repeat: no-repeat; background-size: 100% 100%; animation: m-sweep-a 450ms var(--m-out) var(--d, 560ms) backwards; }
  .enter-b .m-sweep { background-repeat: no-repeat; background-size: 100% 100%; animation: m-sweep-b 450ms var(--m-out) var(--d, 560ms) backwards; }

  /* ---- Link underline draw (accent colour from theme) ---- */
  .lnk { position: relative; }
  .lnk::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--accent, #2E5A1C);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 200ms var(--m-out, cubic-bezier(0.23, 1, 0.32, 1));
    pointer-events: none;
  }
  .lnk-row::after { bottom: 0; }
  .lnk:active::after { transform: scaleX(1); }

  /* ---- Press feedback ---- */
  .press { transition: scale 140ms var(--m-out, cubic-bezier(0.23, 1, 0.32, 1)); }
  .press:active { scale: 0.97; }
}

/* Hover only where it is real hover (not touch). */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .lnk:hover::after { transform: scaleX(1); }
}

/*
 * Replay chip. Positioning is intentionally NOT motion, so it is outside the
 * reduced-motion query. !important beats per-page inline/button resets.
 *   .desk          desktop artboard (1440): top 6px, left 600px
 *   .phone         phone artboard (390):    top 72px, right 24px
 *   .phone.tablet  tablet artboard (834):   top 72px, right 44px
 */
[data-replay] {
  position: fixed !important; bottom: auto !important;
  white-space: nowrap !important; width: auto !important; height: auto !important;
  transform: none !important; min-height: 44px !important; padding: 0 16px !important;
  background: var(--accent, #2E5A1C) !important; color: var(--on-accent, #FFFFFF) !important;
  border: 1.5px solid var(--ink, #0F1D0B) !important; box-shadow: 4px 4px 0 var(--ink, #0F1D0B) !important;
  font-family: 'IBM Plex Mono', monospace !important; font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  z-index: 50 !important; cursor: pointer; display: inline-flex !important; align-items: center; gap: 8px;
}
[data-replay].desk  { top: 6px !important;  left: 600px !important; right: auto !important; }
/* Phone/tablet: icon-only square chip, sitting in the header row next to the menu/theme controls so it never covers content. */
[data-replay].phone { top: 14px !important; right: 76px !important; left: auto !important; width: 44px !important; min-width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center !important; }
[data-replay].phone > span { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
[data-replay].phone.tablet { top: 64px !important; right: 44px !important; }