@layer page {
  /* Variables */

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

    --_header-color-primary: var(--color-light-grey);
    --_header-color-secondary: var(--color-purple);
    --_header-background-image: url("/assets/tiled_backgrounds/shadowcaster_arch_top_transparent.png"),
      url("/assets/tiled_backgrounds/hexen-walls-301.png");

    --separator-ratio: 2;
    --_separator-main-image: url("/assets/gifs/orb_lavender.gif");
    --_separator-main-height: calc(43px * var(--separator-ratio));
  }

  /* Overriding parameters */

  .heading--large {
    --heading-text-size: var(--heading-xl);
    --heading-line-height: var(--line-height-lg);
  }

  .list__item {
    margin-bottom: var(--spacing-3);
  }

  .main {
    margin-top: 0;
    padding-top: 0;
  }

  .main__heading {
    margin: 0;
  }

  /* Heading wrapper */

  .main__heading-wrapper {
    width: 80%;
    height: 100vh;
    justify-content: flex-end;
    padding-top: var(--content-margin-top);
  }

  /* Headings with gradient effect and animation  */
  @supports (background-image: linear-gradient(black, blue)) and
    (filter: drop-shadow(0 0 5px black)) and (background-clip: text) {
    /* The main heading in the index page has a unique "chrome" effect with a shimmer animation */
    .main__heading {
      background-image: var(--background-shimmer),
        url("assets/tiled_backgrounds/linear-gradient-chrome.png");
      background-color: var(--color-purple);
      background-size: 300%, auto var(--element-height);
      background-position-x: 100%;
      filter: contrast(150%) var(--filter-outline-black) var(--filter-3d-volume)
        var(--filter-outline-black) drop-shadow(var(--shadow-md));
      background-blend-mode: normal;
      animation: shimmer 10s 3s infinite linear;
    }

    /* If the gradient color is based on --color-purple, it needs to be blended with "luminosity" mode and have some filters applied */
    .card__title.heading {
      background-color: var(--color-light-purple);
    }

    .card__item:hover .heading {
      background-color: var(--_color-secondary);
      background-blend-mode: multiply;
      filter: contrast(90%) brightness(95%) saturate(160%)
        var(--filter-outline-black)
        drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.5));
    }
  }

  /* Backgrounds */
  .background__item--column {
    /* we use unitless values so we can calculate aspect ratio and percentages with calc() */
    --bg-column-width: 190;
    --bg-column-height: 442;
    --bg-column-aspect-ratio: calc(
      var(--bg-column-width) / var(--bg-column-height)
    );
    position: absolute;
    height: 100%;
    aspect-ratio: var(--bg-column-aspect-ratio);
    background-repeat: no-repeat;
    background-size: auto 100vh;
  }

  .background__item--column-left {
    left: 0;
    background-image: url("/assets/backgrounds/column_left_v2_gray_dither.png");
    background-position-x: right 0%;
  }

  .background__item--column-right {
    right: 0;
    background-image: url("/assets/backgrounds/column_right_v2_gray_dither.png");
    background-position-x: left 0%;
  }

  .background__item--torch {
    --bg-torch-width: 58px;
    --bg-torch-height: 113px;
    position: absolute;
    height: 100%;
    aspect-ratio: var(--bg-column-aspect-ratio);
    background-image: url("/assets/gifs/drktorch.gif");
    background-size: var(--bg-torch-width) var(--bg-torch-height);
    background-repeat: no-repeat;
  }

  /* The torches are dynamically located at the center of the column images */
  /* left column image center on X axis: 78px | right column image center on X axis: 113px */
  .background__item--torch-left {
    /* position = 78 / 191 ≈ 40.8% (from left) or 100% - 78 / 191 ≈ 59.2% (from right) */
    --offset: 5px; /* the torch image in the gif is not centered so we add an offset */
    background-position: top 40% right calc(59.2% + var(--offset)); /* calculated from right for responsive behavior */
    right: 0%;
  }

  .background__item--torch-right {
    /* position = 113 / 191 ≈ 59.2% (from left) */
    --offset: 15px;
    background-position: top 40% left calc(59.2% + var(--offset));
    left: 0%;
  }

  /*media queries*/

  /*1000px*/
  @media (max-width: 62.5rem) {
    .background__item--column {
      max-width: 50vw;
    }

    .main__heading {
      margin: revert;
    }

    .main__heading-wrapper {
      display: flex;
      width: 100%;
      margin-bottom: 0;
    }

    .heading--large {
      --heading-text-size: var(--heading-lg);
      margin-bottom: 0;
    }

    .separator--main {
      margin-top: 0;
    }
  }
}

/* TODO: move inside page brackets */
@media (prefers-reduced-motion: reduce) {
  :root {
    --_separator-main-image: url("/assets/gifs/frames/orb_lavender/frame_1.webp");
  }

  .background__item--torch {
    background-image: url("/assets/gifs/frames/drktorch/frame_1.webp");
  }
}