/*
 * Lagerboks – sesongpynt i heroen på forsiden (Lagerboks_Sesong, 2.14.0, tonet ned i 2.14.2).
 * Lastes bare på forsiden og bare når en sesong er på (innstillingen lagerboks_sesong).
 *
 * Noen få brikker faller én gang ved bildet, spretter litt og blir liggende på streken under
 * toppfeltet. Alt er over på under fem sekunder. Brikkene ligger bak bildet og prisen, holder seg
 * til spalten med bildet, kan ikke klikkes og er skjult for skjermlesere. Plass, størrelse, tid og
 * vinkel settes per brikke fra PHP (--x, --s, --d, --t og --r; --n på dem som får et dult av naboen).
 */

body.lgbx-sesong-paa .lgbx-ml--forside .lgbx-ml__hero {
    position: relative;
    overflow: hidden;
}

body.lgbx-sesong-paa .lgbx-ml--forside .lgbx-ml__hero > .lgbx-ml__wrap {
    position: relative;
    z-index: 1;
}

/* --skala: størrelsen i forhold til løvet. --synk: hvor mye luft bildet har under seg (del av bredden). */
.lgbx-sesong {
    --skala: 1;
    --synk: 0;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Rutenettet er heroens eget (lgbx-ml__hero-rute). Feltet er spalten med bildet, litt bredere på hver side
   (20 px til høyre er det som alltid er ledig utenfor innholdet). */
.lgbx-sesong .lgbx-sesong__rute {
    align-items: stretch;
    height: 100%;
}

.lgbx-sesong__felt {
    position: relative;
    grid-column: 2;
    margin: 0 -20px 0 -36px;
}

/* Hver brikke er en smal søyle i hele heroens høyde. Søylen skyves ned, og bildet står nederst i den. */
.lgbx-sesong__brikke {
    --w: calc(var(--s, 26px) * var(--skala));
    --dult: 8px;
    position: absolute;
    top: 0;
    bottom: calc(var(--w) * var(--synk) * -1);
    left: var(--x, 50%);
    width: var(--w);
    transform: translateY(-110%);
    animation: lgbx-sesong-fall var(--t, 3s) linear var(--d, 0s) 1 forwards;
}

.lgbx-sesong__brikke:nth-child(even) {
    --dult: -7px;
}

.lgbx-sesong__brikke::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1;
    background: center / contain no-repeat;
    transform: translateX(var(--dult)) rotate(var(--r, 0deg));
    animation: lgbx-sesong-sving var(--t, 3s) ease-in-out var(--d, 0s) 1 backwards;
    content: "";
}

/* Naboen lander like ved: et lite hopp og et vipp. */
.lgbx-sesong__brikke--dult {
    animation:
        lgbx-sesong-fall var(--t, 3s) linear var(--d, 0s) 1 forwards,
        lgbx-sesong-hopp 0.45s ease-out var(--n, 4s) 1;
}

.lgbx-sesong__brikke--dult::after {
    animation:
        lgbx-sesong-sving var(--t, 3s) ease-in-out var(--d, 0s) 1 backwards,
        lgbx-sesong-vipp 0.45s ease-out var(--n, 4s) 1;
}

/* Fallet treffer streken ved 74 %, så ett sprett og et lite ettersprett. */
@keyframes lgbx-sesong-fall {
    0% {
        transform: translateY(-110%);
        animation-timing-function: cubic-bezier(0.4, 0.1, 0.9, 0.85);
    }

    74% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    }

    84% {
        transform: translateY(-14px);
        animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4);
    }

    92% {
        transform: translateY(0);
        animation-timing-function: ease-out;
    }

    96% {
        transform: translateY(-4px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0);
    }
}

/* Brikken svaier på vei ned, og velter over på siden når den spretter. */
@keyframes lgbx-sesong-sving {
    0% {
        transform: translateX(-16px) rotate(-50deg);
    }

    25% {
        transform: translateX(12px) rotate(30deg);
    }

    50% {
        transform: translateX(-9px) rotate(-22deg);
    }

    74% {
        transform: translateX(3px) rotate(calc(var(--r, 0deg) - 38deg));
    }

    84% {
        transform: translateX(calc(var(--dult) * 0.6)) rotate(calc(var(--r, 0deg) + 16deg));
    }

    92% {
        transform: translateX(var(--dult)) rotate(calc(var(--r, 0deg) - 7deg));
    }

    100% {
        transform: translateX(var(--dult)) rotate(var(--r, 0deg));
    }
}

@keyframes lgbx-sesong-hopp {
    0%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }
}

@keyframes lgbx-sesong-vipp {
    0%,
    100% {
        transform: translateX(var(--dult)) rotate(var(--r, 0deg));
    }

    40% {
        transform: translateX(calc(var(--dult) * 1.5)) rotate(calc(var(--r, 0deg) + 18deg));
    }
}

/* ── Høst: løv i tre farger ─────────────────────────────────────────────── */

.lgbx-sesong--host {
    --synk: 0.24;
}

.lgbx-sesong--host .lgbx-sesong__brikke::after {
    opacity: 0.9;
}

