/* ============================================
   EL CASTILLO DEL CONDE — Visual Effects
   ============================================ */

/* ---- GLITCH EFFECT ---- */
.glitch {
  position: relative;
  display: inline-block;
  color: transparent;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Banda con bordes suaves — la posición se anima para que suba y baje */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    black       30%,
    black       70%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    black       30%,
    black       70%,
    transparent 100%
  );
  -webkit-mask-size: 100% 28%;
  mask-size:         100% 28%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:         no-repeat;
}

.glitch::before {
  color: var(--blood-bright);
  text-shadow: -2px 0 var(--blood-core);
  animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch::after {
  color: var(--blood-core);
  text-shadow: 2px 0 var(--blood-dark);
  animation: glitch-2 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
  0%   { -webkit-mask-position: 0% -28%; mask-position: 0% -28%; transform: translate(0); }
  5%   { -webkit-mask-position: 0%  15%; mask-position: 0%  15%; transform: translate(-3px, 1px); }
  10%  { -webkit-mask-position: 0%  55%; mask-position: 0%  55%; transform: translate(3px, -1px); }
  15%  { -webkit-mask-position: 0%  25%; mask-position: 0%  25%; transform: translate(0); }
  20%  { -webkit-mask-position: 0%  78%; mask-position: 0%  78%; transform: translate(-2px, 2px); }
  25%  { -webkit-mask-position: 0%  -5%; mask-position: 0%  -5%; transform: translate(0); }
  30%  { -webkit-mask-position: 0%  42%; mask-position: 0%  42%; transform: translate(2px, -1px); }
  100% { -webkit-mask-position: 0% -28%; mask-position: 0% -28%; transform: translate(0); }
}

@keyframes glitch-2 {
  0%   { -webkit-mask-position: 0% 128%; mask-position: 0% 128%; transform: translate(0); }
  5%   { -webkit-mask-position: 0%  62%; mask-position: 0%  62%; transform: translate(2px, -1px); }
  10%  { -webkit-mask-position: 0%  32%; mask-position: 0%  32%; transform: translate(-2px, 1px); }
  15%  { -webkit-mask-position: 0%  82%; mask-position: 0%  82%; transform: translate(0); }
  20%  { -webkit-mask-position: 0%  18%; mask-position: 0%  18%; transform: translate(3px, 1px); }
  25%  { -webkit-mask-position: 0%  92%; mask-position: 0%  92%; transform: translate(0); }
  100% { -webkit-mask-position: 0% 128%; mask-position: 0% 128%; transform: translate(0); }
}

/* ---- GLITCH FLICKER (for subtle elements) ---- */
.glitch-subtle {
  animation: glitch-flicker 4s infinite;
}

@keyframes glitch-flicker {
  0%, 92%, 94%, 96%, 100% { opacity: 1; transform: translate(0); }
  93%  { opacity: 0.8; transform: translate(-2px, 1px); }
  95%  { opacity: 0.9; transform: translate(1px, -1px); }
}

/* ---- FOG LAYERS ---- */
.fog-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-fog);
  overflow: hidden;
}

.fog-layer {
  position: absolute;
  width: 200%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--fog-dense) 0%, transparent 70%);
  opacity: 0.6;
}

.fog-layer--1 {
  animation: fog-drift-1 25s infinite linear;
  top: -10%;
}

.fog-layer--2 {
  animation: fog-drift-2 35s infinite linear;
  top: 20%;
  opacity: 0.4;
}

.fog-layer--3 {
  animation: fog-drift-3 20s infinite linear;
  bottom: 0;
  opacity: 0.3;
  background: radial-gradient(ellipse at center, rgba(139,0,0,0.04) 0%, transparent 70%);
}

@keyframes fog-drift-1 {
  0%   { transform: translateX(-25%) translateY(0); }
  50%  { transform: translateX(0%) translateY(-3%); }
  100% { transform: translateX(-25%) translateY(0); }
}

@keyframes fog-drift-2 {
  0%   { transform: translateX(0%) translateY(0); }
  50%  { transform: translateX(-25%) translateY(2%); }
  100% { transform: translateX(0%) translateY(0); }
}

@keyframes fog-drift-3 {
  0%   { transform: translateX(-15%) translateY(0); }
  50%  { transform: translateX(10%) translateY(-2%); }
  100% { transform: translateX(-15%) translateY(0); }
}

