/* Seizoensdecor herfst: props in de achtergrond (.bvi-scene) en het logo-accent (--bvi-logo-accent). Zie Views/Shared/_SeasonLayer.cshtml.
   Linksonder een bladhoop met pompoenen en een egeltje, rechtsonder vliegenzwammen en een eekhoorntjesbrood op mos met eikels
   en een kastanje, rechtsboven een eikentak met de laatste bladeren. Alles langs de randen en wat gedempt; de inhoud ligt erover.
   Tekeningen in herfst/, in lagen (achter, egel, voor) zodat de egel tussen het blad zit. Maten in em: de laag zet de schaal.
   Beweging (niet bij minder beweging): de egel snuffelt, de vliegenzwammen wiebelen, het laatste blad wiegt, het logoblaadje
   ook. Met de muis (--bvi-px/--bvi-py, via translate) schuiven de lagen op verschillende diepte (parallax). Bij het scrollen
   (scroll-timeline) komt de egel verder uit de hoop, zwiept de tak, valt het laatste blad en rolt de kastanje weg.
   Elk zijn eigen eigenschap, zodat niets elkaar opheft: parallax via translate, scrollen en wiebelen via transform, wiegen
   en snuffelen via rotate. Alleen transform/opacity, geen var() in de keyframes, zeven geanimeerde delen. */
:root {
    --bvi-logo-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26'%3E%3Cpath d='M12 1.4l1.7 3.6 2.7-1.6-.6 4 4-1.1-2 3.2 4.1 1.5-3.3 1.9 1.3 3.4-4.4-.8-.6 2.8-2.3-2v6.3h-1.2v-6.3l-2.3 2-.6-2.8-4.4.8 1.3-3.4-3.3-1.9 4.1-1.5-2-3.2 4 1.1-.6-4 2.7 1.6z' fill='%23e07b39' stroke='%23fdf6f2' stroke-width='1.5' stroke-linejoin='round' paint-order='stroke'/%3E%3Cpath d='M12 4.5v12.5M12 10l-3.6-2.8M12 10l3.6-2.8M12 13.8l-4.6-1.8M12 13.8l4.6-1.8' fill='none' stroke='%239e4b19' stroke-opacity='.6' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
    --bvi-logo-accent-rotate: 18deg;
}

/* De dekking op de hele laag (niet per deel), zodat de lagen niet door elkaar heen schijnen. */
.bvi-scene--herfst { font-size: 6px; opacity: .78; }
.bvi-scene--herfst::before, .bvi-scene--herfst::after { content: ""; }
/* Parallax: hoe dichterbij, hoe verder de laag met de muis meeschuift (de randen liggen ruim buiten beeld). */
.bvi-scene--herfst::before, .bvi-scene--herfst > i:nth-child(5) { translate: calc(var(--bvi-px, 0) * -5px) calc(var(--bvi-py, 0) * -3px); }
.bvi-scene--herfst > i:nth-child(3), .bvi-scene--herfst > i:nth-child(6), .bvi-scene--herfst > i:nth-child(7), .bvi-scene--herfst > i:nth-child(8) { translate: calc(var(--bvi-px, 0) * -8px) calc(var(--bvi-py, 0) * -4px); }
.bvi-scene--herfst > i:nth-child(4), .bvi-scene--herfst::after { translate: calc(var(--bvi-px, 0) * -11px) calc(var(--bvi-py, 0) * -6px); }
.bvi-scene--herfst > i:nth-child(1), .bvi-scene--herfst > i:nth-child(2) { translate: calc(var(--bvi-px, 0) * -14px) calc(var(--bvi-py, 0) * -8px); }

/* Linksonder: bladhoop (achter), egel, blad en pompoenen (voor); zelfde raster: 1em = 10 eenheden van de tekening. */
.bvi-scene--herfst::before, .bvi-scene--herfst > i:nth-child(4) { left: -2em; bottom: -1.2em; width: 32em; height: 18em; }
.bvi-scene--herfst::before { background-image: url("herfst/bladhoop-achter.svg"); }
.bvi-scene--herfst > i:nth-child(4) { background-image: url("herfst/bladhoop-voor.svg"); }
.bvi-scene--herfst > i:nth-child(3) {
    left: 17em; bottom: .8em; width: 10em; height: 8em;
    background-image: url("herfst/egel.svg"); transform-origin: 15% 87%;
}
/* Rechtsonder: mos met eekhoorntjesbrood (achter), twee vliegenzwammen, de kastanje en eikels met blad (voor). */
.bvi-scene--herfst > i:nth-child(5), .bvi-scene--herfst::after { right: -1.6em; bottom: -1.2em; width: 22em; height: 17em; }
.bvi-scene--herfst > i:nth-child(5) { background-image: url("herfst/paddenstoelen-achter.svg"); }
.bvi-scene--herfst::after { background-image: url("herfst/paddenstoelen-voor.svg"); }
.bvi-scene--herfst > i:nth-child(6) {
    right: 2em; bottom: -.4em; width: 10.8em; height: 12em;
    background-image: url("herfst/vliegenzwam.svg"); transform-origin: 50% 97%;
}
.bvi-scene--herfst > i:nth-child(7) {
    right: -1em; bottom: -.8em; width: 6em; height: 6.6em;
    background-image: url("herfst/vliegenzwam-klein.svg"); transform-origin: 38% 93%;
}
.bvi-scene--herfst > i:nth-child(8) {
    right: 8.9em; bottom: -.4em; width: 3em; height: 3em;
    background-image: url("herfst/kastanje.svg");
}
/* Rechtsboven: eikentak en het bungelende blad aan het onderste twijgje (zelfde raster als de tak). */
.bvi-scene--herfst > i:nth-child(1) {
    top: -1.8em; right: -2em; width: 36em; height: 21em;
    background-image: url("herfst/tak.svg"); transform-origin: 100% 12%;
}
.bvi-scene--herfst > i:nth-child(2) {
    top: 8.4em; right: 11.5em; width: 5.4em; height: 5.8em;
    background-image: url("herfst/blad.svg"); transform-origin: 50% 7%; rotate: -3deg;
}

