/* ============================================================
   Galería pública verfotos.php — presentación a pantalla completa
   ============================================================ */
:root{ --neon:#ff2fd0; --cyan:#00e6ff; --dur:1000ms; }
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif}
#gallery{position:fixed;inset:0;overflow:hidden;background:#000}

/* Capas de imagen (crossfade entre A y B) */
.layer{position:absolute;inset:0;opacity:0;transition:opacity var(--dur) ease;z-index:1}
.layer.show{opacity:1;z-index:2}
.layer .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(28px) brightness(.5);transform:scale(1.15)}
.layer.fondo-negro .bg{background:#000!important;filter:none;transform:none}
.layer .fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}
.layer.ajuste-cover .fg{object-fit:cover}

/* Variantes de transición (se aplican a la capa entrante mientras aparece) */
.layer .fg{transition:transform var(--dur) ease, opacity var(--dur) ease}
.enter-slide .fg{animation:slideIn var(--dur) ease both}
.enter-vertical .fg{animation:vertIn var(--dur) ease both}
.enter-zoom .fg{animation:zoomIn var(--dur) ease both}
.enter-blur .fg{animation:blurIn var(--dur) ease both}
@keyframes slideIn{from{transform:translateX(6%);opacity:.2}to{transform:translateX(0);opacity:1}}
@keyframes vertIn{from{transform:translateY(6%);opacity:.2}to{transform:translateY(0);opacity:1}}
@keyframes zoomIn{from{transform:scale(1.08);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes blurIn{from{filter:blur(18px);opacity:.2}to{filter:blur(0);opacity:1}}

/* Ken Burns (aplicado durante la exposición) */
.kenburns .fg{animation:kb 12s ease-in-out both}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(0,-1%)}}

/* Estado de espera */
.waiting{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;
  background:radial-gradient(120% 80% at 50% 12%,rgba(138,92,255,.35),transparent 55%),
             radial-gradient(90% 60% at 50% 100%,rgba(255,47,208,.28),transparent 60%),#05030f;
  transition:opacity .6s}
.waiting.hidden{opacity:0;pointer-events:none}
.waiting img{max-height:16vh;max-width:44vw;object-fit:contain;filter:drop-shadow(0 0 16px rgba(0,230,255,.5))}
.waiting .msg{font-family:'Orbitron',sans-serif;font-weight:700;font-size:4.4vh;text-transform:uppercase;letter-spacing:.4vw;
  color:#eafcff;text-shadow:0 0 12px var(--cyan),0 0 30px rgba(0,230,255,.5);animation:breathe 3s ease-in-out infinite}
.waiting .dots{display:flex;gap:1rem}
.waiting .dots span{width:14px;height:14px;border-radius:50%;background:var(--neon);box-shadow:0 0 14px var(--neon);animation:bounce 1.4s infinite}
.waiting .dots span:nth-child(2){animation-delay:.2s}
.waiting .dots span:nth-child(3){animation-delay:.4s}
@keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Logo persistente y overlays de info */
.gal-logo{position:absolute;top:2.4vh;left:0;right:0;z-index:6;display:flex;justify-content:center;pointer-events:none}
.gal-logo img{max-height:9vh;max-width:30vw;object-fit:contain;filter:drop-shadow(0 0 10px rgba(0,230,255,.4))}
.gal-logo:empty{display:none}
.gal-info{position:absolute;bottom:2.4vh;right:2.6vw;z-index:6;font-size:2vh;color:#dff;text-shadow:0 0 8px rgba(0,0,0,.8);opacity:.85}

/* Controles mínimos */
.fs-btn{position:fixed;bottom:2.4vh;left:2.6vw;z-index:30;width:6vh;height:6vh;border-radius:50%;
  border:2px solid rgba(0,230,255,.5);background:rgba(10,4,28,.6);color:#fff;font-size:2.4vh;cursor:pointer;opacity:.25;transition:.2s}
.fs-btn:hover{opacity:1}
.conn-warn{position:fixed;bottom:2.4vh;left:11vw;z-index:30;background:rgba(255,84,112,.85);color:#fff;
  padding:.6vh 1.2vw;border-radius:10px;font-size:1.7vh;display:none}
.conn-warn.show{display:block}
.hidden{display:none!important}