/* ==========================================================================
   Redix Digital: the about page (about-studio.html, tools/build-about.js).
   v2.css draws what it shares with the home page (the bar, the titles, the
   buttons, the photograph in its window of light, the four numbers, the row
   of logos, the world behind); this lays out the story: the opening, how it
   began, what leads the studio as a constellation of four stars, everything
   the studio does, the academy, the partners on the way, and the last words.
   ========================================================================== */

/* As on the home page: the shade of a section lies over the sky and under the bird, and what is
   read lies over the bird (the canvases: sky 0, bird 2) */
.sub-page .ab { position: relative; z-index: auto; }   /* page.css lifts every page's main over the bird */

.ab-top,
.ab-story,
.ab-values,
.ab-more,
.ab-academy,
.ab-clients,
.ab-end {
  position: relative;
  z-index: 3;
}

/* --- The opening: the title low in the first screen, the bird in the open sky beside it ----- */

.ab-top {
  display: grid;
  align-content: end;
  min-height: min(88svh, 900px);
  padding: calc(var(--nav-h, 80px) + 12vh) var(--pad) clamp(48px, 9vh, 96px);
}

.ab-head {
  display: grid;
  justify-items: start;
  max-width: 1000px;
}

.ab-title { font-size: clamp(3rem, 8vw, 8rem); }

.ab-sub { margin-top: clamp(14px, 2.2vh, 22px); }

/* --- How it began: his words on the side the page is read from, his photograph beside them ---- */

.ab-story {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(28px, 6vw, 110px);
  padding: clamp(56px, 10vh, 120px) var(--pad);
  background: var(--veil);
}

.ab-text {
  display: grid;
  gap: 14px;
  max-width: 36em;
  margin-top: clamp(18px, 3vh, 30px);
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-mid);
}

.ab-text p { margin: 0; }

/* the promise that has not changed since, in the voice of the titles */
.ab-text .ab-rule {
  font-weight: 700;
  color: var(--text);
}

.ab-story .facts { max-width: 36em; }

/* --- What leads the studio: a constellation ----------------------------------------------------
   Four stars, each a value. On a wide screen they hang at different heights in a band of sky over
   their words, each with a thread of light down to its title, and the lines that join them run
   in the band only, never over a word. On a narrower screen they stand one under another, the
   stars in a margin beside the titles, and the line runs down the margin. about.js draws the
   lines from where the stars are, and the first time they are seen it lights the stars one after
   another, each line running on to the next (once; with the motion stopped they are all lit). */

.ab-values {
  --band: clamp(140px, 22vh, 220px);   /* the sky the stars hang in */
  padding: clamp(56px, 10vh, 120px) var(--pad) clamp(64px, 12vh, 140px);
  background: var(--veil);
}

.ab-sky {
  position: relative;
  margin-top: clamp(36px, 6vh, 64px);
}

.ab-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(47, 224, 230, 0.65));
}

.ab-lines path {
  fill: none;
  stroke: rgba(125, 240, 244, 0.7);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.ab-stars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-star {
  --y: 0.04;   /* how low the star hangs in the band, 0 to 1 */
  position: relative;
  padding-top: var(--band);
}

.ab-star:nth-child(2) { --y: 0.78; }
.ab-star:nth-child(3) { --y: 0.3; }
.ab-star:nth-child(4) { --y: 1; }

/* The star: a white heart in cyan light, and a faint ring round it */
.ab-dot {
  position: absolute;
  top: calc(var(--y) * (var(--band) - 52px));
  inset-inline-start: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 28%, var(--cyan-hi) 44%, rgba(47, 224, 230, 0) 72%);
  box-shadow: 0 0 18px 3px rgba(47, 224, 230, 0.42);
  transition: transform 700ms var(--ease-out-strong), opacity 400ms ease, box-shadow 700ms ease;
}

.ab-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.32);
}

/* The thread from the star down to its title */
.ab-star::before {
  content: "";
  position: absolute;
  top: calc(var(--y) * (var(--band) - 52px) + 22px);
  bottom: calc(100% - var(--band) + 12px);
  inset-inline-start: 6.5px;
  width: 1px;
  background: linear-gradient(180deg, rgba(125, 240, 244, 0.42), rgba(125, 240, 244, 0.04));
}

.ab-star h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}

