/* One continuous night behind the existing, unchanged presentation. */
html, body { background: #000 !important; }
.story-shell { position: relative; isolation: isolate; background: #000 !important; }
.story-shell > :is(header, footer) { background: #000 !important; border: 0 !important; }
.story-shell > section { border: 0 !important; position: relative; z-index: 1; }
.story-shell > section > svg { display: none; }
.story-shell > footer { position: relative; z-index: 1; }
#portada, #cierre { background: #000 !important; }

/* The transparent middle is a permanent reading-safe area. The scene is
   viewport-anchored, not restarted or moved by chapter/scroll observers. */
.halloween-atmosphere {
  --ambient-rail: clamp(24px, max(5vw, calc((100vw - 1180px) / 2)), 340px);
  position: fixed;
  inset: 72px 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  mask-image: linear-gradient(to right,
    #000 0, #000 calc(var(--ambient-rail) * .72),
    transparent var(--ambient-rail),
    transparent calc(100% - var(--ambient-rail)),
    #000 calc(100% - var(--ambient-rail) * .72), #000 100%);
  -webkit-mask-image: linear-gradient(to right,
    #000 0, #000 calc(var(--ambient-rail) * .72),
    transparent var(--ambient-rail),
    transparent calc(100% - var(--ambient-rail)),
    #000 calc(100% - var(--ambient-rail) * .72), #000 100%);
}
.ambient-sprite {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url('./assets/img/halloween-atmosphere.png');
  background-size: 200% 200%;
  background-repeat: no-repeat;
}
.ambient-web { position: absolute; width: clamp(200px, 23vw, 390px); aspect-ratio: 1; opacity: .42; }
.ambient-web-left { top: -10px; left: -12px; }
.ambient-web-right { top: 18px; right: -22px; width: clamp(160px, 17vw, 280px); transform: scaleX(-1); opacity: .33; }
.ambient-web-bottom { bottom: -18px; left: -24px; width: clamp(140px, 15vw, 250px); transform: scaleY(-1); opacity: .25; }
.ambient-web-art { background-position: 0 0; transform-origin: 0 0; animation: web-drift 11s ease-in-out infinite; }
.ambient-web-right .ambient-web-art { animation-delay: -4s; animation-duration: 14s; }
.ambient-web-bottom .ambient-web-art { animation-delay: -8s; animation-duration: 16s; }

.ambient-spider {
  position: absolute;
  top: 38px;
  left: clamp(0px, calc(var(--ambient-rail) * .15), 44px);
  width: clamp(54px, calc(var(--ambient-rail) * .85), 96px);
  height: 180px;
  opacity: .76;
  animation: spider-descend 12s cubic-bezier(.45,0,.3,1) infinite;
}
.ambient-thread { position: absolute; width: 1px; left: 50%; top: -100vh; bottom: 43px; background: #e4dfd5; }
.ambient-spider-art { position: absolute; bottom: 0; height: auto; aspect-ratio: 1; background-position: 100% 0; transform-origin: 50% 32%; animation: spider-sway 3.8s ease-in-out infinite; }
.ambient-moon { position: absolute; top: 54px; right: 0; width: clamp(80px, var(--ambient-rail), 180px); aspect-ratio: 1; opacity: .86; animation: moon-drift 11s ease-in-out infinite; }
.ambient-moon-art { background-position: 0 100%; }
.ambient-bat { position: absolute; right: 5px; width: clamp(44px, calc(var(--ambient-rail) * .82), 110px); aspect-ratio: 1; opacity: .64; animation: bat-drift 8.5s ease-in-out infinite; }
.ambient-bat-one { top: 39%; }
.ambient-bat-two { top: 72%; right: clamp(4px, calc(var(--ambient-rail) * .2), 48px); width: clamp(32px, calc(var(--ambient-rail) * .55), 76px); opacity: .44; animation-delay: -4s; animation-duration: 10.5s; }
.ambient-bat-art { background-position: 100% 100%; transform-origin: 50% 50%; animation: bat-flutter 1.25s ease-in-out infinite; }
.ambient-bat-two .ambient-bat-art { animation-delay: -.6s; animation-duration: 1.6s; }

/* Animate compositor properties only: no layout changes, scroll coupling or
   chapter-triggered restarts. Each loop returns to its exact starting pose. */
@keyframes web-drift { 0%,100% { transform: rotate(-2.5deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
@keyframes spider-descend {
  0%,100% { transform: translateY(-35px); }
  42%,58% { transform: translateY(clamp(80px,18vh,156px)); }
  72% { transform: translateY(60px); }
}
@keyframes spider-sway { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes moon-drift { 0%,100% { transform: translateY(-10px) rotate(-7deg); } 50% { transform: translateY(12px) rotate(7deg); } }
@keyframes bat-drift {
  0%,100% { transform: translate(0,0) rotate(-8deg); }
  28% { transform: translate(-10px,-38px) rotate(9deg); }
  55% { transform: translate(-4px,8px) rotate(-5deg); }
  78% { transform: translate(-12px,28px) rotate(7deg); }
}
@keyframes bat-flutter { 0%,100% { transform: scaleY(1) rotate(-2deg); } 50% { transform: scaleY(.64) rotate(2deg); } }

@media (max-width: 760px) {
  /* Narrow screens keep the decoration in the outer gutter only. */
  .halloween-atmosphere { --ambient-rail: 22px; }
  .ambient-web { width: 130px; opacity: .34; }
  .ambient-web-bottom { width: 100px; opacity: .24; }
  .ambient-spider { left: -9px; width: 40px; height: 120px; opacity: .62; animation-duration: 15s; }
  .ambient-thread { bottom: 25px; }
  .ambient-moon, .ambient-bat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-atmosphere .ambient-motion { animation: none !important; }
}
@media print { .halloween-atmosphere { display: none; } }