/* ═══════════════════════════════════════════════════════════════════════════
   HAL — el lente. Componente compartido entre la landing y /become.
   Uso:  <span class="lens" style="--d:120px">…7 spans…</span>
   Todo en % del diámetro, así que escala de 20px a 600px sin tocar nada.
   Las curvas de reflexión están medidas sobre el arte original, no inventadas.
   ═══════════════════════════════════════════════════════════════════════════ */

.lens { --d: 120px; }

.lens {
  position: relative;
  width: var(--d);
  aspect-ratio: 1;
  border-radius: 50%;
  flex: none;
  /* sombra de apoyo: solo hacia abajo, para no ensuciar el campo negro */
  filter:
    drop-shadow(0 calc(var(--d) * 0.022) calc(var(--d) * 0.042) rgba(26, 20, 8, 0.22))
    drop-shadow(0 calc(var(--d) * 0.006) calc(var(--d) * 0.012) rgba(26, 20, 8, 0.20));
}
.lens > span {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.lens__rim,
.lens__groove,
.lens__barrel,
.lens__bloom,
.lens__iris { inset: 0; }

/* — 3a. ARO PULIDO  (0.906 → 1.000 R) -------------------------------------
   Tres anillos: filo interno, cuerpo y filo externo. Cada uno con su propia
   curva de reflexión — por eso el metal tiene dos brillos y no uno solo.    */
.lens__rim {
  --brush: repeating-conic-gradient(from 0deg,
      rgba(255, 255, 255, 0.020) 0deg 0.40deg,
      rgba(255, 255, 255, 0.000) 0.40deg 0.95deg,
      rgba(0, 0, 0, 0.024)       0.95deg 1.35deg,
      rgba(255, 255, 255, 0.000) 1.35deg 1.90deg);
  background:
    var(--brush),
    conic-gradient(from 0deg,
      #959490   0deg,
      #72716d  10deg,
      #575652  20deg,
      #464541  30deg,
      #3f3e3a  40deg,
      #3a3935  50deg,
      #363531  60deg,
      #33322e  70deg,
      #3a3935  80deg,
      #3b3a36  90deg,
      #3d3c38 100deg,
      #393834 110deg,
      #3f3e3a 120deg,
      #393834 130deg,
      #474642 140deg,
      #5c5b57 150deg,
      #787773 160deg,
      #73726e 170deg,
      #656460 180deg,
      #494844 190deg,
      #494844 200deg,
      #3e3d39 210deg,
      #373632 220deg,
      #3d3c38 230deg,
      #3b3a36 240deg,
      #3d3c38 250deg,
      #3a3935 260deg,
      #3d3c38 270deg,
      #454440 280deg,
      #454440 290deg,
      #4b4a46 300deg,
      #5a5955 310deg,
      #6c6b67 320deg,
      #878682 330deg,
      #9f9e9a 340deg,
      #a5a4a0 350deg,
      #959490 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 0 88%, #000 89% 100%);
  mask: radial-gradient(closest-side, #0000 0 88%, #000 89% 100%);
}

/* filo interno — el canto que mira al centro */
.lens__rim::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    var(--brush),
    conic-gradient(from 0deg,
      #989793   0deg,
      #878682  10deg,
      #5f5e5a  20deg,
      #504f4b  30deg,
      #41403c  40deg,
      #3d3c38  50deg,
      #33322e  60deg,
      #2f2e2a  70deg,
      #3b3a36  80deg,
      #3d3c38  90deg,
      #3d3c38 100deg,
      #3f3e3a 110deg,
      #3f3e3a 120deg,
      #3c3b37 130deg,
      #3f3e3a 140deg,
      #5d5c58 150deg,
      #777672 160deg,
      #706f6b 170deg,
      #676662 180deg,
      #54534f 190deg,
      #454440 200deg,
      #41403c 210deg,
      #393834 220deg,
      #3d3c38 230deg,
      #3b3a36 240deg,
      #3f3e3a 250deg,
      #3a3935 260deg,
      #41403c 270deg,
      #4b4a46 280deg,
      #454440 290deg,
      #52514d 300deg,
      #5c5b57 310deg,
      #6b6a66 320deg,
      #92918d 330deg,
      #9f9e9a 340deg,
      #c1c0bc 350deg,
      #989793 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 0 88.4%, #000 89.3% 92%, #0000 93%);
  mask: radial-gradient(closest-side, #0000 0 88.4%, #000 89.3% 92%, #0000 93%);
}

/* filo externo — el canto que mira afuera: el brillo más duro de toda la pieza */
.lens__rim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    var(--brush),
    conic-gradient(from 0deg,
      #b0afab   0deg,
      #8b8a86  10deg,
      #6d6c68  20deg,
      #464541  30deg,
      #44433f  40deg,
      #34332f  50deg,
      #2b2a26  60deg,
      #23221e  70deg,
      #171612  80deg,
      #100f0b  90deg,
      #706f6b 100deg,
      #63625e 110deg,
      #706f6b 120deg,
      #706f6b 130deg,
      #767571 140deg,
      #74736f 150deg,
      #797874 160deg,
      #74736f 170deg,
      #686763 180deg,
      #595854 190deg,
      #5b5a56 200deg,
      #494844 210deg,
      #4b4a46 220deg,
      #565551 230deg,
      #4d4c48 240deg,
      #4a4945 250deg,
      #4b4a46 260deg,
      #4d4c48 270deg,
      #8d8c88 280deg,
      #979692 290deg,
      #c9c8c4 300deg,
      #cecdc9 310deg,
      #d8d7d3 320deg,
      #dddcd8 330deg,
      #e9e8e4 340deg,
      #e5e4e0 350deg,
      #b0afab 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 0 96.4%, #000 97.2% 99.5%, #0000 100%);
  mask: radial-gradient(closest-side, #0000 0 96.4%, #000 97.2% 99.5%, #0000 100%);
}

/* — 3b. GARGANTA REBAJADA  (0.788 → 0.906 R) ------------------------------ */
.lens__groove {
  background:
    radial-gradient(closest-side,
      #010101 78%,
      #030303 83%,
      #040404 87%,
      #010101 90.5%),
    conic-gradient(from 0deg,
      rgba(255, 255, 255, 0.028)   0deg,
      rgba(255, 255, 255, 0.002)  70deg,
      rgba(255, 255, 255, 0.000) 110deg,
      rgba(255, 255, 255, 0.015) 150deg,
      rgba(255, 255, 255, 0.000) 215deg,
      rgba(255, 255, 255, 0.006) 300deg,
      rgba(255, 255, 255, 0.028) 350deg,
      rgba(255, 255, 255, 0.028) 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 0 75.5%, #000 77% 89.2%, #0000 90.1%);
  mask: radial-gradient(closest-side, #0000 0 75.5%, #000 77% 89.2%, #0000 90.1%);
}

/* — 3c. CUERPO DEL BISEL  (0.487 → 0.788 R) -------------------------------
   El cónico lleva los valores del borde EXTERNO del bisel; el radial negro
   lo apaga hacia adentro, que es como cae la luz en el original (−30%).    */
.lens__barrel {
  background:
    radial-gradient(closest-side,
      rgba(0, 0, 0, 0.28) 48%,
      rgba(0, 0, 0, 0.22) 55%,
      rgba(0, 0, 0, 0.14) 62%,
      rgba(0, 0, 0, 0.07) 69%,
      rgba(0, 0, 0, 0.02) 75%,
      rgba(0, 0, 0, 0.00) 78%,
      rgba(0, 0, 0, 0.40) 79%),
    conic-gradient(from 0deg,
      #3b3a36   0deg,
      #080703  10deg,
      #070602  20deg,
      #070602  30deg,
      #070602  40deg,
      #070602  50deg,
      #070602  60deg,
      #060501  70deg,
      #050400  80deg,
      #050400  90deg,
      #070602 100deg,
      #070602 110deg,
      #080703 120deg,
      #0a0905 130deg,
      #0b0a06 140deg,
      #0c0b07 150deg,
      #0c0b07 160deg,
      #0b0a06 170deg,
      #0b0a06 180deg,
      #0a0905 190deg,
      #090804 200deg,
      #090804 210deg,
      #090804 220deg,
      #0a0905 230deg,
      #090804 240deg,
      #090804 250deg,
      #070602 260deg,
      #080703 270deg,
      #070602 280deg,
      #191814 290deg,
      #363530 300deg,
      #474642 310deg,
      #504f4b 320deg,
      #53524e 330deg,
      #51504c 340deg,
      #454440 350deg,
      #3b3a36 360deg);
  -webkit-mask: radial-gradient(closest-side, #0000 0 40%, #000 44% 78.4%, #0000 79.4%);
  mask: radial-gradient(closest-side, #0000 0 40%, #000 44% 78.4%, #0000 79.4%);
}

/* — 3d. VIDRIO  (0 → 0.489 R) ---------------------------------------------
   Casi plano: en el original el cristal mide 4–6 de luminancia en todo el
   disco. Sólo un velo de reflexión arriba-izquierda y el labio superior.   */
.lens__glass {
  inset: calc(var(--d) * 0.2555);
  background:
    radial-gradient(140% 140% at 26% 20%,
      rgba(255, 255, 255, 0.020) 0%,
      rgba(255, 255, 255, 0.007) 38%,
      rgba(255, 255, 255, 0) 64%),
    #050505;
  box-shadow:
    inset 0 calc(var(--d) * 0.003) calc(var(--d) * 0.005) rgba(255, 255, 255, 0.035),
    inset 0 calc(var(--d) * -0.002) calc(var(--d) * 0.006) rgba(255, 255, 255, 0.015);
}

/* — 3e. Bloom del iris ----------------------------------------------------- */
.lens__bloom {
  background: radial-gradient(closest-side,
      rgba(255, 40, 34, 0.22) 0%,
      rgba(230, 8, 16, 0.13) 22%,
      rgba(190, 4, 12, 0.05) 30%,
      rgba(140, 2, 8, 0.014) 37%,
      rgba(0, 0, 0, 0) 46%);
  filter: blur(calc(var(--d) * 0.018));
  mix-blend-mode: screen;
}

/* — 3f. Iris  (perfil radial medido) --------------------------------------- */
.lens__iris {
  background: radial-gradient(closest-side,
      #e9050e 0%,
      #e7040e 6%,
      #e2040d 10%,
      #d5040c 14%,
      #ce040c 16%,
      #c5030b 18%,
      #b40309 22%,
      #ad0309 24%,
      #a40308 26%,
      #9a0208 28%,
      #870206 30%,
      #470304 32%,
      #2d0404 34%,
      rgba(25, 4, 4, 0.92) 36%,
      rgba(15, 4, 3, 0.70) 38%,
      rgba(10, 4, 3, 0.45) 40%,
      rgba(8, 4, 4, 0.20) 42.5%,
      rgba(6, 4, 4, 0) 45%);
}

/* — 3g. Punto caliente ----------------------------------------------------- */
.lens .lens__spark {
  left: 40.25%;
  top: 41.75%;
  width: 6.4%;
  height: 6.4%;
  background: radial-gradient(circle,
      #fff 0%,
      #fff 44%,
      rgba(255, 253, 251, 0.95) 56%,
      rgba(255, 220, 214, 0.45) 68%,
      rgba(255, 145, 134, 0.15) 84%,
      rgba(255, 90, 80, 0) 100%);
  box-shadow: 0 0 calc(var(--d) * 0.018) rgba(255, 176, 166, 0.32);
}

/* — 3h. Latido opcional (quitá este bloque si lo querés 100% estático) ----- */
@media (prefers-reduced-motion: no-preference) {
.lens__bloom { animation: lens-breathe 6.5s ease-in-out infinite; }
.lens__iris  { animation: lens-breathe-iris 6.5s ease-in-out infinite; }
}
@keyframes lens-breathe {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.035); }
}
@keyframes lens-breathe-iris {
  0%, 100% { opacity: 0.97; }
  50%      { opacity: 1; }
}