/* ============================================================================
 * seasonal.css - season & festival visual effects (Sapne Digital)
 * Loaded site-wide by includes/layout.php. Purely decorative + non-blocking.
 * ==========================================================================*/

#sd-season-layer{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:60; overflow:hidden;
}
#sd-season-layer canvas{ display:block; width:100%; height:100%; }

/* Festival greeting ribbon (small, top-center, auto-hides) */
.sd-fx-ribbon{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  z-index:61; pointer-events:none;
  display:flex; align-items:center; gap:.5rem;
  padding:.3rem .95rem; margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  font-size:.82rem; font-weight:700; letter-spacing:.2px; color:#fff;
  background:linear-gradient(90deg, var(--sd-fx-accent,#f5c451), color-mix(in srgb, var(--sd-fx-accent,#f5c451) 55%, #000));
  border-radius:0 0 12px 12px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  animation:sdRibbonDrop .6s cubic-bezier(.2,.9,.25,1) both;
}
.sd-fx-ribbon .sd-fx-emoji{ font-size:1rem; line-height:1 }
@keyframes sdRibbonDrop{ from{ transform:translate(-50%,-120%);} to{ transform:translate(-50%,0);} }

/* On-site birthday banner (for the logged-in user on their birthday) */
.sd-bday-banner{
  position:relative; z-index:62;
  margin:0 auto; max-width:960px;
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.85rem 1.1rem; margin-top:.6rem; margin-bottom:.2rem;
  border-radius:14px; color:#fff;
  background:linear-gradient(100deg,#ff4d8d,#a855f7 55%,#4d9dff);
  box-shadow:0 10px 30px rgba(168,85,247,.28);
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.sd-bday-banner b{ font-size:1.05rem }
.sd-bday-banner .sd-bday-msg{ flex:1 1 240px; font-size:.92rem; line-height:1.45 }
.sd-bday-banner .sd-bday-cake{ font-size:1.6rem; line-height:1 }
.sd-bday-banner .sd-bday-x{
  pointer-events:auto; cursor:pointer; background:rgba(255,255,255,.2);
  border:0; color:#fff; width:26px; height:26px; border-radius:50%;
  font-size:15px; line-height:1; flex:none;
}
.sd-bday-banner .sd-bday-x:hover{ background:rgba(255,255,255,.35) }

/* Respect user's motion + data preferences: kill the animation entirely. */
@media (prefers-reduced-motion: reduce){
  #sd-season-layer{ display:none !important; }
}