/* ==========================================================================
   Ambient Nature Background Animation (Солнечные лучи и парящие бабочки)
   Сити-ферма «САВА» (г. Коломна) — Выращено с душой
   ========================================================================== */

/* Fixed background canvas - zero impact on page interactions */
.nature-ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* behind cards and interactive content */
  contain: strict;
}

/* Content layers stay above ambient canvas */
#store-view,
#posts-view,
#admin-view,
.site-footer {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   1. Мягкие движущиеся солнечные лучи (Volumetric Sunbeams & Light Shimmer)
   -------------------------------------------------------------------------- */
.nature-sunbeams {
  position: absolute;
  top: -120px;
  left: -80px;
  width: 140vw;
  height: 120vh;
  pointer-events: none;
  transform-origin: 0 0;
  opacity: 0.65;
  transition: opacity 1s ease;
}

/* Источник мягкого рассветного свечения */
.sunbeam-source {
  position: absolute;
  top: 0;
  left: 0;
  width: 550px;
  height: 550px;
  background: radial-gradient(
    circle at 10% 10%,
    rgba(255, 252, 235, 0.45) 0%,
    rgba(245, 235, 185, 0.22) 30%,
    rgba(215, 238, 175, 0.12) 55%,
    transparent 75%
  );
  filter: blur(28px);
  animation: sunGlowPulse 14s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: opacity, transform;
}

/* Отдельные рассеянные лучи */
.sunbeam-ray {
  position: absolute;
  top: 0;
  left: 0;
  width: 130vw;
  height: 280px;
  transform-origin: 0 0;
  pointer-events: none;
  filter: blur(32px);
  will-change: transform, opacity;
}

/* Луч 1: широкий утренний свет */
.ray-1 {
  background: linear-gradient(
    115deg,
    rgba(255, 248, 220, 0.24) 0%,
    rgba(255, 240, 190, 0.14) 25%,
    rgba(225, 245, 195, 0.07) 50%,
    transparent 80%
  );
  transform: rotate(26deg);
  animation: raySway1 24s ease-in-out infinite alternate;
}

/* Луч 2: теплый золотистый луч */
.ray-2 {
  background: linear-gradient(
    118deg,
    rgba(255, 245, 205, 0.2) 0%,
    rgba(240, 230, 170, 0.12) 30%,
    rgba(200, 235, 170, 0.05) 55%,
    transparent 78%
  );
  height: 220px;
  transform: rotate(40deg);
  animation: raySway2 32s ease-in-out infinite alternate;
}

/* Луч 3: нежный травянисто-светлый луч */
.ray-3 {
  background: linear-gradient(
    122deg,
    rgba(255, 250, 230, 0.18) 0%,
    rgba(225, 245, 190, 0.1) 32%,
    rgba(180, 225, 150, 0.04) 60%,
    transparent 82%
  );
  height: 320px;
  transform: rotate(56deg);
  animation: raySway3 28s ease-in-out infinite alternate;
}

/* Луч 4: боковой мягкий подсвет */
.ray-4 {
  background: linear-gradient(
    125deg,
    rgba(255, 242, 210, 0.15) 0%,
    rgba(235, 240, 195, 0.08) 28%,
    transparent 75%
  );
  height: 190px;
  transform: rotate(72deg);
  animation: raySway4 36s ease-in-out infinite alternate;
}

/* Анимации плавного колыхания лучей (будто сквозь листву теплицы) */
@keyframes sunGlowPulse {
  0% {
    transform: scale(0.96);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(0.96);
    opacity: 0.75;
  }
}

@keyframes raySway1 {
  0% {
    transform: rotate(24deg) scaleY(0.95);
    opacity: 0.65;
  }
  50% {
    transform: rotate(29deg) scaleY(1.08);
    opacity: 0.95;
  }
  100% {
    transform: rotate(23deg) scaleY(0.98);
    opacity: 0.7;
  }
}

@keyframes raySway2 {
  0% {
    transform: rotate(38deg) scaleY(1.05);
    opacity: 0.85;
  }
  50% {
    transform: rotate(43deg) scaleY(0.92);
    opacity: 0.55;
  }
  100% {
    transform: rotate(37deg) scaleY(1.02);
    opacity: 0.8;
  }
}

@keyframes raySway3 {
  0% {
    transform: rotate(53deg) scaleY(0.9);
    opacity: 0.6;
  }
  50% {
    transform: rotate(59deg) scaleY(1.06);
    opacity: 0.9;
  }
  100% {
    transform: rotate(54deg) scaleY(0.94);
    opacity: 0.65;
  }
}

@keyframes raySway4 {
  0% {
    transform: rotate(70deg);
    opacity: 0.5;
  }
  50% {
    transform: rotate(75deg);
    opacity: 0.8;
  }
  100% {
    transform: rotate(69deg);
    opacity: 0.55;
  }
}

/* Микро-пыльца / световые частицы в солнечных лучах (Sun Dust Motes) */
.sunbeam-dust-motes {
  position: absolute;
  top: 40px;
  left: 60px;
  width: 500px;
  height: 450px;
  pointer-events: none;
}

.dust-mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 240, 0.8) 0%, rgba(255, 235, 170, 0.3) 60%, transparent 100%);
  filter: blur(1px);
  pointer-events: none;
  will-change: transform, opacity;
}

