@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {

  /* Colores */

  --clr-green-100: #83C252;
  --clr-green-200: #5c9134;

  --clr-orange: #F39E46;

  --clr-yellow: #EFB71E;

  --clr-purple: #5829BF;

  --clr-dark-red: #9D2121;

  --clr-blue-100: #01D1D8;
  --clr-blue-200: #1B5F99;
  --clr-blue-300: #1B428F;
  --clr-blue-400: #02187E;

  --clr-gray-000: #FFFFFF;
  --clr-gray-100: #ECECEC;
  --clr-gray-200: #5E5E5D;
  --clr-gray-300: #242424;
  --clr-gray-400: #000;
  --clr-gray-400-39: rgba(0, 0, 0, 39);

  /* Tipografia */

  --ff: 'Lato', sans-serif, system-ui;

  --fw-regular: 400;
  --fw-semibold: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-100: 20px;
  --fs-200: 40px;
  --fs-247: 47px;
  --fs-300: 60px;
  --fs-361: 61.14px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
  font-family: inherit;
  color: inherit;
  font-size: inherit;
}


html:focus-within {
  scroll-behavior: smooth;
}

.stack {
  display: grid;
  grid-template-areas: "stack";
  align-items: center;

  >* {
    grid-area: stack;
  }
}

.shadow {
  --_s: var(--_shadow-color, var(--clr-blue-400));
  filter: drop-shadow(4px 5px 0 var(--_s));
}



img,
picture,
svg {
  max-width: 100%;
  display: block;
}

