/* Ring carousel geometry.

   document-orbit.js computes, per item: --orbit-x (horizontal offset on the ring), --orbit-z (depth,
   0 at the front), --orbit-turn (yaw), --orbit-scale, and an inline opacity and z-index. These rules
   consume them. The layout is deliberately in the stylesheet and the numbers are in JS, so the
   geometry can be tuned here without touching the component.

   The stage keeps its own perspective and hides overflow, so cards on the far side of the ring are
   clipped rather than escaping the section. */
.document-ring {
  margin: 12px 0 26px;
}

.document-ring[hidden] {
  display: none;
}

.document-ring .orbit-stage {
  position: relative;
  /* taller than the previous flat arc: the ring needs room for the near card to grow and for depth
     to read as depth */
  height: 340px;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  isolation: isolate;
}

.document-ring .orbit-stage:active {
  cursor: grabbing;
}

/* The group carries only the SCROLL-DRIVEN rotation, so it never fights the drag: dragging turns the
   ring by rewriting each card's slot, while this turns the whole assembly with scroll position. Two
   separate inputs onto two separate things, which is why they cannot corrupt each other's state.

   Each card still carries its own x/z from the ring maths, which keeps the paint order explicit
   through z-index instead of leaving it to transform sorting. */
.document-ring .orbit-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Scroll-driven rotation, declared only where timelines exist. The angle is deliberately small
   (±14deg): the ring already has an interactive rotation, and a large scroll-driven sweep would make
   the drag feel like it is fighting something.

   The timeline is the DOCUMENT scroller, not the element's own view() range. A view() timeline needs
   the element to travel through the viewport, and this ring sits near the top of a route that is only
   about one screen tall — measured, its view() progress sat at 0.5 for every scroll position and the
   rotation never moved. Keyed to the scroller's whole range it advances with the page, and reports
   that nothing moves only when there is genuinely nothing to scroll. */
@supports (animation-timeline: scroll()) {
  .document-ring .orbit-ring {
    animation-name: ring-scroll-turn;
    animation-duration: 1ms; /* overridden by the timeline; required for the animation to attach */
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
    animation-range: 0% 100%;
  }

  @keyframes ring-scroll-turn {
    from {
      rotate: y 14deg;
    }
    to {
      rotate: y -14deg;
    }
  }
}

/* Reduced motion and quiet mode: the ring holds its angle. Stated explicitly because a timeline that
   never advances would otherwise pin it to the `from` angle rather than the resting one. */
html[data-motion='quiet'] .document-ring .orbit-ring {
  animation: none;
  rotate: none;
}

@media (prefers-reduced-motion: reduce) {
  .document-ring .orbit-ring {
    animation: none;
    rotate: none;
  }
}

.document-ring .orbit-document {
  position: absolute;
  left: 50%;
  /* centred vertically in the stage rather than pinned to the top, so the near card is not clipped
     by the stage's own top edge as it grows */
  top: 50%;
  width: 190px;
  height: 250px;
  margin-left: -95px;
  margin-top: -125px;
  padding: 22px 18px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 2px 10px 10px 2px;
  color: var(--ink);
  /* A solid ground, not glass. These cards carry the text the visitor came to read, and on the
     semi-transparent fill the report titles were washing out against the scene illustration behind
     the library page. */
  background: var(--surface);
  box-shadow: 0 14px 30px rgb(58 47 61 / 16%);
  overflow: hidden;
  cursor: pointer;
  transform:
    translateX(var(--orbit-x, 0))
    translateZ(var(--orbit-z, 0))
    rotateY(var(--orbit-turn, 0deg))
    scale(var(--orbit-scale, 1));
  /* transform-origin at the spine of the card so the yaw swings it around its edge, like a book */
  transform-origin: 8% 50%;
  transition: box-shadow 240ms ease;
  will-change: transform, opacity;
}

.document-ring .orbit-document:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* The gilt rule along the bottom edge, kept from the previous component. */
.document-ring .orbit-document::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent-2) 50%, transparent);
}

.document-ring .orbit-document small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.document-ring .orbit-document strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font: 600 18px/1.5 var(--serif);
  margin: 12px 0;
  overflow-wrap: anywhere;
}

.document-ring .orbit-document p {
  font-size: 11px;
  line-height: 1.8;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

.document-ring .orbit-document strong,
.document-ring .orbit-document p,
.document-ring .orbit-document small {
  position: relative;
  z-index: 1;
  backface-visibility: visible;
}

.document-ring .orbit-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.document-ring .orbit-controls button {
  min-width: 44px;
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.document-ring .orbit-controls button:hover {
  background: var(--surface-soft);
}

/* Quiet mode and reduced motion: the ring is still navigable but does not animate its settle, and
   the drag stays functional because it is input, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .document-ring .orbit-document {
    transition: none;
  }
}

/* View switch shared by the pages that offer both a list and the ring. */
.self-view-switch,
.history-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  margin: 8px 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.self-view-switch button,
.history-view-switch button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.self-view-switch button[aria-pressed='true'],
.history-view-switch button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--paper);
}

@media (max-width: 760px) {
  .document-ring .orbit-stage {
    height: 300px;
    perspective: 900px;
  }

  .document-ring .orbit-document {
    width: 158px;
    height: 216px;
    margin-left: -79px;
    margin-top: -108px;
    padding: 18px 14px;
  }

  .document-ring .orbit-document strong {
    font-size: 16px;
  }
}

/* The personal page's ring. Its section carries id="self-ring" (the component inserts before the
   anchor, so the host div is a sibling rather than the container), which is why this is keyed on the
   id and not on a class shared with the library's ring. */
#self-ring {
  margin: 18px 0 22px;
}

#self-ring .orbit-stage {
  height: 320px;
}