/* =========================================================================
   CARITIO CASES — el dibujo del case (foto del case + personaje + LED).
   Lo usan las dos páginas: index.html (la grilla de los 8) y
   producto.html (la página de cada case). Si cambias algo aquí, cambia
   en las dos a la vez.
   ========================================================================= */

/* Colores del LED, sacados de una foto real de un case encendido.
   El verde de los AirPods es verde menta, no verde puro. */
:root {
  --led-verde-nucleo: #d9fff0;
  --led-verde-medio:  #93f1c5;
  --led-verde-halo:   #35d68e;

  --led-rojo-nucleo:  #fff0e6;
  --led-rojo-medio:   #ffb37a;
  --led-rojo-halo:    #ff6a2b;
}

/* El tile tiene que ser CLARO: es lo que hace que el "multiply" del
   personaje borre su fondo blanco y se funda con el plástico. */
.case-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--crema);
  overflow: hidden;
}

/* capa 1 — el case vacío */
.capa-case { position: absolute; inset: 0; padding: 5%; display: grid; place-items: center; }
.capa-case img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* capa 2 y 3 — el personaje y su luz, dentro de la misma caja */
.capa-arte { position: absolute; inset: 0; display: grid; place-items: center; }
.arte-caja { position: absolute; width: calc(var(--ancho-arte, 58) * 1%); }
.arte-img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.arte-respaldo { width: 100%; height: auto; display: block; }

/* ---- EL LED ----
   Mide 8% del ancho de la TARJETA. Como la caja del personaje mide
   --ancho-arte % de la tarjeta, el tamaño se calcula solo. */
.led {
  position: absolute;
  left: var(--ojo-x, 50%);
  top: var(--ojo-y, 50%);
  width: calc(8 / var(--ancho-arte, 58) * 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    var(--nucleo) 0%,
    var(--medio) 28%,
    color-mix(in srgb, var(--halo) 55%, transparent) 55%,
    transparent 78%
  );
  filter: blur(1.5px);
  mix-blend-mode: screen;

  /* ---- APAGADO: así se ve por defecto ---- */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.30);
  /* el brillo del hover tarda 400ms en irse cuando quitas el mouse */
  transition: filter 400ms var(--curva);
}

/* ---- ENCENDIDO: la chispa de 900ms y después respira para siempre ---- */
.encendido .led {
  animation:
    encender 900ms var(--curva) forwards,
    respirar 3s ease-in-out 900ms infinite;
}

@keyframes encender {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.30); }  /*   0ms  apagado   */
  22%  { opacity: 0.5;  transform: translate(-50%, -50%) scale(0.42); }  /* 200ms  puntito   */
  56%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }  /* 500ms  destello  */
  100% { opacity: 0.9;  transform: translate(-50%, -50%) scale(1); }     /* 900ms  se asienta*/
}

@keyframes respirar {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* Copia del personaje por encima del LED, para que el trazo negro del ojo
   no se pierda debajo del brillo. Se enciende con REPETIR_TRAZO. */
.arte-trazo {
  position: absolute; inset: 0;
  width: 100%; height: auto; display: block;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---- modo calibración: punto rojo exactamente en el ojo ---- */
.punto-ojo { display: none; }
body.debug-ojo .punto-ojo {
  display: block;
  position: absolute;
  left: var(--ojo-x, 50%);
  top: var(--ojo-y, 50%);
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: #ff0000;
  border-radius: 50%;
  z-index: 9;
  pointer-events: none;
}