/* Planeta Geek Festividades — capa de decoración */

#pgf-layer {
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;       /* nunca bloquea clics del sitio */
  overflow: hidden;
}

#pgf-layer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Botón para que el visitante apague la decoración */
#pgf-dismiss {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99991;
  pointer-events: auto;
  font: 600 12px/1 system-ui, sans-serif;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  opacity: .55;
  transition: opacity .2s ease;
}
#pgf-dismiss:hover { opacity: 1; }

/* ── Adornos fijos ───────────────────────────────────────── */

/* Luna */
.pgf-moon {
  position: absolute;
  top: 6%;
  right: 7%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffef0, #f3e9c4 60%, #d9cd9a);
  box-shadow: 0 0 40px 12px rgba(255,250,210,.35), inset -10px -8px 0 rgba(0,0,0,.06);
}

/* Sol (con rayos girando) */
.pgf-sun {
  position: absolute;
  top: 5%;
  right: 6%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c2, #ffcf4d 55%, #ff9f1c);
  box-shadow: 0 0 60px 18px rgba(255,180,60,.45);
}
.pgf-sun::before {
  content: "";
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255,200,80,.55) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 56px, #000 57px);
          mask: radial-gradient(circle, transparent 56px, #000 57px);
  animation: pgf-spin 28s linear infinite;
}
@keyframes pgf-spin { to { transform: rotate(360deg); } }

/* Trineo de Santa cruzando el cielo */
.pgf-santa {
  position: absolute;
  top: 12%;
  left: -180px;
  width: 150px;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
  animation: pgf-fly 22s linear infinite;
}
@keyframes pgf-fly {
  0%   { transform: translateX(0)            translateY(0); }
  50%  { transform: translateX(60vw)         translateY(-18px); }
  100% { transform: translateX(calc(100vw + 220px)) translateY(6px); }
}

/* Nave cruzando (Star Wars Day, diseño genérico) */
.pgf-ship {
  position: absolute;
  top: 22%;
  left: -160px;
  width: 120px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(120,200,255,.6));
  animation: pgf-warp 14s linear infinite;
}
@keyframes pgf-warp {
  0%   { transform: translate(0, 0) rotate(8deg); }
  100% { transform: translate(calc(100vw + 200px), 26vh) rotate(8deg); }
}

/* Telarañas en las esquinas (Halloween) */
.pgf-web {
  position: absolute;
  top: 0;
  width: 170px;
  height: 170px;
  opacity: .5;
}
.pgf-web.left  { left: 0; }
.pgf-web.right { right: 0; transform: scaleX(-1); }

/* Viñeta atmosférica (oscurece los bordes: espacio, noche de Halloween, fin de año) */
.pgf-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.5) 100%);
}

/* Niebla baja (Halloween) */
.pgf-fog {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  pointer-events: none;
  overflow: hidden;
}
.pgf-fog::before, .pgf-fog::after {
  content: "";
  position: absolute;
  left: -50%; right: -50%; bottom: 0;
  height: 100%;
  background:
    radial-gradient(closest-side at 30% 95%, rgba(205,205,225,.22), transparent 70%),
    radial-gradient(closest-side at 68% 98%, rgba(205,205,225,.18), transparent 70%);
  animation: pgf-fog-move 26s ease-in-out infinite;
}
.pgf-fog::after { animation-duration: 38s; opacity: .65; }
@keyframes pgf-fog-move {
  0%   { transform: translateX(-8%); }
  50%  { transform: translateX(8%); }
  100% { transform: translateX(-8%); }
}

/* Manto de nieve en la parte baja (Navidad / Invierno) */
.pgf-drift {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(to top, #000, transparent);
          mask: linear-gradient(to top, #000, transparent);
}

/* Luna fantasmal con cráteres (Halloween) */
.pgf-moon.spooky {
  background: radial-gradient(circle at 38% 36%, #fff7d6, #ffe9a3 55%, #e9c96b);
  box-shadow: 0 0 60px 18px rgba(255,225,150,.45), inset -8px -8px 0 rgba(0,0,0,.05);
}
.pgf-moon.spooky::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(120,90,30,.18) 7%, transparent 8%),
    radial-gradient(circle at 34% 60%, rgba(120,90,30,.15) 6%, transparent 7%),
    radial-gradient(circle at 70% 70%, rgba(120,90,30,.13) 5%, transparent 6%),
    radial-gradient(circle at 48% 30%, rgba(120,90,30,.10) 3%, transparent 4%);
}

/* Araña colgante (Halloween) */
.pgf-spider {
  position: absolute;
  top: 0;
  right: 60px;
  width: 36px;
  height: 130px;
  pointer-events: none;
  transform-origin: top center;
  animation: pgf-spider-bob 4.5s ease-in-out infinite;
}
@keyframes pgf-spider-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(14px) rotate(1.5deg); }
}

/* Accesibilidad / batería: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .pgf-santa, .pgf-ship { animation: none; left: auto; right: 8%; }
  .pgf-sun::before, .pgf-fog::before, .pgf-fog::after, .pgf-spider { animation: none; }
}

@media (max-width: 600px) {
  .pgf-moon { width: 64px; height: 64px; }
  .pgf-sun  { width: 78px; height: 78px; }
  .pgf-web  { width: 110px; height: 110px; }
}