/* ============================================================
   halloween.css · habillage saisonnier, posé par halloween.js

   Rien ici ne s'applique tant que <html> ne porte pas .hw : le thème est une
   surcouche, le design system de theme.css n'est pas touché. Comme toute la
   palette PDM passe par --red, --red-hi et --red-lum, et que les jetons
   dérivés (--fil, --fil-bloom, --glow) les lisent à l'usage, redéfinir ces
   trois valeurs suffit à repeindre filets, lueurs, aurore et HUD.

   Couches ajoutées, toutes sous le curseur (z-index 2000) :
   lune et brume en 0 (avec l'aurore), chauves-souris en 2 (sous le grain),
   toiles d'araignée en 4 (sous la nav), traînée du curseur en 1999.
   ============================================================ */

:root.hw {
  --red: #ff6a00;
  --red-hi: #ff8c1a;
  --red-deep: #7a2a00;
  --red-lum: 255, 106, 0;
  --hw-violet: #7a2ff2;
  --hw-violet-lum: 122, 47, 242;
  --hw-lune: #ffe9b8;
}

/* l'aurore : deux halos passent au violet, les deux autres gardent l'orange */
:root.hw .aurora .a1 { background: radial-gradient(circle at 50% 50%, rgba(var(--hw-violet-lum), .42), transparent 62%); }
:root.hw .aurora .a2 { background: radial-gradient(circle at 50% 50%, rgba(var(--hw-violet-lum), .34), transparent 62%); }
:root.hw .aurora .a3 { background: radial-gradient(circle at 50% 50%, rgba(255, 233, 184, .1), transparent 60%); }

/* la lune et la brume suivent l'intensité de l'aurore : app.js descend
   --aurora à .35 dans le catalogue, où un halo clair derrière les cartes
   mangerait le texte. */
