/* ============================================================
   OMNIS — Loader
   Alas (symbols) GRANDES llenando la pantalla (blanco puro) +
   logo centrado y subido; gira SOLO el monograma (símbolo de
   arriba). Al terminar, las alas se agrandan y revela el sitio.
   loader.js recorta el viewBox de las SVG al arte real y separa
   el monograma del wordmark.
   ============================================================ */

.loader{
  position:fixed;inset:0;z-index:90;overflow:hidden;
  background:#e9e7df;
  opacity:1;visibility:visible;
  transition:opacity .9s ease .25s, visibility 0s linear 1.15s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}

/* fondo grabado tenue (Sóller) */
.loader__bg{
  position:absolute;inset:0;
  background:url("loader/bg.jpg") center/cover no-repeat;
  opacity:.5;
}
.loader__bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 70% at 50% 50%,transparent,rgba(233,231,223,.5));
}

/* ALAS — ampliadas y recortadas por los bordes (solo se ve una parte),
   a proporción natural, blanco puro */
.loader__symbols{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  transform:scale(1.15);transform-origin:center;   /* zoom: "que se abra mucho" */
  transition:transform 1.15s cubic-bezier(.7,0,.2,1), opacity 1s ease .1s;
}
.loader__symbols svg{display:block;width:100%;height:100%;filter:url(#omnisWave)} /* ondulación líquida en loop */
.loader__symbols svg path{fill:#fff !important}   /* textura blanca */

/* LOGO — centrado y subido un poco */
.loader__logo{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-60%);
  width:min(30vw,440px);aspect-ratio:230/104;z-index:2;
  perspective:1500px;
}
.loader__logo > div{position:absolute;inset:0}
.loader__wordmark svg,
.loader__monogram svg{display:block;width:100%;height:100%}

/* gira SOLO el monograma (símbolo de arriba), sobre su propio centro */
.loader__monogram{transform-style:preserve-3d}
.loader__monogram svg{
  transform-origin:49% 18%;
  animation:omnisSpin 2.6s cubic-bezier(.55,.1,.45,.9) infinite;
}
@keyframes omnisSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}

/* barra de carga (debajo del logo) */
.loader__bar{
  position:absolute;left:50%;top:60%;transform:translateX(-50%);
  width:230px;height:2px;border-radius:2px;overflow:hidden;
  background:rgba(0,79,89,.16);
}
.loader__fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#b89664,#004f59);
  box-shadow:0 0 10px rgba(184,150,100,.5);
  transition:width .12s linear;
}
.loader__pct{
  position:absolute;left:50%;top:calc(60% + 18px);transform:translateX(-50%);
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:#004f59;
}

/* EXIT: las alas se agrandan, el logo se va */
.loader.done .loader__symbols{transform:scale(2.2);opacity:0}
.loader.done .loader__logo{opacity:0;transition:opacity .5s ease}
.loader.done .loader__bar,
.loader.done .loader__pct{opacity:0;transition:opacity .4s ease}

html.loading,body.loading{overflow:hidden;height:100%}

/* móvil: logo un poco más grande. Las alas son un gráfico MUY ancho (~3.45:1):
   en vertical el "slice" las ampliaba ~5x y las deformaba sobre el fondo -> se veía
   fatal. En móvil se ocultan; queda el grabado de Sóller + el logo, limpio y elegante. */
@media(max-width:760px){
  .loader__logo{width:min(56vw,320px)}
  .loader__symbols{display:none}
}

@media(prefers-reduced-motion:reduce){
  .loader__monogram svg{animation:none}
  .loader__symbols svg{filter:none}
}