.ab-star p {
  max-width: 24em;
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-mid);
}

/* Before the stars are reached (about.js arms them only where the motion runs): each star a
   small dim point, each line not yet drawn. A lit star flares once. */
.ab-sky.is-armed .ab-dot {
  opacity: 0.45;
  transform: scale(0.5);
  box-shadow: 0 0 0 0 rgba(47, 224, 230, 0);
}

.ab-sky.is-armed .ab-star.is-on .ab-dot {
  opacity: 1;
  transform: none;
  box-shadow: 0 0 18px 3px rgba(47, 224, 230, 0.42);
}

.ab-sky.is-armed .ab-star.is-on .ab-dot::after { animation: ab-flare 900ms var(--ease-out-strong) both; }

@keyframes ab-flare {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}

.ab-sky.is-armed .ab-star::before {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 600ms var(--ease-out-strong) 200ms;
}

.ab-sky.is-armed .ab-star.is-on::before { transform: none; }

.ab-sky.is-armed .ab-lines path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 520ms cubic-bezier(0.45, 0, 0.55, 1);
}

.ab-sky.is-armed .ab-lines path.is-on { stroke-dashoffset: 0; }

/* Drawn by the bird on a wide screen: the scroll itself draws the lines (about.js), with no delay of
   their own */
.ab-sky.is-scroll .ab-lines path { transition: none; }

/* --- More than a site: the route of the services -------------------------------------------------
   Every service, told in full (Roei, 2026-10-19: opened in the page itself, not in a window over
   it). The services are stations on a line of light. On a wide screen the stations stand in a
   column on the side the page is read from, and a pane of the page's glass beside them shows the
   chosen one: a light runs down the line to its station, a line of light joins the station to the
   pane, and the pane's words arrive line by line. On a narrower screen each part opens under its
   own station. One is open at a time. about.js arms it; without the script every part stands open
   under its station. */

/* (each part with words gets the deeper night of the home page behind it: as the page scrolls,
   every line crosses the bright line of the horizon) */
.ab-more {
  padding: clamp(56px, 10vh, 120px) var(--pad);
  background: var(--veil);
}

.svx {
  --gap: clamp(40px, 5vw, 96px);   /* between the stations and the pane */
  position: relative;
  max-width: 1280px;
  margin-top: clamp(30px, 5vh, 54px);
}

.svx-rail,
.svx-bead,
.svx-link { display: none; }

.svx-head { margin: 0; }

/* A station: its point of light on the line, its name, and on a phone the sign that it opens */
.svx-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 62px;
  padding: 12px 0;
  padding-inline-start: 34px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--text-mid);
  font: inherit;
  font-size: clamp(1.125rem, 1.45vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition: color 250ms ease;
  -webkit-tap-highlight-color: transparent;
}

.svx-item:last-child .svx-btn { border-bottom: 1px solid var(--line); }

.svx-dot {
  position: absolute;
  top: 50%;
  inset-inline-start: 6px;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: rgba(194, 205, 232, 0.3);
  box-shadow: inset 0 0 0 1px rgba(194, 205, 232, 0.55);
  transition: transform 400ms var(--ease-out-strong), background-color 250ms ease, box-shadow 250ms ease;
}

.svx-btn[aria-expanded="true"] { color: var(--text); }

.svx-btn[aria-expanded="true"] .svx-dot {
  background: radial-gradient(circle, #fff 0 28%, var(--cyan-hi) 46%, rgba(47, 224, 230, 0) 72%);
  box-shadow: 0 0 14px 3px rgba(47, 224, 230, 0.45);
  transform: scale(1.45);
}

.svx-t { flex: 1; }

/* on a phone: the arrow of the questions of the home page, turned when the part is open */
.svx-chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0 6px 5px;
  border-right: 2px solid var(--cyan-hi);
  border-bottom: 2px solid var(--cyan-hi);
  transform: rotate(45deg);
  transition: transform 300ms var(--ease-out-strong);
}

.svx-btn[aria-expanded="true"] .svx-chev { transform: translate3d(0, 5px, 0) rotate(225deg); }

@media (hover: hover) and (pointer: fine) {
  .svx-btn:hover { color: var(--text); }
  .svx-btn:hover .svx-dot { transform: scale(1.25); }
  .svx-btn[aria-expanded="true"]:hover .svx-dot { transform: scale(1.45); }
}