.mote-1 {
  width: 5px;
  height: 5px;
  top: 90px;
  left: 140px;
  animation: dustFloat 16s ease-in-out infinite;
}

.mote-2 {
  width: 4px;
  height: 4px;
  top: 180px;
  left: 260px;
  animation: dustFloat 21s 3s ease-in-out infinite;
}

.mote-3 {
  width: 6px;
  height: 6px;
  top: 130px;
  left: 340px;
  animation: dustFloat 19s 6s ease-in-out infinite;
}

.mote-4 {
  width: 3px;
  height: 3px;
  top: 240px;
  left: 170px;
  animation: dustFloat 14s 8s ease-in-out infinite;
}

.mote-5 {
  width: 5px;
  height: 5px;
  top: 290px;
  left: 290px;
  animation: dustFloat 24s 11s ease-in-out infinite;
}

@keyframes dustFloat {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.65;
  }
  50% {
    transform: translate(35px, -65px) scale(1.15);
    opacity: 0.85;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    transform: translate(70px, -140px) scale(0.7);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   2. Парящие 3D-бабочки (Organic Fluttering Butterflies)
   -------------------------------------------------------------------------- */
.butterfly-container {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  z-index: 1;
}

/* Вертикальное волнообразное покачивание (Natural Bobbing) */
.butterfly-bob {
  will-change: transform;
}

/* Угол полета по направлению движения */
.butterfly-fly-angle {
  will-change: transform;
}

/* 3D-контейнер для реалистичного взмаха крыльев */
.butterfly-body-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 3px 6px rgba(44, 62, 22, 0.1));
}

/* Центральное тело бабочки */
.butterfly-torso {
  width: 3px;
  height: 22px;
  background: #394828;
  border-radius: 999px;
  position: relative;
  z-index: 2;
  opacity: 0.85;
}

/* Усики бабочки */
.butterfly-torso::before,
.butterfly-torso::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 5px;
  height: 6px;
  border: 1px solid #394828;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
  opacity: 0.7;
}

.butterfly-torso::before {
  left: -4px;
  transform: rotate(-25deg);
}

.butterfly-torso::after {
  right: -4px;
  transform: rotate(25deg);
}

/* Крылья (SVG с 3D-трансформацией) */
.butterfly-wing {
  width: 22px;
  height: 32px;
  display: block;
  backface-visibility: visible;
  will-change: transform;
}

.butterfly-wing-left {
  transform-origin: right 46%;
  animation: wingFlapLeft 0.28s ease-in-out infinite alternate;
}

.butterfly-wing-right {
  transform-origin: left 46%;
  animation: wingFlapRight 0.28s ease-in-out infinite alternate;
}

/* Реалистичный взмах крыльев в перспективе */
@keyframes wingFlapLeft {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(68deg) rotateZ(-10deg);
  }
}

@keyframes wingFlapRight {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(-68deg) rotateZ(10deg);
  }
}

/* --------------------------------------------------------------------------
   Траектории полета бабочек
   -------------------------------------------------------------------------- */

/* --- Бабочка №1: Травянисто-зеленая (САВА Спраут), парит слева направо --- */
.butterfly-flight-1 {
  width: 48px;
  height: 48px;
  top: 0;
  left: 0;
  opacity: 0.65;
  animation: butterflyFlightPath1 34s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

.butterfly-flight-1 .butterfly-bob {
  animation: butterflyBob1 2.8s ease-in-out infinite alternate;
}

.butterfly-flight-1 .butterfly-fly-angle {
  transform: rotate(38deg);
}

.butterfly-flight-1 .butterfly-wing-left,
.butterfly-flight-1 .butterfly-wing-right {
  animation-duration: 0.26s;
}

@keyframes butterflyBob1 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
  100% { transform: translateY(6px) rotate(-3deg); }
}

@keyframes butterflyFlightPath1 {
  0% {
    transform: translate3d(-6vw, 78vh, 0) scale(0.85);
    opacity: 0;
  }
  4% {
    opacity: 0.65;
  }
  25% {
    transform: translate3d(24vw, 58vh, 0) scale(0.92);
  }
  50% {
    transform: translate3d(52vw, 36vh, 0) scale(1);
  }
  75% {
    transform: translate3d(78vw, 22vh, 0) scale(0.95);
    opacity: 0.65;
  }
  94% {
    transform: translate3d(104vw, 8vh, 0) scale(0.88);
    opacity: 0.55;
  }
  98%, 100% {
    transform: translate3d(108vw, 4vh, 0) scale(0.8);
    opacity: 0;
  }
}

