@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

@media not (forced-colors: active) {
  *:focus-visible {
    outline: none;
  }
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --__light-000: 20%;
  --__light-025: 32%;
  --__light-050: 70%;
  --__light-075: 80%;
  --__light-090: 94%;
  --__light-100: 98%;
  --__chroma-000: 10%;
  --__chroma-025: 25%;
  --__chroma-050: 70%;
  --__chroma-075: 25%;
  --__chroma-090: 22%;
  --__chroma-100: 13%;
  --__hue-red: 20deg;
  --__hue-yellow: 100deg;
  --__hue-green: 130deg;
  --__hue-blue: 267deg;
  --__hue-purple: 300deg;

  --color-grey-000: oklch(000% 0% 0deg);
  --color-grey-010: oklch(010% 0% 0deg);
  --color-grey-025: oklch(025% 0% 0deg);
  --color-grey-030: oklch(030% 0% 0deg);
  --color-grey-035: oklch(035% 0% 0deg);
  --color-grey-050: oklch(050% 0% 0deg);
  --color-grey-060: oklch(060% 0% 0deg);
  --color-grey-075: oklch(075% 0% 0deg);
  --color-grey-090: oklch(090% 0% 0deg);
  --color-grey-095: oklch(097% 0% 0deg);
  --color-grey-100: oklch(100% 0% 0deg);

  --color-red-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-red));
  --color-red-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-red));
  --color-red-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-red));
  --color-red-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-red));
  --color-red-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-red));
  --color-red-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-red));

  --color-yellow-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-yellow));
  --color-yellow-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-yellow));
  --color-yellow-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-yellow));
  --color-yellow-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-yellow));
  --color-yellow-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-yellow));
  --color-yellow-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-yellow));

  --color-green-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-green));
  --color-green-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-green));
  --color-green-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-green));
  --color-green-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-green));
  --color-green-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-green));
  --color-green-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-green));

  --color-blue-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-blue));
  --color-blue-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-blue));
  --color-blue-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-blue));
  --color-blue-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-blue));
  --color-blue-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-blue));
  --color-blue-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-blue));

  --color-purple-000: oklch(var(--__light-000) var(--__chroma-000) var(--__hue-purple));
  --color-purple-025: oklch(var(--__light-025) var(--__chroma-025) var(--__hue-purple));
  --color-purple-050: oklch(var(--__light-050) var(--__chroma-050) var(--__hue-purple));
  --color-purple-075: oklch(var(--__light-075) var(--__chroma-075) var(--__hue-purple));
  --color-purple-090: oklch(var(--__light-090) var(--__chroma-090) var(--__hue-purple));
  --color-purple-100: oklch(var(--__light-100) var(--__chroma-100) var(--__hue-purple));

  --noise: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><filter id="noise" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"></feTurbulence><feBlend mode="screen"></feBlend></filter><rect width="500" height="500" filter="url(%23noise)" opacity="0.5"></rect></svg>');

  overflow-y: scroll;
}

:root:has(dialog[open]) {
  scrollbar-gutter: stable;
  overflow-y: hidden;
}

