/* Mu Unbound — Halloween, all of October (src/season.js, src/views/halloween.js). Over site.css:
   the same stone and gold, lit by pumpkins and a violet night. Cobwebs in the corners, a spider on
   its thread, bats over the moon, fog and embers in the hero, and a graveyard standing on the
   footer. Decorations never take a click, and with reduced motion they stand still. */

:root.tema-halloween {
  --hw-orange: #ff8a2b;
  --hw-orange-light: #ffb866;
  --hw-violet: rgba(124, 77, 190, .17);
  --line-strong: rgba(255, 150, 70, .45);
}

/* --- Colors -------------------------------------------------------------------------------- */
:root.tema-halloween body {
  background-image:
    radial-gradient(46% 34% at 50% -8%, rgba(255, 128, 32, .17), transparent 70%),
    radial-gradient(38% 30% at -4% 0%, var(--hw-violet), transparent 72%),
    radial-gradient(38% 30% at 104% 0%, var(--hw-violet), transparent 72%),
    radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .65)),
    linear-gradient(rgba(6, 7, 10, .93), rgba(6, 7, 10, .93)),
    var(--stone);
  background-size: auto, auto, auto, auto, auto, 450px auto;
}
.tema-halloween ::selection { background: rgba(255, 138, 43, .35); }
.tema-halloween .eyebrow { color: var(--hw-orange-light); }
.tema-halloween .site-header::after {
  background: linear-gradient(90deg, transparent, var(--silver-line) 22%, rgba(255, 138, 43, .75) 50%, var(--silver-line) 78%, transparent); }
.tema-halloween .brand img { filter: drop-shadow(0 2px 12px rgba(255, 128, 32, .45)); }
.tema-halloween .nav-links a::after { background: linear-gradient(90deg, transparent, var(--hw-orange), transparent); }
.tema-halloween .hero-logo { filter: drop-shadow(0 14px 50px rgba(255, 120, 30, .34)); }
.tema-halloween .world-tab.is-on { border-color: rgba(255, 150, 70, .7); box-shadow: 0 0 22px rgba(255, 120, 30, .16); }

/* --- The upper corners of every page: cobwebs and a spider --------------------------------- */
.tema-halloween main { position: relative; }
.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hw-top { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 30; pointer-events: none; }
.hw-web { position: absolute; top: 0; width: clamp(96px, 12.5vw, 210px); aspect-ratio: 1;
  background: url("../img/halloween/telarana.svg?v=1") 0 0 / 100% 100% no-repeat; opacity: .46;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
.hw-web-l { left: 0; }
.hw-web-r { right: 0; transform: scaleX(-1); }

.hw-drop { position: absolute; top: 0; left: clamp(40px, 5vw, 84px); width: 48px; height: 340px; overflow: hidden; }
.hw-spider { position: absolute; left: 0; top: 0; width: 48px; animation: hw-spider 12s cubic-bezier(.45, 0, .35, 1) infinite; }
.hw-spider::before { content: ""; position: absolute; left: 23.5px; bottom: 46px; width: 1px; height: 440px;
  background: linear-gradient(rgba(230, 233, 240, 0), rgba(230, 233, 240, .7)); }
.hw-spider svg { display: block; width: 48px; height: 53px; margin-top: 250px; transform-origin: 50% 0;
  filter: drop-shadow(0 0 5px rgba(255, 160, 80, .45)); animation: hw-sway 3.4s ease-in-out infinite alternate; }
@keyframes hw-spider {
  0%, 100% { transform: translateY(-200px); }
  38% { transform: translateY(8px); }
  44% { transform: translateY(-5px); }
  50%, 72% { transform: translateY(0); }
}
@keyframes hw-sway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* --- Home: the moon, bats, fog, embers and pumpkins ---------------------------------------- */
/* The moon, behind the characters (same layer, earlier) and in front of the art and its shade;
   the bats circle around its center. */
.hero { --hw-moon-size: 270px; --hw-moon-left: calc(50% + 196px); --hw-moon-top: 18px; --hw-orbit-dx: 30px; --hw-orbit-dy: -50px; }
.hw-moon { position: absolute; z-index: -1; top: var(--hw-moon-top); left: var(--hw-moon-left); width: var(--hw-moon-size);
  aspect-ratio: 1; border-radius: 50%; background: url("../img/halloween/luna.svg?v=3") center / 100% 100% no-repeat; opacity: .92;
  box-shadow: 0 0 50px 10px rgba(255, 200, 120, .2), 0 0 170px 70px rgba(255, 140, 50, .1);
  animation: rise 1.6s ease both; }
/* Clouds crossing it: dark, they show only against the moon. */
.hw-moon::before, .hw-moon::after { content: ""; position: absolute; border-radius: 50%; will-change: transform;
  background: radial-gradient(50% 50% at 50% 50%, rgba(13, 9, 20, .82), rgba(13, 9, 20, .4) 55%, transparent 72%);
  filter: blur(5px); }
.hw-moon::before { left: -40%; top: 60%; width: 110%; height: 20%; animation: hw-cloud 52s ease-in-out infinite alternate; }
.hw-moon::after { left: 10%; top: 24%; width: 80%; height: 12%; opacity: .75; animation: hw-cloud 70s ease-in-out -20s infinite alternate-reverse; }
@keyframes hw-cloud { from { transform: translateX(-22%); } to { transform: translateX(48%); } }

/* Lit from below by the pumpkins: without it they show only against the moon. */
.hw-orbit svg, .hw-bat svg { display: block; width: 100%; height: auto; fill: #170f22;
  filter: drop-shadow(0 0 1.5px rgba(255, 190, 120, .85)) drop-shadow(0 0 8px rgba(255, 130, 50, .35)); }
.hw-wing { transform-box: view-box; transform-origin: 32px 12px; animation: hw-flap .26s ease-in-out infinite alternate; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(-.8); } }

