/* ============================================================
   GROWTH STORY 1 — HAZWOPER CINEMATIC PAGE-LOAD INTRO
   Runs only on the HAZWOPER Growth Story.
============================================================ */

#csHazIntro{
  --haz-purple:#8d1d92;
  --haz-orange:#f25722;
  --haz-yellow:#ffd200;
  --haz-ease:cubic-bezier(.18,.72,.18,1);
  --haz-spring:cubic-bezier(.16,1,.3,1);

  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(255,207,0,.10),transparent 28%),
    linear-gradient(135deg,#08070b 0%,#100a18 50%,#08070b 100%);
  opacity:1;
  visibility:visible;
  transition:
    opacity .82s var(--haz-ease),
    visibility .82s var(--haz-ease);
}

#csHazIntro.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

#csHazIntro .haz-intro-inner{
  position:relative;
  width:min(640px,90vw);
  text-align:center;
  isolation:isolate;
}

#csHazIntro .haz-logo-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:250px;
  margin:0 auto 4px;
}

#csHazIntro .haz-intro-logo{
  position:relative;
  z-index:4;
  width:min(485px,80vw);
  height:auto;
  border-radius:8px;
  animation:
    csHazLogoEntranceEpic 1.2s var(--haz-spring) both,
    csHazEpicLogoSequence 4.25s .78s cubic-bezier(.2,.75,.15,1) both;
  filter:
    drop-shadow(0 18px 44px rgba(255,201,0,.17))
    drop-shadow(0 0 28px rgba(255,208,0,.06));
}

#csHazIntro .haz-pulse-ring{
  position:absolute;
  z-index:1;
  width:145px;
  height:145px;
  border:2px solid rgba(255,215,0,.52);
  border-radius:50%;
  opacity:0;
  animation:csHazEpicRing 1.4s 1.05s ease-out 3;
}

#csHazIntro .haz-pulse-ring.ring-two{
  animation-delay:1.34s;
}

#csHazIntro .haz-beat-orbit{
  position:absolute;
  inset:-18px;
  z-index:0;
  pointer-events:none;
}

#csHazIntro .haz-beat-orbit i{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--haz-yellow);
  box-shadow:0 0 18px rgba(255,210,0,.78);
  opacity:.7;
}

#csHazIntro .haz-beat-orbit i:nth-child(1){
  left:9%;
  top:30%;
  animation:csHazFloat 1.8s ease-in-out infinite;
}
#csHazIntro .haz-beat-orbit i:nth-child(2){
  right:10%;
  top:20%;
  animation:csHazFloat 1.8s .35s ease-in-out infinite;
}
#csHazIntro .haz-beat-orbit i:nth-child(3){
  right:18%;
  bottom:16%;
  animation:csHazFloat 1.8s .7s ease-in-out infinite;
}

#csHazIntro .haz-cinematic-flare{
  position:absolute;
  z-index:-1;
  left:50%;
  top:42%;
  width:640px;
  height:220px;
  transform:translate(-50%,-50%) scale(.55);
  border-radius:50%;
  opacity:0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,210,0,.19),
      rgba(255,125,0,.055) 34%,
      transparent 70%
    );
  filter:blur(14px);
  animation:csHazFlareSequence 4.55s ease-in-out both;
}

#csHazIntro .haz-impact-flash{
  position:fixed;
  z-index:10;
  inset:-20vh -20vw;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(255,237,150,.82),
      rgba(255,190,0,.25) 18%,
      rgba(255,119,23,.07) 32%,
      transparent 57%
    );
  mix-blend-mode:screen;
  animation:csHazImpactFlash 4.55s ease both;
}

#csHazIntro .haz-intro-copy{
  margin-top:5px;
  color:#fff;
}

#csHazIntro .haz-intro-copy span{
  display:block;
  color:var(--haz-yellow);
  font-size:11px;
  font-weight:900;
  letter-spacing:.28em;
  text-transform:uppercase;
}

#csHazIntro .haz-intro-copy strong{
  display:block;
  margin-top:7px;
  color:#fff;
  font-size:21px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:-.035em;
}

