/*
  The game is complete in terms of objectives if the user has picked up
  the crystals (after solving the stone puzzle in the cave) and receiving
  the old back plate from the Stegosaurus (by giving them the croissant
  in the long grass encounter).
 
  In terms of state this boils down to the crystal item checkbox and the
  "give the stego your croissant" checkbox being checked.

  This is probably the least interesting file in the whole game; it's 
  essentially a big long chain of hurriedly-written CSS animations.
*/

/*
  A few pre-endgame rules to hide stuff until the game objectives are
  complete
*/
.speech-bubble-notice,
.speech-bubble-endgame,
.dino-queue,
.endgame-rocket :is(.rocket-sprite, .speech-bubble) {
  visibility: hidden;
}
.endgame-speech {
  display: none;
}

/* Rocket sprite which sits next to the lab on the overworld map */
.tile.endgame-rocket {
  .rocket-sprite {
    width: 100%;
    height: 100%;
    background-image: url("../assets/endgame/rocket.png");
    background-size: cover;
  }
}

/*
  The endgame plays out as a cut-scene, in which:
  1. The pterodactyl scientists notice Yogaraptor enter the lab
  2. They move to greet him and exchange some words
  3. The lab map is hidden, revealing the overworld map, where a rocket
    tile has appeared next to the lab
  4. A queue of dinos enter the rocket
  5. A speech bubble appears announcing the countdown
  6. The rocket lifts off, the scene fades to white
  7. Speech bubbles of dialogue from the saved dinosaurs fill the screen
*/
.app:has(#item-crystal:checked).app:has(#encounter-give:checked) {
  --time-show-overworld: 24s;
  &:has(.map-lab:open) {
    .player,
    .button {
      display: none;
    }

    .map:not(.map-lab, .map-overworld) {
      display: none;
    }
    .map-overworld {
      filter: brightness(0);
      animation: endgame-show-overworld 2s steps(6) var(--time-show-overworld)
        forwards;
    }

    .endgame-rocket .rocket-sprite {
      visibility: visible;
    }

    /* 4. Queue of dinos enters the rocket */
    .dino-queue {
      --dino-size: calc(var(--tile-width) / 2);
      display: grid;
      visibility: visible;
      position: absolute;
      top: 0;
      left: calc(var(--dino-size) / 2);
      width: calc(8 * var(--dino-size));
      grid-template-columns: repeat(8, var(--dino-size));
      grid-template-rows: repeat(2, var(--dino-size));
      place-content: center;

      > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;
      }
      > :nth-child(n + 2) {
        grid-row: 2;
      }

      /* Make ankylo face same way as other dinos */
      .npc-wrapper-ankylosaurus {
        scale: -1 1;
      }
    }

    /* The dinos walk in to the rocket one by one (hoorah, hoorah!) */
    .dino-queue > :nth-child(1) {
      animation: endgame-dino-queue-move1 1s linear var(--time-show-overworld)
        forwards;
    }
    .dino-queue > :nth-child(2) {
      animation: endgame-dino-queue-move2 2s linear
        calc(var(--time-show-overworld) + 1s) forwards;
    }
    .dino-queue > :nth-child(3) {
      animation: endgame-dino-queue-move3 3s linear
        calc(var(--time-show-overworld) + 2s) forwards;
    }
    .dino-queue > :nth-child(4) {
      animation: endgame-dino-queue-move4 4s linear
        calc(var(--time-show-overworld) + 3s) forwards;
    }

    /* 5. Speech bubble announcing countdown */
    .endgame-rocket .speech-bubble {
      left: 50%;
      --speech-offset-x: -50%;
    }
    .endgame-rocket .speech-bubble-1 {
      animation: endgame-npc-speech-reveal 4s steps(6)
        calc(var(--time-show-overworld) + 9s) forwards;
    }
    .endgame-rocket .speech-bubble-2 {
      animation: endgame-npc-speech-reveal 4s steps(6)
        calc(var(--time-show-overworld) + 14s) forwards;
    }

    /* 6. It's happening - lift off! Tears and applause not included */
    .endgame-rocket .rocket-sprite {
      animation:
        spritesheet 3s steps(7) calc(var(--time-show-overworld) + 7s),
        endgame-rocket-liftoff 8s ease-in
          calc(var(--time-show-overworld) + 15.5s);
      animation-iteration-count: infinite, 1;
    }
    .map-overworld .viewport {
      transform-origin: 60% 50%;
      animation:
        endgame-whiteout 3s steps(12) calc(var(--time-show-overworld) + 21.5s)
          forwards,
        endgame-zoom 6s linear calc(var(--time-show-overworld) + 18s) backwards;

      /* Hide NPCs from pervious gameplay - they are in the dino queue now! */
      .tile.npc .npc-wrapper {
        visibility: hidden;
      }
    }

    /* 7. Outro speech */
    .endgame-speech {
      display: block;
      position: absolute;
      inset: 0;
      visibility: hidden;
      animation: endgame-outro-speech-show 1s linear
        calc(var(--time-show-overworld) + 24s) forwards;

      .endgame-speech-main,
      .endgame-speech-final {
        position: absolute;
        inset: 0;
      }

      p {
        visibility: hidden;
        position: absolute;
        animation: endgame-outro-speech-show 1s linear
          calc(var(--time-show-overworld) + 26s) forwards;
      }
      .endgame-speech-main {
        animation: fade-out 1s steps(6) calc(var(--time-show-overworld) + 36s)
          forwards;

        > :nth-child(1) {
          top: 20%;
          left: 10%;
        }
        > :nth-child(2) {
          top: 30%;
          left: 5%;
          animation-delay: calc(var(--time-show-overworld) + 28s);
        }
        > :nth-child(3) {
          top: 40%;
          left: 50%;
          animation-delay: calc(var(--time-show-overworld) + 30s);
        }
        > :nth-child(4) {
          top: 50%;
          left: 15%;
          animation-delay: calc(var(--time-show-overworld) + 32s);
        }
        > :nth-child(5) {
          top: 55%;
          left: 15%;
          animation-delay: calc(var(--time-show-overworld) + 33s);
        }
      }

      .endgame-speech-final {
        translate: 0;
        animation: endgame-outro-speech-final-hide 6s steps(6)
          calc(var(--time-show-overworld) + 38s) forwards;

        p {
          top: 60%;
          left: 50%;
          translate: -50% 0;
          animation-delay: calc(var(--time-show-overworld) + 36s);
        }
      }

      .endgame-thanks {
        top: 40%;
        left: 50%;
        translate: -50% 0;
        animation: show 1s linear calc(var(--time-show-overworld) + 47s) both;
      }
    }
  }

  .map-lab:open {
    .player {
      display: flex;
    }
    /*
    0. Disable scrolling (and therefore player movement) to make it feel like a prope cut-scene
    We have to do this using a (brief) animation, because if we set it immediately, the browser
    won't scroll to the autofocused "start" tile, and the player will appear to enter the room
    in the top-left rather than by the door.

    Also hide the exit door message
  */
    .viewport {
      animation: disable-scrolling 0.1s forwards;
    }
    .tile.door .button {
      display: none;
    }

    /*
    1. Show "!" speech bubble over scientists head as player enters lab
  */
    .tile.endgame-crystal + .tile .npc-wrapper {
      scale: -1 1; /* Turn NPC to face player */
    }
    .tile.endgame-crystal,
    .tile.endgame-back-plate {
      .speech-bubble-notice {
        animation: endgame-npc-speech-reveal 2s steps(6) forwards 1s;
      }
    }

    /*
    2. NPC movement and greeting
  */
    .tile.speech.endgame {
      --z-index: var(
        --stacking-layer-action
      ); /* We move these NPCs south on the map. Southerly tiles will be higher in stacking context, so we need to bump the speech bubbles above them */
    }
    .tile.endgame-crystal {
      --speech-offset-x: calc(-50% + calc(var(--tile-width) * 1.25));

      .speech-bubble-endgame {
        bottom: calc(var(--tile-height) * -1);
        animation: endgame-npc-speech-reveal 4s steps(12) forwards 10s;
      }
    }
    .tile.endgame-back-plate {
      --speech-offset-x: calc(-50% + var(--tile-width));

      .speech-bubble-endgame {
        bottom: calc(var(--tile-height) * -1);
        left: calc(var(--tile-width) * -4) !important;
        animation: endgame-npc-speech-reveal 4s steps(12) forwards 14s;
      }
    }

    .tile.tile.endgame-crystal + .tile.npc {
      justify-content: flex-end;

      .npc-wrapper {
        animation: endgame-npc-crystal-move 2s linear forwards 4s;
      }
    }

    .tile.tile.endgame-back-plate + .tile.npc .npc-wrapper {
      animation: endgame-npc-back-plate-move 7s linear forwards 4s;
    }

    .player {
      animation: endgame-character-excitement 0.2s linear infinite 20.5s;

      .speech-bubble-endgame {
        animation: endgame-player-speech-reveal 0.5s steps(6) forwards 20s;
      }
    }

    /* 3. Fade out lab to overworld with rocket and dino queue */
    animation: endgame-hide-lab 2s steps(12) forwards 22s;
  }
}

