/***********
*************** HERO SPLAT
*****************************************/

/*************************************************************         HERO LAYOUT          ********************/

/* #region HERO LAYOUT */

/*==========================================================================
|                                HERO WRAPPER                              |
==========================================================================*/

.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/*==========================================================================
|                             HERO SPLAT SHELL                             |
==========================================================================*/

.hero-splat-shell{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #050505;
}

.hero-splat-stage,
.hero-splat-stage canvas,
.hero-splat-tint,
.hero-splat-glow{
  position: absolute;
  inset: 0;
}

.hero-splat-stage{
  overflow: hidden;
}

/* #endregion HERO LAYOUT */


/*************************************************************         HERO CONTENT          ********************/

/* #region HERO CONTENT */

/*==========================================================================
|                              HERO SPLAT ATMOSPHERE                      |
==========================================================================*/

.hero-splat-tint{
  background:
    linear-gradient(
      to right,
      rgba(7, 7, 7, 0.62) 0%,
      rgba(7, 7, 7, 0.34) 34%,
      rgba(7, 7, 7, 0.20) 58%,
      rgba(7, 7, 7, 0.38) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(7, 7, 7, 0.14) 0%,
      rgba(7, 7, 7, 0.08) 40%,
      rgba(7, 7, 7, 0.24) 100%
    );
}

.hero-splat-glow{
  background:
    radial-gradient(
      68% 90% at 78% 18%,
      rgba(241, 160, 36, 0.10) 0%,
      rgba(241, 160, 36, 0.00) 58%
    ),
    radial-gradient(
      58% 72% at 82% 56%,
      rgba(255, 122, 198, 0.16) 0%,
      rgba(255, 122, 198, 0.00) 62%
    ),
    radial-gradient(
      45% 55% at 20% 40%,
      rgba(255, 180, 220, 0.10) 0%,
      rgba(255, 180, 220, 0.00) 70%
    );
  mix-blend-mode: screen;
  opacity: 0.85;
}

/*==========================================================================
|                              HERO SPLAT LAYERING                        |
==========================================================================*/

.hero-track,
.hero-progress,
.hero-slide,
.intro-inner,
.featured-1-inner{
  position: relative;
  z-index: 2;
}

.hero-slide,
.intro,
.featured-1{
  background: transparent !important;
}

.hero-splat-stage canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/*==========================================================================
|                              HERO SPLAT ENHANCEMENTS                    |
==========================================================================*/

.featured-1-card,
.featured-1-details{
  position: relative;
  z-index: 2;
}

.featured-1-details{
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--line);
}

.featured-1-card{
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid var(--line);
}

/* #endregion HERO CONTENT */


/***********
*************** HERO RESPONSIVE
*****************************************/

/* #region HERO RESPONSIVE */

@media (prefers-reduced-motion: reduce){
  .hero-splat-stage{
    transform: none !important;
  }
}

@media (max-width: 900px){
  .hero-splat-tint{
    background:
      linear-gradient(
        to bottom,
        rgba(7, 7, 7, 0.42) 0%,
        rgba(7, 7, 7, 0.30) 42%,
        rgba(7, 7, 7, 0.50) 100%
      );
  }

  .hero-splat-glow{
    opacity: 0.6;
  }
}

/* #endregion HERO RESPONSIVE */