body {
  --color-background: var(--color-grey-025);
  --color-text-primary: var(--color-grey-090);
  --color-text-secondary: var(--color-grey-075);
  --color-card-default: var(--color-grey-030);
  --color-card-hover: var(--color-grey-035);
  --color-header: var(--color-grey-025);
  --card-shadow-default: none;
  --card-shadow-hover:
    0 0.25rem 0.5rem rgba(0, 0, 0, 0.07),
    0 2rem 3rem rgba(0, 0, 0, 0.07),
    0 4rem 6rem rgba(0, 0, 0, 0.02);
  --modal-shadow:
    0px 0.375rem 0.375rem rgba(0, 0, 0, 0.06),
    0px 1.375rem 1.625rem rgba(0, 0, 0, 0.12),
    0px 3.125rem 3.625rem rgba(0, 0, 0, 0.18),
    0px 5.625rem 6.375rem rgba(0, 0, 0, 0.24),
    0px 8.750rem 10.00rem rgba(0, 0, 0, 0.30);

  --size-card-height: 15rem;
  --size-font-modal-heading: 3rem;
  --size-font-group-heading: 1.25rem;
  --size-font-card-heading: 1.5rem;
  --size-items-padding: 2rem;
  --size-items-gap: 2rem;
  --size-card-metadata-fade-height: 5rem;
  --size-modal-figure-display: block;
  --size-modal-template-columns: 20rem 1fr;

  @media (width < 60em) {
    --size-modal-template-columns: 15rem 1fr;
  }

  @media (width < 50em) {
    --size-modal-template-columns: 10rem 1fr;
    --size-font-modal-heading: 2rem;
  }
  
  @media (width < 35em) {
    --size-card-height: 8rem;
    --size-font-group-heading: 1rem;
    --size-font-card-heading: 1.25rem;
    --size-items-padding: 1rem;
    --size-items-gap: 1rem;
    --size-card-metadata-fade-height: 2.5rem;
    --size-modal-figure-display: none;
    --size-modal-template-columns: 1fr;
  }

  font-family: 'InterVariable', sans-serif;
  font-feature-settings:
    'liga' 1, /* Fix for Chrome, apparently */
    'calt' 1, /* Contextual alternates, e.g. 3x9 is centered */
    'ss07' 1, /* Square punctuation */
    'ss08' 1, /* Square quotes */
    'cv01' 1, /* Alternate /1/ */
    /*'cv09' 1, */ /* Flat-top /3/ */
    'cv10' 1; /* Capital /G/ with spur */
  line-height: 1.5;
  background-color: var(--color-background);
  color: var(--color-text-primary);

  &:has(dialog[open]) {
    overflow: hidden;
  }
}

img {
  display: block;
  width: 100%;
  height: auto;
}

main {
  padding-top: 6rem;
  padding-bottom: 2rem;

  ul {
    margin: 0 auto;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(25em, 100%), auto));
    gap: var(--size-items-gap);
    padding-inline: var(--size-items-padding);
  }
}

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: var(--card-shadow-hover);
  padding-block: 1rem;
  padding-inline: 2rem;
  background: var(--color-header);
  border-bottom: 2px solid var(--color-grey-030);
  z-index: 10;

  nav {
    display: grid;
    grid-template-columns: 1px auto 1px;
    justify-content: space-between;

    & > :first-child {
      text-align: left;
      visibility: hidden;
    }

    & > :last-child {
      text-align: right;
      visibility: hidden;
    }
  }

  #search {
    display: grid;
    width: min(30rem, 100%);
    position: relative;

    label {
      grid-area: 1 / 1 / -1 / -1;
    }

    input {
      grid-area: 1 / 1 / -1 / -1;
      width: 100%;
      padding-block: 0.75em;
      padding-inline-start: 2.5em;
      padding-inline-end: 3rem;
      color: var(--color-text-primary);
      background: var(--color-header);
      border: 2px solid var(--color-grey-050);
      font-size: 1rem;
      border-radius: 5rem;
      corner-shape: squircle;

      &:hover {
        border-color: var(--color-grey-050);
      }

      &:focus {
        border-color: var(--color-grey-090);
      }

      &::placeholder {
        color: var(--color-grey-050);
      }

      &:is(:hover, :focus)::placeholder {
        color: var(--color-grey-075);
      }

      &::-webkit-search-cancel-button {
        display: none;
      }
    }

    .search-icon {
      --icon-size: 2rem;
      --line-thickness: 0.2rem;
      --color-icon: var(--color-grey-060);

      width: var(--icon-size);
      height: var(--icon-size);
      position: absolute;
      top: calc(50% - 0.5 * var(--icon-size));
      left: 0.5rem;
      pointer-events: none;
      transform: translate(0, -0.15rem) rotate(-45deg) scale(0.5);

      #search:has(:is(input:hover, input:focus)) & {
        --color-icon: var(--color-grey-090);
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
      }

      &::before {
        --size: 1.75rem;
        width: var(--size);
        height: var(--size);
        border: var(--line-thickness) solid var(--color-icon);
        border-radius: var(--size);
        top: 0;
        left: calc(50% - 0.5 * var(--size));
      }

      &::after {
        width: var(--line-thickness);
        height: 1rem;
        border-radius: var(--line-thickness);
        background: var(--color-icon);
        left: calc(50% - 0.5 * var(--line-thickness));
        top: 1.75rem;
        transform-origin: 100% 100%;
      }
    }

    .search-button-clear {
      --button-size: 2rem;
      --x-thickness: 0.2rem;
      --color-x: var(--color-grey-060);

      display: none;
      width: var(--button-size);
      height: var(--button-size);
      border: none;
      font: inherit;
      position: absolute;
      top: calc(50% - 0.5 * var(--button-size));
      right: 0.5rem;
      background: none;
      cursor: pointer;

      #search:has(input:not(:placeholder-shown)) & {
        display: block;
      }

      &:hover {
        --color-x: var(--color-grey-090);
      }

      &::before,
      &::after {
        content: '';
        position: absolute;
        top: calc(50% - 0.5 * var(--x-thickness));
        left: 0;
        right: 0;
        height: var(--x-thickness);
        background: var(--color-x);
        border-radius: var(--x-thickness);
        transform: rotate(var(--angle, 0deg)) scale(0.5);
      }

      &::before {
        --angle: 45deg;
      }

      &::after {
        --angle: -45deg;
      }
    }
  }
}

