/* ============================================================
   PLANTECH — Capa de temporada: HALLOWEEN
   Todo cuelga de html.halloween (lo pone el script del <head> de
   Base.astro según la fecha, o ?halloween=1 / ?halloween=0).
   Sin la clase, las decoraciones .hw quedan ocultas y el sitio
   se ve exactamente igual que siempre.
   ============================================================ */

.hw { display: none; }
html.halloween .hw { display: block; }

html.halloween {
  --hw-night: brightness(.52) saturate(.85);
  --hw-pumpkin: #F2772B;
  --hw-candle: #FFD43B;
}

/* ---------- HERO: jardín de noche ---------- */
/* El fondo, el video y la escenografía comparten EXACTAMENTE el mismo
   filtro: así el fundido del video sigue cayendo sobre su propio color
   y no aparece costura (el fondo plano #539D63 = verde del video). */
html.halloween .hero { background: transparent; }
html.halloween .hero::before {
  content: "";
  position: absolute; inset: 0;
  background: #539D63;
  filter: var(--hw-night);
}
html.halloween .hero__stage,
html.halloween .hero__floor,
html.halloween .hero__ground { filter: var(--hw-night); }

html.halloween .hero__sun { display: none; }
html.halloween .hero__cloud path { fill: #4A4268; }
html.halloween .hero__cloud { opacity: .9; }
html.halloween .spark { color: var(--cream-soft); text-shadow: 0 0 8px rgba(252,246,232,.7); }
html.halloween .leaf path { fill: var(--hw-pumpkin); stroke: #7A3A12; }
html.halloween .leaf--2 path, html.halloween .leaf--4 path { fill: #B8552A; }
html.halloween .hero__title em { color: var(--hw-pumpkin); }

/* luna con resplandor */
.hw-moon {
  position: absolute;
  top: 9%; right: 19%;
  width: 104px;
  overflow: visible;
  animation: riseIn .9s ease 2s both;
}
.hw-moon__glow {
  position: absolute;
  top: calc(9% - 70px); right: calc(19% - 70px);
  width: 244px; height: 244px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,233,170,.28) 0%, rgba(172,158,243,.14) 45%, transparent 70%);
  animation: hwGlow 5s ease-in-out infinite alternate;
}
@keyframes hwGlow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }

/* murciélagos que aletean en el cielo del hero */
.hw-bat {
  position: absolute;
  overflow: visible;
  animation: hwHover 3.4s ease-in-out infinite alternate;
}
.hw-bat__wings { transform-origin: 32px 14px; animation: hwFlap .22s ease-in-out infinite alternate; }
.hw-bat--1 { top: 21%; left: 10%; width: 62px; }
.hw-bat--2 { top: 13%; left: 31%; width: 40px; animation-delay: -1.2s; animation-duration: 4.1s; }
.hw-bat--3 { top: 30%; right: 9%; width: 50px; animation-delay: -2.3s; }
.hw-bat--2 .hw-bat__wings { animation-duration: .18s; }
@keyframes hwFlap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes hwHover {
  from { translate: 0 0; rotate: -6deg; }
  to { translate: 14px -12px; rotate: 5deg; }
}

/* telaraña en la esquina + araña colgando */
.hw-web {
  position: absolute;
  top: 0; left: 0;
  width: clamp(110px, 14vw, 190px);
  opacity: .55;
}
.hw-spider {
  position: absolute;
  top: 0;
  width: 30px;
  height: var(--hilo, 140px);
  transform-origin: 50% 0;
  animation: hwDangle 4.6s ease-in-out infinite alternate;
}
.hw-spider::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 20px;
  border-left: 1.5px solid rgba(252,246,232,.75);
}
.hw-spider svg { position: absolute; bottom: 0; left: 0; width: 100%; }
.hero .hw-spider { left: 23%; --hilo: 30vh; }
@keyframes hwDangle {
  0% { rotate: -5deg; translate: 0 -18px; }
  100% { rotate: 5deg; translate: 0 6px; }
}

/* calabazas sobre el pasto */
.hw-pumpkin { position: absolute; z-index: 6; overflow: visible; }
.hw-pumpkin__face { animation: hwFlicker 2.8s steps(1) infinite; }
.hw-pumpkin--2 .hw-pumpkin__face { animation-delay: -1.1s; }
.hw-pumpkin--3 .hw-pumpkin__face { animation-delay: -2s; }
@keyframes hwFlicker {
  0%, 100% { opacity: 1; }
  42% { opacity: .72; }
  46% { opacity: 1; }
  71% { opacity: .85; }
  74% { opacity: 1; }
}
.hero .hw-pumpkin { bottom: 24px; filter: drop-shadow(0 0 18px rgba(255,170,60,.45)); }
.hero .hw-pumpkin--1 { left: 9%; width: 92px; }
.hero .hw-pumpkin--2 { left: calc(9% + 78px); width: 58px; }
.hero .hw-pumpkin--3 { right: 10%; width: 80px; }

