/* ══════════════════════════════════════════════════════════════════════════════
   ATMOREX Technologies — Radial Marquee
   Loaded only where components/radial-marquee.php is used.

   Structure (mirrors the component's markup):

     .radial-marquee-row          visible strip — the arc's height in layout, and
                                  carries every geometry var (they inherit down
                                  from here; PHP writes them inline)
       .radial-marquee            the ring box, --rm-circle wide, centred
         __half-circle            top half of the ring, clips everything below
           __deco                 tick arc, drawn through the cards
           __circle               square box, so a rotation turns about the centre
             __collection         scroll-driven extra rotation (JS)
               __list             the constant rotation (CSS animation)
                 __item           one slot on the ring; --i is its index
                   __card

   Every length is a multiple of --rm-u so the whole ring scales as one piece.
   All the geometry vars are written onto .radial-marquee by the PHP from
   content/radial-marquee.json — do not hardcode them here.
   ═══════════════════════════════════════════════════════════════════════════ */

.radial-marquee-section {
  --rm-rule: rgba(10, 10, 10, .12);

  overflow: hidden;
  padding-block: clamp(var(--sp-8), 5vw, var(--sp-16));
}

.radial-marquee-section .section-header {
  margin-bottom: var(--sp-8);
}

/* ── Visible strip ─────────────────────────────────────────────────────────────
   The ring is far taller and wider than the viewport. The strip is what the arc
   is worth in layout — the crown plus the cards on either shoulder — but it does
   not clip: a card entering or leaving the arc should run off the side of the
   screen intact, the way it does on the reference, not dissolve into a gradient
   on its way out. The section is what clips, and its edge is far enough down
   that only the last off-screen sliver ever meets it. */
.radial-marquee-row {
  position: relative;
  width: 100%;
  height: var(--rm-band);
  pointer-events: none;                     /* only the cards take the pointer */
}

.radial-marquee {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rm-circle);
  transform: translateX(-50%);
}

.radial-marquee__half-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

/* The SVG's arc is centred on the bottom edge of its own box, so pinning that
   edge to the ring's centre line — which is exactly the foot of the half-circle
   — lines the two arcs up whatever width the deco is given. --rm-deco-d then
   places the ticks: at the card-centre radius they run through the middle of
   the list and only show in the gaps between cards. */
.radial-marquee__deco {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--rm-deco-d);
  height: auto;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}

.radial-marquee__circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  /* Where slot 0 starts. The lower arc uses it to stagger itself against the
     upper one, so the two are not a straight mirror of each other. */
  transform: rotate(var(--rm-offset, 0deg));
}

