.valentine {
  --cream: #fff0f3;
  --blush: #ffd6e0;
  --rose: #ff9fbd;
  --sage: #8a1f3d;
  --dark: #2a1118;
  --gold: #c86a7d;
  --shadow: 0 28px 70px rgba(42, 17, 24, 0.2);
  --glass: rgba(255, 255, 255, 0.8);
  background: radial-gradient(circle at top left, #fff8fa, var(--cream));
}

.valentine::before {
  content: "";
  position: fixed;
  inset: -15% -10% -10% -10%;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 183, 197, 0.4), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(200, 106, 125, 0.28), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 130, 165, 0.25), transparent 45%);
  z-index: 0;
  pointer-events: none;
  animation: valentineGlow 18s ease-in-out infinite;
}

.valentine .site-header {
  background: rgba(255, 240, 244, 0.92);
  border-bottom: 1px solid rgba(200, 106, 125, 0.2);
}

.valentine .cta {
  background: #b11b4a;
  box-shadow: 0 18px 40px rgba(177, 27, 74, 0.3);
}

.valentine .ghost {
  border-color: #b11b4a;
  color: #b11b4a;
}

.valentine .nav a::after {
  background: #b11b4a;
}

.valentine .hero::before {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 183, 197, 0.45), transparent 55%),
    radial-gradient(circle at 85% 12%, rgba(177, 27, 74, 0.18), transparent 50%),
    radial-gradient(circle at 30% 75%, rgba(255, 130, 165, 0.25), transparent 60%);
}

.valentine .valentine-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.6s ease, visibility 0s linear;
}

.valentine.valentine-items-hide .valentine-decor {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.valentine .valentine-heart,
.valentine .valentine-teddy {
  position: absolute;
  display: block;
  opacity: 0.9;
}

.valentine .valentine-rose {
  position: absolute;
  width: 58px;
  height: 72px;
  background: #8a1f3d;
  opacity: 0.18;
  -webkit-mask: url("rose-svg.svg") no-repeat center / contain;
  mask: url("rose-svg.svg") no-repeat center / contain;
  animation: roseDrift 12s ease-in-out infinite;
  filter: drop-shadow(0 16px 24px rgba(138, 31, 61, 0.2));
}

.valentine .valentine-heart {
  width: 18px;
  height: 18px;
  background: #ff6f9c;
  transform: rotate(45deg);
  animation: heartFloat 9s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(177, 27, 74, 0.2));
}

.valentine .valentine-heart::before,
.valentine .valentine-heart::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ff6f9c;
  border-radius: 50%;
}

.valentine .valentine-heart::before {
  left: -9px;
  top: 0;
}

.valentine .valentine-heart::after {
  left: 0;
  top: -9px;
}

.valentine .valentine-teddy {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f1c3a0;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.05);
  animation: teddyBounce 8s ease-in-out infinite;
}

.valentine .valentine-teddy::before,
.valentine .valentine-teddy::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e7ad85;
  top: -6px;
}

.valentine .valentine-teddy::before {
  left: -4px;
}

.valentine .valentine-teddy::after {
  right: -4px;
}

.valentine .heart-1 {
  top: 18%;
  left: 12%;
  animation-delay: 0s;
}

.valentine .heart-2 {
  top: 40%;
  left: 46%;
  width: 14px;
  height: 14px;
  animation-delay: 1.5s;
}

.valentine .heart-2::before,
.valentine .heart-2::after {
  width: 14px;
  height: 14px;
}

.valentine .heart-2::before {
  left: -7px;
}

.valentine .heart-2::after {
  top: -7px;
}

.valentine .heart-3 {
  top: 22%;
  right: 18%;
  width: 20px;
  height: 20px;
  animation-delay: 2.2s;
}

.valentine .heart-3::before,
.valentine .heart-3::after {
  width: 20px;
  height: 20px;
}

.valentine .heart-3::before {
  left: -10px;
}

.valentine .heart-3::after {
  top: -10px;
}

.valentine .heart-4 {
  bottom: 16%;
  left: 26%;
  width: 12px;
  height: 12px;
  animation-delay: 3.6s;
}

.valentine .heart-4::before,
.valentine .heart-4::after {
  width: 12px;
  height: 12px;
}

.valentine .heart-4::before {
  left: -6px;
}

.valentine .heart-4::after {
  top: -6px;
}

.valentine .teddy-1 {
  top: 58%;
  right: 12%;
  animation-delay: 0.8s;
}

.valentine .teddy-2 {
  bottom: 12%;
  right: 34%;
  width: 36px;
  height: 36px;
  animation-delay: 2.6s;
}

.valentine .rose-1 {
  bottom: 10%;
  left: 8%;
  animation-delay: 1.1s;
}

.valentine .teddy-2::before,
.valentine .teddy-2::after {
  width: 12px;
  height: 12px;
}

@media (max-width: 900px) {
  .valentine .valentine-decor {
    opacity: 0.7;
  }

  .valentine .teddy-1,
  .valentine .teddy-2 {
    width: 32px;
    height: 32px;
  }

  .valentine .teddy-1 {
    top: 70%;
    right: 6%;
  }

  .valentine .teddy-2 {
    bottom: 8%;
    right: 28%;
  }
}

@keyframes heartFloat {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(-18px) rotate(45deg);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}

@keyframes teddyBounce {
  0% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(-2deg);
  }
}

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

.valentine .story-panel {
  background: linear-gradient(135deg, rgba(255, 182, 201, 0.55), rgba(255, 255, 255, 0.9));
}

.valentine .story-panel,
.valentine .contact-card,
.valentine .map-frame {
  border-color: rgba(200, 106, 125, 0.35);
}

.valentine .item-card:focus {
  outline-color: rgba(177, 27, 74, 0.5);
}

.valentine .hero-highlight,
.valentine .meta-value,
.valentine .contact-info a,
.valentine .price {
  color: #8a1f3d;
}

@keyframes valentineGlow {
  0% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(12px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }
}