/* ============================================
   NACHT//ARCHIV — techno industrial Berlin
   ============================================ */

:root {
  --bg: #050505;
  --bg-2: #0c0c0c;
  --ink: #ededed;
  --ink-dim: #8a8a8a;
  --ink-faint: #444;
  --accent: #d72631;
  --line: #1a1a1a;
  --concrete: #1f1f1f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.5;
  /* clip evita scroll horizontal sin crear un scroll-container, que es lo
     que algunos touchpads y momentum-scrolls necesitan para funcionar. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html { min-height: 100%; }
body { min-height: 100vh; }

/* Fondo de ciudad nocturna desde el aire — global, capa más profunda.
   Encima va una capa oscura que mantiene el videoclip protagonista.
   (Usamos position:fixed en lugar de background-attachment:fixed porque
   este último bloquea el scroll de touchpad en algunos navegadores.) */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(5,5,5,0.82), rgba(5,5,5,0.92)),
    url("https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?w=2400&q=70") center/cover no-repeat;
  pointer-events: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Texturas globales ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9997;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,0.025) 3px,
    rgba(255,255,255,0) 4px
  );
}

/* Overlay que oscurece el fondo cuando una foto está en el centro */
.dim-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 60;
  background: rgba(5, 5, 5, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 1.5s ease, backdrop-filter 1.5s ease;
}
.dim-overlay.on {
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---------- Overlay de entrada ---------- */
.enter {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(5,5,5,0.78) 70%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s;
}
.enter-key {
  font-size: 10px; letter-spacing: 0.4em;
  color: var(--ink-faint); text-transform: uppercase;
  margin-top: 8px;
}
.enter.hidden { opacity: 0; visibility: hidden; }
.enter-inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 36px;
}
.enter-meta {
  font-size: 11px; letter-spacing: 0.4em;
  color: var(--ink-dim); text-transform: uppercase;
}
.enter-btn {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 9vw, 120px);
  letter-spacing: 0.1em;
  color: var(--ink);
  padding: 18px 48px;
  border: 2px solid var(--ink);
  display: flex; align-items: center; gap: 28px;
  transition: all 0.25s ease;
  position: relative;
}
.enter-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  transform: translateY(-2px);
}
.enter-arrow { font-size: 0.6em; }
.enter-hint {
  font-size: 11px; letter-spacing: 0.4em;
  color: var(--ink-dim); text-transform: uppercase;
  animation: blink 1.6s infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

/* ---------- BLACKBOX opening animation — BRUTALISTA ---------- */
.boxopen {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  background: #030303;
  perspective: 1400px;
  align-items: center; justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
.boxopen.active { display: flex; }
.boxopen.dissolving { animation: bx-dissolve 0.8s ease forwards; }
@keyframes bx-dissolve { to { opacity: 0; visibility: hidden; } }

/* Cemento de fondo (textura sutil) */
.boxopen::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.015) 0 1px,
      transparent 1px 4px),
    radial-gradient(ellipse at center, #161616 0%, #050505 70%);
  pointer-events: none;
}

.bx-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 60px;
}

.bx-box {
  position: relative;
  width: clamp(220px, 34vw, 380px);
  height: clamp(150px, 23vw, 250px);
  transform-style: preserve-3d;
  animation:
    bx-zoom-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    bx-grow-to-video 1s cubic-bezier(0.7, 0, 0.2, 1) 2.2s forwards;
  transition: width 1s cubic-bezier(0.7, 0, 0.2, 1),
              height 1s cubic-bezier(0.7, 0, 0.2, 1);
}
@keyframes bx-zoom-in {
  from { transform: scale(0.5) rotateX(25deg); opacity: 0; }
  to   { transform: scale(1)   rotateX(18deg); opacity: 1; }
}
/* Después del welcome, la caja CRECE hasta las dimensiones del videoclip */
@keyframes bx-grow-to-video {
  0%   { width: clamp(220px, 34vw, 380px); height: clamp(150px, 23vw, 250px); transform: scale(1) rotateX(18deg); }
  100% { width: min(900px, 95vw); height: calc(min(900px, 95vw) * 9 / 16); transform: scale(1) rotateX(0deg); }
}

