/* ============================================================
   Sezónní výzdoba: Halloween (Vyzdoba::SEZONY['halloween'])

   Fáze 1 (od 23. 10.)  pavučiny v obou rozích hlavičky, netopýři
                          v hlavičce, zhasnuté dýně na patkách sloupců
   Fáze 2 (od 26. 10.)  + netopýři visící pod hlavičkou a na profilu
   Fáze 3 (od 29. 10.)  + girlanda, vznášející se svíčky, přelet
                          netopýra, dýně na patkách svítí, svítící
                          velká dýně v hlavičce a hromádky na zdi,
                          ozdobené cedulky (to řeší cedulkaUrl())

   Nic nebliká, pohyb jen pomalý (zaklad.css ho vypne lidem
   s omezenými animacemi). Polohy v hlavičce jsou v % obrázku
   760 × 95, šířka v % a výška z aspect-ratio podle viewBoxu SVG.
   ============================================================ */

/* --- Hlavička: pavučiny a netopýři (H1) ---------------------- */

.vz-halloween.vz-f1 .vz-pavucina-l {
    display: block;
    left: 8.68%; top: 27.4%; width: 6.05%; aspect-ratio: 1;
    background-image: url(/images/vyzdoba/halloween/pavucina.svg);
}
.vz-halloween.vz-f1 .vz-pavucina-p {
    display: block;
    left: 85.26%; top: 27.4%; width: 6.05%; aspect-ratio: 1;
    background-image: url(/images/vyzdoba/halloween/pavucina-pavouk.svg);
    transform: scaleX(-1);
}
.vz-halloween.vz-f1 .vz-netopyri {
    display: block;
    left: 15.5%; top: 29.5%; width: 7.9%; aspect-ratio: 80 / 34;
    background-image: url(/images/vyzdoba/halloween/netopyri.svg);
}

/* --- Hlavička: velká dýně vlevo před měsícem, sedí na spodním
       rámu (až fáze 3, rovnou svítí) -------------------------- */

.vz-halloween.vz-f3 .vz-dyne {
    display: block;
    left: 9.87%; top: 34.7%; width: 8.42%; aspect-ratio: 64 / 60;
    background-image: url(/images/vyzdoba/halloween/dyne-svit.svg?v=5);
}

/* --- Pod hlavičkou: netopýři visí z rámu (fáze 2), ve fázi 3
       mezi lucerničkami girlandy ----------------------------- */

.vz-halloween.vz-f2 :is(.vz-visi1, .vz-visi2, .vz-visi3, .vz-visi4) {
    display: block;
    aspect-ratio: 22 / 35;
    background-image: url(/images/vyzdoba/halloween/netopyr-visi.svg);
}
.vz-halloween .vz-visi1 { left: 15.92%; top: 97.9%;  width: 1.97%; }
.vz-halloween .vz-visi2 { left: 31.05%; top: 100%;   width: 1.58%; }
.vz-halloween .vz-visi3 { left: 61.32%; top: 98.95%; width: 1.84%; }
.vz-halloween .vz-visi4 { left: 84.21%; top: 101%;   width: 1.58%; }

.vz-halloween.vz-f3 .vz-girlanda {
    display: block;
    left: 4.6%; top: 87.5%; width: 90.8%; aspect-ratio: 700 / 34;
    background-image: url(/images/vyzdoba/halloween/girlanda.svg?v=4);
}

/* --- Hlavička: vznášející se svíčky (fáze 3, H2) ------------- */

