/* LOADING OVERLAY */
.loading-overlay {
  background: var(--color-surface);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: clamp(2rem, 5vw, 4rem);
}


 #particles{
      position:fixed; inset:0;
      z-index:0;
      pointer-events:none;
      background:transparent !important;
      display:block;
    }



.loading-text {
  font-weight: bold;
  font-family: sans-serif;
}

.loading-overlay::before {
  content: var(--percentage);
  
  position: absolute;
  right: var(--default-padding);
  bottom: var(--default-padding);
  color: var(--bg-color);
  font-size: clamp(3rem, 8vw, 12rem);

}


@font-face {
  font-family: "Horizon";
  src:
    url("/font/horizon.woff2") format("woff2"),
    url("/font/horizon.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Horizon";
  src:
    url("/font/horizon.woff2") format("woff2"),
    url("/font/horizon.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'MiFuente';
  src: url('../font/FFFFORWA.woff2') format('woff2'),
       url('../font/FFFFORWA.woff') format('woff'),
       url('../font/FFFFORWA.otf') format('truetype'); /* opcional */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



.screen {
  position: relative;          /* permite top o transform */
  width: 100%;
  max-width: 1200px;           /* opcional: limita ancho */
  margin-inline: auto;         /* centra horizontal en bloque */
  /* IMPORTANTE: quita height:100% para que el centrado funcione bien */
  /* height: 100%;  <- quitar */

  /* 1) Usa una variable para mover verticalmente desde el centro */
  transform: translateY(var(--screen-shift, 0));

  /* Si prefieres top en lugar de transform:
     top: var(--screen-shift, 0);  (y quitas el transform de arriba) */
	 text-align: center;
	 margin: auto;
}



.cntr {
   min-height: 100svh;          /* mejor que 100vh en móviles */
  display: grid;
  place-items: center;         /* centra en ambos ejes */
  opacity: 0;
  visibility: hidden;
}




.cntr img.logo {
  position: absolute;
  max-width: 280px;
  width: 20%;
  min-width: 210px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}



.shape-overlays {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  opacity: 0;

    transition: opacity 0.3s ease;

    shape-rendering: crispEdges;   /* alinea a píxeles */
  vector-effect: non-scaling-stroke;

}

.text span {
  opacity: 0; /* las palabras empiezan invisibles */
  display: inline-block; /* necesario para que se puedan animar */
}

.text {
   font-family: "Horizon", system-ui, -apple-system, "Inter", Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
    text-transform: uppercase;
  font-size: 33px;
text-align:center;
color: white;
   line-height: 1.1;
  width: min(90%, 950px);
  margin: 0 auto .6em;

 
}





.screen button {
  
	
}


/* Efecto respiración luminosa */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.8);
  }
}

/* Shake delicado */
@keyframes shake {
  0%, 90%, 100% {
    transform: translateX(0);
  }
  92% {
    transform: translateX(-3px);
  }
  94% {
    transform: translateX(3px);
  }
  96% {
    transform: translateX(-2px);
  }
  98% {
    transform: translateX(2px);
  }
}





.container {
  filter: url(#blurFilter) saturate(1.5) brightness(1.1);
  position: absolute;
}

body {
  width: 100vw;
  height: 100svh;
  place-items: center;
  background-color: var(--color-surface);
  color: var(--color-primary);
  margin: 0;
  position: relative;
  overflow: hidden;
}

/* 
CIRCULO COOL 
body:after {
  content: "";
  position: absolute;
  width: 80vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background:#111;
  translate: 0 5%;
  filter: blur(1.5rem);
}*/


* {
  box-sizing: border-box;
}

.filter {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

:root {
  --color-primary: #ff00cc;
  --color-secondary: #00e5ff;
  --color-tertiary: #ffe600;
  --color-quaternary: #9b5de5;
  --color-surface: #111;
}

/* Gradiente 1 */
.grad1-stop1 { stop-color: var(--color-primary); }
.grad1-stop2 { stop-color: var(--color-secondary); }

/* Gradiente 2 */
.grad2-stop1 { stop-color: var(--color-tertiary); }
.grad2-stop2 { stop-color: var(--color-quaternary); }

/* Gradiente 3 */
.grad3-stop1 { stop-color: var(--color-secondary); }
.grad3-stop2 { stop-color: var(--color-primary); }



@-moz-keyframes shine {
  100% {
    left: 200%;
  }
}
@-webkit-keyframes shine {
  100% {
    left: 200%;
  }
}
@-o-keyframes shine {
  100% {
    left: 200%;
  }
}
@keyframes shine {
  100% {
    left: 200%;
  }
}


#backgroundContainer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;  
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  z-index: -1;
}
#background {
  position: absolute;
  top: 50%;
  left: 50%;
  filter: blur(min(0.2vw, 0.2vh));
  transform: scale(1.1) translate(-50%, -50%);
  transform-origin: top left;
}