.hw-moon { position: fixed; top: 8vh; right: 21vw; width: clamp(58px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none; opacity: var(--aurora, 1); transition: opacity 1s var(--ease-out);
  background: radial-gradient(circle at 38% 34%, #fffaf0, var(--hw-lune) 58%, #cdb27a);
  box-shadow: 0 0 38px 10px rgba(255, 233, 184, .12), 0 0 110px 34px rgba(var(--hw-violet-lum), .1); }
.hw-moon::before, .hw-moon::after { content: ""; position: absolute; border-radius: 50%; background: #0000000f; box-shadow: inset 0 1px 2px #0000001a; }
.hw-moon::before { width: 22%; height: 22%; left: 24%; top: 46%; }
.hw-moon::after { width: 14%; height: 14%; left: 58%; top: 26%; }

/* la brume : deux bandes basses, translation seule. Jamais de scale ici, un
   blur re-rastérisé à chaque image coûte très cher (leçon de la v3). */
.hw-fog { position: fixed; left: -25%; right: -25%; bottom: -6vh; height: 34vh; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--aurora, 1); transition: opacity 1s var(--ease-out); }
.hw-fog i { position: absolute; inset: 0; filter: blur(34px); will-change: transform; }
.hw-fog .f1 { background: radial-gradient(60% 100% at 30% 100%, rgba(var(--hw-violet-lum), .3), transparent 70%); animation: hw-fog1 44s ease-in-out infinite alternate; }
.hw-fog .f2 { background: radial-gradient(55% 100% at 72% 100%, rgba(255, 255, 255, .07), transparent 68%); animation: hw-fog2 58s ease-in-out infinite alternate; }
@keyframes hw-fog1 { to { transform: translateX(9vw); } }
@keyframes hw-fog2 { to { transform: translateX(-7vw); } }

/* les chauves-souris : la trajectoire sur le conteneur, le tangage sur le
   SVG, le battement sur les ailes. Trois éléments, tout en transform. */
.hw-bats { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hw-bat { position: absolute; left: 0; will-change: transform; animation: hw-fly linear infinite; }
.hw-bat svg { display: block; animation: hw-bob ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(var(--hw-violet-lum), .55)); }
/* silhouette presque noire, mais cernée d'un peu de violet : sans ce liseré
   elles disparaissent sur les plages de fond noir */
.hw-bat path { fill: #0b0912; }
.hw-bat .wl, .hw-bat .wr { transform-box: fill-box; animation: hw-flap ease-in-out infinite alternate; }
.hw-bat .wl { transform-origin: right center; }
.hw-bat .wr { transform-origin: left center; }
.hw-bat--1 { top: 16vh; animation-duration: 34s; }
.hw-bat--1 svg { width: 42px; animation-duration: 3.4s; }
.hw-bat--1 .wl, .hw-bat--1 .wr { animation-duration: .54s; }
.hw-bat--2 { top: 31vh; animation-duration: 47s; animation-delay: -12s; }
.hw-bat--2 svg { width: 26px; animation-duration: 4.1s; }
.hw-bat--2 .wl, .hw-bat--2 .wr { animation-duration: .68s; }
.hw-bat--3 { top: 9vh; animation-duration: 58s; animation-delay: -31s; }
.hw-bat--3 svg { width: 18px; opacity: .7; animation-duration: 5s; }
.hw-bat--3 .wl, .hw-bat--3 .wr { animation-duration: .8s; }
@keyframes hw-fly { from { transform: translateX(-14vw); } to { transform: translateX(114vw); } }
@keyframes hw-bob { from { transform: translateY(-1.4vh); } to { transform: translateY(1.8vh); } }
@keyframes hw-flap { from { transform: rotate(-26deg) scaleY(.82); } to { transform: rotate(16deg) scaleY(1); } }

/* les toiles : deux coins seulement, en filet, sous le HUD */
.hw-web { position: fixed; z-index: 4; width: clamp(110px, 13vw, 190px); aspect-ratio: 1; opacity: .34; pointer-events: none; }
.hw-web svg { width: 100%; height: 100%; }
.hw-web path, .hw-web circle { fill: none; stroke: #ffffff5c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hw-web--tl { top: 0; left: 0; }
.hw-web--br { right: 0; bottom: 0; transform: rotate(180deg); }
@media (max-width: 720px) { .hw-web { opacity: .22; width: 88px; }
  /* sous le HUD du coin haut droit, sinon la lune mange l'index de catégorie */
  .hw-moon { right: 8vw; top: 17vh; width: 54px; } }

/* l'araignée qui pend de la toile du haut */
.hw-spider { position: fixed; top: 0; left: clamp(110px, 13vw, 190px); z-index: 4; pointer-events: none; animation: hw-hang 7s ease-in-out infinite alternate; }
.hw-spider svg { display: block; }
.hw-spider path, .hw-spider line { stroke: #ffffff5c; fill: none; stroke-width: 1; }
.hw-spider ellipse { fill: #0c0c10; stroke: #ffffff4d; stroke-width: 1; }
@keyframes hw-hang { from { transform: translateY(-14px); } to { transform: translateY(16px); } }
@media (max-width: 720px) { .hw-spider { display: none; } }

/* la citrouille des cartes du catalogue, dans le coin resté libre */
:root.hw .vcard-media::before { content: ""; position: absolute; left: 24px; bottom: 6px; width: 22px; height: 22px; z-index: 2; opacity: .8; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.6c-.3-1.3.1-2.4 1.2-3.1l.8 1.1c-.6.4-.8.9-.6 1.6 3.6-.6 6.6 1.9 6.6 6s-2.8 7.2-5 7.2c-.9 0-1.6-.3-3-.3s-2.1.3-3 .3c-2.2 0-5-3.1-5-7.2s3-6.6 6.6-6z' fill='%23ff6a00'/%3E%3Cpath d='M9.2 11.2l1.5 2.2H7.7zm5.6 0l1.5 2.2h-3zM8.1 16.1c1 .9 2.3 1.4 3.9 1.4s2.9-.5 3.9-1.4c-.7 1.5-2.1 2.4-3.9 2.4s-3.2-.9-3.9-2.4z' fill='%23140600'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(255, 106, 0, .5)); transition: transform .5s var(--enter); }
:root.hw .vcard:hover .vcard-media::before { transform: translateY(-4px) rotate(-8deg); }
@media (max-width: 520px) { :root.hw .vcard-media::before { display: none; } }

/* la traînée du curseur : trois perles orange qui suivent avec du retard,
   placées par halloween.js, sous le curseur maison */
.hw-trail { position: fixed; top: 0; left: 0; z-index: 1999; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hw-trail i { position: absolute; border-radius: 50%; margin: -7px 0 0 -7px; width: 14px; height: 14px;
  background: radial-gradient(circle, rgba(255, 140, 26, .5), rgba(255, 106, 0, .14) 55%, transparent 72%); }
.hw-trail.is-on { opacity: 1; }

/* le préchargeur et le compteur prennent la couleur de la saison */
:root.hw .loader__pct { color: var(--red-hi); text-shadow: 0 0 10px rgba(var(--red-lum), .5); }

/* mode allégé : on garde la lune, les toiles et la palette, on coupe tout ce
   qui tourne en continu */
body.low-fx .hw-bats, body.low-fx .hw-trail { display: none; }
body.low-fx .hw-fog i { animation: none; filter: blur(22px); }