.bx-side {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.025) 0 1px,
      transparent 1px 5px),
    linear-gradient(180deg, #2a2a2a, #0a0a0a);
  border: 1px solid #1a1a1a;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.95),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 30px 60px rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  text-align: center;
}

.bx-front { transform-origin: center; }

/* Tornillos en las esquinas */
.bx-front::before, .bx-front::after,
.bx-lid::before, .bx-lid::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #4a4a4a 0%, #1a1a1a 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}
.bx-front::before { top: 8px; left: 8px; }
.bx-front::after  { bottom: 8px; right: 8px; }
.bx-lid::before   { top: 8px; left: 8px; }
.bx-lid::after    { top: 8px; right: 8px; }

.bx-stencil {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(11px, 1.4vw, 16px);
  letter-spacing: 0.3em;
  color: #c8c8c8;
  text-transform: uppercase;
  padding: 0 18px;
  /* Efecto stencil rugoso */
  text-shadow:
    1px 0 0 rgba(0,0,0,0.6),
    0 1px 0 rgba(0,0,0,0.6);
  filter: contrast(1.1);
}
.bx-warn {
  margin-top: 14px;
  font-size: clamp(8px, 0.9vw, 10px);
  letter-spacing: 0.4em;
  color: #999;
  text-transform: uppercase;
  border: 1px solid #2a2a2a;
  padding: 3px 10px;
}

/* La tapa: arranca cerrada y se abre */
.bx-lid {
  transform-origin: top;
  transform: rotateX(0deg);
  animation: bx-lid-open 0.9s cubic-bezier(0.5, 0, 0.3, 1) 0.7s forwards;
  z-index: 2;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.025) 0 6px,
      transparent 6px 12px),
    linear-gradient(180deg, #2a2a2a, #050505);
}
@keyframes bx-lid-open {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-118deg); }
}

/* Resplandor interior — luz fría blanca apagada */
.bx-glow {
  position: absolute; inset: 0;
  z-index: 1;
  opacity: 0;
  background:
    radial-gradient(ellipse at center top,
      rgba(220, 230, 240, 0.55) 0%,
      rgba(180, 190, 200, 0.18) 40%,
      transparent 75%);
  animation: bx-glow-in 1.2s ease 1s forwards;
}
@keyframes bx-glow-in {
  0%   { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 0.7; }
}