/* Around the moon's upper half (clear of the logo): across (this element) and up and down (the
   inner one), a quarter turn apart. */
.hw-orbit { --rx: 135px; --ry: 56px; --turn: 9s; position: absolute; z-index: 1; width: 60px; pointer-events: none;
  left: calc(var(--hw-moon-left) + var(--hw-moon-size) / 2 + var(--hw-orbit-dx) - 30px);
  top: calc(var(--hw-moon-top) + var(--hw-moon-size) / 2 + var(--hw-orbit-dy) - 14px);
  animation: hw-orbit-x var(--turn) ease-in-out infinite alternate; }
.hw-orbit-y { display: block; animation: hw-orbit-y var(--turn) ease-in-out calc(var(--turn) / -2) infinite alternate; }
.hw-orbit-2 { --rx: 100px; --ry: 78px; --turn: 12s; width: 46px; animation-direction: alternate-reverse; animation-delay: -5s; }
.hw-orbit-2 .hw-orbit-y { animation-delay: calc(-5s - var(--turn) / 2); }
.hw-orbit-2 .hw-wing { animation-duration: .21s; }
.hw-orbit-3 { --rx: 175px; --ry: 38px; --turn: 15s; width: 34px; opacity: .85; animation-delay: -11s; }
.hw-orbit-3 .hw-orbit-y { animation-delay: calc(-11s - var(--turn) / 2); }
.hw-orbit-3 .hw-wing { animation-duration: .18s; }
@keyframes hw-orbit-x { from { transform: translateX(calc(var(--rx) * -1)); } to { transform: translateX(var(--rx)); } }
@keyframes hw-orbit-y { from { transform: translateY(calc(var(--ry) * -1)); } to { transform: translateY(var(--ry)); } }

/* The big one, crossing the hero's upper part. */
.hw-bat { position: absolute; z-index: 1; left: 0; top: 64px; width: 70px; pointer-events: none;
  animation: hw-fly 26s linear -9s infinite; }
.hw-bat-bob { display: block; animation: hw-bob 2.6s ease-in-out infinite alternate; }
.hw-bat .hw-wing { animation-duration: .32s; }
@keyframes hw-fly { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 30px)); } }
@keyframes hw-bob { from { transform: translateY(-16px) rotate(-7deg); } to { transform: translateY(16px) rotate(6deg); } }