/* ---- PARTICLE CANVAS ---- */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-particles);
}

/* ---- BLOOD DRIP TRANSITION ---- */
.blood-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  pointer-events: none;
  overflow: hidden;
}

.blood-drip {
  position: absolute;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--blood-core);
  transition: top 0.8s var(--ease-dark);
}

.blood-drip.active {
  top: 0;
}

/* ---- ELECTRIC SHOCK ---- */
.shock {
  animation: electric-shock 0.1s ease;
}

@keyframes electric-shock {
  0%   { transform: translate(0); filter: brightness(1); }
  25%  { transform: translate(-2px, 1px); filter: brightness(1.8) hue-rotate(10deg); }
  50%  { transform: translate(2px, -1px); filter: brightness(0.8); }
  75%  { transform: translate(-1px, -1px); filter: brightness(1.5) hue-rotate(-10deg); }
  100% { transform: translate(0); filter: brightness(1); }
}

/* ---- PARALLAX ---- */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- REVEAL ANIMATIONS ---- */
.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity var(--duration-slow) var(--ease-dark),
              transform var(--duration-slow) var(--ease-dark);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity var(--duration-slow) var(--ease-dark),
              transform var(--duration-slow) var(--ease-dark);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity var(--duration-slow) var(--ease-dark),
              transform var(--duration-slow) var(--ease-dark);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--duration-slow) var(--ease-dark),
              transform var(--duration-slow) var(--ease-dark);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger-children .reveal:nth-child(1) { transition-delay: 0.1s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.2s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.3s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.4s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.5s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.6s; }

/* ---- VIGNETTE OVERLAY ---- */
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: calc(var(--z-fog) - 1);
  background: radial-gradient(ellipse at center, transparent 15%, rgba(0,0,0,0.95) 100%);
}

/* ---- SCANLINES ---- */
.scanlines {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: calc(var(--z-fog) + 1);
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  opacity: 0.5;
}

/* ---- GRAIN OVERLAY ---- */
.grain {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: calc(var(--z-fog) + 2);
  opacity: 0.04;
  animation: grain-shift 0.5s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-5%, -5%); }
  40%  { transform: translate(3%, 3%); }
  60%  { transform: translate(-3%, 1%); }
  80%  { transform: translate(1%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ---- BLOOD SEPARATOR ---- */
.blood-separator {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--blood-dark) 20%,
    var(--blood-core) 50%,
    var(--blood-dark) 80%,
    transparent 100%
  );
  position: relative;
  overflow: hidden;
  opacity: 0.6;
}

.blood-separator::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--blood-glow), transparent);
  animation: blood-shimmer 4s infinite;
}

@keyframes blood-shimmer {
  0%   { left: -50%; }
  100% { left: 150%; }
}

/* ---- LITE MODE — equipos con recursos limitados ---- */
/*
   La clase .lite-mode se añade al <html> por performance.js
   cuando se detectan ≤2 núcleos, ≤1 GB de RAM o prefers-reduced-motion.
*/

/* Desactivar niebla extra (solo queda la capa 1) */
.lite-mode .fog-layer--2,
.lite-mode .fog-layer--3 {
  display: none;
}

/* Desactivar grain (animación de step cada 0.5s, costosa en CPU) */
.lite-mode .grain {
  display: none;
}

/* HOME — solo partículas, sin niebla / viñeta / grano */
body[data-hide-nav] .fog-container,
body[data-hide-nav] .vignette,
body[data-hide-nav] .grain { display: none; }

/* Desactivar scanlines */
.lite-mode .scanlines {
  display: none;
}

/* Detener la animación de la niebla restante (queda estática) */
.lite-mode .fog-layer--1 {
  animation: none;
}

/* Simplificar transiciones de reveal — más cortas */
.lite-mode .reveal,
.lite-mode .reveal-left,
.lite-mode .reveal-right,
.lite-mode .reveal-scale {
  transition-duration: 0.4s;
}