/* Bandas industriales — negro y gris muy oscuro */
.bx-stripes {
  position: absolute; inset: -3px;
  border: 3px solid transparent;
  background:
    repeating-linear-gradient(45deg,
      #1a1a1a 0 8px,
      #050505 8px 16px) border-box;
  background-clip: border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
}

/* Texto de bienvenida — blanco crudo, sin colores cálidos.
   Aparece a los 1.6s, se queda visible y se desvanece a los 2.2s
   cuando la caja empieza a crecer. */
.bx-welcome {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-align: center;
  color: #e8e8e8;
  text-transform: uppercase;
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  animation:
    bx-welcome-in 0.6s ease 1.6s forwards,
    bx-welcome-out 0.5s ease 2.2s forwards;
}
.bx-welcome em {
  font-style: normal;
  color: #fff;
  -webkit-text-stroke: 1px #fff;
}
@keyframes bx-welcome-in {
  from { opacity: 0; transform: translateY(20px); letter-spacing: 0.2em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: 0.06em; }
}
@keyframes bx-welcome-out {
  to { opacity: 0; transform: translateY(-15px); }
}

/* Cuando la caja ha crecido, el front se hace transparente para que
   se vea el videoclip detrás. La tapa ya estaba abierta y se va. */
.bx-box {
  --reveal: 0;
}
.bx-front {
  transition: background 0.8s ease 0s, border-color 0.6s ease 0.4s;
}
@keyframes bx-front-fade {
  to {
    background: transparent;
    border-color: rgba(80,80,80,0.4);
  }
}
.bx-box {
  animation:
    bx-zoom-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    bx-grow-to-video 1s cubic-bezier(0.7, 0, 0.2, 1) 2.2s forwards;
}
.bx-box .bx-front {
  animation: bx-front-fade 0.8s ease 2.6s forwards;
}

/* ---------- Animación de caída de la caja al pulsar DESLIZA ---------- */
.hero.falling .hero-video-wrap {
  animation: hero-box-fall 1.4s cubic-bezier(0.5, 0, 0.85, 0.5) forwards;
}
.hero.falling .scroll-hint,
.hero.falling .hero-tag,
.hero.falling .hero-track {
  animation: hero-box-fall-fade 0.5s ease forwards;
}
@keyframes hero-box-fall {
  0%   {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: blur(0);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  }
  15%  {
    transform: translateY(-25px) rotate(-1.5deg) scale(1.02);
    filter: blur(0);
  }
  100% {
    transform: translateY(160vh) rotate(11deg) scale(0.85);
    filter: blur(3px);
    box-shadow: 0 80px 120px rgba(0, 0, 0, 0.9);
  }
}
@keyframes hero-box-fall-fade {
  to { opacity: 0; }
}

/* ---------- Transición scroll entre hero y mural ---------- */
.scroll-transition {
  display: flex; align-items: center; gap: 18px;
  max-width: 600px; margin: 0 auto;
  padding: 60px 28px;
}
.st-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-dim), transparent);
}
.st-text {
  font-size: 11px; letter-spacing: 0.4em;
  color: var(--ink-dim); text-transform: uppercase;
  white-space: nowrap;
}

/* Mensaje cuando el mural está vacío (no hay fotos cargadas) */
.empty-mural {
  text-align: center;
  padding: 60px 28px 120px;
  color: var(--ink-dim);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 2;
}
.empty-mural strong { color: var(--ink); }
.empty-mural a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Top bar (NOW PLAYING) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px;
  background: rgba(5,5,5,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
}
.np { display: flex; align-items: center; gap: 14px; }
.np-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
}
.np-btn:hover { border-color: var(--accent); }
.np-text { display: flex; flex-direction: column; gap: 2px; }
.np-label { color: var(--accent); font-size: 9px; letter-spacing: 0.3em; }
.np-track { color: var(--ink); font-weight: 700; letter-spacing: 0.2em; }

/* Equalizer animado */
.eq { display: flex; align-items: end; gap: 2px; height: 14px; }
.eq span {
  width: 3px; background: var(--accent);
  animation: eq 0.9s ease-in-out infinite;
}
.eq span:nth-child(1) { animation-delay: -0.2s; }
.eq span:nth-child(2) { animation-delay: -0.5s; }
.eq span:nth-child(3) { animation-delay: -0.1s; }
.eq span:nth-child(4) { animation-delay: -0.7s; }
@keyframes eq {
  0%, 100% { height: 20%; }
  50%      { height: 100%; }
}
.np-btn.paused .eq span { animation-play-state: paused; height: 30%; }

.mute-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-dim);
  font-size: 10px; letter-spacing: 0.25em;
  transition: all 0.2s;
}
.mute-btn:hover { color: var(--ink); border-color: var(--ink-dim); }
.mute-btn.muted { color: var(--accent); border-color: var(--accent); }

