@charset "UTF-8";
/**
 * Animation — front-end styles. All motion lives here; view.js only
 * toggles `.intro-anim-in` (scroll/hover triggers) and sets the
 * per-element `--intro-anim-stagger-offset` custom property.
 *
 * Contract (injected by render.php — see that file for the full map):
 *   .intro-anim + data-intro-anim-type/-trigger/-settle/-replay/-stagger
 *   --intro-anim-duration / --intro-anim-delay inline custom properties
 *
 * Design notes:
 * - Entrances animate `opacity` + the individual `translate` property,
 *   settles animate `translate`/`rotate` — individual transform
 *   properties compose with any existing block `transform` instead of
 *   clobbering it, and the rotate settle holds 5deg after the entrance
 *   without a composite fight.
 * - The pre-entrance hidden state only applies for the scroll trigger
 *   and only under `.intro-anim-ready` (set by an inline head script),
 *   so no-JS visitors always see content. A failsafe animation reveals
 *   the element after 4s if view.js loads but never fires.
 * - The timer trigger is pure CSS: `animation-delay` + `fill-mode: both`
 *   hides the element during the delay and plays exactly once per page
 *   load, JS or not.
 * - Everything sits behind prefers-reduced-motion: no-preference —
 *   reduced-motion users get static, fully visible content.
 * - Inert in the editor canvas: render.php never runs there, so none of
 *   these data attributes exist in editor markup.
 */
