@layer page {
  /* Animations */
  @media (prefers-reduced-motion: no-preference) {
    /* Animation of jail card */
    @keyframes jailbreak {
      0% {
        transform: translateY(0);
      }
      30% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }
  }

  /* Variables */

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

    /* Cursors */
    --cursor-default: var(--cursor-harvester-hand), auto;
    --cursor-pointer: var(--cursor-harvester-search), pointer;
    --cursor-close: var(--cursor-harvester-exit), pointer;
    --cursor-notallowed: var(--cursor-harvester-cog) not-allowed;
    --cursor-default-animation: cursorHarvesterHand;
    --cursor-pointer-animation: cursorHarvesterSearch;
    --cursor-close-animation: cursorHarvesterExit;
    --cursor-notallowed-animation: cursorHarvesterCog;
    --cursor-close-animation-duration: 400ms;
    --cursor-notallowed-animation-duration: 400ms;

    /* Overlay background and buttons  */
    --_overlay-background: url("/assets/tiled_backgrounds/frames/facestwitch/frame_1.webp");

    /* Player */
    --_player-bottom-border-image: url("/assets/tiled_backgrounds/MOSSTOP_01.png");
    --_player-bottom-border-width: 64px;
    --_player-bottom-border-height: 64px;

    /* Header */
    --_header-color-primary: var(--color-light-grey);
    --_header-color-secondary: var(--color-light-purple);
    --_header-background-image: url("/assets/tiled_backgrounds/shadowcaster_arch_top_transparent.png"),
      url("/assets/tiled_backgrounds/IVYYELLOW.png"),
      url("/assets/tiled_backgrounds/WALLMOSS_03.png");

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

    /* Card item hover image */
    --_card-item-hover-image: url("/assets/gifs/blood-dripping.gif");

    --aspect-ratio: 16 / 9;
    --filter-yellow-tint: hue-rotate(-50deg) saturate(50%) brightness(170%);
  }

  /* Rule override */

  /* Overwriting player and header bottom border rules */
  .player__bottom-border {
    top: calc(100% - var(--_player-bottom-border-height) / 4);
    filter: var(--filter-yellow-tint);
  }

  .player__wrapper:hover .player__bottom-border {
    filter: var(--filter-yellow-tint)
      drop-shadow(0px 10px 10px var(--_color-secondary));
  }

  .header__contents-bottom-border {
    filter: var(--filter-yellow-tint) drop-shadow(var(--shadow-md));
  }

  /* Display the close cursor instead of the search cursor for the hamburger toggle when the header is expanded */
  .header--expanded .header__hamburger {
    cursor: var(--cursor-close);
    animation: cursorExit var(--cursor-close-animation-duration) linear infinite;
  }

  /* Overriding card item hover image rules */
  .card__item:hover::before {
    background-size: auto;
    background-repeat: repeat-x;
    background-position: center -5px;
    transition: background-position 1.3s;
  }

  /* Hover image sliding from top animation */
  .card__item:not(:hover)::before {
    content: "";
    background-position: center -100px;
  }

  /* Backgrounds */

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

  .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);
    background-image: url("/assets/tiled_backgrounds/TREE.png");
    background-repeat: repeat-x;
    background-size: 128px 128px;
    background-position: bottom;
    transform: rotateY(180deg) translateY(-40vh)
      translateZ(calc(var(--cube-depth) / 4));
  }

  .cube__face--bottom {
    width: var(--cube-width);
    height: var(--cube-depth);
    --bg-rock: url("/assets/tiled_backgrounds/ROCKF8.png");
    --bg-grass1: url("/assets/backgrounds/arcanum-106.png") 0% 0% / 100px 47px
      repeat;
    --bg-grass2: url("/assets/backgrounds/arcanum-110.png") 50px 24px / 238px
      145px repeat;
    --bg-grass3: url("/assets/backgrounds/arcanum-110.png") 50px 24px / 238px
      145px repeat;
    background: var(--bg-grass2), var(--bg-grass1), var(--bg-rock);
    transform: rotateX(-90deg) translateZ(calc(var(--cube-depth) / 4));
    bottom: 0;
  }

  .background__item--jail {
    width: 100%;
    height: 100%;
    bottom: 0;
    background-image: url("/assets/tiled_backgrounds/jail-masked.png");
    background-size: 128px;
    background-repeat: round;
    transform: translateY(-100%);
    animation: jailbreak 6s;
  }

  .background__item--grass {
    --ratio: 0.9;
    --bg-grass1-width: calc(201px * var(--ratio));
    --bg-grass1-height: calc(94px * var(--ratio));
    --bg-grass2-width: calc(238px * var(--ratio));
    --bg-grass2-height: calc(145px * var(--ratio));

    --bg-grass1: url("/assets/backgrounds/arcanum-106.png") 0% 0% /
      var(--bg-grass1-width) var(--bg-grass1-height) repeat;

    --bg-grass2: url("/assets/backgrounds/arcanum-110.png") 0% 0% /
      var(--bg-grass2-width) var(--bg-grass2-height) repeat;

    --bg-grass3: url("/assets/backgrounds/arcanum-110.png")
      calc(var(--bg-grass1-width) * 0.5) calc(var(--bg-grass1-height) * 1) /
      var(--bg-grass2-width) var(--bg-grass2-height) repeat;

    width: 100%;
    height: calc(max(var(--bg-grass1-height), var(--bg-grass2-height)) * 2);
    bottom: 0;
    background: var(--bg-grass3), var(--bg-grass2), var(--bg-grass1);
    transform: translateY(calc(var(--bg-grass1-height) * 0.25));
  }

  .background__item--plants {
    width: 100%;
    height: 50vh;
    bottom: 5vh;
    --bg-rock1: url("/assets/backgrounds/arcanum-48.png") 0% center no-repeat;
    --bg-rock2: url("/assets/backgrounds/arcanum-24.png") right bottom no-repeat;
    --bg-plant: url("/assets/backgrounds/arcanum-120.png") left bottom no-repeat;
    background: var(--bg-rock2), var(--bg-plant), var(--bg-rock1);
  }

  .background__item--deadtrees {
    height: 20vh;
    width: 100%;
    bottom: 35%;
    --background-deadtree-width: 150px;
    background-image: url("/assets/backgrounds/arcanum-165.png"),
      url("/assets/backgrounds/arcanum-166.png"),
      url("/assets/backgrounds/arcanum-179.png"),
      url("/assets/backgrounds/arcanum-181.png"),
      url("/assets/backgrounds/arcanum-184.png"),
      url("/assets/backgrounds/arcanum-188.png");
    background-repeat: no-repeat;
    background-position: calc(var(--background-deadtree-width) * 0),
      calc(var(--background-deadtree-width) * 1),
      calc(var(--background-deadtree-width) * 2),
      calc(var(--background-deadtree-width) * 3),
      calc(var(--background-deadtree-width) * 2),
      calc(var(--background-deadtree-width) * 1);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --_overlay-background: url("/assets/tiled_backgrounds/frames/facestwitch/frame_1.webp");

      --_separator-main-image: url("/assets/gifs/frames/meltred/frame_1.webp");
      --_card-item-hover-image: url("/assets/gifs/frames/blood-dripping/frame_1.webp");
    }
  }
}