.svx-btn:focus-visible { outline: 3px solid var(--cyan-hi); outline-offset: -3px; border-radius: 10px; }

/* What a service is: the opening, what is in it, one fact worth knowing, and the ways on */
.svx-body { padding: 2px 0 30px; padding-inline-start: 34px; }

.svx-name { display: none; }

.svx-lead {
  max-width: 40em;
  margin: 0 0 18px;
  font-size: clamp(1.0625rem, 1.25vw, 1.25rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--text-mid);
}

.svx-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.svx-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.svx-list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--cyan-hi);
}

.svx-note {
  display: inline-block;
  margin: 20px 0 0;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(125, 240, 244, 0.07);
  box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.svx-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin: 26px 0 0;
}

/* The way to the service's own part of the site: its name and a round of light with an arrow that
   points on, to the left (the way into an article) */
.svx-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cyan-hi);
  text-decoration: none;
}

.svx-more i {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color 250ms ease, color 250ms ease, transform 300ms var(--ease-out-strong);
}

.svx-more i::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-35%, -50%) rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .svx-more:hover i { background-color: var(--cyan-hi); color: var(--ink); transform: translate3d(-3px, 0, 0); }
}

.svx-more:focus-visible { outline: 3px solid var(--cyan-hi); outline-offset: 3px; border-radius: 8px; }

/* The sign in a ring of light (the service's own, in the pane) */
.ab-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.22), rgba(34, 211, 238, 0.06) 70%);
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.4), 0 0 16px -6px rgba(34, 211, 238, 0.7);
  color: var(--cyan-hi);
}

.ab-ic svg {
  width: 21px;
  height: 21px;
}

/* Armed: a part opens and closes. On a phone it unfolds under its station (its height grows from
   nothing; out of the way of the keyboard while it is closed). */
.svx.is-armed .svx-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 420ms var(--ease-out-strong), visibility 0s linear 420ms;
}

.svx.is-armed .svx-panel.is-on {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 480ms var(--ease-out-strong), visibility 0s;
}

.svx.is-armed .svx-in {
  min-height: 0;
  overflow: hidden;
}

/* The words of the part that opens arrive one after another, from a little below */
@keyframes svx-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

.svx.is-armed .svx-panel.is-on .svx-body > * { animation: svx-rise 560ms var(--ease-out-strong) both; }
.svx.is-armed .svx-panel.is-on .svx-body > :nth-child(2) { animation-delay: 60ms; }
.svx.is-armed .svx-panel.is-on .svx-body > :nth-child(3) { animation-delay: 120ms; }
.svx.is-armed .svx-panel.is-on .svx-body > :nth-child(4) { animation-delay: 180ms; }
.svx.is-armed .svx-panel.is-on .svx-body > :nth-child(5) { animation-delay: 240ms; }

/* A wide screen: the stations in a column on the side the page is read from, the pane beside them.
   about.js measures where the chosen station is (--y), how tall the column is (--list-h) and the
   tallest part (--pane-h: every part takes that height, so the pane keeps one size). The pane
   travels along the column with the chosen station (--pane-y), never past its ends. */