#csHazIntro .haz-beat-line{
  height:42px;
  margin:21px auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  animation:csHazBeatGlow 1.05s ease-in-out infinite;
}

#csHazIntro .haz-beat-line span{
  width:4px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--haz-yellow),#ff9f1a);
  animation:csHazEpicWave 1.05s ease-in-out infinite;
}

#csHazIntro .haz-beat-line span:nth-child(2){animation-delay:.11s}
#csHazIntro .haz-beat-line span:nth-child(3){animation-delay:.22s}
#csHazIntro .haz-beat-line span:nth-child(4){animation-delay:.33s}
#csHazIntro .haz-beat-line span:nth-child(5){animation-delay:.44s}
#csHazIntro .haz-beat-line span:nth-child(6){animation-delay:.55s}
#csHazIntro .haz-beat-line span:nth-child(7){animation-delay:.66s}

#csHazIntro .haz-loader-status{
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#csHazIntro .haz-loader-status strong{
  color:var(--haz-yellow);
}

#csHazIntro .haz-loader-track{
  height:4px;
  margin:12px 0 11px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}

#csHazIntro .loader-fill{
  width:0;
  height:100%;
  background:
    linear-gradient(
      90deg,
      var(--haz-yellow),
      #ff8a19,
      var(--haz-purple)
    );
  box-shadow:0 0 24px rgba(255,195,0,.36);
}

@keyframes csHazLogoEntranceEpic{
  0%{
    opacity:0;
    transform:translateY(28px) scale(.84);
    filter:blur(13px);
  }
  62%{
    opacity:1;
    transform:translateY(-4px) scale(1.018);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:none;
    filter:none;
  }
}

@keyframes csHazEpicLogoSequence{
  0%,19%{transform:scale(1)}
  23%{transform:scale(1.035)}
  27%{transform:scale(.995)}
  35%{transform:scale(1.018)}
  42%{transform:scale(1)}
  56%{transform:scale(1)}
  60%{transform:scale(1.075)}
  63%{transform:scale(.985)}
  68%{transform:scale(1.038)}
  73%,100%{transform:scale(1)}
}

@keyframes csHazEpicRing{
  0%{transform:scale(.6);opacity:.66}
  38%{opacity:.42}
  100%{transform:scale(4.6);opacity:0}
}

@keyframes csHazFlareSequence{
  0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.42)}
  25%{opacity:.45;transform:translate(-50%,-50%) scale(.8)}
  50%{opacity:.22;transform:translate(-50%,-50%) scale(1)}
  58%{opacity:.75;transform:translate(-50%,-50%) scale(1.16)}
  66%{opacity:.24}
  82%{opacity:.35}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.36)}
}

@keyframes csHazImpactFlash{
  0%,55%{opacity:0}
  58%{opacity:.08}
  59.5%{opacity:.95}
  61%{opacity:.16}
  64%{opacity:0}
  100%{opacity:0}
}

@keyframes csHazEpicWave{
  0%,100%{height:8px;opacity:.35}
  25%{height:16px;opacity:.68}
  50%{height:36px;opacity:1}
  72%{height:20px;opacity:.74}
}

@keyframes csHazFloat{
  0%,100%{transform:translateY(0) scale(.8);opacity:.35}
  50%{transform:translateY(-10px) scale(1.2);opacity:1}
}

@keyframes csHazBeatGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,210,0,0))}
  50%{filter:drop-shadow(0 0 12px rgba(255,210,0,.28))}
}

@media(max-width:720px){
  #csHazIntro .haz-logo-stage{
    min-height:190px;
  }

  #csHazIntro .haz-intro-logo{
    width:min(370px,82vw);
  }

  #csHazIntro .haz-intro-copy strong{
    font-size:17px;
  }

  #csHazIntro .haz-cinematic-flare{
    width:430px;
    height:170px;
  }
}

@media(prefers-reduced-motion:reduce){
  #csHazIntro{
    display:none !important;
  }
}