.vz-halloween.vz-f3 :is(.vz-svicka1, .vz-svicka2, .vz-svicka3, .vz-svicka4) {
    display: block;
    aspect-ratio: 20 / 48;
    background-image: url(/images/vyzdoba/halloween/svicka.svg);
    /* délku a zpoždění má každá svíčka svoje (níž), proto ne zkratka animation */
    animation-name: vz-vznaseni;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.vz-halloween .vz-svicka1 { left: 20%;    top: 40%;   width: 1.58%; animation-duration: 11s;   animation-delay: -2s; }
.vz-halloween .vz-svicka2 { left: 78.68%; top: 42.1%; width: 1.71%; animation-duration: 13s;   animation-delay: -7s; }
.vz-halloween .vz-svicka3 { left: 82.11%; top: 25.3%; width: 1.84%; animation-duration: 10.5s; animation-delay: -4s; }
.vz-halloween .vz-svicka4 { left: 88.42%; top: 52.6%; width: 1.45%; animation-duration: 12s;   animation-delay: -9s; }

@keyframes vz-vznaseni {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* --- Hlavička: letící netopýr (fáze 3), jednou za ~3 min ----- */

.vz-halloween.vz-f3 .vz-prelet {
    display: block;
    left: -7%; top: 31.6%; width: 5.79%; aspect-ratio: 60 / 20;
    background-image: url(/images/vyzdoba/halloween/netopyr-let.svg);
    animation: vz-prelet 170s ease-in-out 25s infinite both;
}

/* Hlavička nesmí mít overflow: hidden (girlanda a netopýři z ní
   visí), proto je netopýr mimo přelet průhledný. */
@keyframes vz-prelet {
    0%       { left: -7%;  transform: translateY(0); opacity: 0; }
    .6%      { opacity: 1; }
    2%       { left: 18%;  transform: translateY(-8px); }
    4%       { left: 45%;  transform: translateY(4px); }
    6%       { left: 74%;  transform: translateY(-6px); }
    7.4%     { opacity: 1; }
    8%, 100% { left: 107%; transform: translateY(2px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vz-halloween .vz-prelet { display: none !important; }
}

/* --- Patky sloupců: dýně (fáze 1 zhasnuté, 3 svítí, H2) ------ */

.hrad:has(.vz-halloween.vz-f1) :is(.section_levy_end, .section_pravy_end, .section_central_end)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 60px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image: url(/images/vyzdoba/halloween/dyne.svg?v=3), url(/images/vyzdoba/halloween/dyne.svg?v=3);
}

.hrad:has(.vz-halloween.vz-f1) .section_levy_end::before {
    background-position: 98px 100%, 62px 100%;
    background-size: 60px 56px, 36px 34px;
}

.hrad:has(.vz-halloween.vz-f1) .section_pravy_end::before {
    background-image: url(/images/vyzdoba/halloween/dyne.svg?v=3);
    background-position: 6px 100%;
    background-size: 52px 49px;
}

/* prostřední sloupec: malá dýně v levém dolním rohu rámu */
.hrad:has(.vz-halloween.vz-f1) .section_central_end::before {
    bottom: 22px;
    height: 38px;
    background-image: url(/images/vyzdoba/halloween/dyne.svg?v=3);
    background-position: 4px 100%;
    background-size: 40px 38px;
}

.hrad:has(.vz-halloween.vz-f3) .section_levy_end::before {
    background-image: url(/images/vyzdoba/halloween/dyne-svit.svg?v=5), url(/images/vyzdoba/halloween/dyne-svit.svg?v=5);
}
.hrad:has(.vz-halloween.vz-f3) :is(.section_pravy_end, .section_central_end)::before {
    background-image: url(/images/vyzdoba/halloween/dyne-svit.svg?v=5);
}

/* Rozházené lístky na bočních patkách (fáze 1); ::after přes celou patku
   (viewBox 162 × 32) leží za ::before s dýněmi */
.hrad:has(.vz-halloween.vz-f1) :is(.section_levy_end, .section_pravy_end)::before {
    z-index: 1;
}
.hrad:has(.vz-halloween.vz-f1) :is(.section_levy_end, .section_pravy_end)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    pointer-events: none;
    background: url(/images/vyzdoba/halloween/listi-l.svg?v=2) no-repeat 0 100% / 100% 100%;
}
.hrad:has(.vz-halloween.vz-f1) .section_pravy_end::after {
    background-image: url(/images/vyzdoba/halloween/listi-p.svg?v=2);
}

/* --- Pravý horní roh prostředního sloupce: pavučina (fáze 1) -
   Pseudoprvek přes celou šířku se zápornou spodní mezerou: titulek
   pod ním zůstane na místě a #section_central nemusí dostat
   position (posunulo by to absolutní prvky v obsahu stránek). */

.hrad:has(.vz-halloween.vz-f1) #section_central::before {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    height: 60px;
    margin-bottom: -60px;
    pointer-events: none;
    background: url(/images/vyzdoba/halloween/pavucina.svg) no-repeat 1px 2px / 54px 54px;
    transform: scaleX(-1);
}

/* --- Profil postavy: netopýři visí z linky pod vizitkou (fáze 2) */

.vz-halloween.vz-f2 :is(.vz-pf-netopyr1, .vz-pf-netopyr2) {
    display: block;
    top: calc(100% + 1px);
    aspect-ratio: 22 / 35;
    background-image: url(/images/vyzdoba/halloween/netopyr-visi.svg);
}
.vz-halloween .vz-pf-netopyr1 { left: 47%; width: 9px; --vz-smer: -1; }
.vz-halloween .vz-pf-netopyr2 { left: 71%; width: 7px; --vz-smer: 1; }

/* Klepnutí = odlet (třídu vz-uleta přidá skript z Vyzdoba::profil()).
   Netopýr roztáhne křídla, mává a šikmo vzhůru zmizí. ::before
   zvětšuje plochu pro klepnutí, malý netopýr se jinak špatně trefuje. */
.vz-halloween :is(.vz-pf-netopyr1, .vz-pf-netopyr2) {
    pointer-events: auto;
    cursor: pointer;
}
.vz-halloween :is(.vz-pf-netopyr1, .vz-pf-netopyr2)::before {
    content: "";
    position: absolute;
    inset: -6px -8px;
}
.vz-halloween.vz-profil i.vz-uleta {
    width: 22px;
    margin-left: -7px;
    aspect-ratio: 60 / 20;
    background-image: url(/images/vyzdoba/halloween/netopyr-let.svg);
    pointer-events: none;
    animation: vz-pf-odlet 1.7s cubic-bezier(.45, 0, .8, .6) forwards, vz-pf-mavani .16s linear infinite;
}
@keyframes vz-pf-odlet {
    0%   { translate: 0 0; opacity: 1; }
    25%  { translate: calc(var(--vz-smer) * 18px) -22px; }
    55%  { translate: calc(var(--vz-smer) * 70px) -48px; opacity: 1; }
    100% { translate: calc(var(--vz-smer) * 220px) -150px; opacity: 0; }
}
@keyframes vz-pf-mavani {
    0%, 100% { scale: 1 1; }
    50%      { scale: .9 .4; }
}
@media (prefers-reduced-motion: reduce) {
    .vz-halloween.vz-profil i.vz-uleta { display: none; }
}

/* --- Zeď kolem hradu: hromádky dýní (až fáze 3, rovnou svítí, H1) */

.vz-halloween.vz-f3 :is(.vz-dyne-l, .vz-dyne-p) {
    display: block;
    bottom: 6px;
    width: calc(110px * var(--vz-z));
    aspect-ratio: 120 / 88;
    background-image: url(/images/vyzdoba/halloween/dynev-hromadka.svg?v=7);
}
.vz-halloween .vz-dyne-l { right: calc(50% + var(--vz-okraj)); }
.vz-halloween .vz-dyne-p { left: calc(50% + var(--vz-okraj)); transform: scaleX(-1); }

@media (min-width: 1600px) {
    .vz-halloween :is(.vz-dyne-l, .vz-dyne-p) { width: calc(150px * var(--vz-z)); }
}