/* Snowflakes */
.snowflakes {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
}
.snowflake {
  position: absolute;
  top: -10%;
  color: #ffffff;
  font-size: 18px;
  opacity: 0.95;
  will-change: transform;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.snowflake:nth-child(1){ left:2%; animation-duration:14s; animation-delay:0s; transform:translateZ(0); }
.snowflake:nth-child(2){ left:18%; animation-duration:11s; animation-delay:1s; font-size:22px; }
.snowflake:nth-child(3){ left:28%; animation-duration:12s; animation-delay:2s; }
.snowflake:nth-child(4){ left:40%; animation-duration:16s; animation-delay:.5s; font-size:20px; }
.snowflake:nth-child(5){ left:52%; animation-duration:10s; animation-delay:0.2s; }
.snowflake:nth-child(6){ left:64%; animation-duration:13s; animation-delay:1.2s; font-size:24px; }
.snowflake:nth-child(7){ left:74%; animation-duration:15s; animation-delay:.4s; }
.snowflake:nth-child(8){ left:86%; animation-duration:9s; animation-delay:1.6s; font-size:18px; }
.snowflake:nth-child(9){ left:94%; animation-duration:17s; animation-delay:.8s; }

@keyframes fall{
  0% { transform: translateY(-20vh) rotate(0deg); opacity:0.9; }
  50% { opacity:0.95; }
  100% { transform: translateY(120vh) rotate(360deg); opacity:0.8; }
}

/* Hero decorations */
.festive-hero {
  position: relative;
  overflow: visible;
  background-image:
    linear-gradient(rgba(255,255,255,0.60), rgba(255,255,255,0.60)),
    url("../images/christmas-background-with-gifts-baubles.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Trees */
.tree { position: absolute; bottom: 0; z-index: 2; opacity: 0.95; pointer-events: none; }
.tree-left { left: -20px; transform: scale(0.9); }
.tree-right { right: -10px; transform: scale(0.85); }

/* String of lights */
.festive-lights {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 24px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.festive-lights .bulb {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  transform-origin: center;
  animation: bulbGlow 2s infinite alternate;
}
.festive-lights .b1{ background:#ff5c5c; animation-delay:0s; }
.festive-lights .b2{ background:#ffd700; animation-delay:.2s; }
.festive-lights .b3{ background:#4ee39b; animation-delay:.4s; }
.festive-lights .b4{ background:#7cc6ff; animation-delay:.6s; }
.festive-lights .b5{ background:#ff5c5c; animation-delay:.8s; }
.festive-lights .b6{ background:#ffd700; animation-delay:1s; }
.festive-lights .b7{ background:#4ee39b; animation-delay:1.2s; }
.festive-lights .b8{ background:#7cc6ff; animation-delay:1.4s; }
.festive-lights .b9{ background:#ff5c5c; animation-delay:1.6s; }

@keyframes bulbGlow {
  from { box-shadow: 0 0 4px rgba(255,255,255,0.1), 0 0 10px rgba(0,0,0,0.05); transform: translateY(0); }
  to { box-shadow: 0 0 12px rgba(255,255,255,0.45), 0 0 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
}

/* Ornaments on shop items */
.shop-item { background: rgba(255,255,255,0.02); }
.shop-item .ornament {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 30%, #fff7b3, #ff5c5c 60%);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 -2px 6px rgba(0,0,0,0.08);
  transform: rotate(-20deg);
  z-index: 6;
}

/* CTA buttons (Donate / Refer / Volunteer) */
.cta-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; z-index:5; }
.festive-cta-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#128fb1; /* Gartcairn red - adjust if needed */
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.festive-cta-btn img { width:28px; height:28px; object-fit:contain; display:block; }
.festive-cta-btn:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,0.18); opacity:0.98; }

/* lighter variant for secondary actions */
.festive-cta-btn[title="Refer"], .festive-cta-btn[title="Volunteer"] { background:#1241af; } /* green for variety */

/* mobile adjustments */
@media (max-width:520px) {
  .cta-buttons { gap:8px; padding:6px 0; }
  .festive-cta-btn { padding:8px 10px; font-size:14px; }
  .festive-cta-btn img { width:22px; height:22px; }
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .festive-lights { display:none; }
  .tree { display:none; }
  .snowflakes { font-size: 14px; }
  .shop-item .ornament { width: 14px; height: 14px; top:10px; right:10px; }
}