:root {
  --mn-font-family-copy: "Courier New", Courier, monospace;
  --mn-font-family-heading: Arial, Helvetica, sans-serif;
  --mn-color-brand: deeppink;
  --mn-color-text-1-light: #fff;
  --mn-color-text-1-dark: #000;
  --mn-color-bg-dark: rgba(0, 0, 0, 0.5);
  --background-gradient: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  --spacing-s: 1rem;
  --spacing-m: 2rem;
  --spacing-l: 4rem;
  --spacing-xl: 6rem;
  --pop-shadow: 0.5rem 1rem 4rem var(--mn-color-text-1-dark);
}

*:focus-visible {
  outline: var(--mn-color-brand) solid 2px;
}
::selection {
  background: var(--mn-color-brand);
}

button {
  background-color: transparent;
  border: 0;
  outline: none;

  &:hover {
    cursor: pointer;
  }
}

html,
body {
  min-height: 100dvh;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--mn-font-family-copy);
  background-color: var(--mn-color-text-1-dark);
}

header {
  video {
    object-fit: cover;
    width: 100%;
    filter: grayscale();
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .viewport-header {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100dvh;
    overflow: clip;
  }

  h1 {
    font-family: var(--mn-font-family-heading);
    font-size: clamp(4rem, 7vw + 1rem, 14rem);
    line-height: 100%;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.125em;
    margin: 4rem;
    display: flex;
    text-align: center;

    @media (prefers-reduced-motion: no-preference) {
      transform-origin: bottom;
      animation: title-ani linear;
      animation-timeline: scroll(root);
      animation-range: exit 10vh;
      transform-style: preserve-3d;
    }
  }
}

@keyframes title-ani {
  to {
    transform: scale3d(4, 8, 4);
    opacity: 0;
  }
}

main {
  background: var(--mn-color-bg-dark);
  backdrop-filter: blur(30px);
  padding-block: 1rem;

  .info-text {
    font-family: var(--mn-font-family-copy);
    margin-inline: clamp(1rem, 8vw + 0.5rem, 14rem);
    font-size: clamp(1rem, 3vw + 0.5rem, 3rem);
    color: var(--mn-color-text-1-light);

    @media (width > 480px) {
      text-align: center;
    }
  }

  a {
    color: var(--mn-color-text-1-light);
    background-color: var(--mn-color-brand);
    text-decoration: none;
    padding-inline: 0.5rem;
    font-weight:800;
    &:hover,
    &:focus-visible {
      color: var(--mn-color-brand);
      background-color: var(--mn-color-text-1-light);
    }
  }
}

.navigation {
  background: var(--background-gradient);
}

.social {
  display: flex;
  gap: var(--spacing-m);
  padding-block-start: var(--spacing-xl);
  padding-inline: var(--spacing-m);
  justify-content: center;

  a {
    @media (prefers-reduced-motion: no-preference) {
      transition: transform 0.2s ease-in-out;
    }
    &:hover,
    &:focus-visible {
      transform: scale(1.2);
      svg {
        fill: var(--mn-color-brand);
      }
    }

    svg {
      width: 3rem;
      height: 3rem;
      fill: var(--mn-color-text-1-light);
    }
  }
}

.meta {
  font-family: var(--mn-font-family-heading);
  color: var(--mn-color-text-1-light);
  display: flex;
  gap: var(--spacing-s);
  padding: var(--spacing-m);
  justify-content: center;

  button,
  a {
    font-family: var(--mn-font-family-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--mn-color-text-1-light);
    text-decoration: none;
    text-transform: uppercase;
    &:hover,
    &:focus-visible {
      color: var(--mn-color-brand);
    }
  }
}

.galery-item {
  filter: grayscale(1);
  transition: filter 0.6s linear;

  @supports (animation-timeline: view()) {
    animation-timeline: view();
    animation-name: colorize;
    animation-fill-mode: both;
    animation-timing-function: linear;

    &:focus {
      filter: grayscale(0);
    }
  }
}

@keyframes colorize {
  to {
    filter: grayscale(0);
  }
}

@supports not (animation-timeline: view()) {
  .galery-item:hover {
    filter: grayscale(0);
  }
}

.galery-image {
  width: 100%;
  height: auto;
  display: block;
}

footer {
  background: var(--background-gradient);
  color: var(--mn-color-text-1-light);
  padding-block-start: 4rem;
  padding-block-end: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    max-width: 10rem;
  }
}

.logo-link {
  display: inline-flex;
  transition: transform 0.5s ease-out;
  &:hover {
    transform: rotate(720deg);
  }
}

.button-close {
  align-self: flex-end;
  padding: 0;
  color: var(--mn-color-text-1-light);
  &:hover {
  color: var(--mn-color-brand);
  }
  svg {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
  }
}

[popover] {
  flex-direction: column;
  border: 0;
  padding: 1em;
  max-height: 80dvh;
  box-shadow: var(--pop-shadow);
  overscroll-behavior: contain;
  color: var(--mn-color-text-1-light);
  background-color: var(--mn-color-text-1-dark);
  scrollbar-color: var(--mn-color-brand) var(--mn-color-text-1-dark);
  scrollbar-width: thin;
  margin-inline: 1rem;

  @media (width > 480px) {
    margin-inline: var(--spacing-m);
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: transform 0.5s ease-in-out;
    transform: scale(1) rotate(0deg);
    transform-origin: bottom center;

    @starting-style {
      transform: scale(0);
    }
  }
  
  &:popover-open {
    display: flex;
  }
}

[popover]::backdrop {
  backdrop-filter: blur(10px);
}

button.close {
  color: var(--mn-color-brand);
  font-family: var(--mn-font-family-heading);
  position: absolute;
  right: 1rem;

  &:hover {
    color: var(--mn-color-text-1-light);
  }
}