/* Сезонные украшения шапки (data-season на <html>, см. users.themes.current_season):
   winter — снег (15 декабря — 14 января), autumn — листопад (сентябрь — ноябрь).
   Ученик может выключить их в профиле (User.seasonal_decor). */

/* Без overflow: hidden — иначе обрезались бы украшения самих тем (волна «Океана»):
   снег рисуется фоном внутри шапки, листья исчезают, не доходя до её края. */
html[data-season] .main-header {
    position: relative;
    overflow-x: clip;  /* качающиеся листья не должны давать горизонтальную прокрутку */
}
html[data-season] .main-header > .container {
    position: relative;
    z-index: 1;
}
html[data-season] .main-header::before {
    content: '';
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Снег: два слоя снежинок разного размера падают с разной скоростью */
html[data-season="winter"] .main-header::before {
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent 70%),
        radial-gradient(2.5px 2.5px at 80px 10px, #fff, transparent 70%),
        radial-gradient(1.5px 1.5px at 140px 60px, #fff, transparent 70%),
        radial-gradient(3px 3px at 50px 80px, rgba(255, 255, 255, 0.9), transparent 70%),
        radial-gradient(2px 2px at 110px 100px, #fff, transparent 70%);
    background-size: 160px 120px;
    opacity: 0.9;
    filter: drop-shadow(0 0 1px rgba(0, 60, 120, 0.4));
    animation: season-snow 9s linear infinite;
}
@keyframes season-snow {
    from { background-position: 0 -120px; }
    to { background-position: 40px 0; }
}

/* Листопад: 12 отдельных листьев (разметка в base.html) — у каждого своё место,
   скорость, задержка, размер, амплитуда покачивания и вращение. Падение и
   покачивание — две анимации с разными периодами, поэтому путь не повторяется. */
.season-leaves {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.season-leaves i {
    position: absolute;
    top: -24px;
    left: var(--x);
    font-style: normal;
    font-size: var(--s);
    opacity: 0;
    animation: leaf-fall var(--d) linear var(--delay) infinite;
}
.season-leaves i::before {
    content: var(--leaf);
    display: inline-block;
    animation: leaf-sway calc(var(--d) / 2.7) ease-in-out var(--delay) infinite alternate;
}
@keyframes leaf-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.7; }
    85% { opacity: 0.6; }
    100% { transform: translateY(var(--fall, 120px)) rotate(var(--spin)); opacity: 0; }
}
@keyframes leaf-sway {
    from { transform: translateX(calc(var(--sway) * -1)) rotate(-12deg); }
    to { transform: translateX(var(--sway)) rotate(12deg); }
}

.season-leaves i:nth-child(1) { --x: 3%; --d: 6.5s; --delay: -0.0s; --s: 15px; --sway: 18px; --spin: 220deg; --leaf: '🍂'; }
.season-leaves i:nth-child(2) { --x: 11%; --d: 8.2s; --delay: -2.1s; --s: 13px; --sway: -24px; --spin: -300deg; --leaf: '🍁'; }
.season-leaves i:nth-child(3) { --x: 19%; --d: 5.6s; --delay: -4.0s; --s: 17px; --sway: 14px; --spin: 180deg; --leaf: '🍂'; }
.season-leaves i:nth-child(4) { --x: 27%; --d: 7.4s; --delay: -1.2s; --s: 12px; --sway: -16px; --spin: 260deg; --leaf: '🍁'; }
.season-leaves i:nth-child(5) { --x: 36%; --d: 9.0s; --delay: -3.3s; --s: 16px; --sway: 26px; --spin: -200deg; --leaf: '🍂'; }
.season-leaves i:nth-child(6) { --x: 44%; --d: 6.1s; --delay: -0.7s; --s: 14px; --sway: -20px; --spin: 320deg; --leaf: '🍁'; }
.season-leaves i:nth-child(7) { --x: 53%; --d: 7.8s; --delay: -5.0s; --s: 18px; --sway: 22px; --spin: -240deg; --leaf: '🍂'; }
.season-leaves i:nth-child(8) { --x: 61%; --d: 5.9s; --delay: -2.8s; --s: 13px; --sway: -14px; --spin: 200deg; --leaf: '🍁'; }
.season-leaves i:nth-child(9) { --x: 70%; --d: 8.6s; --delay: -0.3s; --s: 15px; --sway: 28px; --spin: -320deg; --leaf: '🍂'; }
.season-leaves i:nth-child(10) { --x: 78%; --d: 6.8s; --delay: -3.9s; --s: 12px; --sway: -22px; --spin: 280deg; --leaf: '🍁'; }
.season-leaves i:nth-child(11) { --x: 87%; --d: 7.1s; --delay: -1.7s; --s: 17px; --sway: 16px; --spin: -180deg; --leaf: '🍂'; }
.season-leaves i:nth-child(12) { --x: 95%; --d: 9.4s; --delay: -4.6s; --s: 14px; --sway: -18px; --spin: 240deg; --leaf: '🍁'; }

@media (prefers-reduced-motion: reduce) {
    html[data-season] .main-header::before,
    .season-leaves i, .season-leaves i::before { animation: none; }
    .season-leaves i { opacity: 0.5; top: 30%; }
}