/* ---------- Hero (videoclip) ---------- */
.hero {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px 24px;
  gap: 36px;
  position: relative;
}
.hero-video-wrap {
  position: relative;
  width: min(900px, 95vw);
  aspect-ratio: 16 / 9;
  /* Marco de caja negra de metal — borde grueso */
  background: linear-gradient(180deg, #1f1f1f, #050505);
  border: 10px solid #0d0d0d;
  outline: 1px solid #2a2a2a;
  outline-offset: -11px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.95),
    0 0 0 1px #000,
    0 0 0 4px #1a1a1a,
    0 30px 80px rgba(0, 0, 0, 0.75);
  transition: width 0.9s cubic-bezier(0.7, 0, 0.2, 1),
              max-height 0.9s cubic-bezier(0.7, 0, 0.2, 1),
              box-shadow 0.9s ease;
  /* Variables que controla el scroll: el videoclip se reduce, se desplaza
     ligeramente hacia arriba y se atenúa según bajas hacia las fotos. */
  --sp: 0;
  transform:
    translateY(calc(var(--sp) * -40px))
    scale(calc(1 - var(--sp) * 0.12));
  filter: brightness(calc(1 - var(--sp) * 0.35));
}

/* Marco metálico encima del video (no bloquea pointer events) */
.hb-frame {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  /* Borde interior y bandas de aviso muy sutiles en el perímetro */
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.02) 0 8px,
      transparent 8px 16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.hb-screw {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #6a6a6a 0%, #2a2a2a 50%, #0a0a0a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.85),
    0 1px 2px rgba(0,0,0,0.7);
}
.hb-screw::after {
  content: ""; position: absolute;
  top: 50%; left: 18%; right: 18%;
  height: 1px; background: #0a0a0a;
  transform: translateY(-50%);
}
/* Tornillos posicionados sobre el marco grueso */
.hb-tl { top: -4px; left: -4px; }
.hb-tr { top: -4px; right: -4px; }
.hb-bl { bottom: -4px; left: -4px; }
.hb-br { bottom: -4px; right: -4px; }

.hb-stencil-bl { bottom: -3px; left: 24px; padding: 2px 6px; background: rgba(0,0,0,0.5); }

.hb-stencil {
  position: absolute;
  font-family: 'Archivo Black', sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(220, 220, 220, 0.45);
  text-transform: uppercase;
  text-shadow:
    1px 0 0 rgba(0,0,0,0.7),
    0 1px 0 rgba(0,0,0,0.7);
}
.hb-stencil-bl { bottom: 14px; left: 32px; }
.hb-stencil-tr { top: 14px; right: 38px; }

/* La etiqueta LIVE y el track quedan por encima del marco */
.hero-tag, .hero-track { z-index: 4; }

