<div class='headlight'></div>


<section class='kuritsa'>
<div class='birb' data-speed="0.002"></div>
</section>

<style>

.kuritsa {
position: absolute;
width: 1010px;
height: 385px;
pointer-events: none;
}


.birb {
    background: url(https://forumstatic.ru/files/001c/be/3c/35739.png) no-repeat center / 100%;
    position: absolute;
    width: 115px;
    height: 57px;
    top: 156px;
    left: 177px;
    animation: candle-float 11s ease-in-out infinite;
}
:root[data-scheme="dark"] .birb {
    background: url(https://forumstatic.ru/files/001c/be/3c/45801.png) no-repeat center / 100%;
}

@keyframes candle-float {
  0% {
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) 
               rotate(0deg);
  }
  25% {
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) 
               translateX(2px) translateY(-3px) 
               rotate(-0.4deg);
  }
  50% {
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) 
               translateX(-3px) translateY(1px) 
               rotate(0.5deg);
  }
  75% {
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) 
               translateX(1px) translateY(-2px) 
               rotate(-0.3deg);
  }
  100% {
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px)) 
               rotate(0deg);
  }
}

</style>


<!-- Шапка параллакс -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.querySelector('.kuritsa');
  const layers = document.querySelectorAll('.birb');
  if (!wrapper || !layers.length) {
    return;
  }
  let mouseX = 0, mouseY = 0;
  let rafId = null;
  const handleParallax = (evt) => {
    mouseX = evt.clientX - window.innerWidth / 2;
    mouseY = evt.clientY - window.innerHeight / 2;
    if (!rafId) {
      rafId = requestAnimationFrame(updateParallax);
    }
  };
  const updateParallax = () => {
    layers.forEach((layer) => {
      const speed = parseFloat(layer.dataset.speed) || 0.1;
      const x = -(mouseX * speed);
      const y = -(mouseY * speed);
      layer.style.setProperty('--parallax-x', `${x}px`);
      layer.style.setProperty('--parallax-y', `${y}px`);
    });
    rafId = null;
  };
  const reset = () => {
    layers.forEach((layer) => {
      layer.style.setProperty('--parallax-x', `0px`);
      layer.style.setProperty('--parallax-y', `0px`);
    });
  };
  reset();
  window.addEventListener('mousemove', handleParallax);
  wrapper.addEventListener('mouseleave', reset);
});
</script>




<div class='sparkles-in-dark'>
<div class='dark-flame flame2'></div>
<div class='dark-flame flame3'></div>
</div>

<style>

div.sparkles-in-dark {
    top: 27px;
    left: 286px;
    position: absolute;
    width: 507px;
    height: 340px;
    pointer-events: none;
}

div.sparkles-in-dark {display: block;}


div.sparkles-in-dark .dark-flame {
    position: absolute;
    mask: radial-gradient(circle, black 40%, transparent 70%);
    background: radial-gradient(circle at 50% 140%, rgb(255 255 255) 0%, rgb(255 212 101 / 46%) 40%, rgb(150 50 0 / 18%) 70%, rgb(241 183 48 / 8%) 95%);
    animation: fire-flicker 2.5s infinite ease-in-out;
    will-change: opacity, filter;
}

div.sparkles-in-dark .dark-flame {
    position: absolute;
    --base-op: 1; 
    mask: radial-gradient(circle, black 40%, transparent 70%);
    background: radial-gradient(circle at 50% 140%, rgb(255 255 255) 0%, rgb(255 212 101 / 46%) 40%, rgb(150 50 0 / 18%) 70%, rgb(241 183 48 / 8%) 95%);
    animation: fire-flicker 2.5s infinite ease-in-out;
    will-change: opacity, filter;
}



div.sparkles-in-dark .dark-flame.flame1 {
    top: 140px;
    left: -197px;
    width: 120px;
    height: 120px;
    --base-op: 0.9;
    animation: fire-flicker 4.5s infinite ease-in-out;
}

div.sparkles-in-dark .dark-flame.flame2 {
    top: 128px;
    left: -69px;
    width: 103px;
    height: 104px;
    --base-op: 0.7;
    animation: fire-flicker 2.5s infinite ease-in-out;
}

