/* Motion (MB-3, carousel options MB-107; module page umbraco/modules/motion.md): the carousel (js/carousel.js) and the scroll fade (js/reveal.js);
   MB-110: the phone scroll reveal (smooth scroll, js/page-motion.js, needs no CSS).
   Starter tokens only; mobile first. Loaded on every page through Code/Motion (layout slot head 530). */

/* ---- Scroll fade: [data-reveal] ----
   Hidden only after reveal.js has started (it adds .motion-reveal to <html>), so content shows if the script fails.
   Off at 768 px or less and under reduced motion: these rules don't apply there. The hidden state has no transition,
   so items snap to 0 and only the reveal fades (0.6 s, ease, no delay). */
@media screen and (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .motion-reveal [data-reveal]:not(.is-revealed) { opacity: 0; }
  .motion-reveal [data-reveal].is-revealed { opacity: 1; transition: opacity 0.6s ease; }
}
/* MB-110, Site settings › Brand › "Scroll reveal on phones" (off by default: none of these classes is set). reveal.js adds
   .motion-reveal--phones-at-once or --phones-fade to <html> with .motion-reveal. At 768 px or less a part is then hidden
   until any of it comes into view; "at once" shows it with no transition at all (as the imported site's own CSS did on
   phones), "fade" uses the wide screens' 0.6 s ease fade. Reduced motion: nothing is hidden (reveal.js doesn't start). */
@media screen and (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .motion-reveal--phones-at-once [data-reveal]:not(.is-revealed),
  .motion-reveal--phones-fade [data-reveal]:not(.is-revealed) { opacity: 0; }
  .motion-reveal--phones-at-once [data-reveal].is-revealed { opacity: 1; transition: none; }
  .motion-reveal--phones-fade [data-reveal].is-revealed { opacity: 1; transition: opacity 0.6s ease; }
}

/* ---- Carousel: [data-carousel] ----
   Without script: a row of cards you scroll sideways (scroll snap). With script (.is-enhanced): a clipped viewport,
   the row slides 0.5 s, and the controls (Pause first, arrows, dots) sit above it. A block sets how many cards are in
   view with --carousel-per-view at each width (default 1) and the space between with --carousel-gap. */
.carousel { --carousel-per-view: 1; --carousel-gap: 1rem; position: relative; margin: 2rem 0; }

.carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.carousel__slide,
.carousel__track > * {
  flex: 0 0 calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
  min-width: 0;
  scroll-snap-align: start;
}

/* overflow: clip with a margin keeps the focus ring of a card's link visible while hiding the cards out of view
   (the margin is smaller than the gap, so no neighbouring card shows). */
.carousel__viewport { overflow: clip; overflow-clip-margin: 0.375rem; }
/* MB-140 Offset (.carousel--offset; Team "Cards at the edges", from FuelChief's slick team row, measured in its saved
   bundle and screenshots at 1440, 1024 and 390): the cards in view sit inset in the column by --carousel-offset-inset plus
   half the gap (slick's list margin and slide padding), and the cards before and after show in that inset, cut off exactly
   at the column's edges (no clip margin). Inset 25 px from 576 px wide, 15 px below. The moves are the carousel's own. */
.carousel--offset.is-enhanced .carousel__viewport {
  padding-inline: calc(var(--carousel-offset-inset, 15px) + var(--carousel-gap) / 2);
  overflow-clip-margin: 0px; /* unitless 0 is refused by Chromium here */
}
@media (min-width: 576px) {
  .carousel--offset.is-enhanced .carousel__viewport { padding-inline: calc(var(--carousel-offset-inset, 25px) + var(--carousel-gap) / 2); }
}
/* MB-107: data-carousel-speed and -easing set --carousel-speed and --carousel-easing (unset: 0.5 s ease, as before). */
.carousel.is-enhanced .carousel__track {
  overflow: visible;
  scroll-snap-type: none;
  transition: transform var(--carousel-speed, 0.5s) var(--carousel-easing, ease);
}
.carousel.is-resizing .carousel__track,
.carousel.is-dragging .carousel__track { transition: none; }

/* Cross-fade (data-carousel-fade, or -fade-below at narrow widths; the script adds .is-fade): the slides lie on top of
   each other in one grid cell, one at a time; the new one fades in over the old as the old fades out. */
.carousel.is-enhanced.is-fade .carousel__track { display: grid; transform: none; transition: none; }
.carousel.is-enhanced.is-fade .carousel__track > * {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--carousel-speed, 0.5s) var(--carousel-easing, ease);
}
.carousel.is-enhanced.is-fade .carousel__track > .is-current { opacity: 1; z-index: 1; }
.carousel.is-fade.is-resizing .carousel__track > * { transition: none; }

/* Drag (data-carousel-drag): sideways drags are the script's, up and down still scroll the page. */
.carousel.is-draggable .carousel__viewport { touch-action: pan-y; }
.carousel.is-draggable .carousel__track { user-select: none; }
.carousel.is-dragging { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .carousel.is-enhanced .carousel__track,
  .carousel.is-enhanced.is-fade .carousel__track > * { transition: none; }
}