/* fantasmita que flota */
.hw-ghost {
  position: absolute;
  overflow: visible;
  animation: hwFloat 3.8s ease-in-out infinite alternate;
}
.hero .hw-ghost { top: 38%; left: 6%; width: 58px; opacity: .92; }
@keyframes hwFloat {
  from { translate: 0 0; rotate: -4deg; }
  to { translate: 0 -16px; rotate: 4deg; }
}

@media (max-width: 1080px) {
  html.halloween .hero .hw-ghost { display: none; }
}
@media (max-width: 720px) {
  .hw-moon { width: 70px; top: 7%; right: 8%; }
  .hw-moon__glow { width: 170px; height: 170px; top: calc(7% - 50px); right: calc(8% - 50px); }
  html.halloween .hw-bat--2, html.halloween .hero .hw-spider { display: none; }
  .hw-bat--1 { top: 16%; width: 44px; }
  .hw-bat--3 { top: 25%; width: 36px; }
  .hero .hw-pumpkin--1 { left: 3%; width: 62px; }
  .hero .hw-pumpkin--2 { left: calc(3% + 52px); width: 40px; }
  .hero .hw-pumpkin--3 { right: 4%; width: 56px; }
}

/* ---------- MARQUEE, CURSOR, LOADER ---------- */
html.halloween .marquee__track i { color: var(--hw-pumpkin); }
html.halloween .cursor { border-color: var(--hw-pumpkin); }
html.halloween .cursor.is-hover { background: rgba(242,119,43,.35); }
html.halloween .loader__leaf--l { fill: var(--hw-pumpkin); }
html.halloween .loader__leaf--r { fill: var(--hw-candle); }

/* murciélagos que cruzan la pantalla de vez en cuando */
.hw-flyby {
  position: fixed;
  left: 0;
  z-index: 950;
  pointer-events: none;
  width: 46px;
  animation: hwFlyby 26s linear infinite;
}
.hw-flyby--1 { top: 34vh; animation-delay: 6s; }
.hw-flyby--2 { top: 58vh; width: 32px; animation-delay: 19s; animation-duration: 31s; }
@keyframes hwFlyby {
  0% { transform: translate(-80px, 0); }
  8% { transform: translate(28vw, -6vh); }
  16% { transform: translate(60vw, 3vh); }
  24% { transform: translate(calc(100vw + 80px), -8vh); }
  100% { transform: translate(calc(100vw + 80px), -8vh); }
}

/* ---------- CTA: telaraña sobre la tarjeta ---------- */
html.halloween .cta__title em { color: #C95413; }
.cta__card .hw-web {
  top: 0; left: auto; right: 0;
  transform: scaleX(-1);
  /* recortada a la esquina redondeada de la tarjeta (el scaleX(-1) deja
     la esquina superior izquierda local arriba a la derecha) */
  clip-path: inset(0 round calc(var(--r-lg) - 3px) 0 0 0);
  width: clamp(96px, 12vw, 150px);
  opacity: .32;
}
.cta__card .hw-web path { stroke: var(--ink); }
.cta__card .hw-spider { right: clamp(58px, 7vw, 90px); --hilo: 120px; }
.cta__card .hw-spider::before { border-color: rgba(26,31,31,.45); }
.cta__card .hw-pumpkin { left: -26px; bottom: -22px; width: 84px; }

/* ---------- PASEO: el trío sale a pedir dulces de noche ---------- */
html.halloween .stroll { background: #24432E; }
html.halloween .stroll::after { background: #1C3424; }
html.halloween .stroll__bush path { fill: #1F5B31; }
.stroll .hw-pumpkin { bottom: 18px; z-index: 1; }
.stroll .hw-pumpkin--1 { left: 24%; width: 54px; }
.stroll .hw-pumpkin--2 { left: calc(24% + 48px); width: 36px; }
.stroll .hw-pumpkin--3 { right: 30%; width: 48px; }
.stroll .hw-moon { top: 16px; right: 6%; width: 56px; animation: none; }

/* reduce-motion: lo pequeño y en su sitio sigue vivo (igual que los
   personajes); lo que cruza la pantalla se apaga */
@media (prefers-reduced-motion: reduce) {
  .hw-bat { animation: hwHover 3.4s ease-in-out infinite alternate !important; }
  .hw-bat__wings { animation: hwFlap .22s ease-in-out infinite alternate !important; }
  .hw-pumpkin__face { animation: hwFlicker 2.8s steps(1) infinite !important; }
  .hw-ghost { animation: hwFloat 3.8s ease-in-out infinite alternate !important; }
  .hw-spider { animation: hwDangle 4.6s ease-in-out infinite alternate !important; }
  .hw-flyby { display: none !important; }
}