@import url("layout-hero.css?v=1.42");

main {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .title {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;

    .names {
      margin: 0;
      font-size: 10vw;
      white-space: nowrap;
      color: var(--fg-primary);

      width: 80vw;
      text-align: center;
      text-shadow: 2px 2px 64px rgba(0, 0, 0, 0.2);

      @supports (-webkit-background-clip: text) or (background-clip: text) {
        background-image:
          linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 45%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 55%,
            rgba(255, 255, 255, 0) 100%
          ),
          linear-gradient(0deg, var(--fg-primary), var(--fg-primary));
        background-size: 200% 100%, 100% 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: -50% 0, 0 0;
        background-clip: text, text;
        color: transparent;
        animation: shiny-sweep 8s linear infinite;
      }

      @media (max-width: 576px) {
        font-size: 16vw;
        animation: shiny-sweep 6s linear infinite;

        span {
          display: block;
        }
      }

      .separator {
        font-family: var(--font-family-ru);
        margin: 0 1rem;
      }
    }

    .countdown {
      margin: 0;
      font-size: 4vw;
      white-space: nowrap;
      color: var(--fg-primary);

      width: 80vw;
      text-align: center;
      text-shadow: 2px 2px 64px rgba(0, 0, 0, 0.2);

      @media (max-width: 576px) {
        font-size: 8vw;
      }
    }
  }
}