@media (prefers-reduced-motion: no-preference) {
  .intro-anim-in[data-intro-anim-type=appear] {
    animation: intro-anim-appear var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=appear] {
    animation: intro-anim-appear var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both;
  }
  .intro-anim-in[data-intro-anim-type=from-left] {
    animation: intro-anim-from-left var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-left] {
    animation: intro-anim-from-left var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both;
  }
  .intro-anim-in[data-intro-anim-type=from-right] {
    animation: intro-anim-from-right var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-right] {
    animation: intro-anim-from-right var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both;
  }
  .intro-anim-in[data-intro-anim-type=from-bottom] {
    animation: intro-anim-from-bottom var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-bottom] {
    animation: intro-anim-from-bottom var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both;
  }
  .intro-anim-in:not([data-intro-anim-type])[data-intro-anim-effect~=shake] {
    animation: intro-anim-shake 500ms ease-in-out var(--intro-anim-stagger-offset, 0ms) both;
  }
  .intro-anim-in[data-intro-anim-type=appear][data-intro-anim-effect~=shake] {
    animation: intro-anim-appear var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=appear][data-intro-anim-effect~=shake] {
    animation: intro-anim-appear var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in[data-intro-anim-type=from-left][data-intro-anim-effect~=shake] {
    animation: intro-anim-from-left var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-left][data-intro-anim-effect~=shake] {
    animation: intro-anim-from-left var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in[data-intro-anim-type=from-right][data-intro-anim-effect~=shake] {
    animation: intro-anim-from-right var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-right][data-intro-anim-effect~=shake] {
    animation: intro-anim-from-right var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in[data-intro-anim-type=from-bottom][data-intro-anim-effect~=shake] {
    animation: intro-anim-from-bottom var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-bottom][data-intro-anim-effect~=shake] {
    animation: intro-anim-from-bottom var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-shake 500ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in:not([data-intro-anim-type])[data-intro-anim-effect~=bounce] {
    animation: intro-anim-bounce 600ms ease-in-out var(--intro-anim-stagger-offset, 0ms) both;
  }
  .intro-anim-in[data-intro-anim-type=appear][data-intro-anim-effect~=bounce] {
    animation: intro-anim-appear var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=appear][data-intro-anim-effect~=bounce] {
    animation: intro-anim-appear var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in[data-intro-anim-type=from-left][data-intro-anim-effect~=bounce] {
    animation: intro-anim-from-left var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-left][data-intro-anim-effect~=bounce] {
    animation: intro-anim-from-left var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in[data-intro-anim-type=from-right][data-intro-anim-effect~=bounce] {
    animation: intro-anim-from-right var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-right][data-intro-anim-effect~=bounce] {
    animation: intro-anim-from-right var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim-in[data-intro-anim-type=from-bottom][data-intro-anim-effect~=bounce] {
    animation: intro-anim-from-bottom var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-stagger-offset, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-stagger-offset, 0ms)) both;
  }
  .intro-anim[data-intro-anim-trigger=timer][data-intro-anim-type=from-bottom][data-intro-anim-effect~=bounce] {
    animation: intro-anim-from-bottom var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-delay, 0ms) both, intro-anim-bounce 600ms ease-in-out calc(var(--intro-anim-duration, 600ms) + var(--intro-anim-delay, 0ms)) both;
  }
  .intro-anim[data-intro-anim-effect~=zoom],
  .intro-anim[data-intro-anim-effect~=rotate],
  .intro-anim[data-intro-anim-effect~=color] {
    transition: scale var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-effect-delay, 0ms), rotate var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-effect-delay, 0ms), background-color var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-effect-delay, 0ms);
  }
  .intro-anim-in[data-intro-anim-effect~=zoom] {
    scale: var(--intro-anim-scale, 1.08);
  }
  .intro-anim-in[data-intro-anim-effect~=rotate] {
    rotate: var(--intro-anim-rotate, 5deg);
  }
  .intro-anim-in[data-intro-anim-effect~=color] {
    background-color: var(--intro-anim-bg);
  }
  .intro-anim[data-intro-anim-effect~=marker] .intro-anim-hl {
    background-image: linear-gradient(var(--intro-anim-bg, rgba(250, 204, 21, 0.55)), var(--intro-anim-bg, rgba(250, 204, 21, 0.55)));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 60%;
    padding-inline: 0.05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size var(--intro-anim-duration, 600ms) ease-out var(--intro-anim-effect-delay, 0ms);
  }
  .intro-anim-in[data-intro-anim-effect~=marker] .intro-anim-hl {
    background-size: 100% 60%;
  }
}
/*
 * Entrances.
 */
@keyframes intro-anim-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes intro-anim-from-left {
  from {
    opacity: 0;
    translate: -32px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes intro-anim-from-right {
  from {
    opacity: 0;
    translate: 32px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes intro-anim-from-bottom {
  from {
    opacity: 0;
    translate: 0 32px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/*
 * Settles — chained after the entrance via a second comma-listed
 * animation delayed by the entrance duration.
 */
@keyframes intro-anim-shake {
  0%, 100% {
    translate: 0 0;
  }
  20% {
    translate: -8px 0;
  }
  40% {
    translate: 7px 0;
  }
  60% {
    translate: -5px 0;
  }
  80% {
    translate: 3px 0;
  }
}
@keyframes intro-anim-bounce {
  0%, 100% {
    translate: 0 0;
  }
  30% {
    translate: 0 -14px;
  }
  60% {
    translate: 0 0;
  }
  80% {
    translate: 0 -6px;
  }
}
/*
 * Scrub (tween) — scroll-position-driven.
 *
 * render.php composes the animation list as custom properties so two phases run
 * on the block's view timeline (plus optional highlight phases):
 *  - intro-anim-scrub-start over [0, Start point]  : start state → rested
 *  - intro-anim-scrub-end   over [End point, 100]  : rested → end state
 * Each phase is its own view() animation with `forwards` fill and the end phase
 * is listed last so it wins the shared opacity/transform during the exit — no
 * conflicts. The `animation` shorthand resets animation-timeline, so the
 * timeline/range longhands are declared after it. Gated behind @supports, so
 * browsers without scroll-driven animations simply show the content.
 */
.intro-anim[data-intro-anim-trigger=scrub] .intro-anim-hl {
  background-image: linear-gradient(var(--sh-c1, transparent), var(--sh-c1, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 88%;
  padding-inline: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .intro-anim[data-intro-anim-trigger=scrub] {
      animation-name: var(--sa-names);
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-timeline: var(--sa-tl);
      animation-range: var(--sa-range);
      view-timeline-name: --intro-hl;
    }
    .intro-anim[data-intro-anim-trigger=scrub] .intro-anim-hl {
      animation-name: var(--sh-names);
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
      animation-timeline: var(--sh-tl);
      animation-range: var(--sh-range);
    }
  }
}
@keyframes intro-anim-scrub-start {
  from {
    opacity: var(--sa-op0, 1);
    translate: var(--sa-tr0, 0 0);
    scale: var(--sa-sc0, 1);
    rotate: var(--sa-ro0, 0deg);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: var(--sa-sc1, 1);
    rotate: var(--sa-ro1, 0deg);
  }
}
@keyframes intro-anim-scrub-end {
  from {
    opacity: 1;
    translate: 0 0;
    scale: var(--sa-sc1, 1);
    rotate: var(--sa-ro1, 0deg);
  }
  to {
    opacity: var(--sa-op2, 1);
    translate: var(--sa-tr2, 0 0);
    scale: var(--sa-sc2, 1);
    rotate: var(--sa-ro2, 0deg);
  }
}
@keyframes intro-anim-scrub-hl-sweep {
  from {
    background-size: 0% 88%;
  }
  to {
    background-size: 100% 88%;
  }
}
@keyframes intro-anim-scrub-hl-recolor {
  from {
    background-image: linear-gradient(var(--sh-c1, transparent), var(--sh-c1, transparent));
  }
  to {
    background-image: linear-gradient(var(--sh-c2, transparent), var(--sh-c2, transparent));
  }
}
@keyframes intro-anim-scrub-bg-start {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--sh-c1, transparent);
  }
}
@keyframes intro-anim-scrub-bg-end {
  from {
    background-color: var(--sh-c1, transparent);
  }
  to {
    background-color: var(--sh-c2, transparent);
  }
}