/* ================================================================
   Bola de bingo interactiva del hero — módulo independiente
   Se usa junto con assets/bingo-ball.js
   Los transforms los controla GSAP desde el JS.
   ================================================================ */

.bola-hero {
  /* Un único tamaño de referencia: la bola y su sombra salen de aquí,
     así la sombra siempre queda pegada al punto de apoyo. */
  --bola: clamp(176px, 24vw, 320px);
  --sombra-alto: calc(var(--bola) * 0.13);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* mucho espacio alrededor de la bola */
  min-height: clamp(280px, 42vw, 460px);
  padding: clamp(1rem, 4vw, 3rem);
}

.bola-hero__body {
  position: relative;
  z-index: 2;
  display: block;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

/* foco de teclado: anillo morado de marca alrededor de la bola */
.bola-hero__body:focus-visible {
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px #33206a;
}

.bola-hero__img {
  position: relative;
  display: block;
  width: var(--bola);
  height: auto;
  max-width: 100%;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}

/* luz fija encima de la bola: no gira con ella, así parece que la bola
   rueda bajo una lámpara y no que da vueltas una foto */
.bola-hero__light {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 50% 50%, rgba(31, 19, 64, 0) 58%, rgba(31, 19, 64, 0.22) 100%);
}

/* Sombra de contacto: su centro cae justo en el borde inferior de la bola
   (la bola está centrada en la zona, así que su base está en 50% + radio),
   de modo que al aterrizar la bola la pisa en vez de flotar sobre ella. */
.bola-hero__shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% + var(--bola) / 2 - var(--sombra-alto) * 0.62);
  width: calc(var(--bola) * 0.84);
  height: var(--sombra-alto);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(31, 19, 64, 0.5), rgba(31, 19, 64, 0) 70%);
  filter: blur(5px);
  opacity: 1;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Si el usuario reduce el movimiento, la bola queda estática. */
@media (prefers-reduced-motion: reduce) {
  .bola-hero__body,
  .bola-hero__img { transform: none !important; }
}