.intro-screen{
  position:fixed;
  inset:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
}

.intro-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at center,
      rgba(255,190,90,0.08),
      rgba(0,0,0,0) 46%
    ),
    #050505;
}

.intro-stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.intro-logo{
  position:absolute;
  max-width:min(620px, 78vw);
  max-height:42vh;
  object-fit:contain;
  opacity:0;
  filter:
    drop-shadow(0 10px 26px rgba(0,0,0,0.55));
}

.intro-pucara{
  animation:
    introLogoOne 2s ease forwards;
}

.intro-dikelar{
  animation:
    introLogoTwo 3.2s ease forwards;
  animation-delay:1.8s;
}

.intro-pirate-stamp{
  position:absolute;
  left:52%;
  top:40%;
  width:min(130px, 38vw);
  object-fit:contain;
  opacity:0;
  transform:
    translate(-50%, -50%)
    translateY(120px)
    rotate(-18deg)
    scale(0.42);
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,0.42));
  animation:
    pirateStampIntro 1.2s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:2.85s;
}

.intro-exit{
  animation:
    introExit 520ms ease forwards;
}

@keyframes introLogoOne{
  0%{
    opacity:0;
    transform:scale(0.86);
  }

  18%,
  72%{
    opacity:1;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(1.06);
  }
}

@keyframes introLogoTwo{
  0%{
    opacity:0;
    transform:scale(0.86);
  }

  18%,
  78%{
    opacity:1;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(1.04);
  }
}

@keyframes introExit{
  0%{
    opacity:1;
  }

  100%{
    opacity:0;
  }
}

@keyframes pirateStampIntro{
  0%{
    opacity:0;
    transform:
      translateY(120px)
      rotate(-18deg)
      scale(0.72);
    filter:
      blur(6px)
      drop-shadow(0 0 0 rgba(255,0,0,0));
  }

  55%{
    opacity:1;
    transform:
      translateY(-8px)
      rotate(-18deg)
      scale(1.04);
    filter:
      blur(0)
      drop-shadow(0 0 24px rgba(255,40,40,0.42));
  }

  100%{
    opacity:1;
    transform:
      translateY(0)
      rotate(-18deg)
      scale(1);
    filter:
      blur(0)
      drop-shadow(0 0 10px rgba(255,30,30,0.22));
  }
}