.hero-atmosphere {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.page-home .hero-atmosphere {
  animation: atmosphereWake 1.35s ease-out 0.78s both;
}

.page-home .hero-atmosphere::after {
  animation: crimsonSystemPulse 1.3s ease-out 1.42s both;
  background:
    radial-gradient(ellipse at 52% 58%, rgba(214, 40, 40, 0.22), rgba(214, 40, 40, 0.08) 34%, transparent 68%);
  content: "";
  filter: blur(18px);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.hero-fog {
  background:
    radial-gradient(ellipse at center, rgba(248, 248, 248, 0.72) 0%, rgba(248, 248, 248, 0.34) 42%, rgba(248, 248, 248, 0) 72%);
  bottom: clamp(3rem, 10vh, 7rem);
  filter: blur(22px);
  height: clamp(72px, 12vw, 150px);
  opacity: 0.42;
  position: absolute;
  transform: translate3d(0, 0, 0);
  width: clamp(340px, 46vw, 860px);
}

.hero-fog-a {
  animation: fogDriftA 18s ease-in-out infinite alternate;
  left: -8vw;
}

.hero-fog-b {
  animation: fogDriftB 22s ease-in-out infinite alternate;
  bottom: clamp(4.5rem, 12vh, 8.5rem);
  opacity: 0.3;
  right: -10vw;
}

.hero-fog-c {
  animation: fogPulse 8s ease-in-out infinite alternate;
  bottom: clamp(2.4rem, 7vh, 5rem);
  left: 24vw;
  opacity: 0.22;
  width: clamp(300px, 32vw, 620px);
}

.hero-particle {
  animation: particleDrift 12s ease-in-out infinite;
  background: rgba(214, 40, 40, 0.86);
  box-shadow: 0 0 8px rgba(214, 40, 40, 0.45);
  height: 4px;
  opacity: 0.72;
  position: absolute;
  transform: rotate(18deg);
  width: 2px;
}

.particle-1 {
  animation-delay: -1s;
  left: 10%;
  top: 14%;
}

.particle-2 {
  animation-delay: -5s;
  height: 6px;
  left: 24%;
  top: 28%;
}

.particle-3 {
  animation-delay: -7s;
  background: rgba(248, 248, 248, 0.82);
  box-shadow: 0 0 8px rgba(248, 248, 248, 0.4);
  left: 40%;
  top: 18%;
}

.particle-4 {
  animation-delay: -3s;
  height: 7px;
  left: 62%;
  top: 13%;
}

.particle-5 {
  animation-delay: -9s;
  left: 78%;
  top: 23%;
}

.particle-6 {
  animation-delay: -4s;
  background: rgba(248, 248, 248, 0.78);
  box-shadow: 0 0 7px rgba(248, 248, 248, 0.34);
  left: 88%;
  top: 42%;
}

.particle-7 {
  animation-delay: -8s;
  height: 5px;
  left: 14%;
  top: 64%;
}

.particle-8 {
  animation-delay: -2s;
  left: 52%;
  top: 66%;
}

.particle-9 {
  animation-delay: -6s;
  height: 6px;
  left: 70%;
  top: 58%;
}

.particle-10 {
  animation-delay: -10s;
  background: rgba(248, 248, 248, 0.76);
  box-shadow: 0 0 7px rgba(248, 248, 248, 0.34);
  left: 92%;
  top: 70%;
}

.hero-crimson-dust {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}

.hero-crimson-dust span {
  --dust-delay: 0s;
  --dust-duration: 18s;
  --dust-opacity: 0.32;
  --dust-size: 3px;
  --dust-x: 18px;
  --dust-y: -52px;
  animation: crimsonDustFloat var(--dust-duration) ease-in-out infinite;
  animation-delay: var(--dust-delay);
  background: rgba(214, 40, 40, 0.78);
  border-radius: 999px;
  box-shadow:
    0 0 7px rgba(214, 40, 40, 0.34),
    0 0 15px rgba(214, 40, 40, 0.16);
  filter: blur(0.6px);
  height: var(--dust-size);
  opacity: 0;
  position: absolute;
  width: var(--dust-size);
}

.hero-crimson-dust span:nth-child(1) {
  --dust-delay: -2s;
  --dust-duration: 21s;
  --dust-opacity: 0.24;
  --dust-size: 2px;
  --dust-x: 28px;
  --dust-y: -68px;
  left: 8%;
  top: 76%;
}

.hero-crimson-dust span:nth-child(2) {
  --dust-delay: -9s;
  --dust-duration: 24s;
  --dust-opacity: 0.34;
  --dust-size: 3px;
  --dust-x: -22px;
  --dust-y: -58px;
  left: 18%;
  top: 42%;
}

.hero-crimson-dust span:nth-child(3) {
  --dust-delay: -5s;
  --dust-duration: 19s;
  --dust-opacity: 0.28;
  --dust-size: 2px;
  --dust-x: 16px;
  --dust-y: -46px;
  left: 28%;
  top: 68%;
}

.hero-crimson-dust span:nth-child(4) {
  --dust-delay: -13s;
  --dust-duration: 26s;
  --dust-opacity: 0.22;
  --dust-size: 4px;
  --dust-x: -30px;
  --dust-y: -72px;
  left: 39%;
  top: 35%;
}

.hero-crimson-dust span:nth-child(5) {
  --dust-delay: -7s;
  --dust-duration: 22s;
  --dust-opacity: 0.3;
  --dust-size: 2px;
  --dust-x: 26px;
  --dust-y: -62px;
  left: 48%;
  top: 82%;
}

.hero-crimson-dust span:nth-child(6) {
  --dust-delay: -16s;
  --dust-duration: 28s;
  --dust-opacity: 0.26;
  --dust-size: 3px;
  --dust-x: -18px;
  --dust-y: -82px;
  left: 58%;
  top: 51%;
}

.hero-crimson-dust span:nth-child(7) {
  --dust-delay: -11s;
  --dust-duration: 23s;
  --dust-opacity: 0.36;
  --dust-size: 2px;
  --dust-x: 24px;
  --dust-y: -55px;
  left: 66%;
  top: 72%;
}

.hero-crimson-dust span:nth-child(8) {
  --dust-delay: -3s;
  --dust-duration: 20s;
  --dust-opacity: 0.2;
  --dust-size: 4px;
  --dust-x: -34px;
  --dust-y: -64px;
  left: 74%;
  top: 38%;
}

.hero-crimson-dust span:nth-child(9) {
  --dust-delay: -18s;
  --dust-duration: 27s;
  --dust-opacity: 0.31;
  --dust-size: 2px;
  --dust-x: 20px;
  --dust-y: -76px;
  left: 83%;
  top: 88%;
}

.hero-crimson-dust span:nth-child(10) {
  --dust-delay: -6s;
  --dust-duration: 25s;
  --dust-opacity: 0.23;
  --dust-size: 3px;
  --dust-x: -26px;
  --dust-y: -50px;
  left: 91%;
  top: 58%;
}

.hero-crimson-dust span:nth-child(11) {
  --dust-delay: -15s;
  --dust-duration: 29s;
  --dust-opacity: 0.25;
  --dust-size: 2px;
  --dust-x: 18px;
  --dust-y: -86px;
  left: 34%;
  top: 90%;
}

.hero-crimson-dust span:nth-child(12) {
  --dust-delay: -20s;
  --dust-duration: 31s;
  --dust-opacity: 0.21;
  --dust-size: 3px;
  --dust-x: -20px;
  --dust-y: -78px;
  left: 70%;
  top: 94%;
}

@keyframes fogDriftA {
  from {
    transform: translate3d(-2vw, 0, 0) scaleX(1);
  }

  to {
    transform: translate3d(8vw, -1.4vh, 0) scaleX(1.08);
  }
}

@keyframes fogDriftB {
  from {
    transform: translate3d(4vw, 0, 0) scaleX(1.05);
  }

  to {
    transform: translate3d(-7vw, -1vh, 0) scaleX(0.96);
  }
}

@keyframes fogPulse {
  from {
    opacity: 0.16;
    transform: translate3d(0, 0, 0) scale(0.94);
  }

  to {
    opacity: 0.28;
    transform: translate3d(3vw, -0.8vh, 0) scale(1.06);
  }
}

@keyframes particleDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) rotate(18deg);
  }

  18%,
  76% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(18px, -36px, 0) rotate(26deg);
  }
}

@keyframes crimsonDustFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.7);
  }

  18% {
    opacity: var(--dust-opacity);
  }

  54% {
    opacity: calc(var(--dust-opacity) * 0.72);
    transform: translate3d(calc(var(--dust-x) * 0.45), calc(var(--dust-y) * 0.55), 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--dust-x), var(--dust-y), 0) scale(0.76);
  }
}

@keyframes atmosphereWake {
  from {
    filter: blur(5px);
    opacity: 0;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes crimsonSystemPulse {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }

  42% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@media (max-width: 760px) {
  .hero-fog {
    opacity: 0.28;
  }

  .particle-7,
  .particle-8,
  .particle-9,
  .particle-10,
  .hero-crimson-dust span:nth-child(n + 8) {
    display: none;
  }
}

@media (max-width: 520px) {
  .hero-fog {
    filter: blur(18px);
    height: 92px;
    opacity: 0.22;
  }

  .hero-fog-a {
    left: -24vw;
  }

  .hero-fog-b {
    right: -28vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-atmosphere,
  .page-home .hero-atmosphere::after,
  .hero-fog,
  .hero-particle,
  .hero-crimson-dust span {
    animation: none;
  }
}