.group-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 2rem;
  grid-column: 1 / -1;

  .title {
    font-size: var(--size-font-group-heading);
    font-weight: 700;
  }

  .metadata {
    display: flex;
    color: var(--color-text-secondary);

    .item-count:not(:empty):has(+ .total-size:not(:empty))::after {
      content: '\b7';
      margin-inline: 0.75ch;
    }
  }
}

.item-wrapper > button {
  --color-text-hoverable: var(--color-text-secondary);
  --color-card: var(--color-card-default);
  --image-brightness: 100%;
  --card-shadow: var(--card-shadow-default);

  background-color: var(--color-card);
  border-radius: 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--size-card-height);
  width: 100%;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;

  @supports (corner-shape: squircle) {
    border-radius: 2rem;
    corner-shape: squircle;
  }

  &:hover,
  &:focus-visible {
    --color-text-hoverable: var(--color-text-primary);
    --color-card: var(--color-card-hover);
    --image-brightness: 108%;
    --metadata-fade-height: calc(0.4 * var(--size-card-metadata-fade-height));
  }

  &:hover {
    --card-shadow: 0 0 0 0.25rem var(--color-card), var(--card-shadow-hover);
  }

  &:focus-visible {
    --card-shadow: 0 0 0 0.25rem var(--color-grey-075), var(--card-shadow-hover);
  }

  [data-fully-watched="true"] & {
    /* opacity: 0.15; */

    &:hover,
    &:focus-visible {
      opacity: 1;
    }
  }

  figure {
    aspect-ratio: 2 / 3;
    border-radius: 1em;
    overflow: hidden;
    corner-shape: squircle;
    position: relative;
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--thumb, none);
      background-size: cover;
      filter: blur(0.5rem);
    }

    img {
      height: 100%;
      object-fit: cover;
      filter: brightness(var(--image-brightness)) blur(0.5rem);
      opacity: 0;
      transition-property: opacity filter;
      transition-duration: 500ms;

      &.loaded {
        opacity: 1;
        filter: brightness(var(--image-brightness)) blur(0rem);
      }
    }
  }

  .metadata {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    gap: 0.6rem;
    padding: 1em;

    &::after {
      content: '';
      position: absolute;
      height: var(--metadata-fade-height, var(--size-card-metadata-fade-height));
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to bottom, transparent, var(--color-card) 90%);
      z-index: 1;
    }

    .time {
      display: flex;
      color: var(--color-text-hoverable);
      font-size: 0.75em;

      .date:not(:empty):has(+ .length:not(:empty))::after {
        content: '\b7';
        margin-inline: 0.5ch;
      }
    }

    .title {
      font-size: var(--size-font-card-heading);
      line-height: 1.1;
      text-wrap: pretty;
      letter-spacing: -0.02em;
      hyphens: auto;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      min-height: fit-content;
    }

    .genres {
      color: var(--color-text-hoverable);
      font-size: 0.75em;
      white-space: nowrap;
      position: relative;
      overflow: hidden;
      min-height: fit-content;

      &:empty {
        display: none;
      }

      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 2em;
        background: linear-gradient(to right, transparent, var(--color-card));
      }
    }

    .description {
      color: var(--color-text-hoverable);
      hyphens: auto;
      hyphenate-limit-chars: auto 4;
    }
  }
}

