:root{
  --gold:#d7aa68;
  --red:#9b1019;
  --pink:#ff2b87;
  --deep:#02030a;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  min-height:100%;
  background:var(--deep);
}

body{
  overflow:hidden;
  font-family:"DM Sans",sans-serif;
  color:white;
}

.home{
  position:relative;
  width:100%;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  isolation:isolate;
  background:#06194d;
}

/* FONDO */

.background{
  position:absolute;
  inset:0;
  z-index:0;
  background:url("assets/background-desktop.jpg") center/cover no-repeat;
  transform:scale(1.035);
  animation:
    bgIn 1.5s cubic-bezier(.2,.8,.2,1) forwards,
    breathe 14s 1.5s ease-in-out infinite;
}

.background::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(24,91,255,.16),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.02),
      rgba(0,0,0,.18) 68%,
      rgba(0,0,0,.76)
    );
}

/* LUCES */

.light{
  position:absolute;
  bottom:-18vh;
  width:36vw;
  height:74vh;
  z-index:1;
  filter:blur(38px);
  opacity:.16;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255,54,25,.75),
      transparent 67%
    );
  animation:lightPulse 5.5s ease-in-out infinite;
}

.light-left{
  left:-15vw;
}

.light-right{
  right:-15vw;
  animation-delay:-2.7s;
}

/* PERSONAJE */

.character-stage{
  position:absolute;
  z-index:3;
  left:2%;
  bottom:7%;
  width:min(45vw,760px);
  transform-origin:bottom center;
  opacity:0;
  animation:
    characterIn 1.25s .35s cubic-bezier(.15,.8,.2,1) forwards;
}

.character{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  filter:
    drop-shadow(0 32px 30px rgba(0,0,0,.62));

  /*
  El degradado elimina la línea dura del recorte
  en la parte inferior del personaje.
  */
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      rgba(0,0,0,.92) 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 82%,
      rgba(0,0,0,.92) 88%,
      transparent 100%
    );

  animation:
    float 5.6s 1.6s ease-in-out infinite;
}

.character-glow{
  position:absolute;
  z-index:1;
  inset:15% 0 4%;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 50% 56%,
      rgba(218,25,46,.34),
      rgba(20,70,200,.12) 45%,
      transparent 72%
    );
  filter:blur(28px);
}

/* CONTENEDOR DEL LOGO */

.title-lockup{
  position:absolute;
  z-index:4;
  right:5.5%;
  top:17%;
  width:min(51vw,850px);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:0;
  transform:translateY(30px);
  animation:titleIn 1s .7s ease forwards;
}

/* LOGOTIPO REAL SIN FONDO */

.logo-lockup{
  right:6%;
  top:9%;
  width:min(27.5vw,450px);
  display:block;
  text-shadow:none;
  pointer-events:none;
}

.main-logo{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 28px 25px rgba(0,0,0,.60))
    drop-shadow(0 0 18px rgba(255,47,151,.20));
  animation:
    logoFloat 5.6s 1.45s ease-in-out infinite;
}

.logo-halo{
  position:absolute;
  z-index:1;
  inset:12% 8% 10%;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 50% 58%,
      rgba(255,45,142,.25),
      rgba(36,67,255,.13) 46%,
      transparent 74%
    );
  filter:blur(28px);
  animation:logoGlow 4.8s ease-in-out infinite;
}

/* NAVEGACIÓN */

.nav{
  position:absolute;
  z-index:6;
  left:0;
  right:0;
  bottom:0;
  height:88px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:rgba(1,2,7,.90);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(215,170,104,.2);
  opacity:0;
  animation:navIn .8s 1.2s forwards;
}

.nav a{
  position:relative;
  display:flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  text-decoration:none;
  border-right:1px solid rgba(215,170,104,.18);
  transition:.28s;
}

.nav a:last-child{
  border-right:0;
}

.nav a span{
  color:var(--red);
  font-size:1.35rem;
}

.nav a b{
  font-family:"Rye",serif;
  font-size:.8rem;
  letter-spacing:.05em;
}

.nav a::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:10px;
  height:2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--red),
      transparent
    );
  opacity:0;
  transform:scaleX(.4);
  transition:.28s;
}

.nav a:hover{
  background:rgba(154,15,25,.12);
  color:#f2cf93;
}

.nav a:hover::after{
  opacity:1;
  transform:scaleX(1);
}

.enter{
  display:none;
}

/* ANIMACIONES */

@keyframes bgIn{
  from{
    opacity:0;
    transform:scale(1.11);
  }

  to{
    opacity:1;
    transform:scale(1.035);
  }
}

@keyframes breathe{
  50%{
    transform:scale(1.055);
  }
}

@keyframes lightPulse{
  50%{
    opacity:.28;
    transform:translateY(-2vh) scale(1.08);
  }
}

@keyframes characterIn{
  from{
    opacity:0;
    transform:translateY(80px) scale(.94);
  }

  to{
    opacity:1;
    transform:none;
  }
}