@media (min-width: 1000px) {
  .svx.is-armed { min-height: var(--svx-h, 0px); }

  .svx.is-armed .svx-item { width: 34%; }

  .svx.is-armed .svx-chev { display: none; }

  .svx.is-armed .svx-btn,
  .svx.is-armed .svx-item:last-child .svx-btn {
    border-top: 0;
    border-bottom: 0;
  }

  /* the line of the route, through the stations */
  .svx.is-armed .svx-rail {
    display: block;
    position: absolute;
    top: 0;
    inset-inline-start: 10px;
    width: 1px;
    height: var(--list-h, 100%);
    background: linear-gradient(180deg, rgba(125, 240, 244, 0) 0, rgba(125, 240, 244, 0.32) 7%, rgba(125, 240, 244, 0.32) 93%, rgba(125, 240, 244, 0) 100%);
    pointer-events: none;
  }

  /* the light that runs down the line to the chosen station */
  .svx.is-armed .svx-bead {
    display: block;
    position: absolute;
    top: -14px;
    inset-inline-start: -3.5px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 10%, rgba(125, 240, 244, 0.6) 22%, rgba(47, 224, 230, 0) 68%);
    transform: translate3d(0, var(--y, 0px), 0);
    transition: transform 620ms var(--ease-out-strong);
    pointer-events: none;
  }

  /* the line of light from the chosen station to the pane */
  .svx.is-armed .svx-link {
    display: block;
    position: absolute;
    top: -1px;
    inset-inline-start: 34%;
    width: var(--gap);
    height: 2px;
    background: linear-gradient(270deg, rgba(125, 240, 244, 0.15), var(--cyan-hi));
    box-shadow: 0 0 10px rgba(47, 224, 230, 0.55);
    transform: translate3d(0, var(--y, 0px), 0);
    transition: transform 620ms var(--ease-out-strong);
    pointer-events: none;
  }

  /* the pane: every part stands in the same place, the chosen one shown */
  .svx.is-armed .svx-panel {
    display: block;
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: calc(66% - var(--gap));
    opacity: 0;
    transform: translate3d(0, var(--pane-y, 0px), 0);
    transition: opacity 180ms ease, visibility 0s linear 180ms, transform 620ms var(--ease-out-strong);
  }

  .svx.is-armed .svx-panel.is-on {
    opacity: 1;
    transition: opacity 260ms ease 80ms, visibility 0s, transform 620ms var(--ease-out-strong);
  }

  .svx.is-armed .svx-in {
    position: relative;
    min-height: var(--pane-h, 0px);
    padding: clamp(28px, 3vw, 46px);
    overflow: visible;
    border-radius: 28px;
    background: linear-gradient(158deg, rgba(28, 40, 82, 0.9) 0%, rgba(13, 20, 44, 0.94) 62%, rgba(9, 14, 33, 0.96) 100%);
    box-shadow: inset 0 0 0 1px rgba(125, 240, 244, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 44px 90px -44px rgba(0, 0, 0, 0.75);
  }

  /* where the line of light meets the pane, its edge is lit */
  .svx.is-armed .svx-in::before {
    content: "";
    position: absolute;
    top: -40px;
    inset-inline-start: -1px;
    width: 2px;
    height: 80px;
    background: linear-gradient(180deg, rgba(125, 240, 244, 0), var(--cyan-hi), rgba(125, 240, 244, 0));
    transform: translate3d(0, calc(var(--y, 0px) - var(--pane-y, 0px)), 0);
  }

  .svx.is-armed .svx-body { padding: 0; }

  .svx.is-armed .svx-name {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
  }

  .svx.is-armed .svx-name .ab-ic {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .svx.is-armed .svx-name .ab-ic svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 560px) {
  .svx-list { grid-template-columns: minmax(0, 1fr); }
}

/* --- The academy: his words on the side the page is read from, a pane of what he teaches ------ */

.ab-academy {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(28px, 6vw, 110px);
  padding: clamp(56px, 10vh, 120px) var(--pad);
  background: var(--veil);
}

.ab-learn {
  display: grid;
  gap: clamp(18px, 3vh, 26px);
  justify-items: start;
  padding: clamp(22px, 3vw, 34px);
}

.ab-learn ul {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-learn li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
}

.ab-learn li:first-child { padding-top: 0; }

.ab-learn li > span:last-child {
  display: grid;
  gap: 2px;
}

.ab-learn b {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3;
}

.ab-learn li > span:last-child > span {
  font-size: 0.9375rem;
  color: var(--text-mid);
}

/* --- The partners on the way: the row of logos of the home page ------------------------------ */

.ab-clients {
  padding: clamp(40px, 8vh, 96px) 0 clamp(24px, 5vh, 56px);
  background: var(--veil);
}

.ab-clients .sec-title,
.ab-clients .sec-sub { padding-inline: var(--pad); }

.ab-clients .marquee {
  margin-top: clamp(20px, 4vh, 40px);
  padding-inline: var(--pad);
}

/* where the row runs it fills the width of the screen, faded at both ends */
html.js:not(.no-motion) .ab-clients .marquee { padding-inline: 0; }

/* --- The last words, beside the form ------------------------------------------------------------
   As the end of the home page: the words and the three direct ways on the side the page is read
   from, the form beside them (the form, the direct ways and the line under the title are the home
   page's own, styled by v2.css). One column where the screen is narrower. */

.ab-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: clamp(24px, 5vw, 90px);
  padding: clamp(60px, 12vh, 140px) var(--pad) clamp(90px, 16vh, 180px);
  background: var(--veil);   /* the words cross the bright line of the horizon */
}

