/* ═══════════════════════════════════════════════════════════════════════
   BELENTANI // OMEGA-NEXT — THICK REAL GLASS
   Capa aditiva sobre css/main.css. No sobrescribe reglas existentes:
   solo añade el sistema .glass-thick y el pulso de neón rojo.
   Canon: negro obsidiana + rojo sangre lacada (#ff003c). Local-first.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --glass-thick-bg: linear-gradient(150deg,
      rgba(255, 255, 255, .10) 0%,
      rgba(255, 255, 255, .03) 18%,
      rgba(12, 2, 6, .55) 55%,
      rgba(255, 0, 60, .06) 100%);
  --glass-thick-edge: rgba(255, 255, 255, .22);
  --glass-thick-edge-hot: rgba(255, 0, 60, .55);
  --glass-thick-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 -1px 0 rgba(0, 0, 0, .55) inset,
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 30px 90px rgba(0, 0, 0, .75),
    0 0 40px rgba(255, 0, 60, .18);
  --neon: #ff003c;
  --neon-soft: rgba(255, 0, 60, .55);
  --pulse: 2.6s;
}

/* ── Core: thick glass slab ─────────────────────────────────────────── */
.glass-thick {
  position: relative;
  isolation: isolate;
  background: var(--glass-thick-bg);
  backdrop-filter: blur(34px) saturate(185%) brightness(1.08);
  -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.08);
  border: 1px solid var(--glass-thick-edge);
  border-radius: 18px;
  box-shadow: var(--glass-thick-shadow);
  overflow: hidden;
  transition: box-shadow .5s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    transform .5s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

/* Refraction layer: displaces the backdrop so the glass bends what's behind it.
   Falls back silently to plain blur when the SVG filter is absent. */
@supports (backdrop-filter: url(#omega-refraction)) {
  .glass-thick.refract {
    backdrop-filter: blur(22px) saturate(190%) brightness(1.08) url(#omega-refraction);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.08);
  }
}

/* Specular highlight that follows the pointer (--mx/--my set by JS). */
.glass-thick::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(220px 160px at var(--mx, 30%) var(--my, 0%),
      rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 42%, transparent 68%),
    radial-gradient(140% 80% at 50% -20%, rgba(255, 255, 255, .12), transparent 60%);
  opacity: .9;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}

/* Beveled top edge + inner rim light. */
.glass-thick::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
      rgba(255, 255, 255, .55), rgba(255, 255, 255, .05) 30%,
      transparent 55%, rgba(255, 0, 60, .35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

.glass-thick:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .32) inset,
    0 -1px 0 rgba(0, 0, 0, .55) inset,
    0 0 0 1px rgba(255, 0, 60, .18) inset,
    0 36px 110px rgba(0, 0, 0, .8),
    0 0 60px rgba(255, 0, 60, .3);
}

/* ── Pulsing neon-red thick light ───────────────────────────────────── */
.glass-pulse {
  animation: omegaPulse var(--pulse) ease-in-out infinite;
}

@keyframes omegaPulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .26) inset,
      0 -1px 0 rgba(0, 0, 0, .55) inset,
      0 0 0 1px rgba(255, 255, 255, .06) inset,
      0 30px 90px rgba(0, 0, 0, .75),
      0 0 26px rgba(255, 0, 60, .18);
    border-color: var(--glass-thick-edge);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .34) inset,
      0 -1px 0 rgba(0, 0, 0, .55) inset,
      0 0 0 1px rgba(255, 0, 60, .22) inset,
      0 30px 90px rgba(0, 0, 0, .75),
      0 0 70px rgba(255, 0, 60, .55);
    border-color: var(--glass-thick-edge-hot);
  }
}

/* Traveling light sweep across the slab. */
.glass-thick.sheen::after {
  background: linear-gradient(160deg,
      rgba(255, 255, 255, .55), rgba(255, 255, 255, .05) 30%,
      transparent 55%, rgba(255, 0, 60, .35) 100%);
}
.glass-thick .sheen-band {
  position: absolute;
  top: -60%;
  left: -30%;
  width: 40%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg);
  animation: omegaSheen 7s linear infinite;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: screen;
}

@keyframes omegaSheen {
  0% { transform: translateX(-40%) skewX(-18deg); opacity: 0 }
  12% { opacity: .9 }
  60% { transform: translateX(320%) skewX(-18deg); opacity: 0 }
  100% { transform: translateX(320%) skewX(-18deg); opacity: 0 }
}

/* ── Volumetric thick-light beam (neon red) ─────────────────────────── */
.light-beam {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: 46%;
  height: 130%;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%,
      transparent 0deg, rgba(255, 0, 60, .16) 30deg,
      rgba(255, 0, 60, .28) 60deg, rgba(255, 0, 60, .16) 90deg, transparent 130deg);
  filter: blur(30px);
  opacity: .75;
  animation: beamBreathe var(--pulse) ease-in-out infinite;
}

@keyframes beamBreathe {
  0%, 100% { opacity: .5; filter: blur(30px) }
  50% { opacity: .9; filter: blur(22px) }
}

/* ── Glass prism (replaces the stone/diamond asset) ─────────────────── */
.glass-prism {
  position: relative;
  width: min(420px, 70vw);
  aspect-ratio: 1;
  border-radius: 24px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 40%, rgba(255, 0, 60, .12)),
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 45%);
  backdrop-filter: blur(18px) saturate(170%) brightness(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(170%) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 -1px 0 rgba(0, 0, 0, .4) inset,
    0 40px 120px rgba(0, 0, 0, .8),
    0 0 90px rgba(255, 0, 60, .35);
  transform: rotate(-6deg);
  animation: prismFloat 9s ease-in-out infinite, omegaPulse var(--pulse) ease-in-out infinite;
}

.glass-prism::before,
.glass-prism::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .22), transparent 40%, rgba(255, 0, 60, .28));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter: blur(.4px);
  mix-blend-mode: screen;
}
.glass-prism::after {
  inset: 22%;
  opacity: .7;
  transform: rotate(24deg);
}

@keyframes prismFloat {
  0%, 100% { transform: rotate(-6deg) translateY(0) }
  50% { transform: rotate(-4deg) translateY(-16px) }
}

/* ── Utility: glass chip / rail for HUD + nav ───────────────────────── */
.glass-chip {
  border-radius: 10px;
  padding: 8px 12px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(12, 2, 6, .5));
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 10px 30px rgba(0, 0, 0, .6);
}

/* ── Accessibility ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glass-pulse,
  .glass-prism,
  .light-beam,
  .glass-thick .sheen-band {
    animation: none !important;
  }
  .glass-thick,
  .glass-thick:hover {
    transform: none;
  }
}