@import url("/css/game-frame.css");

@font-face {
  font-family: Gaegu;
  src: url("/fonts/Gaegu-Regular.woff2");
  font-weight: 500;
}

@font-face {
  font-family: Gaegu;
  src: url("/fonts/Gaegu-Bold.woff2");
  font-weight: 700;
}

@font-face {
  font-family: Alfa;
  src: url("/fonts/AlfaSlabOne.woff2");
  font-weight: 800;
}

:root {
  --bg-color: #131216;
  --text-color: #fff;
  --highlight-text: #80afc3;
  --button-bg: #254555;
}

* {
  box-sizing: border-box;
}

html {
  /* Game fonts & colors */
  font-family:
    "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans",
    Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
}

body {
  margin: 0;
}

a {
  color: var(--highlight-text);

  &:hover {
    color: color-mix(in srgb, var(--highlight-text), var(--text-color) 35%);
  }
}

/* Utilities */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 2rem;

  @media (max-width: 600px) {
    padding: 0 1rem;
  }
}

.button {
  border: solid 2px #687582;
  background: var(--button-bg);
  border-radius: 50px;
  padding: 0.75em 1.5em;
  color: var(--text-color);
  font-family: inherit;
  font-weight: bold;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
  transition:
    border-color 0.15s ease-out,
    background-color 0.15s ease-out;

  box-shadow: 0px 2px 8px color-mix(in oklab, var(--bg-color) 50%, transparent);

  &:hover,
  &:focus {
    border-color: var(--text-color);
    color: var(--text-color);
    background-color: color-mix(in oklab, white 5%, var(--button-bg));
  }
}

.rendered-markdown {
  max-width: 36rem;
  margin: 0 auto 2rem 0;
  line-height: 1.35;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 2em;
    margin-bottom: 0.5em;
  }

  p {
    margin-bottom: 0.8rem;
  }

  code,
  pre {
    background-color: color-mix(
      in srgb,
      var(--bg-color),
      var(--text-color) 10%
    );
    color: color-mix(in srgb, var(--text-color), var(--bg-color) 20%);
    padding: 0.25rem 0.25rem 0.125rem;
    border-radius: 0.125rem;
    border: solid 1px color-mix(in srgb, var(--bg-color), var(--text-color) 15%);
  }
}

/* Nav */

nav.home-nav {
  pointer-events: none;
  position: fixed;
  inset: auto 0 0;
  padding: 4rem 0 0.75rem;
  top: auto;
  z-index: 50;
  animation: flip-in 3s 1s ease-out both;
  transform-origin: center bottom;
  perspective: 10px;
  background: radial-gradient(
    120% 90% at 50% 100%,
    color-mix(in srgb, var(--bg-color) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg-color) 35%, transparent) 50%,
    color-mix(in srgb, var(--bg-color) 5%, transparent) 85%,
    transparent
  );

  ul {
    pointer-events: visible;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;

    li {
      display: flex;
      flex-direction: row;
      align-items: center;

      &.links-before::before {
        content: "";
        display: block;
        height: 2px;
        width: 0.5rem;
        background-color: #687582;
      }
    }

    &.secondary-nav {
      margin-left: 0.25rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.125rem;

      .button {
        padding: 0.125rem 0.5rem;
        font-size: 0.75rem;
      }
    }
  }

  @media (max-width: 600px) {
    .button {
      padding: 0.5rem 0.5rem;
      font-size: 0.75rem;
    }
  }
}

/* Language dialog */

::backdrop {
  background-color: color-mix(in srgb, var(--bg-color) 50%, transparent);
}

#lang-modal {
  z-index: 51;

  border: none;
  border-radius: 0.25rem;
  background: var(--bg-color);
  color: var(--text-color);
  padding: 1rem;
  box-shadow: 0px 2px 8px color-mix(in oklab, var(--bg-color) 50%, transparent);

  opacity: 0;
  transition-behavior: allow-discrete;
  transition:
    opacity 1s ease-out,
    display 1s ease-out;

  &[open] {
    opacity: 1;
  }

  @starting-style {
    opacity: 0;
  }

  button.lang-close-button {
    appearance: none;
    border: none;
    background: none;
    color: color-mix(in srgb, var(--text-color) 60%, transparent);
    font-size: 1.5rem;
    padding: 0;
    margin-top: 1rem;

    &:hover,
    &:focus {
      color: var(--text-color);
      outline: none;
    }
  }

  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 12rem;

    li {
      margin-bottom: 0.5rem;

      a {
        font-size: 1.5rem;
        text-decoration: none;
        color: color-mix(in srgb, var(--text-color) 60%, transparent);

        &:hover,
        &:focus {
          color: var(--text-color);
          outline: none;
        }

        &[aria-current="true"] {
          color: var(--highlight-text);

          &:focus {
            color: color-mix(
              in srgb,
              var(--highlight-text) 60%,
              var(--text-color)
            );
          }
        }
      }
    }
  }
}

/* Header */