/* ---- SCREEN SHAKE ---- */
@keyframes screen-shake {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-12px, -9px); }
  20%  { transform: translate(14px,  10px); }
  30%  { transform: translate(-13px,  6px); }
  40%  { transform: translate(13px,  -7px); }
  50%  { transform: translate(-9px,  12px); }
  60%  { transform: translate(10px, -11px); }
  70%  { transform: translate(-11px, -5px); }
  80%  { transform: translate(11px,   6px); }
  90%  { transform: translate(-6px,  -9px); }
  100% { transform: translate(0, 0); }
}

.screen-shake {
  animation: screen-shake 0.55s cubic-bezier(.36,.07,.19,.97) both;
}

/* ---- FLICKER TEXT ---- */
.flicker {
  animation: text-flicker 5s infinite;
}

@keyframes text-flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px var(--blood-core), 0 0 20px var(--blood-dark);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.5;
    text-shadow: none;
  }
}

/* ═══════════════════════════════════════════════
   VOICE / IMMERSION DISCLAIMER
   ═══════════════════════════════════════════════ */

#voice-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: radial-gradient(ellipse at 50% 40%, #0d0005 0%, var(--void) 65%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  opacity: 0;
  transition: opacity 0.8s var(--ease-dark, cubic-bezier(0.23, 1, 0.32, 1));
}

#voice-disclaimer.vd-visible { opacity: 1; }

.vd-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Image is 1400×635 (2.2:1). Match that ratio so the frame looks undistorted. */
  max-width: clamp(460px, 88vw, 660px);
  width: 100%;
  padding: clamp(1.8rem, 4vw, 2.4rem) clamp(2.4rem, 6vw, 3.8rem);
  background-image: url('/public/assets/images/ui/ui-text-box-2.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.vd-eyebrow {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: var(--fs-micro);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--blood-bright);
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.vd-title {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: var(--fs-xl);
  color: var(--parchment);
  letter-spacing: 0.06em;
  font-weight: 400;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.9), 0 0 32px rgba(0,0,0,0.6);
}

.vd-sep {
  width: 50px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--blood-core), transparent);
  margin-bottom: 1.1rem;
}

.vd-text {
  font-family: var(--font-body, 'IM Fell English', serif);
  font-size: var(--fs-base);
  color: rgba(200,184,154,0.6);
  line-height: 1.85;
  margin-bottom: 0.4rem;
}

.vd-text em {
  color: var(--parchment);
  font-style: normal;
}

/* ── Fila de tres iconos ── */
.vd-icons-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.8rem, 5vw, 3.2rem);
  margin: 1.4rem 0 0.4rem;
}

.vd-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.vd-icon-wrap {
  width: clamp(52px, 7vw, 64px);
  height: clamp(52px, 7vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(139,0,0,0.28);
  border-radius: 50%;
  background: rgba(139,0,0,0.05);
  color: var(--parchment);
}

.vd-icon-wrap svg { width: 46%; height: 46%; }

.vd-icon-item span {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,184,154,0.65);
}

/* ── Botón micrófono ── */
.vd-mic-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.vd-mic-btn {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(139,0,0,0.1);
  border: 2px solid rgba(204,0,0,0.45);
  color: var(--blood-bright);
  cursor: pointer;
  transition: background 0.4s, border-color 0.4s, transform 0.2s, box-shadow 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
}

.vd-mic-btn:hover:not(:disabled) {
  background: rgba(139,0,0,0.22);
  border-color: var(--blood-bright);
  box-shadow: 0 0 28px rgba(204,0,0,0.38), 0 0 56px rgba(139,0,0,0.16);
  transform: scale(1.07);
}

/* Anillos de pulso */
.vd-mic-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(204,0,0,0.4);
  animation: vd-ring-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.vd-mic-ring--2 { animation-delay: 1.1s; }

@keyframes vd-ring-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* Iconos SVG con estados */
.vd-mic-svg          { display: none; align-items: center; justify-content: center; }
.vd-mic-svg svg,
.vd-mic-svg img      { width: 64px; height: 64px; }
.vd-mic-svg img      { object-fit: contain; transition: filter 0.3s ease; }

/* Idle: tinte parchment cremoso (~#e0c8a0, igual que auriculares y vela) */
.vd-mic-btn                 .vd-mic-svg--idle   img {
  filter: brightness(0) saturate(100%) invert(83%) sepia(18%) saturate(450%) hue-rotate(355deg) brightness(95%) contrast(82%);
}
/* Activo: tinte verde */
.vd-mic-btn--active         .vd-mic-svg--active img { filter: sepia(1) saturate(20) brightness(0.7) hue-rotate(90deg); }
/* Denegado: tinte rojo apagado */
.vd-mic-btn--denied         .vd-mic-svg--denied img { filter: sepia(1) saturate(20) brightness(0.7) hue-rotate(300deg); }