/* Botón "siguiente videoclip" — esquina inferior derecha del marco */
.next-clip {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.65;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.next-clip:hover {
  opacity: 1;
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.next-clip .nc-arrow {
  font-size: 9px;
  letter-spacing: -0.05em;
}
.next-clip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
/* En móvil, solo flecha */
@media (max-width: 600px) {
  .next-clip .nc-label { display: none; }
  .next-clip { bottom: 10px; right: 10px; padding: 6px 9px; }
}

/* Transición de cambio de clip — fade out a oscuro / fade in */
.hero-video-wrap.clip-leaving .hero-video {
  filter: brightness(0.05) blur(8px);
  transform: scale(1.02);
  transition: filter 0.7s ease, transform 0.7s ease;
}
.hero-video-wrap.clip-entering .hero-video {
  filter: brightness(1) blur(0);
  transform: scale(1);
  transition: filter 0.9s ease, transform 0.9s ease;
}
/* Las etiquetas también se atenúan durante el cambio */
.hero-video-wrap.clip-leaving .hero-tag,
.hero-video-wrap.clip-leaving .hero-track {
  opacity: 0.15;
  transition: opacity 0.7s ease;
}
.hero-video-wrap.clip-entering .hero-tag,
.hero-video-wrap.clip-entering .hero-track {
  opacity: 1;
  transition: opacity 0.9s ease;
}

/* La franja "// EXPEDIENTE" se anima también: las líneas se extienden
   y el texto gana luminosidad cuando está centrada en pantalla. */
.scroll-transition {
  --sp: 0;
}
.scroll-transition .st-line {
  transform: scaleX(calc(0.4 + var(--sp) * 0.6));
  transform-origin: center;
  transition: transform 0.1s linear;
}
.scroll-transition .st-text {
  color: rgb(
    calc(138 + var(--sp) * 100),
    calc(138 + var(--sp) * 100),
    calc(138 + var(--sp) * 100)
  );
}

/* ===== ESTADO PREENTER =====
   Antes de pulsar ENTER el videoclip ocupa casi toda la pantalla,
   se BLOQUEA el scroll, y el video se ve en blanco y negro y borroso
   (queda como el preview del archivo). Al quitar la clase, todo
   encoge / aparece con transition y el scroll vuelve. */
body.preenter {
  overflow: hidden;       /* sin scroll en la pantalla de entrada */
  height: 100vh;
}
/* En preenter el hero ocupa el viewport entero (sin restar el topbar) */
body.preenter .hero {
  min-height: 100vh;
  padding-top: 28px;
}
body.preenter .hero-video-wrap {
  width: min(96vw, 1500px);
  max-height: 90vh;
}
body.preenter .hero-video {
  filter: grayscale(1) blur(3px) brightness(0.65) contrast(1.05);
  transform: scale(1.05);   /* compensa el blur en los bordes */
}
body.preenter .hero-tag,
body.preenter .hero-track,
body.preenter .next-clip,
body.preenter .hb-frame {
  opacity: 0;
  pointer-events: none;
}
/* Topbar: fuera del flujo en preenter para que no deje franja negra arriba */
body.preenter .topbar {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  position: absolute;
}
body.preenter .scroll-hint,
body.preenter .scroll-transition,
body.preenter .mural {
  opacity: 0;
  pointer-events: none;
}

/* La transición del filtro al desbloquear: el video sale del BN y blur
   poco a poco, para que pegue con la animación de "encoger" */
.hero-video {
  transition: filter 1s ease 0.2s, transform 1s ease 0.2s;
}

/* Transiciones suaves al volver al estado normal */
.hero-tag, .hero-track, .next-clip, .hb-frame {
  transition: opacity 0.9s ease 0.4s;
}
.topbar {
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}
.scroll-hint {
  transition: opacity 0.7s ease 0.6s;
}
.scroll-transition, .mural {
  transition: opacity 0.7s ease 0.5s;
}
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 1s ease;
}
/* Cuando hay una foto ampliada en el centro, el videoclip
   también se ralentiza visualmente (color y un leve blur). */
body.body-zoomed .hero-video {
  filter: blur(1.5px) saturate(1.4) brightness(0.85) contrast(1.05);
}
/* (NOTA: ya NO bloqueamos el scroll del body cuando hay zoom — si el
   usuario hace scroll, cerramos el zoom desde JS para que vuelva al sitio) */
.hero-tag {
  position: absolute; top: 12px; left: 12px;
  background: var(--accent); color: #000;
  font-weight: 700;
  font-size: 10px; letter-spacing: 0.2em;
  padding: 4px 8px; text-transform: uppercase;
  z-index: 2;
  animation: blink 1.4s infinite;
}
.hero-track {
  position: absolute; top: 12px; right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--ink);
  font-size: 10px; letter-spacing: 0.2em;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
  z-index: 2;
}

.scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer;
  padding: 8px 16px;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.scroll-hint:hover { color: var(--ink); }
