/* ==========================================================================
   Index Page Specific Styles
   ========================================================================== */

/* Hero Section (Index Only) */
.hero-section {
    position: relative;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
  }
  
  .background-video {
    position: absolute;
    left: 0%; top: 0%; right: 0%; bottom: 0%;
    min-height: 100%;
    background-image: linear-gradient(180deg, var(--color-overlay-dark), var(--color-overlay-dark));
    overflow: hidden;
    color: var(--color-white);
  }
  
  .background-video > video {
    background-size: cover;
    background-position: 50% 50%;
    position: absolute;
    margin: auto;
    width: 100%; height: 100%;
    right: -100%; bottom: -100%; top: -100%; left: -100%;
    object-fit: cover;
    z-index: -100;
  }
  .background-video > video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
  }
  
  .hero-info {
    position: relative;
    z-index: 9;
    display: flex;
    margin: 120px auto; /* Center horizontally */
    padding-top: 20px;
    flex-direction: column;
    align-items: center;
    max-width: 970px;
    text-align: center;
    /* Animation Base */
    opacity: 0;
    transform: translateY(var(--animation-distance));
    transition: var(--transition-animation);
    will-change: opacity, transform;
    visibility: hidden;
  }
  .hero-info.slide-in-visible { /* Animation End */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
  
  .hero-info .title { /* Specific to hero */
    color: var(--color-text-white);
    text-align: center;
    margin-top: 0px;
    margin-bottom: 40px;
    font-family: var(--font-secondary);
    font-size: 90px;
    line-height: 88px;
    font-weight: 400;
  }
  
  .hero-info .paragraph-white { /* Specific to hero */
    width: 100%;
    max-width: 980px;
    color: var(--color-text-white);
    text-align: center;
    margin-bottom: 20px;
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 32px;
  }
  
  .lightbox-link { margin-top: 32px; }
  .play-icon { width: 100%; max-width: 80px; }
  
  .scroll-down-link {
    position: absolute;
    left: 0%; top: auto; right: 0%; bottom: 0%;
    z-index: 9;
    display: flex;
    height: 80px;
    justify-content: center;
    align-items: center;
    font-family: 'Font awesome 5 free solid 900', sans-serif;
    color: var(--color-grey-light);
    font-size: 20px;
    text-decoration: none;
    /* Animation */
    animation: bounceUpDown 2s infinite ease-in-out;
  }
  .down-arrow { width: 16px; }
  
  @keyframes bounceUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  /* About Background Image Section (Index Only) */
  .about-bg-image {
    position: absolute;
    left: 0%; top: 0%; right: auto; bottom: auto;
    z-index: 1;
    width: 100%;
    height: 780px;
    background-image: linear-gradient(180deg, var(--color-overlay-medium), var(--color-overlay-medium)), url("../assets/about-us-bg.jpeg");
    background-position: 0px 0px, 50% 50%;
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
  }
  
  /* Media Queries for Index Specifics */
  @media screen and (max-width: 991px) {
      .hero-info .title { font-size: 70px; line-height: 70px; }
      .hero-info .paragraph-white { font-size: 16px; line-height: 28px; }
      .hero-section { height: auto; min-height: 750px; }
      .play-icon { max-width: 70px; }
  }
  
  @media screen and (max-width: 767px) {
      .hero-info .title { font-size: 50px; line-height: 50px; }
      .hero-info .paragraph-white { font-size: 14px; line-height: 25px; }
      .hero-section { min-height: 700px; }
      .play-icon { max-width: 50px; }
      .section.artists .my-list .artists-list {
        grid-template-columns: 1fr;
        max-width: 470px;
        margin-left: auto;
        margin-right: auto;
        grid-column-gap: 0;
      }
  }
  
  @media screen and (max-width: 479px) {
      .hero-info .title { font-size: 40px; line-height: 40px; margin-bottom: 20px; }
      .lightbox-link { margin-bottom: 20px; }
      .about-bg-image { height: 600px; }
      .section.artists .my-list .artists-list { max-width: 100%; }
  }