/* ---------- HERO ----------- */
#heroSpacer {z-index:-1;height: calc(100svh - 25vh);}
#mainImageContainer {position:absolute;overflow:hidden;width:100%;top:0px;height: calc(100svh - 25vh);z-index:o}
#mainImage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: radial-gradient(
	rgba(0,0,0,0.12) 33%,
	transparent 33%
  );
  background-size: 3px 3px;
}

#mainImage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(
	to bottom,
	rgba(40,36,42,0),
	var(--black) 100%
  );
}
.heroFade {
  position: relative;
  z-index: 1;
}

.heroFade::after {
  content: '';
  position: absolute;
  left: 0;
  top: -260px;
  width: 100%;
  height: 260px;
  pointer-events: none;
  z-index: 1;
  will-change: opacity;

  background:
	linear-gradient(
	  to bottom,
	  rgba(40, 36, 42, 0.0) 0%,
	  rgba(40, 36, 42, 0.04) 22%,
	  rgba(40, 36, 42, 0.12) 42%,
	  rgba(40, 36, 42, 0.28) 58%,
	  rgba(40, 36, 42, 0.52) 72%,
	  rgba(40, 36, 42, 0.78) 85%,
	  rgb(40, 36, 42) 100%
	),
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
}
@media (min-width: 1200px) {
  .heroFade::after {
	height: 300px;
	top: -300px;
  }
}
@media (max-width: 767px) {
  .heroFade::after {
	background-size: auto, 80px 80px;
  }
}

#mainImage video {object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;filter:contrast(0.8)}
#mainImage img {width:100%;height:100%;object-fit:cover;position:absolute;bottom:0px;left:0;opacity:1;z-index:-1;transform:scale(1);transform-origin:bottom left}
#backgroundVid {opacity: 0;transition: opacity 0.6s ease;}
#backgroundVid.ready {opacity: 1;}
/* ---------- ANIMATION TEXT OVERLAY ---------------- */
body {
  overscroll-behavior-x: none;
}
#homeHero {position:fixed;top:0;left:0;right:0;bottom:0}
#heroAnimation {
  position: absolute;z-index:99;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

img.logoAnimated {height:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);width:50%;filter:contrast(0.9)brightness(0.9)}
.homepageTitle {animation-fill-mode:forwards;animation:showHide 4s;max-width:100%;overflow-x:hidden}
.animated-title {z-index:10;animation-delay:0s;animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);animation:fadeAway 3s;height:100%;left:50%;opacity:0;position:absolute;text-align:center;top:calc(50% - 80px);transform:translate(-50%,-50%);width:100%}
.animated-title>div.text-top div span:first-child {font-size:17.4vmin;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}
.titleFX {display:block}
.pText {color:var(--white);height:25%;position:absolute;top:calc(50% - 80px);transform:translateY(-50%);width:100%;z-index:10;display:block}
.pTextHolder {display:block;height:100%;letter-spacing:normal;position:relative;text-transform:capitalize;width:100%;text-shadow:-4px 4px 0 rgba(0,0,0,0.4)}
.p1 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);animation:title 3s;display:block;font-family:'heading';left:50%;line-height:0.9;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:100%}
.p2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);animation:more 10s;display:block;font-family:'heading';font-size:8vmin;left:50%;line-height:0.9;opacity:0;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);width:100%}
.p1,.p2 {font-size:clamp(2.3rem,10vw, 4rem)}
.drops {transform:translate(-50%,4vmin)}
.aTime1 {animation-delay:2s}
.aTime2 {animation-delay:4s}
.aTime3 {animation-delay:6s}
.aTime4 {animation-delay:8s}
.aTime5 {animation-delay:10s}
.aTime6 {animation-delay:12.5s}
.neon {color:var(--white);text-shadow:-20px 20px 40px rgba(40,38,42,0.4)}
.fw {display:inline-block}
.fw-letter {color:var(--white);display:inline-block;font-size:132%;line-height:0.9;transform:translateY(0.04em)}
.animated-title,
.pText,
.pTextHolder {
  max-width: 100%;
  overflow: hidden;
}

@keyframes fadeAway {
0% {opacity:1;transform:translate(-50%,-50%) scale(1)}
25% {opacity:1}
50% {opacity:1;transform:translate(-50%,-50%) scale(1)}
100% {opacity:0;transform:translate(-50%,-50%) scale(3.5)}
}
@keyframes more {
0% {opacity:0;transform:translate(-50%,-50%) scale(0.9)}
5% {opacity:1}
11% {text-shadow:-4px 4px 0 rgba(0,0,0,0.4)}
20% {text-shadow:0 0 8px rgba(255,255,255,0.9),0 0 16px rgba(255,255,255,0.7),0 0 28px rgba(255,255,255,0.5)}
30% {opacity:1;text-shadow:-4px 4px 0 rgba(0,0,0,0.4);transform:translate(-50%,-50%) scale(1)}
100% {opacity:0;transform:translate(-50%,-50%) scale(3.5)}
}
@keyframes showHide {
0% {opacity:1}
99% {opacity:1}
100% {opacity:0}
}
@keyframes title {
0% {opacity:1;transform:translate(-50%,-50%) scale(0.9)}
50% {opacity:1;transform:translate(-50%,-50%) scale(1)}
100% {opacity:0;transform:translate(-50%,-50%) scale(1.7)}
}