/* ==========================================================================
   Der Ring — gläsernes Rund aus sechs Oberflächen
   Die Sektion ist hoch, der Inhalt klebt: dadurch wird das Scrollen
   zur Zeitachse der Choreografie.
   ========================================================================== */

.ring-sec {
  position: relative;
  height: 520vh;                 /* Scrollstrecke der Choreografie */
}

.ring-sec__inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-block: clamp(76px, 9vh, 120px) clamp(24px, 4vh, 48px);
}

/* ---------- Kopf ---------- */
.ring-head {
  position: relative;
  z-index: 5;
  text-align: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.ring-head .eyebrow { justify-content: center; }

.ring-head h2 {
  margin-top: 16px;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  text-wrap: balance;
}

.ring-head p {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  color: var(--ink-48);
  text-wrap: pretty;
}

/* ---------- Bühne ---------- */
.ring-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  perspective: 1700px;
  perspective-origin: 50% 50%;
}

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

/* Der gläserne Kern in der Mitte des Runds */
.ring-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(160px, 21vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 40;
  pointer-events: none;
  will-change: transform, opacity;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.96), rgba(255,255,255,.28) 36%, transparent 58%),
    conic-gradient(from 200deg,
      rgba(255,77,109,.55), rgba(255,138,61,.5), rgba(255,217,61,.48),
      rgba(61,220,151,.5),  rgba(56,189,248,.55), rgba(124,107,245,.55),
      rgba(232,121,249,.52), rgba(255,77,109,.55));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    inset 0 2px 24px rgba(255,255,255,.9),
    inset 0 -8px 30px rgba(255,255,255,.4),
    0 40px 110px -34px rgba(8,8,10,.34);
  filter: blur(1.5px) saturate(150%);
}

/* Zweiter, größerer Lichthof — gibt dem Kern Tiefe */
.ring-core::after {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 62%);
  filter: blur(24px);
}

/* ---------- Die Karten auf dem Rund ---------- */
.rcard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(230px, 27vw, 420px);
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* Glasrahmen mit Spektralkante */
.rcard .frame {
  border-radius: clamp(12px, 1.3vw, 18px);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    0 2px 6px rgba(8,8,10,.04),
    0 20px 44px -18px rgba(8,8,10,.22),
    0 70px 130px -50px rgba(8,8,10,.3);
}

.rcard::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: clamp(13px, 1.4vw, 19px);
  padding: 1px;
  background: var(--spectrum);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* Kante leuchtet nur bei den vorderen Karten auf */
  opacity: calc(var(--depth, 0) * 0.85);
  pointer-events: none;
  animation: spectrum-drift 9s linear infinite;
}

/* ---------- Fuß: Name der vordersten Oberfläche ---------- */
.ring-foot {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  width: 100%;
  pointer-events: none;
}

.ring-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 34px;
}

.ring-label__n {
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 680;
  letter-spacing: -0.03em;
}

.ring-label__t {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-32);
}

/* Beim Wechsel kurz hochschieben */
.ring-label.is-swap .ring-label__n,
.ring-label.is-swap .ring-label__t {
  animation: label-in .5s var(--e-out) both;
}
.ring-label.is-swap .ring-label__t { animation-delay: .05s; }

@keyframes label-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.ring-meter {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: .75rem;
  color: var(--ink-32);
  letter-spacing: .06em;
}

.ring-meter__bar {
  width: clamp(80px, 14vw, 190px);
  height: 2px;
  background: var(--ink-08);
  border-radius: 2px;
  overflow: hidden;
}

.ring-meter__bar i {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--spectrum);
  background-size: 200% 100%;
  animation: spectrum-drift 5s linear infinite;
}

/* ---------- Ruhiges Raster statt Ring:
   ohne JavaScript und wenn weniger Bewegung gewünscht ist ---------- */
.ring-sec.is-static,
html:not(.js) .ring-sec { height: auto; }
.ring-sec.is-static .ring-sec__inner,
html:not(.js) .ring-sec__inner {
  position: static;
  height: auto;
  overflow: visible;
}
.ring-sec.is-static .ring-stage,
html:not(.js) .ring-stage {
  perspective: none;
  min-height: 0;
  margin-top: 40px;
}
.ring-sec.is-static .ring,
html:not(.js) .ring {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}
/* Karten aus der 3D-Positionierung lösen, sonst liegen sie im Raster
   weiterhin absolut übereinander */
.ring-sec.is-static .rcard,
html:not(.js) .rcard {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  opacity: 1;
  transform: none;
  filter: none;
}
.ring-sec.is-static .rcard::after,
html:not(.js) .rcard::after { opacity: .5; }
.ring-sec.is-static .ring-core,
.ring-sec.is-static .ring-foot,
html:not(.js) .ring-core,
html:not(.js) .ring-foot { display: none; }

/* ---------- Kleinere Schirme ---------- */
@media (max-width: 860px) {
  .ring-sec { height: 460vh; }
  .ring-stage { perspective: 1100px; }
  .ring-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ring-meter { display: none; }
}