/**
 * Styles
 */

.page-home {
  position: relative;

  .o-wide {
    max-width: 1200px !important;
  }

  .template-content-wide {
    padding-top: 100px;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 100px;
    }
  }

  .connecting {
    height: calc(100vh - 160px) !important;
    padding: 0!important;

    .orbit-container {
      position: relative;
      width: 60vh;
      height: 60vh;
      margin: 1rem;
      border-radius: 50%;


      .orbit-wrapper {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 50%;


        border: 0.5px solid transparent;
        background-image:
          linear-gradient(var(--q-secondary), var(--q-secondary)),
          linear-gradient(to right, #00bcd4, #3f51b5, #673ab7, #ffffff, #00bcd4, #3f51b5);
        background-origin: border-box;
        background-clip: padding-box, border-box;

        /* Smooth base rotation */
        animation: rotate-clockwise 15s linear infinite;
      }

      /* Energy Particle: A bright glowing bead traveling along the track */
      .orbit-wrapper::after {
        content: '';
        position: absolute;
        /* Positions the particle right on the track line */
        top: -11px;
        left: 50%;
        transform: translateX(-50%);

        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #00bcd4;

        /* Intense neon glow around the particle */
        box-shadow:
          0 0 8px #00bcd4,
          0 0 15px #00bcd4,
          0 0 25px #03a9f4;
      }

      /* Keyframes for multi-directional dynamics */
      @keyframes rotate-clockwise {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }

      @keyframes rotate-counter {
        from { transform: rotate(360deg); }
        to { transform: rotate(0deg); }
      }
    }

    .o-banner {
      position: relative;
      width: calc(60vh - 80px);
      height: calc(60vh - 80px);
      margin: 1rem;
      border-radius: 50%;
      background: url("/images/bg_map.png") right no-repeat;
      z-index: 1;

      .name {
        font-size: 6rem;
      }

      .help {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;

        .q-btn {
          width: 160px;
          height: 40px;
          font-size: 18px;
          border-radius: 12px;
          color: #ffffff;
          background: linear-gradient(to right, #3f51b5, #00bcd4);
        }
      }
    }

    .slogan {
      text-align: center !important;
    }
  }


  .downloads {
    height: 600px;
    color: #fff;
    background-image: linear-gradient(45deg, #6BD8FC 5%, #5D66F4 100%) !important;

    .o-banner {
      padding: 100px 0;
      min-height: 400px;
      background: url("/images/bg_map.png") right no-repeat;
    }

    .slogan {
      text-align: left !important;
      justify-content: start;
    }

    .o-app-download {
      padding: 5rem 0;
    }
  }

  .introduction {
    header {
      text-align: center;
      padding-bottom: 32px;

      .title {
        position: relative;
        font-size: 50px;
        font-weight: bold;

        span {
          position: absolute;
          width: 180px;
          height: 35px;
          right: 0px;
          top: 27px;
          background: #413eff;
          opacity: .2;
        }
      }
      .sub-title {
        font-weight: bold;
      }
    }

    .feature {
      padding: 18px;
      border-radius: 10px;
      min-height: 200px;

      footer {
        padding-top: 0px;
      }

      .name {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}

.mobile {
  .template-content-wide {
    padding-top: 20px;

    &:first-child {
      padding-top: 0px;
    }

    &:last-child {
      padding-bottom: 20px;
    }
  }

  .downloads {
    .o-banner {
      padding: 0;

      .name, .slogan {
        text-align: center;
        justify-content: center;
      }
    }
  }

  .categories {
    .category {
      padding: 32px 32px;
    }
  }

}

@keyframes rotate-all {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.body--light {
  .page-home {
    .orbit-wrapper {
      border: 3px solid transparent !important;
    }
  }
}
