/* ---- Autumn -----------------------------------------------------------------
   Art for bin/php/seasonal/autumn/*.php: the theme leans russet (tint.css),
   the backdrop takes a warm grade and a few leaves tumble down behind the
   panels. Leaves are the only intrinsic colours (the --au-* tokens). */

:root {
    --vhs-tint: #a8492a;    /* russet */
    --vhs-glint: #e0803a;   /* copper */
}

.vh-season--autumn {
    --au-red: #b8412a;
    --au-orange: #d9772e;
    --au-gold: #d6a23e;
    --au-brown: #8a5a2c;
}

.vh-season--autumn.vh-season-sky {
    background: linear-gradient(180deg, color-mix(in srgb, var(--vhs-tint) 16%, transparent), transparent 55%);
}

.vh-au-blade { fill: currentColor; }

.vh-au-vein {
    fill: none;
    stroke: #000000;
    stroke-opacity: 0.28;
    stroke-width: 0.7;
    stroke-linecap: round;
}

/* A leaf: the span falls straight down (linear, like settling air), the svg
   inside sways and tumbles; a negative delay starts each one mid-fall. */
.vh-au-leaf {
    width: var(--s);
    height: var(--s);
    color: var(--c);
    opacity: 0.85;
    animation: vh-au-fall var(--t) linear var(--d) infinite;
}

.vh-au-leaf svg {
    width: 100%;
    height: 100%;
    animation: vh-au-tumble var(--w, 3.2s) ease-in-out var(--d) infinite alternate;
}

.vh-au-leaf:nth-of-type(1)  { --x: 6%;  --s: 22px; --c: var(--au-red);    --t: 17s; --d: -2s;  --drift: 70px; }
.vh-au-leaf:nth-of-type(2)  { --x: 91%; --s: 18px; --c: var(--au-gold);   --t: 21s; --d: -9s;  --drift: -60px; --w: 2.6s; }
.vh-au-leaf:nth-of-type(3)  { --x: 31%; --s: 20px; --c: var(--au-orange); --t: 19s; --d: -14s; --drift: 90px; --w: 3.8s; }
.vh-au-leaf:nth-of-type(4)  { --x: 74%; --s: 24px; --c: var(--au-brown);  --t: 23s; --d: -5s;  --drift: -80px; }
.vh-au-leaf:nth-of-type(5)  { --x: 52%; --s: 16px; --c: var(--au-red);    --t: 18s; --d: -11s; --drift: 50px; --w: 2.8s; }
.vh-au-leaf:nth-of-type(6)  { --x: 17%; --s: 19px; --c: var(--au-gold);   --t: 24s; --d: -18s; --drift: -40px; --w: 3.5s; }
.vh-au-leaf:nth-of-type(7)  { --x: 84%; --s: 17px; --c: var(--au-orange); --t: 20s; --d: -16s; --drift: 60px; }
.vh-au-leaf:nth-of-type(8)  { --x: 42%; --s: 21px; --c: var(--au-brown);  --t: 22s; --d: -1s;  --drift: -70px; --w: 4s; }
.vh-au-leaf:nth-of-type(9)  { --x: 64%; --s: 18px; --c: var(--au-red);    --t: 19s; --d: -7s;  --drift: 80px; --w: 2.9s; }
.vh-au-leaf:nth-of-type(10) { --x: 97%; --s: 20px; --c: var(--au-orange); --t: 25s; --d: -21s; --drift: -90px; --w: 3.4s; }

@keyframes vh-au-fall {
    from { transform: translate3d(0, -8vh, 0); }
    to { transform: translate3d(var(--drift, 0px), 108vh, 0); }
}

@keyframes vh-au-tumble {
    from { transform: translateX(-16px) rotate(-38deg) rotateY(0deg); }
    to { transform: translateX(16px) rotate(46deg) rotateY(64deg); }
}