@media (min-width: 768px) {
    .bvi-scene--herfst { font-size: 8px; }
}
@media (min-width: 1280px) {
    .bvi-scene--herfst { font-size: 10px; }
}
@media (min-width: 1680px) {
    .bvi-scene--herfst { font-size: 11px; }
}

@media (prefers-reduced-motion: no-preference) {
    .bvi-scene--herfst > i:nth-child(2) { animation: bvi-herfst-wieg 3.4s ease-in-out infinite alternate; }
    .bvi-scene--herfst > i:nth-child(3) { animation: bvi-herfst-snuffel 6s ease-in-out infinite; }
    .bvi-scene--herfst > i:nth-child(6) { animation: bvi-herfst-wiebel 5s ease-in-out infinite alternate; }
    .bvi-scene--herfst > i:nth-child(7) { animation: bvi-herfst-wiebel 3.8s ease-in-out -1.6s infinite alternate-reverse; }
    .site-header__logo::after, .season-logo::after { transform-origin: 50% 90%; animation: bvi-herfst-logo 4.5s ease-in-out infinite alternate; }
    /* Scroll-gekoppeld (zonder JS): de egel komt verder uit de hoop, de tak zwiept, het laatste blad valt, de kastanje rolt.
       Zonder scrollruimte is de tijdlijn niet actief en staat alles in de rusthouding (egel zichtbaar, blad aan de tak). */
    @supports (animation-timeline: scroll()) {
        .bvi-scene--herfst > i:nth-child(1) { animation: bvi-herfst-tak auto linear both; animation-timeline: scroll(root); }
        .bvi-scene--herfst > i:nth-child(2) {
            animation: bvi-herfst-wieg 3.4s ease-in-out infinite alternate, bvi-herfst-val auto linear both;
            animation-timeline: auto, scroll(root);
        }
        .bvi-scene--herfst > i:nth-child(3) {
            animation: bvi-herfst-snuffel 6s ease-in-out infinite, bvi-herfst-egel auto linear both;
            animation-timeline: auto, scroll(root);
        }
        .bvi-scene--herfst > i:nth-child(8) { animation: bvi-herfst-rol auto linear both; animation-timeline: scroll(root); }
    }
}
@keyframes bvi-herfst-wieg {
    from { rotate: -8deg; }
    to { rotate: 7deg; }
}
/* Snuffelen: twee keer kort de neus omhoog, dan rust */
@keyframes bvi-herfst-snuffel {
    0%, 58%, 100% { rotate: 0deg; }
    64% { rotate: -4deg; }
    70% { rotate: -1deg; }
    76% { rotate: -4deg; }
    84% { rotate: 0deg; }
}
@keyframes bvi-herfst-wiebel {
    from { transform: rotate(-2deg); }
    to { transform: rotate(2deg); }
}
@keyframes bvi-herfst-logo {
    from { rotate: -8deg; }
    to { rotate: 6deg; }
}
@keyframes bvi-herfst-egel {
    0% { transform: translate(-1.6em, 2.8em) rotate(-6deg); }
    55%, 100% { transform: none; }
}
@keyframes bvi-herfst-tak {
    0% { transform: none; }
    35% { transform: rotate(-1.6deg); }
    70% { transform: rotate(1deg); }
    100% { transform: rotate(-.5deg); }
}
/* Het blad laat los en dwarrelt omlaag (het wiegen erboven geeft de zijwaartse slingering) */
@keyframes bvi-herfst-val {
    0%, 10% { transform: none; opacity: 1; }
    40% { transform: translate(-3em, 22vh) rotate(-50deg); }
    70% { transform: translate(-8em, 46vh) rotate(-120deg); opacity: 1; }
    100% { transform: translate(-11em, 70vh) rotate(-190deg); opacity: 0; }
}
/* Rollen: 28em afstand bij een straal van 1,5em is ruim 1070 graden */
@keyframes bvi-herfst-rol {
    0% { transform: none; }
    100% { transform: translateX(-28em) rotate(-1070deg); }
}