/*----------------------HOME HERO: REEL RING---------------------------------*/
/* A ring of clips revolving around a vertical axis, seen from above and
   rolled off the horizontal. Each panel is cut into vertical strips set one
   step further around the cylinder, so the media bends with the ring instead
   of reading as a flat-sided polygon. Pairs with /javascript/ring.js. */

.ring-hero {
  position: relative;
  z-index: 2;                /* the ring spills over the name below it */
  width: 100%;
  max-width: 100%;
  margin: 0;
  margin-top: 70px;
  /* clears the fixed nav-header */
  padding: clamp(78px, 9vh, 108px) 0 0;
  box-sizing: border-box;
  /* No clipping anywhere on this subtree. ring.js sizes the panels from the
     stage width (see `tw` in layout()), so the ring's widest apparent extent
     is roughly 0.7x the stage — it cannot reach the page edges and so cannot
     cause sideways scroll. Any overflow value other than `visible` here would
     cut the near rim off, because the camera sits above the ring plane and
     the near panels are meant to hang below the stage box. */
  overflow: visible;
}

/* the near rim of the ring hangs past the stage and over the name */
.ring-hero + .hero {
  padding-top: 0;
  margin-top: -150px;
}

.ring-stage {
  position: relative;
  width: 100%;
  /* shorter than the ring is tall, on purpose: the near panels drop below
     this box and overlap what follows */
  height: clamp(280px, 44vh, 440px);
  perspective: 1250px;
  perspective-origin: 50% 40%;
  overflow: visible;
  /* vertical panning stays with the page; horizontal belongs to the ring */
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ring-stage.is-dragging {
  cursor: grabbing;
}

.ring-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.ring-tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* One strip of a panel: its face, plus the rim that gives the pane thickness.
   This wrapper must stay preserve-3d and must never take opacity or a filter
   of its own — either would flatten it and lay the rim back down into the
   face. ring.js puts those on .ring-face and .ring-edge instead. */
.ring-strip {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
}

.ring-face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: visible;
}

/* The top edge of the pane, folded flat into the horizontal plane and running
   back from the face toward the ring's centre. The camera sits above the ring,
   so this is the only edge ever in view. Height is set by ring.js. */
.ring-edge {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  transform-origin: top center;
  transform: rotateX(-90deg);
  backface-visibility: visible;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(228, 236, 242, 0.72) 45%,
    rgba(176, 192, 205, 0.42) 100%
  );
}

@media (max-width: 760px) {
  .ring-hero {
    padding-top: 76px;
  }
  .ring-stage {
    height: clamp(190px, 30vh, 290px);
    perspective: 900px;
  }
  .ring-hero + .hero {
    margin-top: -30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ring-3d,
  .ring-strip {
    will-change: auto;
  }
}