@keyframes endgame-dino-queue-move1 {
  100% {
    translate: 0 calc(-1 * var(--dino-size));
    visibility: hidden;
  }
}
@keyframes endgame-dino-queue-move2 {
  100% {
    translate: 0 calc(-2 * var(--dino-size));
    visibility: hidden;
  }
}
@keyframes endgame-dino-queue-move3 {
  33% {
    translate: calc(-1 * var(--dino-size)) 0;
  }
  66% {
    translate: calc(-1 * var(--dino-size)) calc(-1 * var(--dino-size));
  }
  100% {
    translate: calc(-1 * var(--dino-size)) calc(-2 * var(--dino-size));
    visibility: hidden;
  }
}
@keyframes endgame-dino-queue-move4 {
  25% {
    translate: calc(-1 * var(--dino-size)) 0;
  }
  50% {
    translate: calc(-2 * var(--dino-size)) 0;
  }
  75% {
    translate: calc(-2 * var(--dino-size)) calc(-1 * var(--dino-size));
  }
  100% {
    visibility: hidden;
    translate: calc(-2 * var(--dino-size)) calc(-2 * var(--dino-size));
  }
}

@keyframes endgame-rocket-liftoff {
  0% {
    background-image: url("../assets/endgame/rocket-fly.png");
  }
  75% {
    translate: 0 calc(var(--tile-height) * -1);
  }
  100% {
    background-image: url("../assets/endgame/rocket-fly.png");
    translate: 0 calc(var(--tile-height) * -6);
  }
}

