/* Jai Five — januquiá fija, sevivón 3D y chispas. Ver ../ARQUITECTURA.md §4 y §7.
   Solo tokens de tokens.css; solo transform y opacity en lo que se mueve. */

/* ============================================================
   Januquiá fija (la monta js/menorah.js)
   ============================================================ */
.menorah {
  position: fixed;
  left: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 150px;
  z-index: var(--z-menorah);
  padding: 10px 6px 6px;
  border-radius: var(--r-card);
  background: rgb(var(--rgb-noche) / .55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sh-hair), var(--sh-top), var(--sh-soft);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.menorah:empty { display: none; }
.menorah.lista { opacity: 1; transform: translateY(0); }
/* Con el carrito abierto, se retira */
html[data-cart-open] .menorah { opacity: 0; transform: translateY(14px); pointer-events: none; }

.menorah-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Base en línea fina */
.menorah-base path { fill: none; stroke: rgb(var(--rgb-blanco) / .55); stroke-width: 1; stroke-linecap: round; }
.menorah-base .base-brazo { stroke: rgb(var(--rgb-blanco) / .28); stroke-width: .8; }
.menorah-base .base-pie { stroke: rgb(var(--rgb-oro) / .7); }

/* Velas */
.vela .copa { fill: rgb(var(--rgb-noche) / .9); stroke: rgb(var(--rgb-blanco) / .6); stroke-width: .9; }
.vela .cuerpo { stroke: rgb(var(--rgb-blanco) / .52); stroke-width: 1.4; stroke-linecap: round; transition: stroke var(--d-slow) var(--ease-out); }
.vela .mecha { stroke: rgb(var(--rgb-blanco) / .4); stroke-width: .9; stroke-linecap: round; }
.vela .marca { fill: var(--c-oro); opacity: 0; transition: opacity var(--d-fast) var(--ease-out); }
.vela.actual .marca { opacity: 1; }
.vela.foco .cuerpo { stroke: rgb(var(--rgb-blanco) / .9); }
.vela.prendida .cuerpo { stroke: url(#mn-oro); }
.vela.prendida .copa { stroke: rgb(var(--rgb-oro) / .9); }
.vela.shamash .cuerpo { stroke-width: 1.8; }

/* Llama: entra con resorte desde la mecha; adentro, el fuego titila */
.vela .llama { transform: scale(0); transform-box: view-box; transition: transform var(--d-slow) var(--ease-spring); }
.vela.prendida .llama { transform: scale(1); }
.vela .fuego { transform-box: view-box; }
.vela.prendida .fuego { animation: titilar 2.3s var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * -.41s); }
.vela .halo { fill: var(--c-oro); opacity: 0; transition: opacity var(--d-cine) var(--ease-out); }
.vela.prendida .halo { opacity: .5; }
.vela .brillo { fill: var(--c-oro-claro); opacity: .75; }
.vela .nucleo { fill: #FFFBEA; opacity: .95; }

/* Botones de navegación superpuestos (uno por noche; el shamash no navega) */
.menorah-botones { position: absolute; inset: 10px 6px 6px; }   /* mismo padding que el host: calza con el SVG */
.menorah-boton {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--slot, 0) * 100% / 9);
  width: calc(100% / 9);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-fast) var(--ease-out);
}
.menorah-boton:active { transform: scale(.94); }
.menorah-boton:focus-visible { outline-offset: -2px; }

/* Tooltip con el título de la sección */
.menorah-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 7px 11px;
  border-radius: var(--r-badge);
  background: rgb(var(--rgb-noche) / .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--sh-hair), var(--sh-soft);
  color: var(--c-blanco);
  font-size: 11px;
  letter-spacing: .12em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(.96);
  transform-origin: 50% 100%;
  transition: opacity var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.menorah-tip.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (max-width: 759px) {
  .menorah {
    left: 50%;
    width: 128px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 14px);
  }
  .menorah.lista { transform: translate(-50%, 0); }
  html[data-cart-open] .menorah { transform: translate(-50%, 14px); }
}

/* ============================================================
   Chispas (canvas en la portada)
   ============================================================ */
.chispas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;   /* el canvas ya compone en modo "lighter"; sin blend-mode para no encarecer el celular */
}

/* ============================================================
   Sevivón 3D (lo construye motion.buildDreidel)
   ============================================================ */
.sevivon-escenario {
  display: grid;
  place-items: center;
  min-height: 220px;
  perspective: 900px;
  perspective-origin: 50% 35%;
}
.sevivon-chico { min-height: 140px; perspective: 600px; }

