/* Page Background with Forest Image */
.page-bg {
  position: fixed;
  inset: -20px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-image: url("../images/forestback3-optimized.b58de81e7214.webp");
  background-size: cover;
  background-position: center bottom;
  filter: blur(4px);
}

.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 26, 25, 0.7) 0%, rgba(40, 65, 57, 0.4) 50%, rgba(17, 26, 25, 0.8) 100%);
  z-index: 1;
}

/* Fireflies Effect */
.firefly-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 1000s alternate infinite;
  pointer-events: none;
}

.firefly::before, .firefly::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  background: black;
  opacity: 0.1;
  animation: drift ease alternate infinite;
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw #F8D794;
  animation: drift ease alternate infinite, flash ease infinite;
}

@keyframes drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flash {
  0%, 40%, 100% { opacity: 0; box-shadow: 0 0 0vw 0vw #F8D794; }
  5%, 25% { opacity: 1; box-shadow: 0 0 2vw 0.4vw #F8D794; }
}

/* Firefly movement patterns */
.firefly:nth-child(1) { animation-name: move1; }
.firefly:nth-child(1)::before { animation-duration: 48s; }
.firefly:nth-child(1)::after { animation-duration: 48s, 11866ms; animation-delay: 0ms, 7531ms; }

@keyframes move1 {
  0% { transform: translateX(20vw) translateY(41vh) scale(0.68) }
  25% { transform: translateX(24vw) translateY(35vh) scale(0.98) }
  50% { transform: translateX(-47vw) translateY(4vh) scale(0.77) }
  75% { transform: translateX(30vw) translateY(10vh) scale(0.69) }
  100% { transform: translateX(-1vw) translateY(-40vh) scale(0.65) }
}

.firefly:nth-child(2) { animation-name: move2; }
.firefly:nth-child(2)::before { animation-duration: 37s; }
.firefly:nth-child(2)::after { animation-duration: 37s, 9273ms; animation-delay: 0ms, 4322ms; }

@keyframes move2 {
  0% { transform: translateX(-35vw) translateY(38vh) scale(0.72) }
  25% { transform: translateX(18vw) translateY(22vh) scale(0.85) }
  50% { transform: translateX(12vw) translateY(-25vh) scale(0.58) }
  75% { transform: translateX(-42vw) translateY(-18vh) scale(0.93) }
  100% { transform: translateX(28vw) translateY(32vh) scale(0.74) }
}

.firefly:nth-child(3) { animation-name: move3; }
.firefly:nth-child(3)::before { animation-duration: 52s; }
.firefly:nth-child(3)::after { animation-duration: 52s, 13427ms; animation-delay: 0ms, 2871ms; }

@keyframes move3 {
  0% { transform: translateX(15vw) translateY(-28vh) scale(0.64) }
  25% { transform: translateX(-22vw) translateY(-15vh) scale(0.91) }
  50% { transform: translateX(39vw) translateY(28vh) scale(0.56) }
  75% { transform: translateX(8vw) translateY(-41vh) scale(0.82) }
  100% { transform: translateX(-18vw) translateY(19vh) scale(0.67) }
}

.firefly:nth-child(4) { animation-name: move4; }
.firefly:nth-child(4)::before { animation-duration: 44s; }
.firefly:nth-child(4)::after { animation-duration: 44s, 10691ms; animation-delay: 0ms, 5923ms; }

@keyframes move4 {
  0% { transform: translateX(-12vw) translateY(25vh) scale(0.79) }
  25% { transform: translateX(32vw) translateY(-8vh) scale(0.63) }
  50% { transform: translateX(-28vw) translateY(-33vh) scale(0.87) }
  75% { transform: translateX(45vw) translateY(16vh) scale(0.71) }
  100% { transform: translateX(-8vw) translateY(-21vh) scale(0.95) }
}

.firefly:nth-child(5) { animation-name: move5; }
.firefly:nth-child(5)::before { animation-duration: 39s; }
.firefly:nth-child(5)::after { animation-duration: 39s, 8724ms; animation-delay: 0ms, 1689ms; }

@keyframes move5 {
  0% { transform: translateX(41vw) translateY(-19vh) scale(0.68) }
  25% { transform: translateX(-14vw) translateY(34vh) scale(0.84) }
  50% { transform: translateX(26vw) translateY(-12vh) scale(0.59) }
  75% { transform: translateX(-33vw) translateY(-38vh) scale(0.92) }
  100% { transform: translateX(5vw) translateY(27vh) scale(0.76) }
}

.firefly:nth-child(6) { animation-name: move6; }
.firefly:nth-child(6)::before { animation-duration: 47s; }
.firefly:nth-child(6)::after { animation-duration: 47s, 12384ms; animation-delay: 0ms, 8912ms; }

@keyframes move6 {
  0% { transform: translateX(-26vw) translateY(-9vh) scale(0.83) }
  25% { transform: translateX(19vw) translateY(21vh) scale(0.61) }
  50% { transform: translateX(-44vw) translateY(14vh) scale(0.94) }
  75% { transform: translateX(36vw) translateY(-27vh) scale(0.57) }
  100% { transform: translateX(-3vw) translateY(-34vh) scale(0.78) }
}

.firefly:nth-child(7) { animation-name: move7; }
.firefly:nth-child(7)::before { animation-duration: 51s; }
.firefly:nth-child(7)::after { animation-duration: 51s, 14652ms; animation-delay: 0ms, 3456ms; }

@keyframes move7 {
  0% { transform: translateX(8vw) translateY(44vh) scale(0.71) }
  25% { transform: translateX(-31vw) translateY(-22vh) scale(0.88) }
  50% { transform: translateX(22vw) translateY(7vh) scale(0.65) }
  75% { transform: translateX(-17vw) translateY(39vh) scale(0.93) }
  100% { transform: translateX(43vw) translateY(-14vh) scale(0.77) }
}

.firefly:nth-child(8) { animation-name: move8; }
.firefly:nth-child(8)::before { animation-duration: 43s; }
.firefly:nth-child(8)::after { animation-duration: 43s, 9957ms; animation-delay: 0ms, 7234ms; }

@keyframes move8 {
  0% { transform: translateX(-39vw) translateY(-31vh) scale(0.75) }
  25% { transform: translateX(14vw) translateY(29vh) scale(0.96) }
  50% { transform: translateX(-9vw) translateY(-17vh) scale(0.62) }
  75% { transform: translateX(34vw) translateY(8vh) scale(0.89) }
  100% { transform: translateX(-21vw) translateY(43vh) scale(0.68) }
}

.firefly:nth-child(9) { animation-name: move9; }
.firefly:nth-child(9)::before { animation-duration: 55s; }
.firefly:nth-child(9)::after { animation-duration: 55s, 13821ms; animation-delay: 0ms, 5678ms; }

@keyframes move9 {
  0% { transform: translateX(29vw) translateY(12vh) scale(0.82) }
  25% { transform: translateX(-48vw) translateY(-24vh) scale(0.59) }
  50% { transform: translateX(7vw) translateY(36vh) scale(0.91) }
  75% { transform: translateX(-25vw) translateY(-6vh) scale(0.73) }
  100% { transform: translateX(38vw) translateY(-30vh) scale(0.87) }
}

.firefly:nth-child(10) { animation-name: move10; }
.firefly:nth-child(10)::before { animation-duration: 41s; }
.firefly:nth-child(10)::after { animation-duration: 41s, 8746ms; animation-delay: 0ms, 2189ms; }

@keyframes move10 {
  0% { transform: translateX(-16vw) translateY(33vh) scale(0.69) }
  25% { transform: translateX(27vw) translateY(-19vh) scale(0.85) }
  50% { transform: translateX(-35vw) translateY(-28vh) scale(0.76) }
  75% { transform: translateX(11vw) translateY(24vh) scale(0.92) }
  100% { transform: translateX(40vw) translateY(-11vh) scale(0.64) }
}

.firefly:nth-child(11) { animation-name: move11; }
.firefly:nth-child(11)::before { animation-duration: 49s; }
.firefly:nth-child(11)::after { animation-duration: 49s, 11893ms; animation-delay: 0ms, 4823ms; }

@keyframes move11 {
  0% { transform: translateX(33vw) translateY(-36vh) scale(0.74) }
  25% { transform: translateX(-20vw) translateY(17vh) scale(0.95) }
  50% { transform: translateX(46vw) translateY(31vh) scale(0.61) }
  75% { transform: translateX(-7vw) translateY(-22vh) scale(0.83) }
  100% { transform: translateX(-29vw) translateY(9vh) scale(0.79) }
}

.firefly:nth-child(12) { animation-name: move12; }
.firefly:nth-child(12)::before { animation-duration: 46s; }
.firefly:nth-child(12)::after { animation-duration: 46s, 10657ms; animation-delay: 0ms, 7512ms; }

@keyframes move12 {
  0% { transform: translateX(-24vw) translateY(6vh) scale(0.88) }
  25% { transform: translateX(38vw) translateY(-13vh) scale(0.66) }
  50% { transform: translateX(-13vw) translateY(29vh) scale(0.93) }
  75% { transform: translateX(17vw) translateY(-41vh) scale(0.72) }
  100% { transform: translateX(-32vw) translateY(18vh) scale(0.81) }
}