.lgbx-sesong--host .lgbx-sesong__brikke--1::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e08a1e' d='M12 1.5c4.6 3.4 7 7.500 7 11.500 0 4.200-3 7.400-7 7.400s-7-3.200-7-7.400c0-4 2.400-8.100 7-11.500z'/%3E%3Cpath fill='none' stroke='%23a85f0c' stroke-width='1.200' stroke-linecap='round' d='M12 6v16.500M12 11l3.200-2.600M12 14.500l-3.400-2.700M12 17.500l2.800-2.200'/%3E%3C/svg%3E");
}

.lgbx-sesong--host .lgbx-sesong__brikke--2::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c2571a' d='M12 1.5c4.6 3.4 7 7.500 7 11.500 0 4.200-3 7.400-7 7.400s-7-3.200-7-7.400c0-4 2.400-8.100 7-11.500z'/%3E%3Cpath fill='none' stroke='%238a3a0d' stroke-width='1.200' stroke-linecap='round' d='M12 6v16.500M12 11l3.200-2.600M12 14.500l-3.400-2.700M12 17.500l2.800-2.200'/%3E%3C/svg%3E");
}

.lgbx-sesong--host .lgbx-sesong__brikke--3::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e9b949' d='M12 1.5c4.6 3.4 7 7.500 7 11.500 0 4.200-3 7.400-7 7.400s-7-3.200-7-7.400c0-4 2.400-8.100 7-11.500z'/%3E%3Cpath fill='none' stroke='%23b3871f' stroke-width='1.200' stroke-linecap='round' d='M12 6v16.500M12 11l3.200-2.600M12 14.500l-3.400-2.700M12 17.500l2.800-2.200'/%3E%3C/svg%3E");
}

/* ── Jul: snø i lys blått (heroen er lys, så hvit snø ville ikke synes) ──── */

.lgbx-sesong--jul {
    --skala: 0.6;
}

.lgbx-sesong--jul .lgbx-sesong__brikke--1 {
    --synk: 0.08;
}

.lgbx-sesong--jul .lgbx-sesong__brikke--2 {
    --synk: 0.2;
}

.lgbx-sesong--jul .lgbx-sesong__brikke--3 {
    --synk: 0.3;
}

.lgbx-sesong--jul .lgbx-sesong__brikke--1::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238fb8de' stroke-width='2' stroke-linecap='round' d='M12 2v20M3.300 7l17.400 10M3.300 17 20.700 7M12 6l-2.500-2M12 6l2.500-2M12 18l-2.500 2M12 18l2.500 2'/%3E%3C/svg%3E");
}

.lgbx-sesong--jul .lgbx-sesong__brikke--2::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='%23b7d3ec'/%3E%3C/svg%3E");
}

.lgbx-sesong--jul .lgbx-sesong__brikke--3::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.500' fill='%23cfe1f2'/%3E%3C/svg%3E");
}

/* ── Påske: egg i tre farger ────────────────────────────────────────────── */

.lgbx-sesong--paske {
    --skala: 0.8;
    --synk: 0.18;
}

.lgbx-sesong--paske .lgbx-sesong__brikke--1::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f4c542' d='M12 2c4 0 7.500 6 7.500 11.500 0 5-3.300 8.500-7.500 8.500s-7.500-3.500-7.500-8.500C4.500 8 8 2 12 2z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.600' stroke-linecap='round' stroke-linejoin='round' d='m5.500 12.500 2.200 2 2.200-2 2.100 2 2.100-2 2.200 2 2.200-2'/%3E%3C/svg%3E");
}

.lgbx-sesong--paske .lgbx-sesong__brikke--2::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2389cba0' d='M12 2c4 0 7.500 6 7.500 11.500 0 5-3.300 8.500-7.500 8.500s-7.500-3.500-7.500-8.500C4.500 8 8 2 12 2z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.600' stroke-linecap='round' d='M5 11h14M5.200 15.500h13.600'/%3E%3C/svg%3E");
}

.lgbx-sesong--paske .lgbx-sesong__brikke--3::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2a9bb' d='M12 2c4 0 7.500 6 7.500 11.500 0 5-3.300 8.500-7.500 8.500s-7.500-3.500-7.500-8.500C4.500 8 8 2 12 2z'/%3E%3Ccircle cx='9' cy='11' r='1.300' fill='%23fff'/%3E%3Ccircle cx='14.500' cy='9.500' r='1.300' fill='%23fff'/%3E%3Ccircle cx='12.500' cy='15.500' r='1.300' fill='%23fff'/%3E%3Ccircle cx='8.500' cy='16.500' r='1.300' fill='%23fff'/%3E%3C/svg%3E");
}

/* ── Mobil: én spalte, bildet står under teksten ────────────────────────────
   Annenhver brikke, og fallet er kort: brikkene kommer fram under bildet, ikke ned gjennom teksten. */

@media (max-width: 760px) {
    .lgbx-sesong .lgbx-sesong__rute {
        display: block;
    }

    .lgbx-sesong__felt {
        height: 100%;
        margin: 0;
    }

    .lgbx-sesong__brikke {
        top: auto;
        height: 300px;
    }

    .lgbx-sesong__brikke:nth-child(even) {
        display: none;
    }
}

/* Mindre bevegelse: brikkene ligger stille der de ellers ville landet. */
@media (prefers-reduced-motion: reduce) {
    .lgbx-sesong__brikke,
    .lgbx-sesong__brikke::after {
        animation: none;
    }

    .lgbx-sesong__brikke {
        transform: none;
    }
}