/* ==========================================================================
   IPE — preloader.css
   Dos animaciones de entrada distintas:
   .preloader--orbit  → sitio del grupo (anillo orbital + logo letra a letra)
   .preloader--press  → portal de la revista (pliegos que se apilan + anillo)
   Ambas se ocultan añadiendo la clase .is-done y se omiten por completo si el
   usuario tiene activada la preferencia de movimiento reducido.
   ========================================================================== */

.preloader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .55s var(--ease),visibility .55s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__inner{display:grid;place-items:center;gap:28px;text-align:center;padding:24px}
.preloader__label{
  font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--tx-3);opacity:0;animation:pl-fade .6s var(--ease) 1.15s forwards;
}
.preloader__bar{
  width:190px;height:2px;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb,var(--tx-3) 26%,transparent);
}
.preloader__bar i{
  display:block;height:100%;width:0;background:var(--accent);
  animation:pl-bar 2.1s var(--ease) forwards;
}
@keyframes pl-bar{0%{width:0}45%{width:62%}100%{width:100%}}
@keyframes pl-fade{to{opacity:1}}

/* ---------- A. Orbital (grupo de investigación) -------------------------- */
.pl-orbit{width:190px;height:190px;position:relative}
.pl-orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Tres arcos concéntricos que giran a distinta velocidad y se dibujan */
.pl-orbit__ring{
  fill:none;stroke-linecap:round;transform-origin:100px 100px;
  stroke-dasharray:var(--dash,120 480);
  animation:pl-spin var(--dur,2.6s) linear infinite, pl-draw 1.1s var(--ease) forwards;
}
.pl-orbit__ring--1{stroke:var(--wine);stroke-width:2.5;--dash:170 430;--dur:2.4s}
.pl-orbit__ring--2{stroke:var(--wine-soft);stroke-width:1.6;--dash:90 470;--dur:3.6s;animation-direction:reverse,normal}
.pl-orbit__ring--3{stroke:var(--gold);stroke-width:1.2;--dash:40 500;--dur:1.9s}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-draw{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}

/* Puntos satélite que orbitan */
.pl-orbit__dot{fill:var(--wine-soft);transform-origin:100px 100px;animation:pl-spin 3s linear infinite}
.pl-orbit__dot--b{fill:var(--gold);animation-duration:4.8s;animation-direction:reverse}

/* Núcleo que late y letras que entran una a una */
.pl-orbit__core{
  fill:var(--surface-2);stroke:var(--line);stroke-width:1;
  transform-origin:100px 100px;animation:pl-pulse 2.4s var(--ease) infinite;
}
@keyframes pl-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
.pl-orbit__ch{
  font-family:var(--ff-serif);font-size:44px;font-weight:600;fill:var(--tx);
  opacity:0;transform-origin:100px 112px;
  animation:pl-letter .5s var(--ease) forwards;
}
.pl-orbit__ch:nth-of-type(1){animation-delay:.55s}
.pl-orbit__ch:nth-of-type(2){animation-delay:.75s}
.pl-orbit__ch:nth-of-type(3){animation-delay:.95s}
@keyframes pl-letter{
  0%{opacity:0;transform:translateY(14px) scale(.7)}
  60%{opacity:1;transform:translateY(-2px) scale(1.06)}
  100%{opacity:1;transform:none}
}

/* ---------- B. Prensa (portal de la revista) ----------------------------- */
.pl-press{width:180px;height:180px;position:relative;display:grid;place-items:center}

/* Anillo de progreso con degradado cónico */
.pl-press__ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--wine) 0turn,var(--navy) .45turn,transparent .78turn,transparent 1turn);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:pl-spin 1.4s linear infinite;
}
.pl-press__ring::after{
  content:'';position:absolute;inset:14px;border-radius:50%;
  border:1px dashed color-mix(in srgb,var(--wine) 32%,transparent);
  animation:pl-spin 9s linear infinite reverse;
}

/* Tres pliegos que caen y se apilan formando el número */
.pl-press__sheet{
  position:absolute;width:62px;height:82px;border-radius:4px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(27,33,66,.16);
  opacity:0;animation:pl-sheet 1.5s var(--ease) forwards;
}
.pl-press__sheet::before,.pl-press__sheet::after{
  content:'';position:absolute;left:11px;right:11px;height:2px;border-radius:2px;
  background:color-mix(in srgb,var(--tx-3) 40%,transparent);
}
.pl-press__sheet::before{top:20px}
.pl-press__sheet::after{top:30px;right:26px}
.pl-press__sheet--1{animation-delay:.05s;--rot:-11deg;--dx:-16px}
.pl-press__sheet--2{animation-delay:.25s;--rot:6deg;--dx:9px}
.pl-press__sheet--3{animation-delay:.45s;--rot:0deg;--dx:0px;
  background:var(--wine);border-color:var(--wine)}
.pl-press__sheet--3::before,.pl-press__sheet--3::after{background:rgba(255,255,255,.55)}
@keyframes pl-sheet{
  0%{opacity:0;transform:translateY(-58px) rotate(calc(var(--rot) * 3)) scale(.86)}
  55%{opacity:1}
  100%{opacity:1;transform:translate(var(--dx),0) rotate(var(--rot))}
}
.pl-press__mark{
  position:absolute;font-family:var(--ff-serif);font-size:26px;color:#fff;
  opacity:0;animation:pl-fade .5s var(--ease) 1.05s forwards;
}

/* Sin animación si el usuario la desactivó */
@media(prefers-reduced-motion:reduce){
  .preloader{display:none}
}