/* ─────────────────────────────────────────────────────────────
   Artists Reveal Grid – arw.css
   isolation: isolate contiene los z-index internos del widget
   para que no se superpongan al header ni a otros elementos.
───────────────────────────────────────────────────────────── */

.arw-widget {
  width: 100%;
  /* Crea un stacking context aislado: los z-index internos
     no compiten con elementos fuera del widget (ej. header fijo) */
  isolation: isolate;
}

.arw-grid-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.arw-grid {
  width: 100%;
  display: grid;
}

.arw-card {
  position: relative;
  min-width: 0;
  user-select: none;
  background: #0a0a0a;
  border: 1px solid rgba(254,242,215,0.1);
  cursor: pointer;
}

.arw-card-inner {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
}

.arw-slot {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 30;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(254,242,215,0.25);
}

.arw-media-wrap {
  position: absolute;
  inset: 0;
}

.arw-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 120ms ease, transform 120ms ease, filter 120ms ease;
}

.arw-img-locked {
  opacity: 1;
  /* Grayscale controlable vía slider (default 0.5 = semigris) */
  filter: grayscale(0.5);
  z-index: 1;
  object-fit: cover;
  /* Posición controlada por CSS variables definidas por Elementor */
  object-position: var(--arw-locked-pos-x, 50%) var(--arw-locked-pos-y, 50%);
}

.arw-img-revealed {
  opacity: 0;
  transform: scale(1.01);
  z-index: 2;
  object-fit: cover;
  object-position: var(--arw-revealed-pos-x, 50%) var(--arw-revealed-pos-y, 50%);
}

.arw-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  /* Valor por defecto reducido (0.58) para que la imagen bloqueada se vea.
     El control "Color del overlay" en Elementor lo sobreescribe. */
  background: rgba(0,0,0,0.58);
  /* backdrop-filter quitado del default: ahora se controla con el
     slider "Desenfoque" en Elementor (default 0px). */
  pointer-events: none;
}

.arw-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 150px;
  pointer-events: none;
}

.arw-lock {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  gap: 16px;
  pointer-events: none;
}

.arw-lock img {
  display: block;
  width: 56px;
  height: auto;
  transition: opacity 220ms ease, transform 220ms ease;
}

.arw-lock-open {
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  position: absolute;
}

/* Estilo base compartido entre .arw-lock-label y .arw-hint */
.arw-lock-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
  color: rgba(254,242,215,0.35);
}

/* .arw-hint se aplica SÓLO cuando state = 'ready'.
   Esto permite tipografía/color independiente para ese texto. */
.arw-hint {
  color: #fef2d7;
}

.arw-reveal {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

.arw-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  z-index: 0;
}

.arw-title,
.arw-tag {
  position: relative;
  z-index: 1;
}

.arw-title {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 6px;
}

.arw-tag {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.arw-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 22;
  background: #7F0C0C;
  color: #fef2d7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 4px 8px;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s 0.8s, transform 0.3s 0.8s;
}

.arw-glitch-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
}

.arw-glitch-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #fef2d7;
  opacity: 0;
  mix-blend-mode: overlay;
}

.arw-scan-lines {
  position: absolute;
  inset: 0;
  z-index: 17;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.3) 2px,
    rgba(0,0,0,0.3) 4px
  );
}

.arw-chroma {
  position: absolute;
  inset: 0;
  z-index: 19;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  padding-bottom: 26px;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
}