#media-details {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 1em;
  border: none;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: inherit;

  &[open] {
    display: flex;
  }

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--noise);
    z-index: -10;
    filter: brightness(0.4);
  }

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -8;
    background:
      radial-gradient(
        farthest-corner,
        oklch(from var(--color-background) l c h / 100%),
        oklch(from var(--color-background) l c h / 30%)
      );
    mix-blend-mode: multiply;
  }

  &::backdrop {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .content-wrapper-outer {
    position: relative;
    display: flex;
    width: min(60rem, 100%);
    max-height: 100%;
    border-radius: 4em;
    corner-shape: squircle;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      corner-shape: inherit;
      box-shadow: var(--modal-shadow);
      z-index: -9;
    }

    .content-wrapper-middle {
      position: relative;
      border-radius: inherit;
      corner-shape: inherit;
      overflow: hidden;
      width: 100%;

      form {
        --button-size: 3rem;
        --x-thickness: 0.3rem;
  
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 1;
  
        button.close {
          --color-x: var(--color-grey-060);
  
          width: var(--button-size);
          height: var(--button-size);
          border: none;
          font: inherit;
          position: relative;
          background: none;
          cursor: pointer;
  
          &:hover,
          &:focus-visible {
            --color-x: var(--color-grey-090);
          }
  
          &::before,
          &::after {
            content: '';
            position: absolute;
            top: calc(50% - 0.5 * var(--x-thickness));
            left: 0;
            right: 0;
            height: var(--x-thickness);
            background: var(--color-x);
            border-radius: var(--x-thickness);
            transform: rotate(var(--angle, 0deg)) scale(0.75);
          }
  
          &::before {
            --angle: 45deg;
          }
  
          &::after {
            --angle: -45deg;
          }
        }
      }
  
      .background-image {
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        z-index: -1;
        opacity: 0.1;
        filter: saturate(200%) blur(4rem);
      }
  
      .background-solid {
        position: absolute;
        inset: 0;
        background: var(--noise), var(--color-card-default);
        background-blend-mode: multiply;
        z-index: -2;
      }
    }
  }

  .content-wrapper-inner {
    display: grid;
    grid-template-columns: var(--size-modal-template-columns);
    padding: 2rem;
    gap: 2rem;
    height: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to top, transparent 2rem, black 2rem);



    figure {
      display: var(--size-modal-figure-display);
      aspect-ratio: 2 / 3;
      border-radius: 1em;
      overflow: hidden;
      corner-shape: squircle;

      img {
        height: 100%;
        object-fit: cover;
      }
    }

    .metadata {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      overflow-y: auto;
      height: 100%;
      scrollbar-gutter: stable;
      scrollbar-color: var(--color-grey-050) transparent;
      scrollbar-width: thin;
      mask-image: radial-gradient(circle at calc(100% - 0.9rem) 0.9rem, transparent 1rem, black 3rem);

      :empty {
        display: none;
      }

      .top-text {
        display: flex;
        font-size: 1.25rem;
        color: var(--color-text-secondary);

        .type:not(:empty):has(+ .date:not(:empty))::after {
          content: '\b7';
          margin-inline: 0.5ch;
        }
      }

      .title {
        font-size: var(--size-font-modal-heading);
        line-height: 1.05;
        text-wrap: pretty;
        letter-spacing: -0.02em;
        hyphens: auto;
        padding-right: 4rem;
        margin-bottom: 0.125rem;
      }

      .description {
        hyphens: auto;
        hyphenate-limit-chars: auto 4;
        font-size: 1.25rem;
      }

      .details {
        display: flex;
        flex-wrap: wrap;
        row-gap: 1rem;
        column-gap: 2rem;
        margin-top: auto;

        &:empty {
          display: none;
        }

        & > * {
          display: flex;
          flex-direction: column;
          font-size: 1.25rem;
          font-weight: 600;
        }

        & > *:empty {
          display: none;
        }

        & > *::before {
          color: var(--color-text-secondary);
          font-size: 1rem;
          font-weight: 400;
        }

        .genres {
          flex-basis: 100%;
        }

        .genres::before {
          content: 'Genre';
        }

        .file-size::before {
          content: 'Size';
        }

        .length-duration::before {
          content: 'Duration';
        }

        .length-episodes::before {
          content: 'Episodes';
        }

        .length-seasons::before {
          content: 'Seasons';
        }
      }

      .external-links {

      }
    }
  }
}

.hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}