@layer page {
  /* Animations */

  @media (prefers-reduced-motion: no-preference) {
    /* Animation of the cube perspective */
    @keyframes cubePerspective {
      0% {
        perspective: 10vw;
      }
      25% {
        perspective: 10vw;
      }
      100% {
        perspective: min(
          var(--cube-width),
          var(--cube-height),
          var(--cube-depth)
        );
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      70% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
  /* Variables */

  :root {
    /* Colors */
    --_color-primary: var(--color-red); /* headings, links */
    --_color-secondary: var(--color-pure-red); /* 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/gifs/blood-separator.gif");
    --_player-bottom-border-width: 532px;
    --_player-bottom-border-height: 24px;

    /* 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/wallhead.gif");
    --_header-bottom-border-image: url("/assets/gifs/blood-separator-2.gif");
    --_header-bottom-border-image-width: 480px;
    --_header-bottom-border-image-height: 20px;

    /* 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");

    /* Player and gallery aspect ratio */
    --aspect-ratio: 16/9;
  }

  /* Rule override */

  /* Overriding header__content rules */
  .header__contents {
    background-repeat: repeat-x, repeat; /* repeat-x for the arch */
    background-color: var(--color-red);
    background-blend-mode: normal, multiply;
  }

  /* 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: var(--cursor-close-animation)
      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 animation sliding from top */
  .card__item:not(:hover)::before {
    content: "";
    background-position: center -100px;
  }

  /* Animation of the content */
  .player__wrapper {
    animation: fadeIn 4s ease-in 1;
  }

  /* Backgrounds */

  .background {
    --cube-width: 60vw;
    --cube-height: 100vh;
    --cube-depth: min(100vw, 100vh);
    --background-head: url("/assets/gifs/ANIheadStretch4C.gif");
    --background-ivy: url("/assets/tiled_backgrounds/IVYREDD.png");
    --background-wall: url("/assets/tiled_backgrounds/WALLF1.png");
    --background-wall-skulls: url("/assets/tiled_backgrounds/DUNG2.png");
    --background-torch: url("/assets/gifs/fire101.gif");
    --background-door: url("/assets/backgrounds/Doors_02.png");
    --background-jail: url("/assets/tiled_backgrounds/jail-masked.png");
    --background-ceiling: url("/assets/tiled_backgrounds/sw_00_47.png");
    --background-floor: url("/assets/tiled_backgrounds/METALF11.png");
    perspective: min(var(--cube-width), var(--cube-height), var(--cube-depth));
    animation: cubePerspective 3s ease-in-out 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 faces */
  .cube__face::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)
      );
  }

  /* Adjust width and height of each face */
  .cube__face--back {
    width: var(--cube-width);
    height: var(--cube-height);
  }

  .cube__face--left,
  .cube__face--right {
    width: var(--cube-depth);
    height: var(--cube-height);
  }

  .cube__face--top,
  .cube__face--bottom {
    width: var(--cube-width);
    height: var(--cube-depth);
  }

  /* Define each face based on direction */
  .cube__face--back {
    --background-door-width: calc(128px * 3);
    --background-door-height: calc(220px * 3);
    --background-torch-size: 160px;
    background: var(--background-head), var(--background-door),
      var(--background-torch), var(--background-torch), var(--background-ivy),
      var(--background-wall);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat,
      repeat;
    background-position: center bottom calc(var(--background-door-height) / 2),
      center bottom,
      left calc(50% + var(--background-door-width) / 1.5) bottom
        calc(var(--background-door-height) / 1.5),
      right calc(50% + var(--background-door-width) / 1.5) bottom
        calc(var(--background-door-height) / 1.5),
      top, center;
    background-size: auto,
      var(--background-door-width) var(--background-door-height),
      var(--background-torch-size), var(--background-torch-size), auto, auto;
    transform: rotateY(180deg) translateZ(calc(var(--cube-depth) / 2));
  }

  .cube__face--right {
    background: var(--background-jail);
    transform: rotateY(90deg) translateZ(calc(var(--cube-depth) / 2));
    right: 0;
  }

  .cube__face--left {
    background: var(--background-ivy), var(--background-wall-skulls);
    transform: rotateY(-90deg) translateZ(calc(var(--cube-depth) / 2));
  }

  .cube__face--top {
    background: var(--background-ceiling);
    transform: rotateX(90deg) translateZ(calc(var(--cube-depth) / 2));
  }

  .cube__face--bottom {
    background: var(--background-floor);
    transform: rotateX(-90deg) translateZ(calc(var(--cube-depth) / 2));
    bottom: 0;
  }

  /*1000px*/
  @media (max-width: 62.5rem) {
    .background {
      --cube-width: 100vw;
    }

    .header__contents {
      padding-top: var(--spacing-4); /* room for the arch background */
    }
  }

  /*448px*/
  @media (max-width: 28rem) {
    .cube__face--back {
      --background-door-width: calc(128px * 2);
      --background-door-height: calc(220px * 2);
      --background-torch-size: 25%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --_overlay-background: url("/assets/tiled_backgrounds/frames/facestwitch/frame_1.webp");
      --_player-bottom-border-image: url("/assets/gifs/frames/blood-separator/frame_1.webp");
      --_header-background-image: url("/assets/tiled_backgrounds/shadowcaster_arch_top_transparent.png"),
        url("/assets/tiled_backgrounds/frames/wallhead/frame_1.webp");
      --_header-bottom-border-image: url("/assets/gifs/frames/blood-separator-2/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");
    }

    .background {
      --background-head: url("/assets/gifs/frames/ANIheadStretch4C/frame_1.webp");
      --background-torch: url("/assets/gifs/frames/fire101/frame_1.webp");
    }
  }
}