/* ==========================================================
   Preloader animado — Eduardo Pedraza
   Solo se carga en portada (ver functions.php)

   Medidas:
   - Logo completo:  ~319px x 114px  (corchete 23 + imagen 273 + corchete 23)
   - Corchete:        23px x 114px  (uno a la izquierda, uno a la derecha)
   - Imagen de texto: 273px x 90px  (tu archivo real, como <img> o fondo de div)
   ========================================================== */
:root{
  --ep-ink:#2b2b2b;      /* color de los corchetes — ajusta si tu marca usa otro */
  --ep-paper:#ffffff;    /* fondo del preloader — ajusta si tu marca usa otro */
  --ep-dim:0.15;         /* opacidad inicial de la imagen de texto */
}

#ep-preloader{
  position:fixed;
  inset:0;
  background:var(--ep-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
  transition:opacity .6s ease, visibility .6s ease;
}
#ep-preloader.ep-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.ep-loading{ overflow:hidden; }

.ep-lockup{
  height:114px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}

/* corchetes: uno a la izquierda, uno a la derecha — 23 x 114 cada uno */
.ep-mark{
  width:23px;
  height:114px;
  flex:none;
  position:relative;
  z-index:2;
  opacity:0;
}
.ep-mark svg{ width:100%; height:100%; display:block; }
.ep-mark path{
  fill:none;
  stroke:var(--ep-ink);
  stroke-width:3;
  stroke-linejoin:miter;
  stroke-linecap:square;
}
.ep-mark-left{ transform:translateX(-60px); }
.ep-mark-right{ transform:translateX(60px); }

#ep-preloader.ep-run .ep-mark-left{
  animation: ep-mark-in-left .8s cubic-bezier(.19,1,.22,1) .05s forwards;
}
#ep-preloader.ep-run .ep-mark-right{
  animation: ep-mark-in-right .8s cubic-bezier(.19,1,.22,1) .15s forwards;
}
@keyframes ep-mark-in-left{ to{ opacity:1; transform:translateX(0); } }
@keyframes ep-mark-in-right{ to{ opacity:1; transform:translateX(0); } }

/* imagen de texto central: 273 x 70, con relleno enmascarado de abajo hacia arriba.
   Se superpone 1.5px a cada corchete para llegar a 316px totales
   (23 + 273 + 23 = 319, menos 1.5px x 2 de solape = 316px) */
.ep-word{
  position:relative;
  width:273px;
  height:90px;
  flex:none;
  margin:0 -3px 0 0;
  z-index:1;
  opacity:0;
}
#ep-preloader.ep-run .ep-word{
  animation: ep-word-fade-in .5s ease .55s forwards;
}
@keyframes ep-word-fade-in{ to{ opacity:1; } }

/* Usa CUALQUIERA de las dos opciones dentro de .ep-base / .ep-fill:
   A) <img> — deja el <img> tal cual está en el HTML
   B) background-image en un <div> — quita el <img> y define
      background-image: url(...) en estas dos clases */
.ep-base,
.ep-fill{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.ep-base img,
.ep-fill img{
  width:100%;
  height:100%;
  display:block;
}
/* Si usas background-image en vez de <img>, descomenta y edita: */
/*
.ep-base{ background:url('ruta/a/tu-logo-texto.png') no-repeat center / contain; }
.ep-fill{ background:url('ruta/a/tu-logo-texto.png') no-repeat center / contain; }
*/

.ep-base{ opacity:var(--ep-dim); }

.ep-fill-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  /* La máscara sube SOLO dentro de la imagen de texto, de abajo hacia arriba */
  clip-path: inset(calc(100% - (var(--progress,0) * 1%)) 0 0 0);
  will-change: clip-path;
}
.ep-fill{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .ep-mark, .ep-word{ animation:none !important; opacity:1 !important; transform:none !important; }
  .ep-fill-wrap{ clip-path:none !important; }
}