img {
  height: auto;
  vertical-align: middle;
  font-style: italic;
  shape-margin: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


.container-grid {


  --_container-size: 1280px;
  --_content-size: 1080px;
  --_container-sides: calc((var(--_container-size) - var(--_content-size)) / 2);

  display: grid;
  grid-template-columns:
    auto [container-start] var(--_container-sides) [content-start] var(--_content-size) [content-end] var(--_container-sides) [container-end] auto;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: black;
  display: grid;
  justify-items: start;
  grid-template-rows: [header-start main-start] 100px [header-end] auto [main-end footer-start] auto [footer-end];
  overflow-x: hidden;
  font-family: var(--ff);
  font-size: var(--fs-100);


  >* {
    grid-column: container;

    >* {
      grid-column: content;
    }
  }


}

body>header {

  grid-row: header;
  position: sticky;
  top: 0;
  animation-name: color-add;
  animation-range-end: 500px;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  animation-timeline: scroll(block nearest);
  z-index: 9;

  >.wrapper {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-top: 12px;
    padding-bottom: 16px;

    >* {

      &:first-child,
      &:last-child {
        flex-grow: 1;
        flex-basis: 0;
      }

      &:last-child {
        display: flex;
        justify-content: end;
      }
    }

    .logo-wrapper {
      position: relative;
      width: 560px;
      height: 100%;

      --_animation: scale-down;
      --_end: 500px;

      pointer-events: none;

      >.logo {
        position: absolute;
        inset: 0;
        top: 43px;
        width: 100%;
        --_animation: to-top;
        --_end: 100px;
      }
    }
  }
}

body>main {
  grid-row: main;

  >* {
    clip-path: polygon(0% -100%, 100% -100%, 100% 200%, 0% 200%);
    grid-column: container;

    >* {
      grid-column: content;
    }
  }

  >.hero {
    height: 959px;

    background-color: var(--clr-blue-100);

    position: relative;

    --_animation: perspective;
    --_end: 35vh;
    --_start: 10vh;
    --_speed: 0;
    --_blur: 0;

    >* {
      position: absolute;
    }

    .parallax__1 {

      top: 500px;
      left: 411px;

      --_speed: -4;
    }

    .parallax__2 {
      top: 403px;
      left: 536px;

      --_speed: -8;

    }

    .parallax__3 {
      top: 338px;
      right: 355px;

      --_speed: -15;
    }

    .parallax__arbol-1 {
      left: -129px;
      top: -1px;

      --_speed: 2;
      --_blur: 3;
    }

    .parallax__arbol-2 {
      width: 416px;

      top: 107px;
      right: -36px;

      --_speed: -7;
      --_blur: 2;
    }

    .parallax__arbol-3 {
      width: 266px;

      top: 279px;
      right: -79px;

      --_blur: 4;
      --_speed: -18;
    }

    .parallax__shadow {
      background-color: rgba(68, 104, 63, .61);
      border-radius: 50%;
      width: 140px;
      height: 33px;
      filter: blur(12.5px);

      --_blur: 12.5;

      &.shadow__1 {
        top: 770px;
        left: 501px;

        --_speed: -4;
      }

      &.shadow__2 {
        top: 730px;
        left: 606px;
        --_speed: -10;
      }

      &.shadow__3 {
        top: 690px;
        left: 727px;

        --_speed: -16;
      }
    }

    .parallax__background {
      width: 100%;
      --_speed: -35;
      --_blur: 2;
    }

    .parallax__rock-large_arbol-2 {

      top: 720px;
      right: 90px;

      --_speed: -8;
      --_blur: 2;

    }

    .parallax__rock-mid_arbol-2 {

      top: 722px;
      right: 175px;

      --_speed: -10;
      --_blur: 2;

    }

    .parallax__rock-small_arbol-2 {
      top: 770px;
      right: 175px;

      --_speed: -7;
      --_blur: 2;
    }

    .parallax__rock-large_arbol-1 {
      left: 130px;
      top: 800px;

      --_speed: 5;
      --_blur: 3;
    }

    .parallax__bush-small_arbol-1 {
      left: 190px;
      top: 830px;

      --_speed: 14;
      --_blur: 3;
    }

    .parallax__bush-large_arbol-1 {
      left: 150px;
      top: 730px;

      --_speed: 0;
      --_blur: 3;
    }

    .parallax__bush-large_arbol-2 {
      top: 650px;
      right: -50px;

      --_speed: -13;
      --_blur: 3;
    }

    .parallax__bush-thin_arbol-3 {
      top: 620px;
      right: 50px;

      --_blur: 4;
      --_speed: -19;
    }



  }

  >.intro {
    background-color: var(--clr-gray-000);
    color: var(--clr-blue-200);
    position: relative;
    padding-bottom: 138px;


    grid-template-rows:
      auto auto auto 520px [cols-start] auto [cols-end];

    row-gap: var(--fs-100);


    --_animation: translate;


    --_speed-x: 0;
    --_speed-y: 0;

    .wave-background {
      grid-column: container;
      background: linear-gradient(#85dd7b, #ADECED);
      clip-path: path("M0 742.37C183.201 870.171 655 790.5 655 790.5C655 790.5 1037.37 755.612 1280 894V0H0V742.37Z");
      position: absolute;
      width: 100%;
      height: 100%;
      top: -.2px;
      left: 0%;
      z-index: -1;
    }

    h1 {
      font-size: var(--fs-247);
      max-width: 500px;
      letter-spacing: -1px;
      line-height: 45px;
    }

    p {
      max-width: 700px;
    }

    .screen {
      border: 29px solid var(--clr-blue-200);
      border-radius: 77px;
      overflow: hidden;
      width: 576.38px;
      margin-left: 136px;

      --_speed-y: -6;
      --_speed-x: 5;
      --_start: 0%;

      >*:first-child {
        animation: batman-circle 1s ease-out forwards;
      }

    }

    .parallax__4,
    .parallax__5 {
      position: absolute;
    }

    .parallax__4 {
      top: 500px;
      left: -50px;
      --_speed-y: -1;
      --_speed-x: -20;
      --_start: -100%;
    }

    .parallax__5 {
      top: -150px;
      right: -170px;
      --_speed-y: 50;
      --_speed-x: 0;
    }

    .cols-3 {
      grid-row: cols;
      display: grid;

      grid-template-columns: repeat(3, 1fr);
      column-gap: var(--fs-200);

      .col {
        display: grid;
        gap: var(--fs-100);
        color: var(--clr-gray-400);
        opacity: 0;



        &.visible {
          animation: appear .5s ease-out forwards;

          &:nth-child(2) {
            animation-delay: .3s;
          }

          &:nth-child(3) {
            animation-delay: .6s;
          }

        }

        img {
          border-style: inset;
          border: 9px solid #2982FF;
          border-radius: 41px;
        }
      }
    }
  }

  >.download {
    position: relative;
    color: var(--clr-gray-000);
    background-color: var(--clr-gray-000);
    padding-top: 180px;
    justify-items: center;
    text-align: center;
    grid-template-rows:
      auto [cta-start characters-start] auto [cta-end] auto [characters-end];
    row-gap: var(--fs-300);
    overflow: hidden;

    .purple-background {
      grid-column: container;
      background-color: var(--clr-purple);
      clip-path: path("M0 0C499.868 48.2939 780.13 47.017 1280 0V1157H0V0Z");

      position: absolute;
      width: 100%;
      height: 100%;
      top: -.2px;
      left: 0%;
      z-index: -1;
    }

    >h2 {
      font-size: var(--fs-361);
      font-weight: var(--fw-semibold);
      text-wrap: balance;

      >.highlight {
        font-weight: var(--fw-bold);
        font-style: italic;
      }
    }

    >.cta {
      width: 540px;
      grid-row: cta;
    }

    >img {
      grid-row: characters;
      grid-column: container;
      scale: 1.1;
      z-index: -1;
      transform-style: preserve-3d;
      perspective: 200px;

      --_translate-x: calc(-1 * var(--_mouse-x) * 20px);
      --_translate-y: calc(-1 * var(--_mouse-y) * 20px);
      translate: var(--_translate-x) var(--_translate-y);
    }


  }

  >.scroll-2-columns {
    background-color: var(--clr-gray-000);
    padding-block: 250px;

    >h2 {
      font-size: var(--fs-300);
    }

    >.cols-2 {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr 450px;

      >.scrolling-image {
        align-self: start;
        position: sticky;
        top: 80px;
        justify-items: center;

        * {
          transition: clip-path 2s;
          height: 430px;
        }

        *:not(:first-child) {
          clip-path: circle(0%);
        }

        *:first-child {
          animation: batman-circle 1s forwards;
          z-index: 0;
        }
      }

      >.paragraphs {
        display: grid;
        row-gap: 350px;

        padding-bottom: 150px;



        >section {
          height: min-content;
          display: grid;
          gap: 15px;

          &:first-child {
            margin-top: 150px;
          }

          h5 {
            font-size: var(--fs-200);
          }
        }
      }
    }
  }

  >.video {
    background-color: var(--clr-gray-000);
    height: 1500px;

    padding-block: 300px;

    position: relative;

    grid-template-rows:
      210px auto;
    --_animation: translate;


    --_speed-x: 0;

    >.yellow-background {
      background-color: var(--clr-yellow);
      width: 100%;
      height: 100%;
      grid-column: container;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;

      clip-path: path("M-83 56.0049C135 -108.5 905.5 152.502 1346 56.0049V1444C776.18 1413.21 444.167 1363.12 -83 1444V56.0049Z");


    }

    >h2 {
      font-size: var(--fs-300);
      color: var(--clr-gray-000);
      font-weight: var(--fw-regular);
      height: fit-content;
      width: 750px;
      line-height: .9em;

      --_speed-y: -20;
      --_end: 200%;
      --_start: 0%;

    }

    >img {
      position: absolute;
      pointer-events: none;
      right: -160px;
      top: 360px;

      --_speed-y: 20;
      --_start: -50%;
      --_end: 60%;
    }

    >.iframe-wrapper {
      width: fit-content;
      height: 450px;
      border: 29px solid var(--clr-gray-000);
      border-radius: 45px;
      overflow: hidden;
      object-fit: cover;
      --_speed-y: -50;
      --_end: 200%;
      --_start: 0%;
    }


  }

  >.feature-3d {
    background-color: var(--clr-gray-000);
    padding-block: 200px;
    position: relative;

    row-gap: var(--fs-300);

    >* {
      grid-column: content;
    }

    >h2 {
      color: var(--clr-dark-red);
      font-size: var(--fs-300);
      font-weight: var(--fw-semibold);
      line-height: .9em;
      width: 700px;
    }

    >p {
      width: 467px;
      text-wrap: balance;
    }

    >model-viewer {
      display: block;
      position: absolute;
      right: -150px;
      top: 0px;
      overflow: hidden;
      --_size: 900px;
      width: var(--_size);
      height: var(--_size);
      aspect-ratio: 1;
      z-index: -1;
    }


  }

  >.characters-image {
    position: relative;
    background-color: var(--clr-gray-000);
    height: 729px;
    clip-path: none;
    z-index: 1;

    >* {
      grid-column: container;
    }

    &:has(img:not(.gap-image):hover) img:not(:hover) {
      filter: grayscale(.5);

      transition: .8s ease-out;


      &:not(.gap-image) {
        filter: grayscale(.5) blur(3px);

      }
    }

    >img:not(.gap-image) {
      --_height: 373px;
      --_gap-size: 30px;

      --_width-0: 242px;
      --_width-1: 233px;
      --_width-2: 238px;
      --_width-3: 224px;
      --_width-4: 223px;

      width: 100%;
      height: 100%;

      --_gap-x-amount: calc(var(--_gap-size) * var(--_x));
      --_pos-x: calc(var(--_width-0) * clamp(0, var(--_x) - 0, 1) + var(--_width-1) * clamp(0, var(--_x) - 1, 1) + var(--_width-2) * clamp(0, var(--_x) - 2, 1) + var(--_width-3) * clamp(0, var(--_x) - 3, 1) + var(--_width-4) * clamp(0, var(--_x) - 4, 1) + var(--_gap-x-amount));


      --_gap-y-amount: calc(var(--_gap-size) * var(--_y));
      --_pos-y: calc(var(--_y) * var(--_height) + var(--_gap-y-amount));

      clip-path: polygon(var(--_pos-x) var(--_pos-y),
          /* punta izquierda superior */
          calc(var(--_pos-x) + var(--_w)) var(--_pos-y),
          /* punta derecha superior */
          calc(var(--_pos-x) + var(--_w)) calc(var(--_pos-y) + var(--_height)),
          /* punta derecha inferior */
          var(--_pos-x) calc(var(--_pos-y) + var(--_height))
          /* punta izquierda inferior */
        );
      position: absolute;
      left: 0;
      top: 0;

      transition: .3s ease-out;
      transform-origin: center;

      &:hover {
        scale: 1.05;
        filter: brightness(1.2);
      }
    }
  }

  >.newsletter {

    background-color: var(--clr-gray-000);
    position: relative;
    --_padding-top: 180px;
    padding-top: var(--_padding-top);

    row-gap: var(--fs-200);


    >* {
      grid-column: content;
    }

    >h2 {
      font-size: var(--fs-300);
      width: 800px;
      line-height: 1em;
      font-weight: var(--fw-semibold);
    }

    >p {
      font-size: var(--fs-100);
      width: 578px;
    }

    >form {
      display: flex;
      width: 780px;
      position: relative;

      &:has(input:invalid:focus-visible:not(:placeholder-shown)) {
        --_shadow-color: red;
      }

      input {
        border: 9px solid var(--clr-gray-000);
        border-right: 0;
        background-color: var(--clr-gray-100);
        padding: 20px 40px;
        width: 562px;
        flex-grow: 1;

        border-radius: 50px 0 0 50px;

        caret-color: var(--clr-blue-400);

        &::placeholder {
          color: #666;
          letter-spacing: .15em;
          font-size: var(--fs-100);
        }

        &:focus-visible {
          outline: none;
          background-color: #BCBCBC;
        }

      }

      button {
        flex-grow: 0;
        border-radius: 0 50px 50px 0;

        &:is(:hover, :focus-visible) {
          translate: unset;
        }
      }

      span {
        position: absolute;
        top: 50%;
        right: 50px;
        translate: 0 -50%;
        padding: 10px 20px;
        z-index: -1;
        border-radius: 20px;
        background-color: var(--clr-blue-300);
        color: var(--clr-gray-000);
        transition: transform .3s ease-out;
        opacity: 0;

        &.appear {
          opacity: 1;
          transform: translateX(300px);
        }
      }
    }

    .cloud-row {
      grid-column: container;
      --_min-top: 500px;
      --_own-top: 0px;
      --_cloud-height: 50px;
      --_left: 0px;
      --_width: 0px;
      --_duration: 3s;
      --_blur: 0;
      display: flex;
      justify-content: space-between;
      width: calc(100% + var(--_width));
      position: absolute;
      top: calc(var(--_min-top) + var(--_own-top));
      left: calc(-100% + var(--_left));
      z-index: -1;
      --_speed-y: 0;
      --_speed-x: 10;

      animation: translate var(--_duration) infinite linear;

      >* {
        height: var(--_cloud-height);
        filter: blur(calc(var(--_blur) * 1px));

      }

      &.small {
        --_cloud-height: 124px;
        --_width: 300px;
        --_left: 150px;
        --_duration: 20s;
        --_speed-x: 131;
        --_blur: 3;

      }

      &.medium {
        --_cloud-height: 181px;
        --_own-top: 50px;

        --_width: 600px;
        --_left: 300px;
        --_duration: 15s;
        --_speed-x: 149;
        --_blur: 2;

      }

      &.large {
        --_cloud-height: 181px;
        --_own-top: 150px;

        --_width: 600px;
        --_left: 0px;
        --_duration: 6s;
        --_speed-x: 149;

      }
    }


    .background {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;


      position: absolute;
      grid-column: container;
      height: 100%;
      width: 100%;
      bottom: 0;
      z-index: -2;

      background: linear-gradient(0deg, #E0D299 0%, #ADF8FD 44%, #EDFDFF 82%, var(--clr-gray-000) 100%);




    }

    .characters {
      position: relative;
      grid-column: container;
      height: 700px;

      >* {
        position: absolute;
        bottom: 40px;

        &:nth-child(1) {
          height: 480px;
          left: 0;
        }

        &:nth-child(2) {
          height: 509px;
          left: 50%;
          translate: -50% 0;
        }

        &:nth-child(3) {
          height: 997px;
          right: 0;
          bottom: -40px;
        }
      }
    }
  }

}

body>footer {
  grid-row: footer;
  background-color: var(--clr-gray-200);
  font-size: var(--fs-100);
  color: var(--clr-gray-000);
  font-weight: var(--fw-regular);
  padding-bottom: var(--fs-200);

  row-gap: var(--fs-200);
  position: relative;

  >.fan-arts {
    position: absolute;
    display: grid;
    grid-template-columns:
      auto auto auto;

    grid-template-rows:
      [picture-start] auto [picture-end label-start] auto [label-end];
    align-items: end;

    right: -80px;
    top: 200px;

    --_animation: translate;

    --_speed-x: 0;
    --_speed-y: -15;
    --_start: 20%;
    --_end: 100%;



    .img-frame {
      grid-row: picture;
      border: 5px solid white;
      filter: drop-shadow(0 0 10px var(--clr-gray-300));

      &:nth-of-type(1) {

        translate: 10px;

        rotate: -10deg;

        >.spritesheet {
          background-image: url("../assets/footer/fan-art-1.png");
          --_full-size: calc(6580px / 4);
          --_height: calc(470px / 4);
          --_frame-count: 14;
        }
      }

      &:nth-of-type(2) {

        z-index: 1;

        >.spritesheet {
          background-image: url("../assets/footer/fan-art-2.png");
          --_full-size: calc(10810px / 4);
          --_height: calc(470px / 4);
          --_frame-count: 23;

        }
      }

      &:nth-of-type(3) {

        translate: -10px;

        rotate: 20deg;

        >.spritesheet {
          background-image: url("../assets/footer/fan-art-3.png");
          --_full-size: calc(5340px / 4);
          --_height: calc(356px / 4);
          --_frame-count: 15;
        }
      }

    }

    >p {
      grid-row: label;
      grid-column: 1/4;
      background-color: var(--clr-gray-000);
      color: var(--clr-gray-300);
      text-align: center;
      padding: 6px 10px;
      border-radius: 10px;
      z-index: 2;
    }
  }

  >.platforms {
    grid-column: container;
    background-color: var(--clr-gray-300);


    >.wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;

      height: 80px;
      max-width: 100%;
      grid-column: content;

      >* {
        mix-blend-mode: lighten;
        height: 30px;


      }
    }

  }

  >p {
    line-height: 1em;
    letter-spacing: .07em;
    width: 780px;
    text-wrap: balance;
  }

  >span {
    letter-spacing: .06em;
  }

  >.socials {
    display: flex;
    background-color: var(--clr-gray-400);
    gap: 4px;
    width: fit-content;

    >* {
      cursor: pointer;
      background-color: var(--clr-gray-000);
      aspect-ratio: 1;
      width: 40px;
      padding: 7px;

      &:hover {
        filter: brightness(.7);
      }
    }
  }
}






.cta {
  cursor: pointer;
  display: grid;
  place-items: center;

  background-color: var(--clr-green-100);
  border: 8px solid var(--clr-gray-000);
  border-radius: 111px;
  color: var(--clr-gray-000);

  box-sizing: content-box;
  padding-block: 14px;
  line-height: 94.5%;
  padding-inline: 45px;
  font-weight: var(--fw-black);

  transition: background .2s ease-in, translate .2s, filter .2s, scale .1s;

  &:is(:hover, :focus-visible) {
    background-color: var(--clr-green-200);
    translate: 4px 5px;
    filter: drop-shadow(0 0 0 var(--clr-blue-400));
  }

  &:active {
    scale: .95;
  }


}

.cta.light {
  font-weight: var(--fw-regular);
}

button.hamburger {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  width: fit-content;
  cursor: pointer;

  &:hover {
    --_shadow-color: var(--clr-blue-200);
  }

  >* {
    width: 34px;
    height: 4px;
    box-sizing: content-box;
    border: 4px solid var(--clr-gray-000);
    background-color: var(--clr-orange);
    border-radius: 111px;

    transition: translate .2s, width .2s, rotate .4s cubic-bezier(.5, -1, .5, 2);
    transform-origin: center;

  }

  >*+* {
    margin-top: -1px;
  }

  &.active {
    .line__1 {
      translate: 0% 90%;
      rotate: 45deg;
      transition-delay: .2s;
      width: 39px;

    }

    .line__2 {
      width: calc(34px - 16px - 4px);
      translate: 24px -10px;
      rotate: -45deg;
    }

    .line__3 {
      width: calc(34px - 16px - 4px);
      translate: 4px 0px;
      rotate: -45deg;
    }

    ~nav {
      pointer-events: all;

      li {
        translate: 0px;
        opacity: 1;
        pointer-events: all;
      }
    }
  }

}

nav {
  position: absolute;
  top: 100%;
  pointer-events: none;

  ul {
    list-style: none;
    display: grid;

    --_radius: 10px;


    >li {

      background-color: var(--clr-orange);
      transition: background-color .2s ease-out, translate .3s cubic-bezier(0, -1, .5, 2) var(--_delay), opacity .4s ease-in var(--_delay);
      translate: -50px;
      opacity: 0;
      pointer-events: none;

      >a {
        width: 300px;
        padding: 15px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--clr-gray-000);
        user-select: none;
        transition: gap .3s cubic-bezier(.5, -2, 1, 2);
      }

      &:hover {
        background-color: var(--clr-dark-red);

        >a {
          gap: 20px;
        }
      }

      &:nth-of-type(1) {
        border-top-left-radius: var(--_radius);
        border-top-right-radius: var(--_radius);
        --_delay: 0s;
      }

      &:nth-of-type(2) {
        animation-delay: 1s;
        --_delay: .2s;
      }

      &:nth-of-type(3) {
        border-bottom-left-radius: var(--_radius);
        border-bottom-right-radius: var(--_radius);
        animation-delay: .2s;
        --_delay: .4s;
      }
    }
  }
}

.scroll-children>*,
.scroll-this,
.view-children>*,
.view-this {
  animation: var(--_animation) linear both;
  animation-range-end: var(--_end);
  animation-range-start: var(--_start);
}

.scroll-children>*,
.scroll-this {
  animation-timeline: scroll();
}

.view-children>*,
.view-this {
  animation-timeline: view();
}

.spritesheet {

  height: var(--_height);
  --_width: calc(var(--_full-size) / var(--_frame-count));
  width: var(--_width);
  background-size: var(--_full-size) var(--_height);

  animation: spritesheet-run calc(0.2s * var(--_frame-count)) steps(var(--_frame-count), jump-none) infinite;

}

.load-screen {
  >* {
    width: 100%;
    height: 100vh;
    height: 100dvh;

    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;

    background-color: var(--_clr);

    clip-path: polygon(calc(var(--_i) * 25%) 0%,
        calc((var(--_i) + 1) * 26%) 0%,
        calc((var(--_i) + 1) * 25%) 100%,
        calc(var(--_i) * 25%) 100%);

    z-index: 10;

    transform-origin: top;

    display: flex;
    justify-content: center;
    align-items: center;

    &:nth-of-type(1) {
      --_i: 0;
      --_clr: rgb(231, 7, 18);
    }

    &:nth-of-type(2) {
      --_i: 1;
      --_clr: rgb(255, 209, 4);
    }

    &:nth-of-type(3) {
      --_i: 2;
      --_clr: rgb(3, 199, 35);
    }

    &:nth-of-type(4) {
      --_i: 3;
      --_clr: rgb(7, 186, 231);
    }

    > svg{
      --d-a: 25500;
      fill: none;
      width: 80vw;
    
       path {
        stroke: white;
        stroke-dasharray: var(--d-a);
        stroke-dashoffset: var(--d-a);
        stroke-width: 50px;
        animation: draw 5s linear forwards;
      }
    
    
    }
  }

  &.loaded {
    >* {
      animation: loader-out 1s cubic-bezier(0, .5, .5, -1) forwards;
      animation-delay: calc(var(--_i) * .2s);
    }
  }
}

/* Animations */

@keyframes perspective {
  to {
    transform: translate3d(0px, calc(-6px * var(--_speed)), 0px);
    filter: blur(calc(1px * var(--_blur)));
  }
}

@keyframes translate {
  to {
    translate: calc(10px * var(--_speed-x)) calc(-10px * var(--_speed-y));
  }
}

@keyframes scale-down {
  to {
    width: 150px;
    pointer-events: all;
  }
}

@keyframes to-top {
  to {
    top: -10px;
  }
}

@keyframes color-add {
  to {
    box-shadow: inset 0 110px 20px -30px var(--clr-blue-100);
  }

}

@keyframes appear {
  from {
    translate: 0 50px;
    opacity: 0;
  }

  to {
    translate: 0;
    opacity: 1;
  }


}

@keyframes batman-circle {
  from {
    clip-path: circle(0% at 50% 50%);
  }

  to {
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes spritesheet-run {
  to {
    background-position: calc((var(--_full-size) - var(--_width)) * -1) 0px;
  }
}

@keyframes loader-out {
  to {
    clip-path: polygon(calc(var(--_i) * 25%) 0%,
        calc((var(--_i) + 1) * 25%) 0%,
        calc((var(--_i) + 1) * 25%) 0%,
        calc(var(--_i) * 25%) 0%);  
      }
}

@keyframes draw{
  to{
    stroke-dashoffset: 0;
  }
}