/* Design wheel and entrance/exit animations, shared by every design.
   Each design only redefines the --r-* variables to dress it in its style.
   The wheel floats at the same spot (bottom centre) on every page, so it is
   always found in the same place and never scrolls out of reach. */

/* Room under the last content so the floating wheel never hides it, and so a
   focused element is scrolled clear of it instead of behind it. */
:root { --rueda-hueco: 88px; scroll-padding-bottom: var(--rueda-hueco); }
body:has(> .rueda) { padding-bottom: var(--rueda-hueco); }

.rueda {
  --r-bg: #ffffff;
  --r-fg: #111111;
  --r-muted: #8a8a8a;
  --r-acc: #d9480f;
  --r-line: #dddddd;
  --r-border: 1px;
  --r-radius: 12px;
  --r-shadow: 0 10px 30px -12px rgb(0 0 0 / .45);
  --r-font: ui-monospace, monospace;
  --r-size: 12px;
  --r-btn-bg: var(--r-fg);
  --r-btn-fg: var(--r-bg);
  --r-btn-radius: 8px;
  --r-btn-border: 0px;

  /* Above the designs' own layers (stars' HUD sits at 5000), below the record transition. */
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 6000;
  width: min(460px, calc(100% - 32px));
  margin: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--r-bg);
  border: var(--r-border) solid var(--r-line);
  border-radius: var(--r-radius);
  box-shadow: var(--r-shadow);
  color: var(--r-fg);
  font-family: var(--r-font);
}

.rueda__flecha {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: var(--r-btn-border) solid var(--r-fg);
  border-radius: var(--r-btn-radius);
  background: var(--r-btn-bg);
  color: var(--r-btn-fg);
  cursor: pointer;
  transition: transform .15s;
}
.rueda__flecha:active,
.rueda__flecha.pulsada { transform: scale(.88); }
.rueda__flecha:focus-visible { outline: 2px solid var(--r-acc); outline-offset: 2px; }

.rueda__pista {
  position: relative;
  flex: 1;
  height: 40px;
  perspective: 700px;
  overflow: hidden;
  /* The ends fade out: it suggests the wheel keeps going around the back. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.rueda__item {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 7px 12px;
  font-size: var(--r-size);
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--r-muted);
  border-radius: 6px;
  will-change: transform, opacity;
}
.rueda__item:hover { color: var(--r-fg); }
.rueda__item.actual {
  color: var(--r-fg);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--r-acc);
}
.rueda__item:focus-visible { outline: 2px solid var(--r-acc); }

/* ---------- Cascading entrance ---------- */
/* rueda.js marks the children of each [data-cascada] and gives them --orden to stagger them.
   "backwards" (not "both") so it doesn't override :hover transforms once it ends. */
.sube {
  animation: sube .8s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(var(--orden, 0) * 70ms + 100ms);
}
@keyframes sube {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sube { animation: none; }
}

@media print {
  .rueda { display: none; }
  body:has(> .rueda) { padding-bottom: 0; }
}