.sevivon {
  --size: 160px;
  --lado: calc(var(--size) / 2);          /* ancho de cada cara */
  --medio: calc(var(--size) / 4);         /* distancia del centro a la cara */
  --alto-cara: calc(var(--size) * .5);
  --alto-punta: calc(var(--size) * .3);
  --alto-mango: calc(var(--size) * .3);
  position: relative;
  width: var(--size);
  height: calc(var(--alto-mango) + var(--alto-cara) + var(--alto-punta) + 10px);
  transform-style: preserve-3d;
}
.sevivon-inclina { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-14deg); }
.sevivon-cuerpo { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.sevivon-giro { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

/* Mango: dos planos cruzados, como una varilla */
.sevivon-mango {
  position: absolute;
  left: 50%; top: 0;
  width: calc(var(--size) * .11);
  height: var(--alto-mango);
  transform: translateX(-50%);
  transform-style: preserve-3d;
}
.sevivon-mango i {
  position: absolute; inset: 0;
  background: var(--g-oro);
  box-shadow: var(--sh-hair);
  border-radius: 999px 999px 0 0;
}
.sevivon-mango i:nth-child(2) { transform: rotateY(90deg); }

/* Tapa: el cuadrado superior del cuerpo, acostado */
.sevivon-tapa {
  position: absolute;
  left: 50%; top: var(--alto-mango);
  width: var(--lado); height: var(--lado);
  margin-left: calc(var(--lado) / -2);
  transform-origin: 50% 50%;
  transform: translateY(calc(var(--lado) / -2)) rotateX(90deg);
  background: linear-gradient(135deg, #1B3F8E 0%, var(--c-tejelet) 100%);
  box-shadow: var(--sh-hair);
  backface-visibility: hidden;
}

/* Caras: 4 planos a 90° alrededor del eje */
.sevivon-caras {
  position: absolute;
  left: 50%; top: var(--alto-mango);
  width: var(--lado); height: var(--alto-cara);
  margin-left: calc(var(--lado) / -2);
  transform-style: preserve-3d;
}
.sevivon-cara {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(var(--medio));
  backface-visibility: hidden;
  background: var(--g-noche);
  box-shadow: var(--sh-hair), var(--sh-top);
  border-radius: 3px;
  overflow: hidden;
}
.sevivon-cara::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(var(--rgb-blanco) / .14) 0%, transparent 40%, rgb(var(--rgb-noche) / .35) 100%);
  pointer-events: none;
}
.sevivon-cara span {
  font-family: var(--f-heb);
  font-weight: 900;
  font-size: calc(var(--alto-cara) * .66);
  line-height: 1;
  background: var(--g-oro);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgb(var(--rgb-oro) / .35));
}

/* Punta: pirámide de 4 triángulos con bisagra en el borde inferior del cuerpo */
.sevivon-punta {
  --l: calc(var(--alto-punta) * 1.302);     /* altura inclinada = sqrt(h² + (lado/2)²) con h = .3·size, lado/2 = .25·size */
  position: absolute;
  left: 50%; top: calc(var(--alto-mango) + var(--alto-cara));
  width: var(--lado); height: var(--l);
  margin-left: calc(var(--lado) / -2);
  transform-style: preserve-3d;
}
.sevivon-punta i {
  position: absolute; inset: 0;
  transform-origin: 50% 0;
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(var(--medio)) rotateX(-39.8deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, var(--c-tejelet) 0%, var(--c-noche-2) 100%);
  backface-visibility: hidden;
}

/* Sombra en el piso */
.sevivon-sombra {
  position: absolute;
  left: 50%; bottom: -6px;
  width: calc(var(--size) * .55); height: calc(var(--size) * .12);
  margin-left: calc(var(--size) * -.275);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgb(var(--rgb-tinta) / .55) 0%, transparent 70%);
  opacity: .55;
  transform-origin: 50% 50%;
}

/* En reposo flota suave; girando, no (el cuerpo ya se mueve) */
.sevivon { animation: flotar 5s var(--ease-in-out) infinite; }
.sevivon.girando { animation: none; }
.sevivon[data-letra] { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .sevivon { animation: none; }
  .vela.prendida .fuego { animation: none; }
  .vela .llama { transition: transform 200ms var(--ease-out); }
  .menorah, .menorah-tip, .vela .cuerpo, .vela .halo { transition-duration: 200ms; }
}

/* ---- Ajuste de integración: un poco más compacta en escritorio ---- */
@media (min-width: 760px) { .menorah { width: 136px; } }