.vd-mic-btn                 .vd-mic-svg--idle   { display: flex; }
.vd-mic-btn--requesting     .vd-mic-svg--idle   { display: none; }
.vd-mic-btn--requesting     .vd-mic-svg--spin   { display: flex; }
.vd-mic-btn--active         .vd-mic-svg--idle   { display: none; }
.vd-mic-btn--active         .vd-mic-svg--active { display: flex; }
.vd-mic-btn--denied         .vd-mic-svg--idle   { display: none; }
.vd-mic-btn--denied         .vd-mic-svg--denied { display: flex; }

/* Estado: solicitando */
.vd-mic-btn--requesting { cursor: wait; }
.vd-mic-btn--requesting .vd-mic-ring { animation-play-state: paused; opacity: 0.12; }
.vd-mic-svg--spin { animation: vd-spin 0.9s linear infinite; }
@keyframes vd-spin { to { transform: rotate(360deg); } }

/* Estado: activo */
.vd-mic-btn--active {
  background: rgba(0,90,0,0.15);
  border-color: #3db83d;
  color: #5ecf5e;
  box-shadow: 0 0 22px rgba(45,158,45,0.28);
}
.vd-mic-btn--active:hover { transform: none; cursor: default; }
.vd-mic-btn--active .vd-mic-ring {
  border-color: rgba(61,184,61,0.4);
  animation-name: vd-ring-pulse-green;
}
@keyframes vd-ring-pulse-green {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0;   }
}

/* Estado: denegado */
.vd-mic-btn--denied {
  background: rgba(30,30,30,0.2);
  border-color: rgba(200,200,200,0.12);
  color: rgba(200,200,200,0.22);
  box-shadow: none;
}
.vd-mic-btn--denied:hover { transform: none; }
.vd-mic-btn--denied .vd-mic-ring { animation: none; opacity: 0; }

.vd-mic-label {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200,184,154,0.65);
  transition: color 0.4s;
  min-height: 1.2em;
}

.vd-mobile-hint {
  display: none;
  font-family: var(--font-body, 'IM Fell English', serif);
  font-size: var(--fs-sm);
  color: rgba(200,184,154,0.3);
  margin: 0.2rem 0 0.5rem;
  max-width: 280px;
  line-height: 1.6;
}

.vd-btn {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.vd-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(200,184,154,0.22);
  font-size: var(--fs-micro);
  padding: 0.4rem 1.2rem;
}
.vd-btn--ghost:hover {
  color: rgba(200,184,154,0.5);
  border-color: rgba(255,255,255,0.18);
}

/* ── Landscape mobile muy bajo: compactar ── */
@media (orientation: landscape) and (max-height: 480px) {
  .vd-inner      { padding: 2.8rem 1.6rem; max-width: clamp(380px, 92vw, 580px); }
  .vd-title      { font-size: var(--fs-md); margin-bottom: 0.4rem; }
  .vd-sep        { margin-bottom: 0.5rem; }
  .vd-icons-row  { gap: clamp(1.2rem, 4vw, 2rem); margin: 0.8rem 0 0.2rem; }
  .vd-icon-wrap  { width: 44px; height: 44px; }
  .vd-mic-btn    { width: 86px; height: 86px; }
  .vd-mic-svg svg,
  .vd-mic-svg img { width: 64px; height: 64px; }
}

/* ═══════════════════════════════════════════════
   SANITY — HALLUCINATIONS
   ═══════════════════════════════════════════════ */

/*
   Mientras dura una alucinación añadimos:
     - body.hallucinating            → oculta HUD y bloquea input
     - body[data-hallu-filter="X"]   → filtro de color / distorsión
     - html[data-hallu-transform="Y"] → transform (flip, shake, zoom…)
     - #sanity-hallu-tint[data-hallu-tint="Z"] → capa de tinte superpuesta
*/

