/* ========== Scroll Indicator ========== */
.scroll-indicator{
  position: relative;
  margin: 0 auto;
  margin-top: 2rem;
  width: var(--mp48);                     /* 48px -> 3.6923rem */
  height: var(--mp48);                    /* 48px -> 3.6923rem */
  display: grid;
  place-items: center;
  color: var(--text-white);
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;

  text-align: center;
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-32);
}

.scroll-indicator .chev{
  width: var(--font-size-28);             /* 28px -> 2.154rem */
  height: var(--font-size-28);            /* 28px -> 2.154rem */
  opacity: 0;
  animation: chev-drop 1.6s ease-out infinite;
  filter: drop-shadow(0 0.154rem 0.462rem rgba(0,0,0,.45)); /* 0 2px 6px */
}

.scroll-indicator .chev.chev--delay{ animation-delay: .25s; }

.scroll-indicator span{
  display:block;
  text-shadow:
    0 0 0.615rem rgba(0,0,0,0.7),         /* 0 0 8px */
    0 0 0.923rem rgba(255,255,255,0.6);   /* 0 0 12px */
  animation: pulseScale 1.6s infinite ease-in-out;
}

.scroll-indicator span:last-child{
  font-size: var(--font-size-32);
  margin-top: 0.231rem;
  animation-delay: .3s;
}

.scroll-indicator:hover,
.scroll-indicator:focus-visible{
  transform: translateZ(0) scale(1.06);
}

@media (prefers-reduced-motion: reduce){
  .scroll-indicator .chev{ animation:none; opacity:1; }
}

.hero-title{
  text-align: center !important;
  color: var(--text-white);
}

.hero-text{
  color: var(--text-white);
  text-shadow:
    0.154rem 0.154rem 0.308rem rgba(0,0,0,.6),
    0 0 0.615rem rgba(0,0,0,.4);
}

.text-header-index-0{ color: var(--text-default-50); }
.text-header-index-1{ color: var(--danger-color); }

.header-text-content{
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  width: min(92.3077rem, 90vw);
  text-align: center;
  color: var(--text-white);
  z-index: 3;
  pointer-events: none;
}

#quizStartup{ display:none; }

.video-header-home{
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding-bottom: 0 !important;
  background: var(--primary-color);
  isolation: isolate;
}

.video-header-home .video-bg-blur{
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: blur(1.538rem) brightness(0.75);
  transform: scale(1.12);
  will-change: transform, filter;
  z-index: 1;
}

.video-header-home .video-content{
  position: relative;
  z-index: 2;
  width:100%;
  height:100%;
  object-fit: contain;
  object-position: center;
  display:block;
  background: transparent;
}

.video-header-home video::-webkit-media-controls,
.video-header-home video::-webkit-media-controls-enclosure,
.video-header-home video::-webkit-media-controls-panel{
  display:none !important;
}

.story-hero{ position: relative; }
.story-sticky{ background: transparent; }

.story-video-blur{
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.12);
  z-index: 0;
}

.story-video-bg{
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;
  background: transparent;
  z-index: 1;
  box-shadow: 0 0 3.077rem 3.077rem rgba(0,0,0,0.35);
}

.story-image-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.story-sticky {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}


.story-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: var(--mp16);
  pointer-events: none;
}

.story-copy{
  position: relative;
  isolation: isolate;
}

.story-copy::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(252.65deg, var(--primary-color) 8.18%, var(--secondary-color) 91.82%);
  filter: blur(5.3846rem) saturate(115%); /* 70px -> 5.3846rem */
  opacity: .75;
  border-radius: 50%;
  top: -10%;
  height: calc(100% + 6.1538rem);        /* 80px -> 6.1538rem */
}

.story-title,
.story-subtitle{
  position: relative;
  z-index: 1;
  color: var(--text-white);
}

.story-title{
  font-weight: var(--font-weight-700);
  font-size: var(--font-size-77);
  line-height: 1.05;
  text-shadow: 0 0.4615rem 1.8462rem rgba(0,0,0,.35); /* 0 6px 24px */
  margin: 0 0 0.5rem 0;
  letter-spacing: 0.0385rem;             /* 0.5px -> 0.0385rem */
}

.story-subtitle{
  font-weight: var(--font-weight-500);
  font-size: var(--font-size-36);        /* 2.769rem = 36px */
}

.story-quiz-slot {
  display: grid;
  gap: 4rem;
}
.story-quiz-slot::after {
  content: "";
  display: block;
  height: 40vh;
}

  @media (max-width: 992px) {
  .header-text-content{ top: 40%; }
   .story-title {
    font-size: var(--font-size-56); /* ~70px */
    line-height: 1.1;
  }
  .story-subtitle {
    font-size: var(--font-size-28); /* ~28px */
  }
}

  @media (max-width: 640px) {
  .header-text-content{ top: 42%; }
    .story-title {
    font-size: var(--font-size-40); /* ~48px */
    line-height: 1.15;
  }
  .story-subtitle {
    font-size: var(--font-size-20); /* ~20px */
  }
}

/* ========== Animations ========== */
@keyframes chev-drop{
  0%{   transform: translateY(0);        opacity:0; }
  15%{  opacity:1; }
  60%{  transform: translateY(0.9231rem); opacity:1; } /* 12px */
  100%{ transform: translateY(1.3846rem); opacity:0; } /* 18px */
}

@keyframes fadeBlurIn{
  0%{   opacity:0; filter: blur(0.9231rem);}          /* 12px */
  100%{ opacity:1; filter: blur(0); }
}

.fade-blur-in{ animation: fadeBlurIn 1s ease-out forwards; }

@keyframes pulseScale{
  0%,100%{ transform: scale(1);   opacity:1; }
  50%{    transform: scale(1.2); opacity:.8; }
}

@media (max-width: 76.3077rem){
  .story-video-blur{ display:none; }
  .story-video-bg{ object-fit: cover; }
}

@media (max-width: 59.0769rem){
  .story-video-blur{ display:none; }
  .story-video-bg{ object-fit: cover; }
}