.scroll-text { animation: scroll-bob 2s ease-in-out infinite; }
.scroll-arrow {
  font-size: 14px;
  color: var(--accent);
  animation: scroll-bob 2s ease-in-out infinite 0.15s;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ---------- Mural ---------- */
.mural { padding: 40px 28px 80px; max-width: 1500px; margin: 0 auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 110px;
  gap: 14px;
}

.card {
  perspective: 1400px;
  position: relative;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.7s ease;
}
.card.zoomed {
  z-index: 100;
  transform: translate(var(--zoom-tx, 0), var(--zoom-ty, 0)) scale(var(--zoom-scale, 1.6));
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(215, 38, 49, 0.6);
}
.card.no-flip { cursor: default; }
.card.no-flip:hover .face-front::before,
.card.no-flip:hover .face-front::after {
  opacity: 0.5;
  border-color: var(--ink);
}

/* Cuadradas */
.card[data-size="xs"]      { grid-column: span 2; grid-row: span 2; }
.card[data-size="sm"]      { grid-column: span 3; grid-row: span 2; }
.card[data-size="md"]      { grid-column: span 4; grid-row: span 3; }
.card[data-size="lg"]      { grid-column: span 5; grid-row: span 4; }
/* Verticales */
.card[data-size="tall-sm"] { grid-column: span 2; grid-row: span 3; }
.card[data-size="tall"]    { grid-column: span 3; grid-row: span 4; }
.card[data-size="tall-lg"] { grid-column: span 3; grid-row: span 6; }
/* Horizontales */
.card[data-size="wide-sm"] { grid-column: span 4; grid-row: span 2; }
.card[data-size="wide"]    { grid-column: span 6; grid-row: span 2; }
.card[data-size="wide-lg"] { grid-column: span 8; grid-row: span 3; }

.card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--line);
  overflow: hidden;
}

/* ---- Cara frontal ---- */
.face-front { background: var(--concrete); }
.face-front .photo {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.15) brightness(0.85) saturate(0.9);
  transition: filter 0.35s ease, transform 0.4s ease;
}
/* Hover sutil: solo cuando NO está ampliada al centro */
.card:not(.zoomed):hover .face-front .photo {
  filter: grayscale(0) contrast(1.3) brightness(1.05) saturate(1.4);
  transform: scale(1.06);
}
.card:not(.zoomed):hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
  z-index: 5;
}

.tag {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--ink);
  font-size: 10px; letter-spacing: 0.2em;
  padding: 4px 8px; text-transform: uppercase;
  z-index: 2;
}
.tag.red {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 700;
  animation: blink 1.4s infinite;
}

/* El videoclip no lleva el filtro oscuro de las fotos */
.videoclip {
  filter: none !important;
  transform: none !important;
}
.corner {
  position: absolute; bottom: 10px; right: 10px;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink); text-transform: uppercase;
  background: rgba(0,0,0,0.6);
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 2;
}
.face-front::before,
.face-front::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--ink);
  z-index: 2; opacity: 0.5;
  transition: opacity 0.3s, border-color 0.3s;
}
.face-front::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.face-front::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.card:hover .face-front::before,
.card:hover .face-front::after {
  opacity: 1; border-color: var(--accent);
}

/* ---- Cara trasera ---- */
.face-back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.02) 0 1px,
      transparent 1px 8px),
    linear-gradient(180deg, #0e0e0e, #050505);
  display: flex; flex-direction: column;
  padding: 18px;
  color: var(--ink);
}
.face-back .back-top {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; letter-spacing: 0.2em; color: var(--ink-dim);
  text-transform: uppercase;
  border-bottom: 1px dashed var(--ink-faint);
  padding-bottom: 8px;
}
.face-back .back-id { color: var(--accent); }
.face-back .legend {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
  padding: 14px 18px;
}
.face-back .meta {
  display: flex; justify-content: space-between; align-items: end;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-dim);
  border-top: 1px dashed var(--ink-faint);
  padding-top: 8px;
}
.face-back .date { color: var(--ink); font-weight: 700; }
.face-back .badge {
  display: inline-block;
  background: var(--accent);
  color: #000;
  padding: 3px 6px;
  font-weight: 700;
}

/* Botón Instagram dentro de la cara trasera */
.face-back .ig-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-dim);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: lowercase;
  cursor: pointer;
  margin-top: 8px;
  align-self: flex-start;
  transition: all 0.2s;
  z-index: 4;
}
.face-back .ig-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.face-back .ig-btn .ig-arrow { font-size: 9px; }