/* Over the characters' feet and under the world band. */
.hw-fog { position: absolute; z-index: -1; left: 0; bottom: 60px; width: 200%; height: 230px; pointer-events: none;
  background:
    radial-gradient(36% 44% at 18% 62%, rgba(190, 172, 226, .2), transparent 70%),
    radial-gradient(28% 38% at 50% 72%, rgba(165, 152, 205, .16), transparent 70%),
    radial-gradient(34% 46% at 82% 58%, rgba(190, 172, 226, .19), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x; animation: hw-fog 80s linear infinite; }
.hw-fog-2 { bottom: 20px; height: 190px; opacity: .85; animation-duration: 130s; animation-direction: reverse; }
@keyframes hw-fog { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hw-embers { position: absolute; z-index: -1; left: 0; right: 0; bottom: 110px; height: 0; pointer-events: none; }
.hw-embers i { position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%; background: #ffc061; opacity: 0;
  box-shadow: 0 0 8px 2px rgba(255, 130, 40, .55); animation: hw-ember 11s linear infinite; }
.hw-embers i:nth-child(1) { left: 6%; animation-delay: -1s; }
.hw-embers i:nth-child(2) { left: 14%; animation-duration: 14s; animation-delay: -7s; width: 3px; height: 3px; }
.hw-embers i:nth-child(3) { left: 21%; animation-duration: 9s; animation-delay: -4s; }
.hw-embers i:nth-child(4) { left: 29%; animation-duration: 13s; animation-delay: -10s; width: 3px; height: 3px; }
.hw-embers i:nth-child(5) { left: 37%; animation-duration: 12s; animation-delay: -2s; width: 2px; height: 2px; }
.hw-embers i:nth-child(6) { left: 46%; animation-duration: 15s; animation-delay: -12s; }
.hw-embers i:nth-child(7) { left: 55%; animation-duration: 10s; animation-delay: -5s; width: 3px; height: 3px; }
.hw-embers i:nth-child(8) { left: 63%; animation-duration: 13s; animation-delay: -9s; width: 2px; height: 2px; }
.hw-embers i:nth-child(9) { left: 71%; animation-duration: 11s; animation-delay: -3s; }
.hw-embers i:nth-child(10) { left: 79%; animation-duration: 16s; animation-delay: -14s; width: 3px; height: 3px; }
.hw-embers i:nth-child(11) { left: 87%; animation-duration: 12s; animation-delay: -6s; }
.hw-embers i:nth-child(12) { left: 94%; animation-duration: 10s; animation-delay: -8s; width: 2px; height: 2px; }
@keyframes hw-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: .95; }
  50% { transform: translate(22px, -190px) scale(.85); }
  85% { opacity: .45; }
  100% { opacity: 0; transform: translate(-12px, -400px) scale(.4); }
}