.ab-end-copy {
  position: relative;
  z-index: 3;
}

.ab-end-title { font-size: clamp(2.5rem, 5.4vw, 5.5rem); }

/* the question on a line of its own, so a phone never breaks it after "אז מה" */
.ab-end-title span,
.ab-end-title span.lit { display: block; }   /* (v2.js lights the light half of a title: .lit, inline-block) */

@media (max-width: 1000px) {
  .ab-end { grid-template-columns: minmax(0, 1fr); }
}

/* --- Narrower screens ----------------------------------------------------------------------- */

/* The stars one under another, in a margin beside their titles; the line runs down the margin */
@media (max-width: 1099px) {
  .ab-stars {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(34px, 5vh, 52px);
  }

  .ab-star {
    padding-top: 0;
    padding-inline-start: 38px;
  }

  .ab-dot { top: 7px; }

  .ab-star::before { display: none; }

  .ab-star p { max-width: 34em; }
}

@media (max-width: 899px) {
  /* the title low in the first screen, so the bird has the sky above it, as on the home page */
  .ab-top { min-height: 74svh; padding-top: calc(var(--nav-h, 72px) + 12vh); }

  /* Down here the words stand on the bright line of the horizon, so they get a deeper night of
     their own, behind them only, soft at its edges (as the opening of the home page does) */
  .ab-head { position: relative; }

  .ab-head::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -64px calc(-1 * var(--pad)) -70px;
    background: linear-gradient(180deg, rgba(7, 11, 26, 0) 0, rgba(7, 11, 26, 0.6) 64px, rgba(7, 11, 26, 0.6) calc(100% - 70px), rgba(7, 11, 26, 0) 100%);
    pointer-events: none;
  }

  .ab-story,
  .ab-academy { grid-template-columns: minmax(0, 1fr); }

  .ab-photo {
    order: -1;
    width: min(78%, 340px);
  }
}

/* --- Motion stopped, colour modes ------------------------------------------------------------- */

/* With the motion stopped, the stars are lit and the lines drawn, whenever it was stopped */
html.no-motion .ab-sky .ab-dot,
html.no-motion .ab-sky .ab-star::before {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.no-motion .ab-sky .ab-dot::after { animation: none !important; }

html.no-motion .ab-lines path {
  stroke-dashoffset: 0 !important;
  transition: none !important;
}

/* The route of the services: parts open at once, their words stand where they are */
.no-motion .svx-panel,
.no-motion .svx-panel.is-on,
.no-motion .svx-bead,
.no-motion .svx-link,
.no-motion .svx-dot,
.no-motion .svx-chev,
.no-motion .svx-more i { transition: none !important; }

.no-motion .svx-body > * { animation: none !important; }

/* The colour modes of the accessibility menu and the system's forced colours: plain lines */
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .ab-lines { filter: none; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .svx-in { outline: 1px solid currentColor; }
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .svx-bead,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .svx-link,
html:is(.a11y-contrast, .a11y-negative, .a11y-light) .svx-in::before { display: none !important; }   /* (a pseudo-element cannot stand inside :is()) */

@media (forced-colors: active) {
  .ab-lines { filter: none; }
  .ab-lines path { stroke: CanvasText; }
  .ab-dot { background: CanvasText; box-shadow: none; forced-color-adjust: none; }
  .ab-star::before { background: CanvasText; }
  .svx-rail,
  .svx-link { background: CanvasText; box-shadow: none; }
  .svx-bead { display: none !important; }
  .svx-dot { background: CanvasText; box-shadow: none; forced-color-adjust: none; }
  .svx-in { border: 1px solid CanvasText; }
}

/* English pages: the arrows point the way English reads, and the line of light runs from the
   station on the left to the pane on the right */
html[dir="ltr"] .svx-more i::before { transform: translate(-65%, -50%) rotate(-135deg); }
@media (hover: hover) and (pointer: fine) {
  html[dir="ltr"] .svx-more:hover i { transform: translate3d(3px, 0, 0); }
}
@media (min-width: 1000px) {
  html[dir="ltr"] .svx.is-armed .svx-link { background: linear-gradient(90deg, rgba(125, 240, 244, 0.15), var(--cyan-hi)); }
}