/* Motion, loaded last: reveal, collapsibles, and the reduced-motion block.
 *   · only opacity, transform, colour, shadow and filter are animated;
 *   · the first screen does not animate in (LCP) — reveal is for content below it;
 *   · the end state is the resting layout (transform: none, opacity: 1).
 */

.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* a hover lift must not wait for the reveal delay */
.js [data-reveal].is-in.frame--hover { transition: opacity .8s var(--ease), transform .4s var(--ease); transition-delay: 0s; }

/* Height is never animated: a row expands through grid-template-rows. */
.collapsible { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
.collapsible.is-open { grid-template-rows: 1fr; }
.collapsible > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }
.collapsible.is-open > * { visibility: visible; transition-delay: 0s; }

/* count-up numbers keep their width while they run */
[data-count] { font-variant-numeric: tabular-nums; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .wcol, .wcol.rev, .pay-row { animation: none !important; transform: none !important; }
  .slide img, .slide.is-cur img { transform: none !important; }
  .alps > * { transform: none !important; }
}

/* without JS a collapsible is simply open (answers, cookie preferences) */
.no-js .collapsible { grid-template-rows: 1fr; }
.no-js .collapsible > * { visibility: visible; }

/* loops stop while off screen (site.js toggles .is-off) */
.is-off .wcol, .is-off .pay-row, .is-off .pill--live .dot::after, .is-off .slide.is-cur img { animation-play-state: paused; }
.is-off .dots i, .t-live.is-paused .dots i { animation-play-state: paused; }