/* At the characters' feet, just above the world band. */
.hw-pumpkins { position: absolute; z-index: -1; bottom: 116px; display: flex; align-items: flex-end; pointer-events: none; }
.hw-pumpkins-l { left: max(12px, calc(50% - 590px)); }
.hw-pumpkins-r { right: max(12px, calc(50% - 590px)); }
.hw-pumpkin { display: block; width: 108px; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.hw-pumpkin.hw-pumpkin-small { width: 70px; margin: 0 -12px; }
.hw-pumpkin-face, .hw-pumpkin-light { animation: hw-flicker 3.2s infinite; }
.hw-pumpkins-r .hw-pumpkin-face, .hw-pumpkins-r .hw-pumpkin-light { animation-duration: 3.9s; animation-delay: -1.3s; }
@keyframes hw-flicker {
  0%, 100% { opacity: 1; } 7% { opacity: .8; } 11% { opacity: .97; } 30% { opacity: .86; } 33% { opacity: 1; }
  57% { opacity: .9; } 60% { opacity: .74; } 65% { opacity: 1; } 82% { opacity: .9; }
}

/* The season's notice in the hero (site.css) and the seasons on /eventos, in pumpkin and night. */
.tema-halloween .season-notice { border-color: rgba(255, 138, 43, .55);
  background: linear-gradient(90deg, rgba(74, 28, 6, .92), rgba(26, 12, 30, .92));
  box-shadow: 0 0 26px rgba(255, 120, 30, .2), inset 0 1px 0 rgba(255, 220, 170, .12); }
.tema-halloween .season-notice:hover, .tema-halloween .season-notice:focus-visible { border-color: var(--hw-orange);
  box-shadow: 0 0 34px rgba(255, 120, 30, .34), inset 0 1px 0 rgba(255, 220, 170, .12); }
.season-notice .hw-pumpkin { flex: none; width: 48px; filter: none; }
.tema-halloween .season-notice-text { color: #f3e4d0; }
.tema-halloween .season-notice-title, .tema-halloween .season-notice-more { color: var(--hw-orange-light); }
.tema-halloween .season-row.is-on td { background: rgba(255, 138, 43, .07); }
.tema-halloween .season-row.is-on td:first-child { box-shadow: inset 3px 0 0 var(--hw-orange); }
.tema-halloween .tag-season { color: #ffd2a8; background: rgba(255, 138, 43, .14); border-color: rgba(255, 138, 43, .5); }

/* --- Frames: a small cobweb in the free upper corner ---------------------------------------- */
.tema-halloween .frame {
  background: url("../img/halloween/telarana-marco.svg?v=1") 100% 0 / 78px 78px no-repeat,
    linear-gradient(180deg, rgba(20, 21, 26, .9), rgba(10, 11, 14, .94)), var(--stone) 0 0 / 360px auto; }

/* --- The graveyard on the footer ------------------------------------------------------------ */
.tema-halloween .site-footer { margin-top: 140px; }
.hw-graveyard { position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; pointer-events: none;
  background: url("../img/halloween/cementerio.svg?v=1") 50% 100% / 1600px 120px repeat-x; }
.hw-graveyard::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 190px; z-index: -1;
  background: radial-gradient(45% 75% at 50% 100%, rgba(255, 128, 40, .2), transparent 72%),
    radial-gradient(32% 70% at 10% 100%, rgba(140, 90, 210, .24), transparent 72%),
    radial-gradient(32% 70% at 90% 100%, rgba(140, 90, 210, .24), transparent 72%),
    linear-gradient(to top, rgba(70, 48, 110, .3), transparent 75%); }

/* --- Smaller screens ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .hero { --hw-moon-size: 220px; --hw-moon-left: calc(50% + 150px); }
  .hw-pumpkin.hw-pumpkin-small { display: none; }
}
@media (max-width: 760px) {
  .hw-web { width: 84px; opacity: .38; }
  .hw-drop { display: none; }
  .hero { --hw-moon-size: 150px; --hw-moon-left: calc(100% - 116px); --hw-moon-top: 4px; --hw-orbit-dx: -10px; --hw-orbit-dy: -6px; }
  .hw-moon { opacity: .85; }
  .hw-orbit { --rx: 84px; --ry: 36px; width: 40px; }
  .hw-orbit-2 { --rx: 62px; --ry: 54px; width: 30px; }
  .hw-orbit-3 { display: none; }
  .hw-bat { width: 48px; }
  .hw-pumpkins { display: none; }
  .season-notice .hw-pumpkin { width: 40px; }
  .hw-graveyard { height: 90px; background-size: 1200px 90px; }
  .tema-halloween .site-footer { margin-top: 110px; }
}

/* --- Still, and not on paper --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-bat-bob, .hw-orbit, .hw-orbit-y, .hw-wing, .hw-fog, .hw-embers i, .hw-spider, .hw-spider svg,
  .hw-pumpkin-face, .hw-pumpkin-light, .hw-moon, .hw-moon::before, .hw-moon::after { animation: none; }
  .hw-embers, .hw-bat, .hw-orbit-3 { display: none; }
  .hw-spider { transform: translateY(-60px); }
  .hw-orbit-1 { transform: translate(-70px, -50px); }
  .hw-orbit-2 { transform: translate(60px, 40px); }
}
@media print {
  .hw-top, .hw-moon, .hw-bat, .hw-orbit, .hw-fog, .hw-embers, .hw-pumpkins, .hw-graveyard { display: none; }
}