@keyframes titleIn{
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes navIn{
  to{
    opacity:1;
  }
}

@keyframes float{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-9px);
  }
}

@keyframes logoFloat{
  0%,
  100%{
    transform:translateY(0) scale(1);
  }

  50%{
    transform:translateY(-9px) scale(1.012);
  }
}

@keyframes logoGlow{
  50%{
    opacity:.72;
    transform:scale(1.07);
  }
}

/* MÓVIL */

@media(max-width:760px){

  body{
    overflow:auto;
  }

  .home{
    min-height:100svh;
    height:100svh;
  }

  .background{
    background-image:url("assets/background-mobile.jpg");
    background-position:center top;
    transform:scale(1);
    animation:
      mobileIn 1.2s ease forwards,
      mobileBreathe 12s 1.2s ease-in-out infinite;
  }

  .background::after{
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.02),
        transparent 55%,
        rgba(0,0,0,.72)
      );
  }

  /*
  El personaje se baja para que el final del recorte
  quede oculto detrás de la navegación.
  */
  .character-stage{
    left:50%;
    bottom:7%;
    width:98vw;
    transform:translateX(-50%);
    animation:
      characterMobile 1.15s .3s ease forwards;
  }

  .character{
    width:104%;
    margin-left:-2%;

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 76%,
        rgba(0,0,0,.94) 83%,
        rgba(0,0,0,.42) 91%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        to bottom,
        #000 0%,
        #000 76%,
        rgba(0,0,0,.94) 83%,
        rgba(0,0,0,.42) 91%,
        transparent 100%
      );

    animation:
      floatMobile 5.2s 1.5s ease-in-out infinite;
  }

  .character-glow{
    inset:20% 3% 2%;
  }

  .title-lockup{
    right:auto;
    left:50%;
    top:auto;
    bottom:10.8%;
    width:92%;
    transform:translate(-50%,25px);
    animation:titleMobile .9s .65s ease forwards;
  }

  /*
  Logo al 50 % del tamaño anterior.
  */
  .logo-lockup{
    left:50%;
    right:auto;
    top:auto;
    bottom:12%;
    width:44vw;
    transform:translate(-50%,25px);
    animation:titleMobile .9s .65s ease forwards;
  }

  .main-logo{
    width:100%;
    max-height:22vh;
    object-fit:contain;
    animation:
      logoFloat 5.2s 1.45s ease-in-out infinite;
  }

  .nav{
    height:74px;
    grid-template-columns:repeat(6,1fr);
    background:rgba(1,2,7,.96);
  }

  .nav a{
    flex-direction:column;
    gap:3px;
  }

  .nav a span{
    font-size:1.05rem;
  }

  .nav a b{
    font-size:.48rem;
  }

  .nav a::after{
    bottom:5px;
  }

  .light{
    width:70vw;
    height:45vh;
  }
}

@keyframes mobileIn{
  from{
    opacity:0;
    transform:scale(1.04);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes mobileBreathe{
  50%{
    transform:scale(1.018);
  }
}

@keyframes characterMobile{
  from{
    opacity:0;
    transform:translate(-50%,70px) scale(.94);
  }

  to{
    opacity:1;
    transform:translateX(-50%);
  }
}

@keyframes floatMobile{
  0%,
  100%{
    transform:translateY(26px);
  }

  50%{
    transform:translateY(17px);
  }
}

@keyframes titleMobile{
  to{
    opacity:1;
    transform:translate(-50%,0);
  }
}

/* ACCESIBILIDAD */

@media(prefers-reduced-motion:reduce){

  *{
    animation:none!important;
    transition:none!important;
  }

  .character-stage,
  .title-lockup,
  .nav{
    opacity:1;
  }

  .character-stage{
    transform:translateX(-50%);
  }

  .title-lockup{
    transform:translateX(-50%);
  }
}
/* LOGO BARBA AZUL SUPERIOR */

.barba-logo-wrap{
  position:absolute;
  z-index:5;
  top:7%;
  left:50%;
  width:min(20vw,280px);
  transform:translateX(-50%);
  opacity:0;
  animation:barbaLogoIn 1s .8s ease forwards;
  pointer-events:none;
}

.barba-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 15px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 12px rgba(0,180,255,.25));
  animation:barbaLogoFloat 5.8s 1.7s ease-in-out infinite;
}

@keyframes barbaLogoIn{
  from{
    opacity:0;
    transform:translate(-50%,-18px) scale(.94);
  }

  to{
    opacity:1;
    transform:translateX(-50%) scale(1);
  }
}

@keyframes barbaLogoFloat{
  0%,
  100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-6px);
  }
}

@media(max-width:760px){
  .barba-logo-wrap{
    top:7%;
    width:37vw;
    max-width:220px;
  }
}
@media(max-width:760px){
  .barba-logo-wrap{
    top:1%;
  }
}