/* My first attempt at doing animations with CSS */

.intro {
  position: absolute;
  width: 66%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
}

.unloaded {
  display: none;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #fff7ee;
}

html, body {
    cursor: url("assets/cursor/Normal.cur"), auto;
    width: 99%;
    height: 99%;
}

p {
  cursor: url("assets/cursor/Text\ Select.cur"), auto;
}

.display_block {
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 500;
  background: rgba(0,0,0,0);
}

/**/
.fade-text0 {
  opacity: 0;
  animation: fadeCycle 3s ease-in-out forwards;
  animation-delay: 1s;
}
.fade-text1 {
  opacity: 0;
  animation: fadeCycle 3s ease-in-out forwards;
  animation-delay: 4s;
}
.fade-text2 {
  opacity: 0;
  animation: fadeCycle 6s ease-in-out forwards;
  animation-delay: 7s;
}


@keyframes fadeCycle {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  40%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
/**/

.main {
  /* border: 2px solid black; */
  position: absolute;
  margin-top: 25%;
  margin-left: 25%;
  height: 35px;
  width: auto;
  font-size: 35px;
}
/**/
.delayed-fadein-main {
    opacity: 0;
    animation: fadeMain 3s ease-in-out forwards;
    animation-delay: 13s;
}
.instant-fadein-main {
    opacity: 0;
    animation: fadeMain 3s ease-in-out forwards;
    animation-delay: 100ms;
}

@keyframes fadeMain {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  40%  { opacity: 0; }
  70%  { opacity: 1; }
  100% { opacity: 1; }
}
/**/

.fadeout-main {
    opacity: 0;
    animation: fadeoutMain 1s ease-in-out forwards;
}
@keyframes fadeoutMain {
  0%   { opacity: 1; }
  10%  { opacity: 0.5; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

.sprite1 {
  /* border: 2px solid red; */
  position: relative;
  top: -190px; /* adjust based on sprite height */
  left: 110px;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  z-index: -1;
  background-size: cover;
  background-image: url('assets/explosion/0000.png');
}
.sprite2 {
  /* border: 2px solid red; */
  position: relative;
  top: -380px; /* adjust based on sprite height */
  left: 70px;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  z-index: -1;
  background-size: cover;
  background-image: url('assets/explosion/0000.png');
}
.sprite3 {
  /* border: 2px solid red; */
  position: relative;
  top: -590px; /* adjust based on sprite height */
  left: 140px;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  z-index: -1;
  background-size: cover;
  background-image: url('assets/explosion/0000.png');
}

.animate {
  animation: explode 1s steps(1) forwards;
}


/* This does NOT look elegant - but it works */
@keyframes explode {
  0%   { background-image: url('assets/explosion/0001.png'); }
  3.3% { background-image: url('assets/explosion/0002.png'); }
  6.6% { background-image: url('assets/explosion/0003.png'); }
  10%  { background-image: url('assets/explosion/0004.png'); }
  13.3%{ background-image: url('assets/explosion/0005.png'); }
  16.6%{ background-image: url('assets/explosion/0006.png'); }
  20%  { background-image: url('assets/explosion/0007.png'); }
  23.3%{ background-image: url('assets/explosion/0008.png'); }
  26.6%{ background-image: url('assets/explosion/0009.png'); }
  30%  { background-image: url('assets/explosion/0010.png'); }
  33.3%{ background-image: url('assets/explosion/0011.png'); }
  36.6%{ background-image: url('assets/explosion/0012.png'); }
  40%  { background-image: url('assets/explosion/0013.png'); }
  43.3%{ background-image: url('assets/explosion/0014.png'); }
  46.6%{ background-image: url('assets/explosion/0015.png'); }
  50%  { background-image: url('assets/explosion/0016.png'); }
  53.3%{ background-image: url('assets/explosion/0017.png'); }
  56.6%{ background-image: url('assets/explosion/0018.png'); }
  60%  { background-image: url('assets/explosion/0019.png'); }
  63.3%{ background-image: url('assets/explosion/0020.png'); }
  66.6%{ background-image: url('assets/explosion/0021.png'); }
  70%  { background-image: url('assets/explosion/0022.png'); }
  73.3%{ background-image: url('assets/explosion/0023.png'); }
  76.6%{ background-image: url('assets/explosion/0024.png'); }
  80%  { background-image: url('assets/explosion/0025.png'); }
  83.3%{ background-image: url('assets/explosion/0026.png'); }
  86.6%{ background-image: url('assets/explosion/0027.png'); }
  90%  { background-image: url('assets/explosion/0028.png'); }
  93.3%{ background-image: url('assets/explosion/0029.png'); }
  100% { background-image: url('assets/explosion/0030.png'); }
}

.fadein-overlay {
    opacity: 0;
    animation: fadeinOverlay 1s ease-in-out forwards;
}
@keyframes fadeinOverlay {
  0%   { opacity: 0; }
  100% { opacity: 0.3; }
}

.fadeout-overlay {
    opacity: 1;
    animation: fadeoutOverlay 1s ease-in-out forwards;
}
@keyframes fadeoutOverlay {
  0%   { opacity: 0.3; }
  100% { opacity: 0; }
}

#popover {
  z-index: 10;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
}

.popover_background {
  background-color: #1f1f1f;
  z-index: 5;
  opacity: 0.33;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  animation: popover_background_fadein 1s;
}
@keyframes popover_background_fadein {
  0%   { opacity: 0; }
  100% { opacity: 0.33; }
}

.fadeout_background {
  background-color: #1f1f1f;
  z-index: 5;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  animation: fadeout_background_animation 1.8s;
}
@keyframes fadeout_background_animation {
  0%   { opacity: 0.33; }
  100% { opacity: 0; }
}

.envelope_rise {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 20%;
  height: auto;
  animation: envelope_rise_animation 3.2s;
}
@keyframes envelope_rise_animation {
  0% {
    top: 100%;
    opacity: 8%;
    transform: translate(-50%, -50%);
  }
  100% {
    top: 50%;
    opacity: 100%;
    transform: translate(-50%, -50%);
  }
}

.envelope {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 20%;
  height: auto;
  cursor: url("assets/cursor/Link.cur"), auto;
}

.envelope:hover {
  top: 49%;
  animation: envelope_hover 0.5s;
}
@keyframes envelope_hover {
  0%   {  top: 50%; }
  100% {  top: 49%; }
}

.envelope_disappear {
  opacity: 0;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  width: 20%;
  height: auto;
  animation: envelope_disappear_animation 0.7s;
}
@keyframes envelope_disappear_animation {
  0% { 
    top:49%;
    opacity: 100%;
  }
  100% {
    top: 53%;
    opacity: 0%;
  }
}

.letter_appear {
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  max-height: 80vh;
  max-width: 95vw;
  height: auto;
  width: auto;
  object-fit: contain;
  animation: letter_appear_animation 1.35s;
}
@keyframes letter_appear_animation {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.letter {
  opacity: 1;
  cursor: url("assets/cursor/Link.cur"), auto;
}

.reveal_dialogue {
  width: 100%;
  overflow: hidden;
  animation: reveal_animation 2.2s ease forwards;
} 
@keyframes reveal_animation { 
  0% { 
    clip-path: inset(0 100% 0 0);
  } 
  100% { 
    clip-path: inset(0 0 0 0);
  }
} 

.dialogue {
  width: min(95%, 95%);
  max-height: 20%;
  height: auto;
  object-fit: contain;
  left: 50%;
  top: 75%;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.fadeout {
  animation: fadeout_animation 3.5s;
  opacity: 0;
}
@keyframes fadeout_animation {
  0% { opacity: 100%; }
  100% { opacity: 0%; }
}


#click-animations {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 50;
}

.splash {
  position: absolute;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  z-index: 50;
}

.credits {
  font-size: small;
  bottom: 5px;
  right: 15px;
  position: fixed;
}