/* Decorative background layers only (z-index below content, pointer-events none) */

/* PART 1 — HERO wrapper */
.bg-heroWrap{
  position:relative;
  overflow:hidden;
  background-color:#1B1B1D;
  isolation:isolate;
}

.bg-heroWrap__decor{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.bg-heroWrap > .nav,
.bg-heroWrap > .hero{
  z-index:2;
}

.bg-heroWrap > .nav{
  z-index:50;
}


/* PART 1 — Blobs (static) */
.bg-heroWrap__blob{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter: blur(70px);
}

.bg-heroWrap__blob--1{
  width:380px;
  height:380px;
  background-color:#FF5A1F;
  opacity:0.35;
  top:-100px;
  right:120px;
}

.bg-heroWrap__blob--2{
  width:320px;
  height:320px;
  background-color:#FF8A3D;
  opacity:0.35;
  top:380px;
  right:-80px;
}

.bg-heroWrap__blob--3{
  width:260px;
  height:260px;
  background-color:#3A3A3A;
  opacity:0.2;
  top:200px;
  left:-100px;
}

/* PART 2 — Dark zone wrapper */
.bg-afterHeroWrap{
  position:relative;
  overflow:hidden;
  background-color:#2B2B2E;
}



.bg-afterHeroWrap > *{
  position:relative;
  z-index:2;
}

.bg-afterHeroWrap__decor{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.bg-afterHeroWrap__content{
  position:relative;
  z-index:2;
}

.bg-afterHeroWrap__content > *{
  position:relative;
  z-index:2;
}

/* 1) Panning grid */
.bg-afterHeroWrap__grid{
  position:absolute;
  inset:-50% -50%;
  z-index:1;
  background-image:
    linear-gradient(rgba(228,228,231,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,228,231,0.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 20%, transparent 75%);
  animation: panGrid 40s linear infinite;
}

@keyframes panGrid{
  0% { transform: translate(0,0); }
  100% { transform: translate(46px,46px); }
}

/* 2) Neutral blobs */
.bg-afterHeroWrap__blob{
  position:absolute;
  z-index:1;
  border-radius:50%;
  filter: blur(90px);
  pointer-events:none;
}

.bg-afterHeroWrap__blob--a{
  width:420px;
  height:420px;
  top:60px;
  left:-120px;
  background:#5A5A5F;
  opacity:0.28;
  animation: driftA 26s ease-in-out infinite;
}

.bg-afterHeroWrap__blob--b{
  width:360px;
  height:360px;
  top:40%;
  right:-140px;
  background:#4A4A4E;
  opacity:0.28;
  animation: driftB 30s ease-in-out infinite;
}

.bg-afterHeroWrap__blob--c{
  width:320px;
  height:320px;
  bottom:-80px;
  left:30%;
  background:#63636A;
  opacity:0.2;
  animation: driftA 34s ease-in-out infinite reverse;
}

@keyframes driftA {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(50px,40px) scale(1.08); }
}

@keyframes driftB {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-40px,-50px) scale(1.05); }
}

/* 3) Twinkling dots */
.bg-afterHeroWrap__dot{
  position:absolute;
  z-index:1;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#E4E4E7;
  animation: twinkle 5s ease-in-out infinite;
}

@keyframes twinkle {
  0%,100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 0.85; transform: scale(1.3); }
}

@media (prefers-reduced-motion: reduce){
  .bg-afterHeroWrap__grid,
  .bg-afterHeroWrap__blob,
  .bg-afterHeroWrap__dot{
    animation:none !important;
  }
}


.hero__bgBlob--1{
  width:380px;
  height:380px;
  right:-120px;
  top:-100px;
  background:#FF5A1F;
  opacity:.35;
  animation: heroBlobFloat1 26s ease-in-out infinite;
}

.hero__bgBlob--2{
  width:320px;
  height:320px;
  right:-160px;
  bottom:-120px;
  background:#FF8A3D;
  opacity:.35;
  animation: heroBlobFloat2 29s ease-in-out infinite;
  animation-delay:-8s;
}

.hero__bgBlob--3{
  width:260px;
  height:260px;
  left:-90px;
  top:70px;
  background:#3A3A3A;
  opacity:.20;
  animation: heroBlobFloat3 30s ease-in-out infinite;
  animation-delay:-14s;
}

@keyframes heroBlobFloat1{
  0%,100%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(-26px, 22px, 0) scale(1.05);}
}

@keyframes heroBlobFloat2{
  0%,100%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(-10px, -26px, 0) scale(1.06);}
}

@keyframes heroBlobFloat3{
  0%,100%{transform: translate3d(0,0,0) scale(1);}
  50%{transform: translate3d(22px, 16px, 0) scale(1.08);}
}

/* Content should be above hero background */
.hero > .container,
.hero > .container *{
  position:relative;
  z-index:2;
}

.hero > .hero__bottom{
  z-index:2;
}