div.sparkles-in-dark .dark-flame.flame3 {
top: 227px;
    left: 309px;
    width: 151px;
    height: 140px;
    --base-op: 0.8;
    animation: fire-flicker 3.3s infinite ease-in-out;
}



div.inner-fire {
top: 80px;
    left: 520px;
    position: absolute;
    width: 207px;
    height: 114px;
    --base-op: 1; 
    mask: url(https://forumstatic.ru/files/001c/b9/21/65849.svg) no-repeat center / contain;
    mask-size: cover;
    mask-repeat: no-repeat;
    background: radial-gradient(circle at 50% 140%, rgb(255 255 255) 0%, rgb(255 212 101 / 46%) 40%, rgb(150 50 0 / 18%) 70%, rgb(241 183 48 / 8%) 95%);

    animation: fire-flicker 2.5s infinite ease-in-out;
    will-change: opacity, filter;
}


@keyframes fire-flicker {
  0%, 100% {
    opacity: calc(var(--base-op) * 0.7);
    filter: blur(2px);
  }
  15% {
    opacity: calc(var(--base-op) * 1); 
    filter: blur(1.5px); 
  }
  30% {
    opacity: calc(var(--base-op) * 0.8);
    filter: blur(3px); 
  }
  45% {
    opacity: calc(var(--base-op) * 0.9);
    filter: blur(2px);
  }
  60% {
    opacity: calc(var(--base-op) * 0.7);
    filter: blur(3.5px); 
  }
  80% {
    opacity: calc(var(--base-op) * 1); 
    filter: blur(1.8px);
  }
}
</style>


<div class="fireflies">
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
  <div class="firefly"></div>
</div>

<style>.fireflies {
    width: 1010px;
    height: 200px;
    top: 200px;
    position: absolute;
    overflow: hidden;
    display: none;
    pointer-events: none;
}

:root[data-scheme="dark"] .fireflies {
display: block;
}

.firefly {
    position: absolute;
    width: 2px; 
    height: 2px;
    background-color: #fffbba;
    border-radius: 50%;
    box-shadow: 0 0 12px 6px rgb(179 147 74);
    opacity: 0;
    animation: pulse infinite alternate ease-in-out;
}

@keyframes pulse {
    0% { opacity: 0.1; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}


.firefly:nth-child(1) { top: 34.2%; left: 6.6%; animation-duration: 3.2s; animation-delay: 0.1s; }
.firefly:nth-child(2) { bottom: 20%; left: 19%; animation-duration: 4.5s; animation-delay: 1.2s; }
.firefly:nth-child(3) { top: 69%; left: 2%; animation-duration: 2.8s; animation-delay: 0.5s; }
.firefly:nth-child(4) { top: 52%; right: 8%; animation-duration: 5.1s; animation-delay: 0.8s; }
.firefly:nth-child(5) { bottom: 15%; right: 12%; animation-duration: 3.6s; animation-delay: 2.1s; }
.firefly:nth-child(6) { top: 70%; right: 5%; animation-duration: 4.2s; animation-delay: 0.3s; }
.firefly:nth-child(7) { top: 72%; left: 30%; animation-duration: 3.9s; animation-delay: 1.7s; }
.firefly:nth-child(8) { bottom: 19%; right: 21%; animation-duration: 2.5s; animation-delay: 0.9s; }
.firefly:nth-child(9) { top: 80%; right: 54%; animation-duration: 4.8s; animation-delay: 2.5s; }
.firefly:nth-child(10) { bottom: 10%; right: 1%; animation-duration: 3.4s; animation-delay: 1.4s; }



.owl-container {
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 5px;
    left: 631px;
    display: none;
}

:root[data-scheme="dark"] .owl-container {
    display: flex;

}

.owleyes {
    width: 6px;
    height: 6px;
    background-color: #ffb700; 
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8), 
                0 0 20px 10px rgba(255, 183, 0, 0.6);
    animation: owl-blink 6s infinite;
}

@keyframes owl-blink {
    0%, 92%, 98%, 100% { 
        transform: scaleY(1); 
        opacity: 1; 
    }
    95% { 
        transform: scaleY(0.1); 
        opacity: 0.4;           
    }
}



</style>


<div class="owl-container">
  <div class="owleyes"></div>
  <div class="owleyes"></div>
</div>