[data-hidden="true"]{display:none}
.carousel-ring{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding-top:var(--stage-top-clearance, 22px);
  perspective:var(--ring-persp);
  z-index:2;
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  opacity:0;
  transform:translateY(10px) scale(.985);
}
.carousel-ring[data-active="true"]{
  opacity:1;
  transform:translateY(0) scale(1);
}
.carousel-track{
  list-style:none;
  margin:0;
  padding:0;
  width:min(1400px, 96vw);
  height:min(820px, 86vh);
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
  touch-action:pan-x pan-y;
  cursor:grab;
}
.carousel-track.is-dragging{cursor:grabbing}
.carousel-item{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--item);
  height:var(--item);
  margin-left:calc(var(--item) * -0.5);
  margin-top:calc(var(--item) * -0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.shape-butterfly{
  isolation:isolate;
  position:relative;
  width:100%;
  height:100%;
  transform:rotate(45deg);
  transform-style:preserve-3d;
  box-shadow:0 20px 60px var(--shadow);
  will-change:transform, filter, box-shadow;
  transition:transform .55s var(--ease), filter .35s var(--ease), box-shadow .55s var(--ease);
  cursor:pointer;
  overflow:visible;
}

/*
  Back-face fix:
  When a panel rotates away from the camera the text was visible mirrored.
  We hide the front-face layers on the back side and provide an opaque back panel.
*/
.shape-butterfly::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:0 54% 54% 54%;
  background:linear-gradient(135deg, rgba(138,28,28,.98), rgba(255,69,0,.96));
  border:1px solid rgba(243,229,209,.22);
  transform:rotateY(180deg);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  pointer-events:none;
  z-index:0;
}

/* Mobile layout rotates the ring around X, so flip the back-face accordingly. */
.carousel-track[data-axis="x"] .shape-butterfly::after{transform:rotateX(180deg)}
.shape-butterfly .wing,
.shape-butterfly .shine,
.shape-butterfly .content-rotator{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.shape-butterfly .wing,
.shape-butterfly .shine{z-index:1}
.shape-butterfly .content-rotator{z-index:2}
.shape-butterfly .wing{
  position:absolute;
  inset:0;
  border-radius:0 54% 54% 54%;
  background:linear-gradient(135deg, rgba(138,28,28,1), rgba(255,69,0,1));
  border:1px solid rgba(243,229,209,.28);
  pointer-events:none;
}
.shape-butterfly .wing-l{
  transform:translateX(-32%) scale(.92);
  transform-origin:center;
}
.shape-butterfly .wing-r{
  transform:translateX(32%) scale(.92) scaleX(-1);
  transform-origin:center;
}
.shape-butterfly .shine{
  position:absolute;
  inset:-1px;
  background:radial-gradient(420px 390px at 35% 25%, rgba(243,229,209,.52), transparent 60%), radial-gradient(560px 460px at 70% 78%, rgba(254,204,157,.35), transparent 62%);
  opacity:.32;
  pointer-events:none;
  mix-blend-mode:normal;
}
@media (prefers-color-scheme: dark){
  .shape-butterfly .shine{mix-blend-mode:normal; opacity:.34}
}

.carousel-item .content-rotator{transform:rotate(-45deg);text-align:center;padding:var(--item-pad);width:86%;max-width:320px;margin:0 auto;color:var(--c-pearl);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.carousel-item h2{margin:0;font-size:clamp(24px,2.2vw,34px);font-weight:700;font-style:italic;letter-spacing:.6px;line-height:1.05;font-variant-ligatures:discretionary-ligatures}
.carousel-item p{margin:10px 0 0;font-size:clamp(14px,1.35vw,18px);font-weight:500;opacity:.92;line-height:1.18;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carousel-item .marker{width:10px;height:10px;border-radius:999px;background:rgba(243,229,209,.86);margin:14px auto 0;box-shadow:0 0 0 8px rgba(243,229,209,.14)}
.carousel-item[data-front="true"] .shape-butterfly{
  isolation:isolate;
  filter:saturate(1.04) contrast(1.03);
  box-shadow:0 28px 78px var(--shadow-strong);
}
.carousel-item[data-front="true"] .shape-butterfly,
.carousel-item:focus-visible .shape-butterfly,
.carousel-item:hover .shape-butterfly{
  isolation:isolate;
  border-radius:12px 52% 12px 52%;
  transform:rotate(45deg) scale(var(--focus-scale));
}
.carousel-item:focus-visible{outline:none}
.carousel-item:focus-visible .shape-butterfly{outline:3px solid rgba(255,69,0,.36); outline-offset:6px}
.carousel-item[data-disabled="true"]{pointer-events:none; opacity:.75}
.carousel-track[data-axis="y"]{height:min(720px, 82vh)}
.carousel-track[data-axis="x"]{height:min(820px, 86vh)}
.carousel-track[data-axis="x"] .carousel-item h2{margin:0;font-size:clamp(24px,2.2vw,34px);font-weight:700;font-style:italic;letter-spacing:.6px;line-height:1.05;font-variant-ligatures:discretionary-ligatures}
.carousel-track[data-axis="x"] .shape-butterfly{transform:rotate(-45deg)}
.carousel-track[data-axis="x"] .carousel-item .content-rotator{transform:rotate(45deg)}
@media (prefers-reduced-motion: reduce){
  .carousel-ring{transition:opacity .2s linear}
  .carousel-track{transition:none}
  .shape-butterfly{transition:filter .2s linear, box-shadow .2s linear}
}
/* --- 15% font bump for orbit panel labels --- */
.carousel-item h2{
  font-size:clamp(28px, 2.5vw, 40px);
}
.carousel-item p{
  font-size:clamp(16px, 1.35vw, 20px);
}


/* Show orbit panel labels only when a panel is front-facing. */
.carousel-item .content-rotator{
  opacity:0;
  visibility:hidden;
  transition:opacity .22s var(--ease), visibility .22s var(--ease);
}
.carousel-item[data-front="true"] .content-rotator{
  opacity:1;
  visibility:visible;
}
.carousel-item .content-rotator, .carousel-item .content-rotator *{pointer-events:none}