@keyframes endgame-zoom {
  0% {
    scale: 1;
  }
  100% {
    transform-origin: 60% 0;
    scale: 4;
  }
}
@keyframes endgame-whiteout {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(10);
  }
}

@keyframes endgame-outro-speech-show {
  100% {
    visibility: visible;
  }
}

@keyframes endgame-outro-speech-final-hide {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    translate: 0 -15%;
  }
  100% {
    opacity: 0;
    translate: 0 -15%;
  }
}

@keyframes disable-scrolling {
  0% {
    interactivity: auto;
  }

  100% {
    interactivity: inert;
  }
}

@keyframes endgame-npc-speech-reveal {
  0% {
    visibility: visible;
    translate: var(--speech-offset-x) 1rem;
    opacity: 0;
  }
  25%,
  95% {
    translate: var(--speech-offset-x) 0;
    opacity: 1;
    visibility: visible;
  }
  100% {
    visibility: hidden;
    translate: var(--speech-offset-x) 1rem;
    opacity: 0;
  }
}

@keyframes endgame-player-speech-reveal {
  0% {
    visibility: visible;
    translate: 0 2rem;
    opacity: 0;
  }
  100% {
    translate: 0 -1rem;
    opacity: 1;
    visibility: visible;
  }
}

@keyframes endgame-npc-crystal-move {
  0% {
    translate: 0 0;
  }

  100% {
    translate: 0 calc(var(--tile-height) * 2);
  }
}

@keyframes endgame-npc-back-plate-move {
  0% {
    translate: 0 0;
  }

  20% {
    translate: 0 calc(var(--tile-height) * 2);
  }

  70%,
  100% {
    translate: calc(var(--tile-height) * -5) calc(var(--tile-height) * 2);
  }
}

@keyframes endgame-character-excitement {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -3px;
  }
}

@keyframes endgame-hide-lab {
  0% {
    filter: brightness(1);
  }
  99% {
    filter: brightness(0);
    visibility: visible;
    display: block;
  }
  100% {
    opacity: 0;
    filter: brightness(0);
    visibility: hidden;
    display: none;
  }
}

@keyframes endgame-show-overworld {
  0% {
    filter: brightness(0);
  }
  100% {
    filter: brightness(1);
  }
}