/* ============================================================
   Listo247 — Animaciones (tarea 03)
   Estilos CSS de las animaciones/componentes interactivos.
   La lógica (canvas, observers) está en /js/animations.js.
   Regla de oro: todo respeta prefers-reduced-motion y no bloquea LCP.
   ============================================================ */

/* ---- Capas de canvas para fondo/overlay (light rays, click spark) ---- */
.fx-rays{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.5;
}
.fx-spark{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:9999;
}

/* ============================================================
   Reveal on scroll (opacity + translate). La clase la añade el JS;
   sin JS el contenido se ve igual (no se oculta nunca por CSS solo).
   ============================================================ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-reveal-delay="1"]{transition-delay:.08s}
.reveal[data-reveal-delay="2"]{transition-delay:.16s}
.reveal[data-reveal-delay="3"]{transition-delay:.24s}

/* Parallax suave (solo transform, lo mueve el JS con --parallax) */
.parallax{will-change:transform;transform:translate3d(0,var(--parallax,0),0)}

/* ============================================================
   Neo toggle  ·  "Sin Listo247 / Con Listo247"
   ============================================================ */
.neo-toggle{display:inline-flex;align-items:center;gap:14px;font-weight:700;color:var(--muted)}
.neo-toggle__label{transition:color .2s ease}
.neo-toggle__label--on{color:var(--ink)}
.neo-toggle input{position:absolute;opacity:0;width:0;height:0}
.neo-toggle__track{
  position:relative;width:64px;height:34px;border-radius:100px;
  background:var(--line);border:1px solid var(--line);cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.neo-toggle__thumb{
  position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(15,27,45,.25);
  transition:transform .28s cubic-bezier(.4,1.3,.6,1);
}
.neo-toggle input:checked + .neo-toggle__track{background:var(--primary);border-color:var(--primary)}
.neo-toggle input:checked + .neo-toggle__track .neo-toggle__thumb{transform:translateX(30px)}
.neo-toggle input:focus-visible + .neo-toggle__track{outline:2px solid var(--primary);outline-offset:2px}

/* ============================================================
   Plus button  ·  expand FAQ (la cruz gira a "x" al abrir)
   ============================================================ */
.plus-btn{
  --sz:22px;position:relative;width:40px;height:40px;flex:0 0 auto;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;transition:background .2s ease,border-color .2s ease;
}
.plus-btn::before,.plus-btn::after{
  content:"";position:absolute;background:var(--primary-deep);border-radius:2px;
  transition:transform .3s cubic-bezier(.4,1.2,.5,1),opacity .3s ease;
}
.plus-btn::before{width:var(--sz);height:2px}
.plus-btn::after{width:2px;height:var(--sz)}
[aria-expanded="true"] > .plus-btn,
.plus-btn[aria-expanded="true"]{background:var(--primary-soft);border-color:var(--primary-soft)}
[aria-expanded="true"] > .plus-btn::after,
.plus-btn[aria-expanded="true"]::after{transform:rotate(90deg);opacity:0}
[aria-expanded="true"] > .plus-btn::before,
.plus-btn[aria-expanded="true"]::before{transform:rotate(180deg)}

/* ============================================================
   Flywheel de canales (rueda SVG; clínica al centro, satélites alrededor)
   ============================================================ */
.flywheel{position:relative;width:min(440px,86vw);aspect-ratio:1;margin-inline:auto}
.flywheel__ring{
  position:absolute;inset:0;border-radius:50%;
  animation:fly-spin 36s linear infinite;
}
.flywheel:hover .flywheel__ring,
.flywheel:focus-within .flywheel__ring,
.flywheel.is-paused .flywheel__ring,
.flywheel.is-paused .flywheel__node-inner{animation-play-state:paused}
@keyframes fly-spin{to{transform:rotate(360deg)}}

.flywheel__hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  font-family:var(--font-head);font-weight:800;font-size:clamp(.85rem,2.6vw,1.05rem);
  color:var(--ink);padding:8px;z-index:2;
}

/* Cada satélite se coloca con --angle y se mantiene en pie (contra-rotación) */
.flywheel__node{
  position:absolute;top:50%;left:50%;width:18%;aspect-ratio:1;
  transform:rotate(var(--angle)) translate(0,-150%) rotate(calc(-1 * var(--angle)));
  margin:-9% 0 0 -9%;
}
.flywheel__node-inner{
  width:100%;height:100%;border-radius:16px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  color:var(--primary-deep);cursor:pointer;
  animation:fly-counter 36s linear infinite;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.flywheel:hover .flywheel__node-inner,
.flywheel:focus-within .flywheel__node-inner{animation-play-state:paused}
.flywheel__node-inner:hover,
.flywheel__node-inner[aria-pressed="true"]{
  background:var(--primary);color:#fff;border-color:var(--primary);transform:scale(1.08);
}
.flywheel__node-inner svg{width:46%;height:46%}
@keyframes fly-counter{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

/* Fallback estático (lista) — visible cuando .flywheel tiene [data-static] */
.flywheel-fallback{display:none}

@media (prefers-reduced-motion:reduce){
  .flywheel__ring,.flywheel__node-inner{animation:none !important}
}

/* En pantallas muy pequeñas, simplificamos la órbita */
@media(max-width:480px){
  .flywheel__hub{font-size:.8rem}
}