/* Halloween (src/Twig/SiteThemeExtension.php: 24 October – 1 November): orange and violet accents, dusk in the
   header, decorations from templates/site/theme/halloween/. Linked only while the theme is on. */
body.theme-halloween {
    --halloween-orange: #f07818;
    --halloween-violet: #5b2a86;
    background:
        linear-gradient(rgba(60, 20, 90, .35), rgba(255, 110, 20, .18) 600px, rgba(0, 0, 0, 0) 1100px),
        #000 url("../../images/background_5-ux-SUGO.jpg") no-repeat 50% 0;
}

body.theme-halloween hr, body.theme-halloween .rule {
    background: linear-gradient(90deg, var(--halloween-orange), #f5a04a 45%, var(--halloween-violet));
}

.theme-halloween .site-header__descr { color: #ffb070; }
.theme-halloween .site-header__menu a:hover { text-shadow: 0 0 6px var(--halloween-orange), 0 0 2px #fff; }
.theme-halloween .site-header__search input:focus { border-color: var(--halloween-orange); }
.theme-halloween .pagination a:hover, .theme-halloween .pagination .is-current { background: var(--halloween-orange); color: #fff; }
.theme-halloween .post__tags a:hover { background: var(--halloween-orange); color: #fff; }

/* --- Header: dusk over the video, the moon, bats, jack-o'-lanterns --- */

.halloween-defs { position: absolute; }

.halloween-sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: inline-size;
    background: linear-gradient(rgba(25, 6, 45, .7), rgba(70, 18, 60, .45) 55%, rgba(255, 110, 20, .32));
    pointer-events: none;
}

.halloween-sky__moon {
    position: absolute;
    top: 12px;
    right: 33%;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 62%, rgba(190, 150, 70, .45) 0 5px, transparent 6px),
        radial-gradient(circle at 62% 30%, rgba(190, 150, 70, .4) 0 7px, transparent 8px),
        radial-gradient(circle at 68% 70%, rgba(190, 150, 70, .3) 0 3px, transparent 4px),
        radial-gradient(circle at 38% 35%, #fffbe6, #f6dd92 60%, #e2bb5e);
    box-shadow: 0 0 22px 6px rgba(255, 214, 120, .45), 0 0 60px 20px rgba(255, 150, 40, .2);
}

/* A bat crosses the header now and then: the span flies, the svg flaps. */
.halloween-bat {
    position: absolute;
    left: 0;
    width: 42px;
    height: 17px;
    transform: translateX(-60px);
    animation: halloween-fly 16s linear infinite;
}
.halloween-bat svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #120818;
    filter: drop-shadow(0 0 1.5px rgba(255, 190, 120, .55)); /* moonlit edges, or they vanish in the dark sky */
    animation: halloween-flap .18s ease-in-out infinite alternate;
}
.halloween-bat--1 { top: 22px; }
.halloween-bat--2 { top: 48px; width: 30px; height: 12px; animation-duration: 21s; animation-delay: 5s; }
.halloween-bat--3 { top: 10px; width: 22px; height: 9px; animation-duration: 27s; animation-delay: 11s; }
.halloween-bat--2 svg { animation-duration: .22s; }
.halloween-bat--3 svg { animation-duration: .15s; }

@keyframes halloween-fly {
    0% { transform: translate(-60px, 0); }
    10% { transform: translate(25cqw, -10px); }
    20% { transform: translate(50cqw, 8px); }
    30% { transform: translate(75cqw, -6px); }
    40%, 100% { transform: translate(calc(100cqw + 60px), 4px); }
}

@keyframes halloween-flap {
    to { transform: scaleY(.3); }
}

.halloween-pumpkin {
    position: absolute;
    bottom: 0;
    filter: drop-shadow(0 0 10px rgba(255, 130, 20, .65));
}
.halloween-pumpkin--big { left: 57%; width: 50px; height: 43px; }
.halloween-pumpkin--small { left: calc(57% + 54px); width: 32px; height: 28px; }
.halloween-pumpkin__face { animation: halloween-flicker 3s steps(1) infinite; }
.halloween-pumpkin--small .halloween-pumpkin__face { animation-delay: -1.3s; }

@keyframes halloween-flicker {
    0%, 100% { fill: #ffd451; }
    37% { fill: #ffb627; }
    41% { fill: #ffe27a; }
    63% { fill: #ffc03a; }
    66% { fill: #ffd451; }
}

/* --- Under the header: a cobweb in the corner, a spider on its thread next to the banners --- */

.theme-halloween .layout { position: relative; }
.theme-halloween .aside a { position: relative; } /* the banners cover the cobweb */

.halloween-web {
    position: absolute;
    top: 0;
    right: 0;
    width: 130px;
    height: 130px;
    fill: none;
    stroke: #c4c4c4;
    stroke-width: .8;
    pointer-events: none;
}

.halloween-spider {
    position: absolute;
    top: 0;
    right: 9px;
    width: 22px;
    height: 230px;
    overflow: hidden;
    pointer-events: none;
}
.halloween-spider__body {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 24px;
    overflow: visible;
    animation: halloween-drop 11s ease-in-out infinite;
}
.halloween-spider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: #a8a8a8;
    transform-origin: top;
    animation: halloween-thread 11s ease-in-out infinite;
}

/* The thread is as long as the spider has gone down: both run on the same timing. */
@keyframes halloween-drop {
    0%, 12% { transform: translateY(28px); }
    45%, 62% { transform: translateY(196px); }
    100% { transform: translateY(28px); }
}
@keyframes halloween-thread {
    0%, 12% { transform: scaleY(calc(36 / 230)); }
    45%, 62% { transform: scaleY(calc(204 / 230)); }
    100% { transform: scaleY(calc(36 / 230)); }
}

@media (max-width: 760px) {
    .halloween-sky__moon { top: 8px; right: auto; left: 140px; width: 40px; height: 40px; }
    .halloween-pumpkin { display: none; }
    .halloween-web { width: 80px; height: 80px; opacity: .7; }
    .halloween-spider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .halloween-bat, .halloween-pumpkin__face, .halloween-spider__body, .halloween-spider::before { animation: none; }
    .halloween-bat { display: none; }
    .halloween-spider__body { transform: translateY(70px); }
    .halloween-spider::before { transform: scaleY(calc(78 / 230)); }
}