@layer page {
  /* Animations */

  @media (prefers-reduced-motion: no-preference) {
    /* Overriding flyDirection */
    @keyframes flyDirection {
      0% {
        transform: translate(-50%, -50%) scaleX(1);
        z-index: -1;
        --ratio: calc(0.8 * var(--footer-ratio));
      }
      100% {
        transform: translate(-50%, -50%) scaleX(-1);
        z-index: initial;
      }
    }

    /* flyDirection for the bat's shadow */
    @keyframes flyDirectionShadow {
      0% {
        transform: rotateX(140deg) skewX(40deg);
        transform-origin: 0% 86%;
      }
      100% {
        transform: rotateX(140deg) skewX(-40deg);
        transform-origin: 0% 100%;
      }
    }
  }

  /* Variables */

  :root {
    /* Colors */
    --_color-primary: var(--color-purple); /* links */
    --_color-secondary: var(
      --color-light-purple
    ); /* headings, focus outline, halo  */

    /* Cursors */
    --cursor-pointer: var(--cursor-wow-gauntlet-red), pointer;
    --cursor-pointer-animation: cursorWowGauntletRed;

    /* Overlay background and buttons  */
    --_overlay-background: url("/assets/tiled_backgrounds/pattern-217.png");

    /* Player */
    --_player-bottom-border-image: url("/assets/gifs/plant-divider.png");
    --_player-bottom-border-width: 100px;
    --_player-bottom-border-height: 29px;

    /* Header */
    --_header-color-primary: var(--color-light-grey);
    --_header-color-secondary: var(--_color-secondary);
    --_header-background-image: url("/assets/tiled_backgrounds/shadowcaster_arch_top_transparent.png"),
      url("/assets/tiled_backgrounds/cyclones-flats-162.png");
    --_header-bottom-border-image: url("/assets/gifs/plant-divider.png");
    --_header-bottom-border-image-width: 100px;
    --_header-bottom-border-image-height: 29px;

    /* Separator */
    --_separator-main-image: url("/assets/gifs/meltred.gif");
    --_separator-main-height: 30px;

    /* Card item hover image */
    --_card-item-hover-image: url("/assets/gifs/flash6-red-c.gif");

    /* Player and gallery aspect ratio */
    --aspect-ratio: 4/2.9;

    /* It Comes In Waves footer shadows */
    --shadow-blur-radius: 2px;
    --shadow-opacity: 0.5;
  }

  /* Rule override */

  /* Overriding card item hover image rules */
  .card__item:hover::before {
    background-position-y: top;
  }

  /* Footer */

  /* Overriding footer backgrounds: takes full width of screen */
  .footer__backgrounds {
    --footer-height: 200px;
    --footer-ratio: 1.5;
    width: 100vw;
    min-width: var(--body-min-width);
    left: 50%;
    transform: translateX(-50%);
    height: calc(var(--footer-height) * var(--footer-ratio));
  }

  /* Footer background images are pixelated */
  .footer__background {
    image-rendering: pixelated;
  }

  .footer__background--bat-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .footer__background--bat {
    --ratio: calc(1 * var(--footer-ratio));
    --bg-bat-image: url("/assets/gifs/gif-bat.gif");
    --bg-bat-width: calc(140px * var(--ratio));
    --bg-bat-height: calc(110px * var(--ratio));
    background-image: var(--bg-bat-image);
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: var(--bg-bat-width) var(--bg-bat-height);
    width: calc(100vw + (var(--bg-bat-width) * 2));
    height: calc(var(--footer-height) * var(--footer-ratio) / 2);
    animation: flyPosition 6s linear infinite,
      flyDirection 12s steps(2, jump-none) infinite;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Bat 3D shadow */
  .footer__background--bat::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-image: var(--bg-bat-image);
    background-repeat: no-repeat;
    background-position-y: center;
    animation: flyPosition 6s linear infinite,
      flyDirectionShadow 12s steps(2, jump-none) infinite;
    position: relative;
    filter: brightness(0%) blur(var(--shadow-blur-radius));
    opacity: var(--shadow-opacity);
    transform: rotateX(140deg) skewX(40deg);
    transform-origin: 0% 100%;
  }

  .footer__background--tombstone {
    --ratio: calc(1.5 * var(--footer-ratio));
    --bg-tomb-image: url("/assets/gifs/tombstone-ghost.gif");
    --bg-tomb-width: calc(128px * var(--ratio));
    --bg-tomb-height: calc(128px * var(--ratio));
    background-image: var(--bg-tomb-image);
    background-size: var(--bg-tomb-width) var(--bg-tomb-height);
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    height: calc(var(--bg-tomb-height) * 1.5);
    position: absolute;
    z-index: -1;
    transform: translateY(calc(var(--bg-tomb-height) * -0.5));
    mask-image: linear-gradient(transparent 7%, 20%, black 30%);
  }

  /* Tombstone 3D shadow */
  .footer__background--tombstone::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background-image: var(--bg-tomb-image);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: var(--bg-tomb-width) var(--bg-tomb-height);
    filter: brightness(0%) blur(var(--shadow-blur-radius));
    opacity: var(--shadow-opacity);
    transform: rotateX(120deg) skewX(40deg);
    transform-origin: 0% calc(var(--bg-tomb-height));
  }

  /* Backgrounds */

  .background {
    --cube-width: 200vw;
    --cube-height: 100vh;
    --cube-depth: 150vh;
    perspective: min(var(--cube-width), var(--cube-height), var(--cube-depth));
    z-index: -1;
  }

  .cube {
    width: var(--cube-width);
    height: var(--cube-height);
    position: absolute;
    transform-style: preserve-3d;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cube__face {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: visible;
  }

  /*shadows in the corners of the bottom face */
  .cube__face--bottom::before {
    --color-face-shadow: rgba(0, 0, 0, 0.5);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        0deg,
        var(--color-face-shadow),
        transparent 15% 85%,
        var(--color-face-shadow)
      ),
      linear-gradient(
        90deg,
        var(--color-face-shadow),
        transparent 50% 50%,
        var(--color-face-shadow)
      );
  }

  .cube__face--back {
    width: var(--cube-width);
    height: var(--cube-height);
    --bg-trees-back: url("/assets/tiled_backgrounds/rso_p_in1_backB_02.png")
      left bottom / 256px 128px repeat-x;
    --bg-palm1: url("/assets/gifs/palm1-crop-comp.gif") left bottom 64px / 88px
      133px repeat-x;
    --bg-palm2: url("/assets/gifs/palm2-comp.gif") right bottom 64px / 185px
      185px repeat-x;

    background: var(--bg-palm1), var(--bg-palm2), var(--bg-trees-back);
    transform: rotateY(180deg) translateY(-40vh)
      translateZ(calc(var(--cube-depth) / 4));
    filter: brightness(80%) contrast(120%) sepia(50%);
  }

  .cube__face--bottom {
    width: var(--cube-width);
    height: var(--cube-depth);
    --bg-water: url("/assets/tiled_backgrounds/shadowwarwater1-red.gif") 0% 0% /
      64px 64px repeat;
    background: var(--bg-water);
    transform: scaleZ(-1) scaleX(-1) rotateX(-90deg)
      translateZ(calc(var(--cube-depth) / 4));
    bottom: 0;
  }

  .background__item--fog {
    top: 0;
  }

  /*448px*/
  @media (max-width: 28rem) {
    .footer__backgrounds {
      --footer-ratio: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --_separator-main-image: url("/assets/gifs/frames/meltred/frame_1.webp");
      --_card-item-hover-image: url("/assets/gifs/frames/flash6-red-c/frame_1.webp");
    }

    .footer__background--bat {
      --bg-bat-image: url("/assets/gifs/frames/gif-bat/frame_1.webp");
    }

    .footer__background--tombstone {
      --bg-tomb-image: url("/assets/gifs/frames/tombstone-ghost/frame_1.webp");
    }

    .cube__face--back {
      --bg-palm1: url("/assets/gifs/frames/palm1-crop-comp/frame_1.webp") left
        bottom 64px / 88px 133px repeat-x;
      --bg-palm2: url("/assets/gifs/frames/palm2-comp/frame_1.webp") right
        bottom 64px / 185px 185px repeat-x;
    }

    .cube__face--bottom {
      --bg-water: url("/assets/tiled_backgrounds/frames/shadowwarwater1-red/frame_1.webp")
        0% 0% / 64px 64px repeat;
    }
  }
}