/* Стили для FestiveDecor */
.decor-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  contain: layout paint style;
}

.decor-layer--paused .decor-flake,
.decor-layer--paused .decor-garland__bulb,
.decor-layer--paused .decor-twinkle {
  animation-play-state: paused;
}

.decor-layer--static .decor-flake,
.decor-layer--static .decor-garland__bulb,
.decor-layer--static .decor-twinkle {
  animation: none !important;
}

.decor-layer--hero {
  z-index: 2;
}

/* Снег */
.decor-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decor-flake {
  position: absolute;
  top: -20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0.75;
  animation: snow-fall linear infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes snow-fall {
  0% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate3d(20px, 100vh, 0) rotate(360deg);
    opacity: 0;
  }
}

/* Гирлянда */
.decor-garland {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
}

.decor-garland--top {
  top: -10px;
}

.decor-garland--standalone {
  position: relative;
  height: 60px;
  margin: 20px 0;
}

.decor-garland__wire {
  position: absolute;
  top: 10px;
  left: -5%;
  right: -5%;
  height: 20px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.decor-garland__bulb {
  position: absolute;
  top: 18px;
  width: 8px;
  height: 14px;
  border-radius: 50% 50% 4px 4px;
  background: rgba(255, 255, 255, 0.8);
  animation: bulb-twinkle 2s ease-in-out infinite alternate;
}

.decor-garland__bulb::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 4px;
  height: 4px;
  background: #333;
  border-radius: 2px;
}

.decor-garland__bulb--0 { background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; }
.decor-garland__bulb--1 { background: #ffd700; box-shadow: 0 0 10px #ffd700; }
.decor-garland__bulb--2 { background: #4dff4d; box-shadow: 0 0 10px #4dff4d; }
.decor-garland__bulb--3 { background: #4d4dff; box-shadow: 0 0 10px #4d4dff; }

@keyframes bulb-twinkle {
  0% { opacity: 0.45; }
  100% { opacity: 1; }
}

/* Twinkles */
.decor-twinkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
  animation: twinkle 3s ease-in-out infinite alternate;
}

.decor-twinkle--a { top: 20%; left: 15%; animation-delay: 0s; }
.decor-twinkle--b { top: 40%; right: 20%; animation-delay: 0.7s; }
.decor-twinkle--c { bottom: 30%; left: 25%; animation-delay: 1.2s; }
.decor-twinkle--d { top: 15%; right: 30%; animation-delay: 1.8s; }

.decor-twinkle--soft-a { top: 10%; left: 10%; opacity: 0.5; }
.decor-twinkle--soft-b { bottom: 15%; right: 15%; opacity: 0.5; animation-delay: 1s; }

@keyframes twinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.5); }
}

/* Pine Corner */
.decor-pine {
  position: absolute;
  pointer-events: none;
}
.decor-pine--left {
  top: -20px;
  left: -20px;
}
.decor-pine--right {
  top: -20px;
  right: -20px;
  transform: scaleX(-1);
}

/* Santa Peek */
.decor-santa {
  position: absolute;
  bottom: -10px;
  pointer-events: none;
}
.decor-santa--left {
  left: 20px;
}
.decor-santa--right {
  right: 20px;
  transform: scaleX(-1);
}

/* Hero Premium Glow */
.decor-layer--hero-premium {
  background: radial-gradient(circle at 80% 20%, rgba(212, 165, 116, 0.15) 0%, transparent 50%);
}

/* --- Разделитель секций (вместо гирлянды между блоками) --- */
.festive-divider {
  position: relative;
  max-width: min(920px, 92vw);
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 24px) clamp(18px, 4vw, 36px);
  pointer-events: none;
}

.festive-divider__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2.2vw, 20px);
}

.festive-divider__line {
  height: 1px;
  border-radius: 999px;
  opacity: 0.9;
}

.festive-divider__line--left {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 92, 0.12) 12%,
    rgba(201, 146, 58, 0.52) 55%,
    rgba(143, 43, 41, 0.38) 100%
  );
}

.festive-divider__line--right {
  background: linear-gradient(
    90deg,
    rgba(143, 43, 41, 0.38) 0%,
    rgba(201, 146, 58, 0.52) 45%,
    rgba(212, 168, 92, 0.12) 88%,
    transparent 100%
  );
}

.festive-divider__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 252, 248, 0.92), rgba(243, 228, 215, 0.78));
  border: 1px solid rgba(212, 168, 92, 0.28);
  box-shadow:
    0 4px 18px rgba(43, 20, 12, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.festive-divider__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e8c06a, #c9923a);
  box-shadow: 0 0 6px rgba(212, 168, 92, 0.45);
}

.festive-divider__star {
  width: 18px;
  height: 18px;
  color: #8f2b29;
  filter: drop-shadow(0 1px 2px rgba(96, 20, 20, 0.15));
}

@media (prefers-reduced-motion: no-preference) {
  .festive-divider__star {
    animation: festive-divider-star 5s ease-in-out infinite;
  }
}

@keyframes festive-divider-star {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .festive-divider__star {
    animation: none;
  }
}