.card.flipping .face-back .legend {
  animation: glitch 0.45s steps(3) 1;
}
@keyframes glitch {
  0%   { transform: translateX(0); text-shadow: 0 0 0 transparent; }
  33%  { transform: translateX(-2px); text-shadow: 2px 0 var(--accent), -2px 0 #00e6ff; }
  66%  { transform: translateX(2px); text-shadow: -2px 0 var(--accent), 2px 0 #00e6ff; }
  100% { transform: translateX(0); text-shadow: 0 0 0 transparent; }
}

/* ---------- Responsive ---------- */
/* ---------- Tablet (≤900px): grid de 6 col, sin recortar fotos ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; }
  .card[data-size="xs"]      { grid-column: span 2; grid-row: span 2; }
  .card[data-size="sm"]      { grid-column: span 3; grid-row: span 3; }
  .card[data-size="md"]      { grid-column: span 6; grid-row: span 3; }
  .card[data-size="lg"]      { grid-column: span 6; grid-row: span 4; }
  .card[data-size="tall-sm"] { grid-column: span 3; grid-row: span 3; }
  .card[data-size="tall"]    { grid-column: span 3; grid-row: span 4; }
  .card[data-size="tall-lg"] { grid-column: span 3; grid-row: span 5; }
  .card[data-size="wide-sm"] { grid-column: span 6; grid-row: span 2; }
  .card[data-size="wide"]    { grid-column: span 6; grid-row: span 3; }
  .card[data-size="wide-lg"] { grid-column: span 6; grid-row: span 4; }

  /* Las fotos se ven enteras (con margen oscuro si la celda es más grande
     que la foto) en lugar de recortarse */
  .face-front .photo {
    object-fit: contain;
    background: #0a0a0a;
  }

  .topbar { padding: 12px 16px; }
  .mute-btn .mute-txt { display: none; }
}

/* ---------- Móvil (≤600px): 1 columna, foto entera siempre ---------- */
@media (max-width: 600px) {
  .grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .card {
    grid-column: unset !important;
    grid-row: unset !important;
    width: 100%;
  }
  /* Aspect-ratios fijos por categoría: encajan con fotos típicas
     y dejan los bordes oscuros mínimos */
  .card[data-size="xs"],
  .card[data-size="sm"],
  .card[data-size="md"],
  .card[data-size="lg"]      { aspect-ratio: 4 / 3; }
  .card[data-size="tall-sm"],
  .card[data-size="tall"]    { aspect-ratio: 3 / 4; }
  .card[data-size="tall-lg"] { aspect-ratio: 9 / 16; }
  .card[data-size="wide-sm"] { aspect-ratio: 4 / 3; }
  .card[data-size="wide"],
  .card[data-size="wide-lg"] { aspect-ratio: 16 / 9; }

  .face-front .photo {
    object-fit: contain;
    background: #0a0a0a;
  }

  /* Cara trasera: más compacta para que se vea TODO sin recortes
     cuando la card se amplía al centro en móvil */
  .face-back {
    padding: 12px 14px;
    justify-content: space-between;
  }
  .face-back .back-top {
    font-size: 9px; padding-bottom: 5px;
  }
  .face-back .legend {
    font-size: clamp(11px, 3.4vw, 14px);
    padding: 8px 4px;
    line-height: 1.4;
  }
  .face-back .meta {
    font-size: 9px;
    letter-spacing: 0.15em;
    padding-top: 5px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .face-back .badge { padding: 2px 5px; font-size: 9px; }
  .face-back .ig-btn { font-size: 10px; padding: 5px 8px; margin-top: 6px; }

  /* Hero un poco más compacto en móvil */
  .hero { gap: 24px; padding: 30px 20px 20px; }
  .scroll-hint { font-size: 10px; letter-spacing: 0.35em; }

  /* Overlay de entrada y NOW PLAYING también más legibles */
  .np-track { font-size: 10px; }
  .enter-meta { letter-spacing: 0.3em; }
}