.home-header,
.page-header {
  height: 80vh;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "full";
  place-items: stretch;
  overflow: hidden;
  z-index: 1;

  .video-bg {
    width: 100vw;
    height: 100%;
    grid-area: full;
    z-index: -1;
    object-fit: cover;

    opacity: 0;
    scale: 1.03;
    transition:
      opacity 5s ease-out,
      scale 5s ease-out;

    &.loaded {
      opacity: 1;
      scale: 1;
    }
  }

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg-color), transparent 80%) 65%,
      var(--bg-color)
    );
  }

  .content {
    grid-area: full;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;

    .top-bar {
      display: flex;
      flex-direction: row;
      gap: 2rem;
      padding-top: 1rem;

      .lang-button {
        appearance: none;
        border: none;
        border-radius: 0.5rem;
        background: none;
        color: var(--text-color);
        margin-left: auto;
      }

      @media (max-width: 600px) {
        flex-direction: column-reverse;
        padding-top: 0.25rem;
        gap: 0;

        .lang-button {
          align-self: flex-end;
          height: 2rem;
        }
      }
    }

    .title {
      font-family: Alfa, serif;
      font-size: min(6rem, 12vw);
      line-height: 1.15;
      grid-area: full;
      margin: auto 0 0;
      text-wrap: balance;
    }

    .home-subtitle {
      font-size: 1rem;
      font-weight: normal;
      margin-bottom: auto;
    }
  }
}

.page-header {
  height: auto;
  position: relative;
  margin-bottom: 2rem;

  background:
    radial-gradient(
      70% 100% at 50% 0,
      color-mix(in srgb, var(--bg-color), transparent 80%) 0%,
      #131216 100%
    ),
    url("/img/corkboard.jpg") center center;

  .content {
    width: 100%;

    .title {
      font-size: min(2rem, 6vw);
      margin-top: 0;
    }

    .parent-link {
      margin-bottom: 0.5rem;

      a {
        display: block;
        font-size: 1rem;
        text-decoration: none;
      }
    }

    .top-bar {
      padding: 1rem 0 2rem;
      .home-link {
        display: block;
        font-size: 1rem;
        font-family: Alfa, serif;
        color: var(--text-color);
        opacity: 1;
        text-decoration: none;

        &:hover,
        &:focus {
          opacity: 0.7;
        }
      }
    }

    @media (max-width: 600px) {
      .top-bar {
        flex-direction: row;
        align-items: center;
      }
    }
  }
}

/* Home page */