/* ---- 1. Bloqueo de input y ocultación del HUD ---- */
body.hallucinating {
  pointer-events: none;
  cursor: none !important;
  user-select: none !important;
  /* En páginas donde todo el contenido es position:fixed (vestíbulo, salas, etc.),
     body colapsa a height:0. Un filter en un body de 0px no tiene dónde renderizarse
     y solo se ve el html (negro). Forzamos min-height durante la alucinación. */
  min-height: 100vh;
}

/* Todos los elementos de HUD conocidos se desvanecen */
body.hallucinating .nav-bar,
body.hallucinating .burger,
body.hallucinating .menu-overlay,
body.hallucinating .player-profile-btn,
body.hallucinating .portal-btn,
body.hallucinating #inv-btn,
body.hallucinating .inv-btn,
body.hallucinating #site-footer,
body.hallucinating .pain-stone-hud,
body.hallucinating .pain-stone-hud-wrap,
body.hallucinating #noise-hud-row,
body.hallucinating .salas-arrow,
body.hallucinating .salas-dots,
body.hallucinating .salas-room-title,
body.hallucinating .salas-info-wrap,
body.hallucinating .salas-room-desc-mobile,
body.hallucinating .vestibulo-hotspot,
body.hallucinating .hotspot-ring,
body.hallucinating .hotspot-dot,
body.hallucinating .ala-nav-btn,
body.hallucinating .ala-nav,
body.hallucinating .ala-map-btn,
body.hallucinating .cctv-frame,
body.hallucinating .gothic-overlay,
body.hallucinating .sanity-widget,
body.hallucinating .audio-toggle,
body.hallucinating #rotate-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay invisible a pantalla completa para capturar clicks sueltos
   (por si algún botón sobrevive con pointer-events propio) */
body.hallucinating::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: auto;
  background: transparent;
}

/* ---- 2. Capa de tinte superpuesta ---- */
#sanity-hallu-tint {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9985;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity 0.35s ease;
  background: transparent;
}
#sanity-hallu-tint.active { opacity: 1; }

#sanity-hallu-tint[data-hallu-tint="red"] {
  background: radial-gradient(ellipse at center,
              rgba(180, 0, 0, 0.55) 0%,
              rgba(120, 0, 0, 0.85) 70%,
              rgba(60, 0, 0, 0.95) 100%);
  mix-blend-mode: multiply;
}

#sanity-hallu-tint[data-hallu-tint="void"] {
  background: radial-gradient(ellipse at center,
              rgba(0, 0, 0, 0) 15%,
              var(--overlay-dark) 70%,
              rgba(0, 0, 0, 0.98) 100%);
  mix-blend-mode: normal;
  animation: hallu-void-pulse 1.4s ease-in-out infinite;
}

@keyframes hallu-void-pulse {
  0%, 100% { transform: scale(1);    filter: blur(0); }
  50%      { transform: scale(1.05); filter: blur(2px); }
}

/* ---- 3. Transforms (sobre <html>) ---- */
html[data-hallu-transform] {
  will-change: transform;
  transform-origin: 50% 50%;
}

html[data-hallu-transform="flip-h"] {
  animation: hallu-flip-h 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes hallu-flip-h {
  0%   { transform: scaleX(1); }
  40%  { transform: scaleX(0.05) skewY(4deg); filter: brightness(1.4); }
  100% { transform: scaleX(-1); }
}

html[data-hallu-transform="flip-v"] {
  animation: hallu-flip-v 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes hallu-flip-v {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(0.05) skewX(4deg); filter: brightness(1.4); }
  100% { transform: scaleY(-1); }
}

html[data-hallu-transform="shake"] {
  animation: hallu-shake 0.09s infinite;
}
@keyframes hallu-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6px, 3px) rotate(-0.4deg); }
  50%  { transform: translate(5px, -4px) rotate(0.5deg); }
  75%  { transform: translate(-3px, -5px) rotate(-0.3deg); }
  100% { transform: translate(4px, 2px) rotate(0.4deg); }
}

html[data-hallu-transform="zoom"] {
  animation: hallu-zoom 2.6s ease-in-out infinite;
}
@keyframes hallu-zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