.arw-chroma-r { color: #ff0000; }
.arw-chroma-b { color: #0000ff; }

/* ── Estados de animación ─────────────────────────── */

.arw-card.is-shaking {
  animation: arw-lock-shake 0.4s ease-in-out;
}

.arw-card.is-opening .arw-lock-closed {
  opacity: 0;
  transform: translateY(-8px) scale(0.92);
}

.arw-card.is-opening .arw-lock-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.arw-card.is-opening .arw-img-revealed {
  opacity: 0;
}

.arw-card.is-glitching .arw-overlay {
  opacity: 0;
  pointer-events: none;
}

.arw-card.is-glitching .arw-lock {
  opacity: 0;
}

.arw-card.is-glitching .arw-scan-lines {
  opacity: 1;
}

.arw-card.is-glitching .arw-glitch-layer {
  opacity: 1;
}

.arw-card.is-glitching .arw-reveal {
  opacity: 1;
}

.arw-card.is-glitching .arw-img-locked {
  opacity: 1;
}

.arw-card.is-glitching .arw-img-revealed {
  opacity: 0;
  animation: arw-glitch 220ms steps(2, end) infinite;
}

.arw-card.is-glitching .arw-chroma-r {
  opacity: 0.7;
  animation: arw-chroma-r 0.4s steps(1) forwards;
}

.arw-card.is-glitching .arw-chroma-b {
  opacity: 0.7;
  animation: arw-chroma-b 0.4s steps(1) forwards;
}

.arw-card.is-glitching .arw-badge {
  opacity: 1;
  transform: scale(1);
}

/* ── Estado revelado ──────────────────────────────── */

.arw-state-revealed .arw-overlay,
.arw-state-revealed .arw-lock,
.arw-state-revealed .arw-glitch-layer,
.arw-state-revealed .arw-scan-lines,
.arw-state-revealed .arw-chroma {
  opacity: 0;
  pointer-events: none;
}

.arw-state-revealed .arw-img-locked {
  opacity: 0;
}

.arw-state-revealed .arw-img-revealed {
  opacity: 1;
  transform: scale(1);
}

.arw-state-revealed .arw-reveal {
  opacity: 1;
}

.arw-state-revealed .arw-badge {
  opacity: 1;
  transform: scale(1);
}

/* ── Keyframes ────────────────────────────────────── */

@keyframes arw-lock-shake {
  0%   { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-3px, 0) rotate(-2deg); }
  20%  { transform: translate(3px, 0) rotate(2deg); }
  30%  { transform: translate(-5px, 1px) rotate(-3deg); }
  40%  { transform: translate(5px, -1px) rotate(3deg); }
  50%  { transform: translate(-4px, 0) rotate(-1deg); }
  60%  { transform: translate(4px, 0) rotate(1deg); }
  70%  { transform: translate(-2px, 0) rotate(-2deg); }
  80%  { transform: translate(2px, 1px) rotate(2deg); }
  90%  { transform: translate(-1px, 0) rotate(0); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes arw-glitch {
  0%   { transform: translate(0, 0) skew(0deg); filter: contrast(1.1) saturate(1.1); }
  25%  { transform: translate(-1px, 0); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

@keyframes arw-chroma-r {
  0%   { transform: translate(-4px, 2px);  opacity: 0.8; }
  20%  { transform: translate(5px, -1px);  opacity: 0.6; }
  40%  { transform: translate(-2px, 3px);  opacity: 0.9; }
  60%  { transform: translate(3px, -2px);  opacity: 0.5; }
  80%  { transform: translate(-1px, 1px);  opacity: 0.3; }
  100% { transform: translate(0, 0);       opacity: 0;   }
}

@keyframes arw-chroma-b {
  0%   { transform: translate(4px, -2px);  opacity: 0.8; }
  20%  { transform: translate(-5px, 1px);  opacity: 0.6; }
  40%  { transform: translate(2px, -3px);  opacity: 0.9; }
  60%  { transform: translate(-3px, 2px);  opacity: 0.5; }
  80%  { transform: translate(1px, -1px);  opacity: 0.3; }
  100% { transform: translate(0, 0);       opacity: 0;   }
}

.arw-card.is-glitching .arw-glitch-bar:nth-child(1) { animation: arw-glitch-bar 0.5s steps(1) forwards; top: 20%; animation-delay: 0.05s; }
.arw-card.is-glitching .arw-glitch-bar:nth-child(2) { animation: arw-glitch-bar 0.5s steps(1) forwards; top: 45%; animation-delay: 0.12s; height: 6px; }
.arw-card.is-glitching .arw-glitch-bar:nth-child(3) { animation: arw-glitch-bar 0.5s steps(1) forwards; top: 70%; animation-delay: 0.08s; }
.arw-card.is-glitching .arw-glitch-bar:nth-child(4) { animation: arw-glitch-bar 0.5s steps(1) forwards; top: 85%; animation-delay: 0.18s; height: 2px; }

@keyframes arw-glitch-bar {
  0%   { opacity: 0;   transform: scaleX(0.3) translateX(-30%); }
  15%  { opacity: 0.8; transform: scaleX(1.1) translateX(5%); }
  30%  { opacity: 0.4; transform: scaleX(0.7) translateX(-10%); }
  50%  { opacity: 0.9; transform: scaleX(1.2) translateX(8%); background: #7F0C0C; }
  70%  { opacity: 0.5; transform: scaleX(0.5) translateX(-5%); }
  90%  { opacity: 0.2; transform: scaleX(0.9); }
  100% { opacity: 0;   transform: scaleX(1) translateX(0); }
}

/* ── Accesibilidad ────────────────────────────────── */

.arw-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .arw-card,
  .arw-media,
  .arw-lock img {
    animation: none !important;
    transition: none !important;
  }
}