.player {
  position: relative;
  container-type: inline-size;
  isolation: isolate;

  display: block grid;
  grid: 100% / 100%;
  overflow: clip;

  block-size: max-content;

  background-color: black;
  color: var(--gray-3);

  & > video::cue {
    font-size: 1.5rem;
  }

  & > video {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
    object-position: center;
    object-fit: contain;
  }

  & > figcaption {
    grid-area: 1 / 1;
    display: block grid;
    grid: auto 1fr auto / 100%;
    position: absolute;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    align-content: end;

    background: linear-gradient(to bottom, black, transparent) top left / 100% 20% no-repeat;

    & > header {
      display: block grid;
      place-items: center;

      & > h1 {
        text-align: center;
        font-size: 8rem;
        text-shadow: 0 0 .5rem #000;
      }
    }

    & > section {
      display: block grid;
      place-items: center;
      
      & > svg {
        font-size: 10rem;
        animation: spin 1s infinite steps(8) normal;
        filter: drop-shadow(0 0 .5rem #000);
      }
    }

    & > footer {
      position: relative;
      display: block grid;
      grid: auto auto / auto auto auto;
      place-content: space-between;

      gap: var(--size-2);
      padding: var(--size-2);

      &::before {
        content: '';
        position: absolute;
        inset: 0;
        inset-block-start: -5rem;
        backdrop-filter: blur(5px);
        mask-image: linear-gradient(to bottom, transparent, black 5rem);
        z-index: 0;
      }

      & > section {
        z-index: 1;
        &:nth-child(1) {
          grid-column: 1 / -1;
        }

        & > button {  
          font-size: var(--size-7);
          text-shadow: 0 0 .5rem #000;
          aspect-ratio: 1;
          background-color: transparent;
          border-radius: var(--radius-2);
          
          transition: background-color .2s var(--ease-in-out-1);

          &:hover {
              background-color: rgba(from var(--gray-2) r g b / .25);
          }
        }
      }
    }
  }
}

@keyframes spin {
  0% {
    rotate: 0deg;
  }

  100% {
    rotate: 360deg;
  }
}