html[data-hallu-transform="jitter"] {
  animation: hallu-jitter 0.11s steps(3) infinite;
}
@keyframes hallu-jitter {
  0%   { transform: translate(0, 0) skewX(0deg); }
  33%  { transform: translate(-2px, 1px) skewX(-0.6deg); }
  66%  { transform: translate(2px, -1px) skewX(0.6deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* ---- 4. Filtros (sobre <body>) ---- */
body[data-hallu-filter] {
  transition: filter 0.28s ease;
}

body[data-hallu-filter="invert"] {
  filter: invert(1) hue-rotate(180deg) contrast(1.1);
}

body[data-hallu-filter="desaturate"] {
  filter: grayscale(1) contrast(1.35) brightness(0.82);
}

body[data-hallu-filter="red"] {
  filter: sepia(1) hue-rotate(-45deg) saturate(6) brightness(0.75) contrast(1.15);
}

body[data-hallu-filter="chromatic"] {
  filter:
    drop-shadow(4px 0 0 rgba(255, 40, 40, 0.75))
    drop-shadow(-4px 0 0 rgba(0, 200, 255, 0.7))
    contrast(1.15);
  animation: hallu-chromatic-drift 0.3s infinite alternate;
}
@keyframes hallu-chromatic-drift {
  0%   { filter: drop-shadow(3px 0 0 rgba(255, 40, 40, 0.75))
                drop-shadow(-3px 0 0 rgba(0, 200, 255, 0.7))
                contrast(1.15); }
  100% { filter: drop-shadow(-5px 1px 0 rgba(255, 40, 40, 0.8))
                drop-shadow(5px -1px 0 rgba(0, 200, 255, 0.75))
                contrast(1.25); }
}

body[data-hallu-filter="distort"] {
  filter: url(#sanity-distort) contrast(1.1);
}

body[data-hallu-filter="bleach"] {
  filter: saturate(0.2) brightness(1.6) contrast(1.4);
  animation: hallu-bleach-flash 0.7s ease-out infinite alternate;
}
@keyframes hallu-bleach-flash {
  0%   { filter: saturate(0.2) brightness(1.4) contrast(1.3); }
  100% { filter: saturate(0.2) brightness(2.0) contrast(1.6); }
}

/* ---- 5. Reducción de movimiento / LITE MODE ---- */
.lite-mode html[data-hallu-transform="shake"],
.lite-mode html[data-hallu-transform="jitter"],
.lite-mode html[data-hallu-transform="zoom"] {
  animation: none;
}
.lite-mode body[data-hallu-filter="chromatic"],
.lite-mode body[data-hallu-filter="bleach"] {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  html[data-hallu-transform] { animation-duration: 0.3s; }
  html[data-hallu-transform="shake"],
  html[data-hallu-transform="jitter"] { animation: none; }
}

/* ---- 6. Dev override: ignorar lite-mode y reduced-motion al forzar alucinación
       desde dev-ls.html (solo para testing de efectos) ---- */
html.hallu-force-motion[data-hallu-transform="flip-h"] {
  animation: hallu-flip-h 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
html.hallu-force-motion[data-hallu-transform="flip-v"] {
  animation: hallu-flip-v 0.55s cubic-bezier(0.7, 0, 0.3, 1) forwards !important;
}
html.hallu-force-motion[data-hallu-transform="shake"] {
  animation: hallu-shake 0.09s infinite !important;
}
html.hallu-force-motion[data-hallu-transform="zoom"] {
  animation: hallu-zoom 2.6s ease-in-out infinite !important;
}
html.hallu-force-motion[data-hallu-transform="jitter"] {
  animation: hallu-jitter 0.11s steps(3) infinite !important;
}
html.hallu-force-motion body[data-hallu-filter="chromatic"] {
  animation: hallu-chromatic-drift 0.3s infinite alternate !important;
}
html.hallu-force-motion body[data-hallu-filter="bleach"] {
  animation: hallu-bleach-flash 0.7s ease-out infinite alternate !important;
}

/* ────────────────────────────────────────────────────────
   Damage flash — destello rojo global al recibir daño
   (combat.css añade además el shake de .enc-phase)
   ──────────────────────────────────────────────────────── */
@keyframes blood-flash {
  0%   { opacity: 0.4; }
  40%  { opacity: 0.4; }
  100% { opacity: 0; }
}

body.damage-flash::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(160, 0, 0, 0.3);
  pointer-events: none;
  z-index: 9000;
  animation: blood-flash 0.65s ease-out forwards;
}