.carousel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
/* FC-MFIX6: data-carousel-controls-below (class .carousel--controls-below): the controls follow the cards, at the start of
   the row from 768 px and centred below (as FuelChief's slick dots). Site hook --carousel-controls-below-gap (the space
   between the cards and the controls). */
.carousel--controls-below .carousel__controls { margin: var(--carousel-controls-below-gap, var(--space-4, 1rem)) 0 0; justify-content: center; }
@media (min-width: 768px) {
  .carousel--controls-below .carousel__controls { justify-content: flex-start; }
}
.carousel__controls[hidden],
.carousel__pause[hidden],
.carousel__arrow[hidden],
.carousel__dots[hidden] { display: none; }

.carousel__pause,
.carousel__arrow,
.carousel__dot {
  font: inherit;
  color: var(--starter-text);
  background: var(--starter-background);
  border: 2px solid var(--starter-muted);
  cursor: pointer;
}
.carousel__pause {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.875rem;
  border-radius: 1.375rem;
  margin-right: auto;
}
/* Pause icon (two bars) while playing; Play icon (triangle) while stopped. */
.carousel__pause-icon { width: 0.75rem; height: 0.875rem; border-left: 0.25rem solid currentColor; border-right: 0.25rem solid currentColor; }
.carousel[data-state="stopped"] .carousel__pause-icon {
  border-right: 0;
  border-top: 0.4375rem solid transparent;
  border-bottom: 0.4375rem solid transparent;
  border-left: 0.75rem solid currentColor;
  height: 0;
}
.carousel__arrow {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
}
.carousel__dots { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Each dot is a 24 px target (WCAG 2.5.8) drawn as a 12 px circle; the current one is filled. */
.carousel__dot {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.carousel__dot::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--starter-muted);
}
.carousel__dot[aria-current="true"]::before { background: var(--starter-text); border-color: var(--starter-text); }
.carousel__pause:focus-visible,
.carousel__arrow:focus-visible,
.carousel__dot:focus-visible { outline: 3px solid var(--starter-focus); outline-offset: 2px; }

/* MB-108 progress tabs (data-carousel-tabs; the script adds .has-tabs and builds each dot as .carousel__tab): a row of
   tabs, each an optional icon over a label, a thin line under it and a bar on that line that fills over the slide's wait
   (--carousel-interval, linear) while it plays. Tabs before the current one keep a coloured line (.is-passed). The
   icon shows on the current tab (0.3 s), faintly on a hovered one; the label colour changes over 0.3 s, the line over 0.2 s.
   Colours: --carousel-tab-text, --carousel-tab-current-text, --carousel-tab-line, --carousel-tab-bar, --carousel-tab-passed. */
.carousel.has-tabs .carousel__dots { flex-wrap: nowrap; gap: 0; width: 100%; }
.carousel__dot.carousel__tab {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  position: relative;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.125rem 1.25rem 1.25rem;
  border-bottom: 3px solid var(--carousel-tab-line, color-mix(in srgb, var(--starter-text) 20%, transparent));
  transition: border-color 0.2s;
}
.carousel__dot.carousel__tab::before { content: none; }
.carousel__tab.is-passed { border-bottom-color: var(--carousel-tab-passed, var(--carousel-tab-bar, var(--starter-text))); }
.carousel__tab::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 3px;
  width: var(--carousel-tab-from, 0%);
  background: var(--carousel-tab-bar, var(--starter-text));
  transition: none;
}
.carousel__tab.is-progressing::after {
  width: 100%;
  transition: width var(--carousel-tab-time, var(--carousel-interval, 7s)) linear;
}
.carousel__tab-icon { height: 1.5rem; display: flex; align-items: center; justify-content: center; }
.carousel__tab-icon img { display: block; height: 100%; width: auto; opacity: 0; transition: opacity 0.3s; }
.carousel__tab[aria-current="true"] .carousel__tab-icon img { opacity: 1; }
.carousel__tab:not([aria-current="true"]):hover .carousel__tab-icon img { opacity: 0.3; }
.carousel__tab-label {
  display: block;
  text-align: center;
  font-size: var(--fs-small, 0.875rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--carousel-tab-text, color-mix(in srgb, var(--starter-text) 70%, transparent));
  transition: color 0.3s;
}
.carousel__tab[aria-current="true"] .carousel__tab-label { color: var(--carousel-tab-current-text, var(--starter-text)); }
@media (prefers-reduced-motion: reduce) {
  .carousel__dot.carousel__tab,
  .carousel__tab-icon img,
  .carousel__tab-label { transition: none; }
  .carousel__tab.is-progressing::after { width: var(--carousel-tab-from, 0%); transition: none; }
}

/* Timed slides (data-carousel-resume="restart", MB-132): while a mouse drag counts as a swipe, no text gets selected. */
.carousel.is-mouse-swiping { user-select: none; }