/* --- Бабочка №2: Теплая янтарно-медовая, кружит в верхней части витрины --- */
.butterfly-flight-2 {
  width: 42px;
  height: 42px;
  top: 0;
  left: 0;
  opacity: 0.58;
  animation: butterflyFlightPath2 44s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: 8s;
}

.butterfly-flight-2 .butterfly-bob {
  animation: butterflyBob2 3.4s ease-in-out infinite alternate;
}

.butterfly-flight-2 .butterfly-fly-angle {
  transform: rotate(-140deg);
}

.butterfly-flight-2 .butterfly-wing-left,
.butterfly-flight-2 .butterfly-wing-right {
  animation-duration: 0.3s;
}

@keyframes butterflyBob2 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-5deg); }
  100% { transform: translateY(8px) rotate(3deg); }
}

@keyframes butterflyFlightPath2 {
  0% {
    transform: translate3d(106vw, 26vh, 0) scale(0.78);
    opacity: 0;
  }
  5% {
    opacity: 0.58;
  }
  28% {
    transform: translate3d(74vw, 18vh, 0) scale(0.85);
  }
  52% {
    transform: translate3d(48vw, 28vh, 0) scale(0.82);
  }
  76% {
    transform: translate3d(22vw, 16vh, 0) scale(0.8);
    opacity: 0.58;
  }
  95% {
    transform: translate3d(-5vw, 22vh, 0) scale(0.75);
    opacity: 0.45;
  }
  99%, 100% {
    transform: translate3d(-8vw, 24vh, 0) scale(0.7);
    opacity: 0;
  }
}

/* --- Бабочка №3: Нежная мятно-перламутровая (маленькая, глубина резкости) --- */
.butterfly-flight-3 {
  width: 36px;
  height: 36px;
  top: 0;
  left: 0;
  opacity: 0.5;
  animation: butterflyFlightPath3 48s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: 18s;
}

.butterfly-flight-3 .butterfly-bob {
  animation: butterflyBob3 3.1s ease-in-out infinite alternate;
}

.butterfly-flight-3 .butterfly-fly-angle {
  transform: rotate(24deg);
}

.butterfly-flight-3 .butterfly-wing-left,
.butterfly-flight-3 .butterfly-wing-right {
  animation-duration: 0.24s;
}

.butterfly-flight-3 .butterfly-wing {
  width: 17px;
  height: 25px;
}

.butterfly-flight-3 .butterfly-torso {
  height: 18px;
  width: 2.5px;
}

@keyframes butterflyBob3 {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
  100% { transform: translateY(5px) rotate(-4deg); }
}

@keyframes butterflyFlightPath3 {
  0% {
    transform: translate3d(-6vw, 42vh, 0) scale(0.65);
    opacity: 0;
  }
  6% {
    opacity: 0.5;
  }
  30% {
    transform: translate3d(32vw, 32vh, 0) scale(0.72);
  }
  60% {
    transform: translate3d(62vw, 46vh, 0) scale(0.68);
  }
  85% {
    transform: translate3d(92vw, 34vh, 0) scale(0.65);
    opacity: 0.5;
  }
  96% {
    transform: translate3d(106vw, 28vh, 0) scale(0.6);
    opacity: 0.35;
  }
  99%, 100% {
    transform: translate3d(110vw, 26vh, 0) scale(0.55);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Адаптивность и доступность (Accessibility & Mobile Optimization)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* На смартфонах оставляем только солнечный луч и 1 деликатную бабочку */
  .nature-sunbeams {
    opacity: 0.45;
    left: -40px;
    top: -60px;
  }

  .ray-3, .ray-4 {
    display: none; /* снижаем нагрузку на мобильный GPU */
  }

  .sunbeam-dust-motes {
    display: none;
  }

  .butterfly-flight-2,
  .butterfly-flight-3 {
    display: none;
  }

  .butterfly-flight-1 {
    transform: scale(0.75);
    opacity: 0.5;
  }
}

/* Поддержка режима пониженного движения (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  .nature-sunbeams,
  .sunbeam-source,
  .sunbeam-ray,
  .dust-mote,
  .butterfly-container,
  .butterfly-bob,
  .butterfly-wing-left,
  .butterfly-wing-right {
    animation: none !important;
  }

  .butterfly-container,
  .sunbeam-dust-motes {
    display: none !important;
  }

  .nature-sunbeams {
    opacity: 0.25;
  }
}