.radial-marquee__collection,
.radial-marquee__list {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.radial-marquee__list {
  animation: rm-rotate var(--rm-duration) linear infinite;
}

[data-rm-dir="ccw"] .radial-marquee__list {
  animation-direction: reverse;
}

@keyframes rm-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── One slot ─────────────────────────────────────────────────────────────────
   top/left 50% puts the item's box at the centre of the ring; the first
   translate re-centres it on that point, the rotate turns the whole coordinate
   frame to the slot's angle, and the last translate pushes the card out along
   it. Because the rotation happens before the push, the card arrives already
   tangent to the rim — which is what gives the arc its tilt.                  */
.radial-marquee__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rm-card-w);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * var(--rm-step)))
    translateY(calc(var(--rm-radius) * -1));
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.radial-marquee__card {
  display: block;
  padding: var(--rm-pad);
  background: var(--c-bg-dark);
  border: 1px solid var(--c-border-mid);
  border-radius: calc(var(--rm-pad) * 1.7);
  box-shadow: var(--shadow-lg);
  color: var(--c-text-white);
  text-decoration: none;
  pointer-events: auto;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

a.radial-marquee__card:hover,
a.radial-marquee__card:focus-visible {
  border-color: var(--c-text-white);
  box-shadow: var(--shadow-xl);
  transform: scale(1.03);
}

a.radial-marquee__card:focus-visible {
  outline: 2px solid var(--c-text-dark);
  outline-offset: 3px;
}

.radial-marquee__visual {
  position: relative;
  display: block;
  aspect-ratio: var(--rm-ratio);
  border-radius: calc(var(--rm-pad) * 1.1);
  overflow: hidden;
  background: var(--c-bg-mid);
}

.radial-marquee__img,
.radial-marquee__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The video is stacked over the poster image and only fades in once it is
   actually playing, so a card that never gets hovered — or whose file fails to
   load — still shows its image rather than a black rectangle. */
.radial-marquee__video {
  opacity: 0;
  transition: opacity var(--t-slow);
}

.radial-marquee__video[data-video-status="playing"] {
  opacity: 1;
}

.radial-marquee__caption {
  display: flex;
  align-items: center;
  height: var(--rm-cap);
  padding-inline: calc(var(--rm-pad) * .5);
  font-family: var(--ff-sans);
  font-size: clamp(11px, calc(var(--rm-u) * .95), 17px);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-text-white);
  white-space: nowrap;                      /* the slot height is fixed geometry */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Phones cannot have both a readable card and a tight arc — the unit bottoms
   out at its minimum, so the ring is proportionally much wider than the screen
   and its shoulders never descend far. Close the gap the arc does not use. */
@media (max-width: 640px) {
  .radial-marquee-row {
    height: calc(var(--rm-band) * .85);
  }
}

/* ── Lower arc ────────────────────────────────────────────────────────────────
   The same ring turned over: one scaleY on the ring makes the dome a bowl, and
   because a mirrored tangent arrangement is still tangent, the cards keep their
   lean without a second set of angles. Each card is flipped back, so only the
   arrangement is mirrored, never the artwork or the type.

   The ring anchors to the row's foot rather than its head — turning it over
   moves the crown to the bottom of its own box, and that is the edge which has
   to meet the visible strip. The fade moves with it. */
.radial-marquee-row--flip {
  -webkit-mask-image: linear-gradient(to top, #000 80%, transparent 100%);
          mask-image: linear-gradient(to top, #000 80%, transparent 100%);
}

.radial-marquee-row--flip .radial-marquee {
  top: auto;
  bottom: 0;
  transform: translateX(-50%) scaleY(-1);
}

.radial-marquee-row--flip .radial-marquee__card {
  transform: scaleY(-1);
}

.radial-marquee-row--flip a.radial-marquee__card:hover,
.radial-marquee-row--flip a.radial-marquee__card:focus-visible {
  transform: scaleY(-1) scale(1.03);
}

/* ── The block between the arcs ───────────────────────────────────────────────
   This is the middle of the lens, so it is set as one centred column: the
   statement, a quieter passage under it, then the closing line. It sits above
   both rings, and a soft radial wash behind it keeps the copy clear of the
   cards' faded tails where the arcs crowd in on narrow screens — a wash rather
   than a panel, because a rectangle would cut across a composition that is
   nothing but curves. */
.radial-marquee__mid {
  position: relative;
  z-index: 2;
  padding-block: clamp(var(--sp-6), 3vw, var(--sp-12));
  text-align: center;
}

.radial-marquee__mid::before {
  content: '';
  position: absolute;
  inset: -8% -4%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              var(--c-bg) 0%, var(--c-bg) 44%, transparent 76%);
}

.radial-marquee__statement {
  /* The measure comes down as the type goes up: at the quote step this block
     sits at the top of the slot, where the arcs' outermost cards are still
     reaching in from both sides. Much past this and it runs under them. */
  max-width: 25ch;
  margin-inline: auto;
  font-size: var(--fs-quote);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--c-text-dark);
  text-wrap: balance;
}

.radial-marquee__body {
  max-width: 62ch;
  margin: clamp(var(--sp-5), 2vw, var(--sp-8)) auto 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-text-light);
}

/* ── Capability grid ──────────────────────────────────────────────────────────
   Four parallel offers, so they are set as a quadrant rather than a fifth
   centred paragraph — the block above is already three stacked centred texts,
   and a grid is what gives the eye somewhere to land. Only the inner rules are
   drawn: the cross reads as a reticle at the middle of the ring, where an outer
   border would box a composition made entirely of curves.

   The cells are left-aligned inside a centred block. That is deliberate — a
   ragged-right description is far easier to scan than a centred one, and the
   four flush edges are what make the quadrant read as a grid at all. */
.radial-marquee__caps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 62rem;
  margin: clamp(var(--sp-8), 3.5vw, var(--sp-12)) auto 0;
  padding-top: clamp(var(--sp-6), 2.5vw, var(--sp-10));
  list-style: none;
  text-align: left;
}

.radial-marquee__cap {
  padding: clamp(var(--sp-4), 1.6vw, var(--sp-8));
  border-right: 1px solid var(--rm-rule);
  border-bottom: 1px solid var(--rm-rule);
}

/* Strip the rules that would otherwise draw an outer box. The last-row test
   holds for any even number of cells; an odd count leaves one extra hairline,
   which is a fair trade for not hardcoding the count in the selector. */