.home {
  .accolades {
    position: relative;
    z-index: 2;
    margin-bottom: 8rem;

    .accolades {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 4rem;
      align-items: center;
      justify-content: space-around;

      .award {
        flex-basis: 1;
        text-align: center;
        position: relative;
        margin: 0;

        .award-image {
          /* This is somewhat tuned to the current awards' dimensions */
          text-align: center;
          max-height: 8rem;
          min-width: 8rem;
          max-width: 11rem;
        }
      }
      @media (max-width: 600px) {
        gap: 1rem;

        .award .award-image {
          min-width: 6rem;
          max-width: 8rem;
        }
      }
    }

    .critique-reviews {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 4rem;
      flex-direction: row;
      justify-content: space-around;

      li {
        flex: 1;
        max-width: 16rem;

        figure {
          margin: 0;

          blockquote {
            margin: 0;

            &::before {
              content: "“";
              display: block;
              font-size: 6rem;
              color: color-mix(in srgb, var(--highlight-text), transparent 75%);
              margin: 0 0 -1rem -1rem;
              line-height: 0;
              overflow: visible;
              pointer-events: none;
            }

            p {
              margin: 0;
            }
          }

          figcaption {
            font-weight: 600;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 0.25rem;

            img {
              display: inline-block;
              max-width: 2.25rem;
              margin: 0 0.5rem 0 0;
            }
          }
        }

        &:nth-child(2) {
          margin-top: 4rem;
        }
      }

      @media (max-width: 600px) {
        flex-direction: column;

        li {
          max-width: none;

          figure blockquote::before {
            margin-left: -1rem;
          }

          &:nth-child(2) {
            margin-top: 0;
          }
        }
      }
    }
  }

  .presentation {
    overflow: hidden;

    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 8rem auto;

      img.newspaper {
        margin-left: -16rem;
        max-width: calc(100% + 16rem);
        height: auto;
      }

      @media (max-width: 600px) {
        grid-template-columns: 1fr;

        img.newspaper {
          margin: 0 -4rem;
          max-width: calc(100% + 8rem);
        }
      }
    }
  }

  .user-reviews {
    position: relative;
    background:
      radial-gradient(
        81.44% 50% at 50% 50%,
        rgba(19, 18, 22, 0) 0%,
        #131216 100%
      ),
      url("/img/corkboard.jpg") center center;
    padding: 8rem 1.5rem;

    @media (max-width: 600px) {
      padding: 0 1.5rem;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
        81.44% 50% at 50% 50%,
        rgba(19, 18, 22, 0) 50%,
        #131216 100%
      );
      z-index: 20;
      pointer-events: none;
      opacity: 0.3;
    }

    ul {
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      position: relative;

      li {
        font-family: Gaegu;
        font-size: 1.125rem; /* 18px */
        line-height: 1.15;
        color: var(--bg-color);
        padding: 1rem 1.5rem 0;
        border-radius: 1px;
        margin: 0 -0.25rem;
        flex: 0;
        flex-basis: 13.5rem;
        transform-origin: center top;

        background: linear-gradient(
          178.26deg,
          #eeeeee 1.59%,
          #efefef 52.73%,
          #ffffff 95.62%
        );
        box-shadow:
          0px 24px 32px rgba(0, 0, 0, 0.5),
          -2px 12px 4px rgba(0, 0, 0, 0.15);

        &:nth-child(1) {
          margin-top: 8rem;
          rotate: -2deg;
          z-index: 3;
        }

        &:nth-child(2) {
          margin-top: 0;
          rotate: 1deg;
        }

        &:nth-child(3) {
          rotate: 1deg;
          margin-top: 16rem;
          z-index: 5;
        }

        &:nth-child(4) {
          rotate: 5deg;
          margin-top: 2rem;
          z-index: 4;
        }

        &:nth-child(5) {
          rotate: -1deg;
          margin-top: 0;
          z-index: 3;
        }

        &::before {
          content: "";
          display: block;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 50%;
          margin: -1.35rem auto 2rem;
          background: linear-gradient(190.3deg, #eb0000 4.9%, #7c0006 92.31%);
          box-shadow:
            -2px 4px 4px rgba(119, 35, 0, 0.5),
            inset -0.3px 1px 1px #d58284,
            inset 0px -2px 2px rgba(49, 26, 0, 0.39);
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        figure {
          margin: 0;
          blockquote {
            margin: 0;
          }
        }

        figcaption {
          text-align: right;

          a {
            font-weight: bold;
          }
        }
      }

      @media (max-width: 600px) {
        margin: 0 -1rem;
        flex-direction: column;

        li {
          flex-basis: auto;
          max-width: 18rem;
          margin: 0 auto;

          &:nth-child(1) {
            margin-top: 2rem;
            rotate: -2deg;
            z-index: 3;
          }

          &:nth-child(2) {
            margin: 0 auto;
            rotate: 1deg;
          }

          &:nth-child(3) {
            rotate: -1deg;
            z-index: 5;
            margin-top: 1rem;
          }

          &:nth-child(4) {
            rotate: 5deg;
            z-index: 4;
            margin-top: -0.5rem;
          }

          &:nth-child(5) {
            rotate: -1deg;
            z-index: 3;
            margin-bottom: 2rem;
          }
        }
      }
    }
  }

  .steam-widget {
    margin: 4rem auto;
    text-align: center;
    position: relative;

    iframe {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      color-scheme: light; /* Steam widget breaks its transparency on "dark" scheme */
    }
  }
}

footer.evil-trout {
  margin: 8rem auto;
  position: relative;

  .evil-trout-logo {
    text-align: center;

    img {
      max-width: 100%;
      height: auto;
    }
  }

  h3 {
    font-family: Alfa;
    font-size: 1.5rem;

    @media (max-width: 600px) {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
  }

  .games {
    margin-bottom: 4rem;
  }

  .links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 4rem;

    @media (max-width: 800px) {
      gap: 1rem 2rem;
    }

    @media (max-width: 600px) {
      grid-template-columns: 1fr;
    }

    ul {
      list-style: none;
      padding: 0.75rem 0 0;
      display: flex;
      gap: 1rem;
      align-items: center;
    }
  }

  .newsletter form {
    background: color-mix(in oklab, white 5%, var(--bg-color));
    border: 2px solid #3b3b3b;
    border-radius: 50px;
    display: flex;
    padding: 0.125rem;
    gap: 1rem;

    @media (max-width: 700px) {
      flex-direction: column;
      padding: 0.25rem;
      border-radius: 1.75rem;

      input[type="email"] {
        border-radius: 50px 0 0 50px;
        padding: 1rem 1rem 0;
      }

      .button {
        border-radius: 1.5rem;
      }
    }

    &:focus-within {
      border-color: var(--highlight-text);
      background: black;
    }

    input[type="email"] {
      background: transparent;
      border: none;
      flex: 1;
      border-radius: 50px 0 0 50px;
      padding-left: 1rem;
      font-size: 0.9rem;
      color: var(--text-color);

      &:focus {
        outline: none;
      }
    }
  }
}

/* Help index */

ul.help-index {
  list-style: none;
  padding: 0;
  margin: 0 0 4rem;
  display: flex;
  gap: 1rem 3rem;
  flex-wrap: wrap;

  li {
    flex: 1 0 max(38%, 15rem);

    &.focus {
      margin-top: 1rem;
      flex-basis: 100%;

      .button {
        font-size: 1.15rem;
        padding: 0.5em 1em; /* Restores the OG button padding */
        max-width: 40rem;
      }
    }

    a {
      display: block;
      padding: 0.75rem 0 0;
      text-decoration: none;
      font-size: 1.25rem;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }
}

/* Animations */

@keyframes flip-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0px);
    opacity: 1;
  }
}