/* =========================================================
   orbit.css — revolving ring of cards
   Pairs with orbit.js, which builds the stage and the cards itself.
   You never write orbit markup, only mark the container and place
   the stage.

   Theme it by setting these on the container, or on :root:
     --orbit-size     card edge length      (default 149px)
     --orbit-radius   ring radius           (default 700px)
     --orbit-round    corner radius         (default 14px)
     --orbit-line     card border           (default a faint grey)
     --orbit-shadow   card shadow
     --orbit-fill     card face, behind or instead of an image
   ========================================================= */

.orbit-stage {
  position: absolute;
  /* Square, and exactly the ring's diameter, so the centre of the stage IS
     the centre of the ring. Position this box in your own stylesheet and the
     ring follows it; there is no separate centre to keep in sync. */
  width:  calc(var(--orbit-radius, 700px) * 2);
  height: calc(var(--orbit-radius, 700px) * 2);
  pointer-events: none;      /* only the cards take the pointer, not the box */
}

.orbit-tile {
  position: absolute;
  left: 0; top: 0;           /* orbit.js sets the real spot every frame */
  width:  var(--orbit-size, 149px);
  height: var(--orbit-size, 149px);
  border-radius: var(--orbit-round, 14px);
  border: 1px solid var(--orbit-line, rgba(15, 23, 32, 0.08));
  box-shadow: var(--orbit-shadow, 0 10px 24px rgba(15, 23, 32, 0.14));
  /* Colour and image are set separately, NOT through the `background`
     shorthand. orbit.js writes `background-image` inline when you pass images,
     and the shorthand would take the fallback colour down with the gradient,
     leaving a see-through card whenever a photo 404s or the network drops. */
  background-color: var(--orbit-blank, #EAF1F8);
  background-image: var(--orbit-fill, linear-gradient(140deg, #F7FAFD 4%, #E4EDF6 96%));
  background-size: cover;
  background-position: center;
  opacity: 0;                /* orbit.js owns opacity from here */
  pointer-events: auto;      /* so hovering a card can stop the ring */
  cursor: pointer;
  will-change: transform, opacity;
}

/* A ring wider than the screen is the normal case, not an edge case: the
   design shows an arc, and the arc is the top of a circle that runs off both
   sides. Shrink the whole thing rather than letting it dictate page width. */
@media (max-width: 1100px) {
  .orbit-stage { --orbit-radius: 540px; --orbit-size: 118px; }
}
@media (max-width: 760px) {
  .orbit-stage { --orbit-radius: 400px; --orbit-size: 92px; }
}

/* Someone who asked for less motion gets the ring standing still, not the
   ring removed. It is content here, not decoration. orbit.js already skips
   the fill and the lap in that case; this is the belt to that brace. */
@media (prefers-reduced-motion: reduce) {
  .orbit-tile { transition: none !important; }
}