/* =========================================================================
   SABR, ALIVE (js/sabr.js). Loaded after every other stylesheet.
   Nothing here applies until the script marks an element live, so the
   no-JS page and reduced motion keep the stills and the static ridge.
   ========================================================================= */

/* ---- the morph canvases ----
   Meet Sabr's two stages (their size and place: css/s-pauses-sabr.css) and
   the finale each take the frame box of the app's morph (536x432, one
   ground line for all six states), so nothing jumps between moods. */
.sabr__morph,
.finale__morph {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* Idle beats share the frame geometry: a 568x448 box that starts 16px above
   the 536x432 frame box, so the tail and the head have room to move. */
.sabr-beat {
  position: absolute;
  left: 0;
  top: -3.7037%;
  width: 105.9701%;
  height: 103.7037%;
  object-fit: fill;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  /* leaving, a beat dissolves into the still under it (a scroll can cut one
     short on a turned head); arriving, it swaps in on a presented frame */
  transition: opacity 0.18s ease;
}
.sabr-beat.is-on { opacity: 1; transition: none; }
.sabr__morph.is-under,
.finale__morph.is-under { opacity: 0; }


/* ---- finale: the canvas replaces the waving still ----
   Same height budget as the still it replaces (the frame box is wider). */
.finale__sabr > img { display: block; width: 100%; height: auto; }
.finale__sabr.is-anim {
  position: relative;
  width: min(clamp(110px, calc((100vh - 560px) * 1.14), 280px), 44vw);
  width: min(clamp(110px, calc((100svh - 560px) * 1.14), 280px), 44vw);
  aspect-ratio: 536 / 432;
}
.finale__sabr.is-anim > img { display: none; }
/* Phones: the finale is the payoff, so he gets a real share of the screen,
   capped by what the last frame has room for above the heading, badges,
   fine print and footer (refresh.css keeps those tight on phones). */
@media (max-width: 700px) {
  .finale__sabr.is-anim {
    width: clamp(110px, calc((100vh - 560px) * 1.24), min(52vw, 200px));
    width: clamp(110px, calc((100svh - 560px) * 1.24), min(52vw, 200px));
  }
}
@media (max-width: 700px) and (max-height: 700px) {
  .finale__sabr.is-anim {
    width: clamp(96px, calc((100vh - 580px) * 1.24), 170px);
    width: clamp(96px, calc((100svh - 580px) * 1.24), 170px);
  }
}

/* ---- the ridge camel walks ----
   The walk cycle is one 33-cell mask strip in the scene ink; js/sabr.js
   picks the cell (--walk-f) and owns the transform (x, ridge, facing). */
.landscape__camel.is-walking {
  --asset: url("images/sabr-anim/walk.webp");
  left: 0;
  top: 0;
  width: clamp(28px, 2.8vw, 44px);
  aspect-ratio: 104 / 77;
  mask: var(--asset) 0 0 / 3300% 100% no-repeat;
  -webkit-mask: var(--asset) 0 0 / 3300% 100% no-repeat;
  mask-position: calc(var(--walk-f, 0) * 100% / 32) 0;
  -webkit-mask-position: calc(var(--walk-f, 0) * 100% / 32) 0;
  transition: opacity 0.35s ease;
  will-change: transform;
}
.landscape__camel.is-walking.is-shy { opacity: 0.2; }
.landscape__camel.is-walking.is-away { opacity: 0; }
@media (max-width: 700px) {
  .landscape__camel.is-walking { width: 32px; }
}