.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%{
    opacity:1;
    transform:scale(1);
  }

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

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

@keyframes introLogoTwo{

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

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

  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(0px)
      drop-shadow(
        0 0 24px rgba(255,40,40,0.42)
      );
  }

  100%{

    opacity:1;

    transform:
      translateY(0px)
      rotate(-18deg)
      scale(1);

    filter:
      blur(0px)
      drop-shadow(
        0 0 10px rgba(255,30,30,0.22)
      );
  }
}