.radial-marquee__cap:nth-child(2n) {
  border-right: 0;
}

.radial-marquee__cap:nth-last-child(-n+2) {
  border-bottom: 0;
}

/* An odd number of cells leaves the last one alone on its row — it spans the
   full width rather than sitting in column 1 with a rule down its right side,
   and it is then the only cell on the closing row, so it loses its bottom rule
   while the pair above it keeps theirs. */
.radial-marquee__cap:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
}

/* With an odd count the second-from-last cell is NOT on the closing row, so the
   blanket ":last two lose their bottom rule" above over-reaches by one and has
   to be undone. The :nth-child(even) test is what makes this fire only when the
   total is odd. */
.radial-marquee__cap:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--rm-rule); }

/* ── Five cells: 1 / 3 / 1 ────────────────────────────────────────────────────
   The quadrant's data source is the five engagement models, and five in two
   columns closes on a ragged 2 / 2 / 1. Three columns with the first and last
   cell spanning gives a banded 1 / 3 / 1 instead: the two ends read as
   statements and the middle three as a set.

   The count comes from PHP as data-cells, because a grid container cannot size
   its own columns from how many children it has. Any other count falls through
   to the two-column rules above.                                              */
.radial-marquee__caps[data-cells="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:first-child,
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:last-child {
  grid-column: 1 / -1;
  border-right: 0;
  /* A banded row stacks — name, then its line under it — and the pair sits
     centred on the row. These two are statements, not entries in the quadrant,
     so they answer to the centred block above them rather than to the four
     flush edges below. Both keep the stacked title spacing from the base cell. */
  text-align: center;
}

/* Centred, the line needs a measure of its own — left at 42ch flush-left it
   would sit off to one side of the row it is meant to be centred on. */
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:first-child .radial-marquee__cap-text,
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:last-child  .radial-marquee__cap-text {
  max-width: 62ch;
  margin-inline: auto;
}

/* Rules, row by row: the band closes under cell 1, the middle three are divided
   from each other, and the closing band draws nothing. */
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:nth-child(2),
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:nth-child(3) { border-right: 1px solid var(--rm-rule); }

.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:nth-child(4)  { border-right: 0; }
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:nth-child(-n+4) { border-bottom: 1px solid var(--rm-rule); }
.radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:last-child    { border-bottom: 0; }

/* The cell title links to its engagement model when the data carries a url. */
.radial-marquee__cap-link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size var(--t-base);
}

.radial-marquee__cap-link:hover,
.radial-marquee__cap-link:focus-visible { background-size: 100% 1.5px; }

@media (prefers-reduced-motion: reduce) {
  .radial-marquee__cap-link { transition: none; }
}

.radial-marquee__cap-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  color: var(--c-text-dark);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}

.radial-marquee__cap-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--c-text-light);
  max-width: 42ch;
}

/* One column below the two-column breakpoint: the vertical rule has nothing to
   divide, and the last cell loses its rule so the stack ends clean. */
@media (max-width: 719px) {
  /* One column, so the banded rows are no longer bands — they rejoin the
     left-aligned stack rather than staying centred among flush-left cells. */
  .radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:first-child,
  .radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:last-child {
    text-align: left;
  }

  .radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:first-child .radial-marquee__cap-text,
  .radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:last-child  .radial-marquee__cap-text {
    max-width: 42ch;
    margin-inline: 0;
  }

  .radial-marquee__caps,
  .radial-marquee__caps[data-cells="5"] {
    grid-template-columns: 1fr;
  }

  .radial-marquee__cap,
  .radial-marquee__cap:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--rm-rule);
  }

  /* The 1 / 3 / 1 dividers are more specific than the reset above, so the two
     middle cells would keep a vertical rule with nothing left to divide. */
  .radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:nth-child(2),
  .radial-marquee__caps[data-cells="5"] > .radial-marquee__cap:nth-child(3) {
    border-right: 0;
  }

  .radial-marquee__cap:last-child {
    border-bottom: 0;
  }
}

/* ── Motion preferences ───────────────────────────────────────────────────────
   Stopped, not hidden: the arc is still a legible arrangement of cards when it
   is not turning, so reduced-motion keeps the visual and drops the movement.  */
@media (prefers-reduced-motion: reduce) {
  .radial-marquee__list {
    animation: none;
  }
  .radial-marquee__card,
  .radial-marquee__video {
    transition: none;
  }
}