/*
 * Beweging — het laadscherm en wat er daarna gebeurt.
 *
 * Twee regels houden dit bestand eerlijk.
 *
 * De eerste: beweging mag nooit iets verbergen. Alles wat hieronder
 * binnenkomt, staat er ook zonder JavaScript en zonder animatie gewoon. Een
 * productraster dat pas verschijnt als een script het toestaat, is geen
 * animatie maar een risico — bij een trage verbinding, bij een fout in het
 * script, bij een leesprogramma.
 *
 * De tweede: wie zegt minder beweging te willen, krijgt stilstand. Niet
 * "iets minder", maar niets. Dat staat onderaan, en het is geen bijzaak: er
 * zijn mensen die van een verschuivend raster misselijk worden.
 *
 * De duur en de veerkracht komen uit de themaparameters. Het laadscherm van
 * Lok en Lint schiet dus door en dat van Kristal en Kraal komt bedaard tot
 * stilstand, zonder dat daar één regel voor apart staat.
 */

/* ══════════════════════════════════════════════════════════ het laadscherm ══

   Het staat er meteen, nog voor de stijlbladen binnen zijn — de opmaak
   ervoor staat in de pagina zelf. Wat hier staat is het vertrek: hoe hij
   weggaat als de winkel klaar is.

   Waarom het er is: de eerste indruk van een webwinkel is een halve seconde
   wit met blokken die inschuiven als de beelden binnenkomen. Een rustig doek
   dat oplost zodra het klaar is, leest als iets dat af is.
*/

.laadscherm {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--grond, #fff);
    /* Geen transitie op display: die schakelt hard. Opacity plus een
       vertraagde visibility haalt hem netjes uit de weg én uit de
       toegankelijkheidsboom. */
    transition:
        opacity calc(var(--duur-traag, .45s) * 1.4) var(--soepel, ease),
        visibility 0s linear calc(var(--duur-traag, .45s) * 1.4);
}

.laadscherm[hidden] {
    /* [hidden] wordt elders in de winkel met display:none afgedwongen; hier
       is een zichtbaar vertrek juist de bedoeling. */
    display: grid !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.laadscherm__merk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    animation: laadscherm-in calc(var(--duur-traag, .45s) * 1.2) var(--soepel, ease) both;
}

.laadscherm__vonk {
    width: 3rem;
    height: 3rem;
    color: var(--accent, #888);
    animation: laadscherm-vonk 1.6s ease-in-out infinite;
}

.laadscherm__vonk svg,
.laadscherm__vonk img {
    width: 100%;
    height: 100%;
    display: block;
}

.laadscherm__naam {
    font-family: var(--kop-font, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--inkt, #222);
}

/* De balk. Hij meet niets — er valt bij een gewone pagina niets te meten dat
   eerlijk is — maar hij zegt wel "er gebeurt iets", en dat is precies wat
   een bezoeker in die halve seconde wil weten. */
.laadscherm__balk {
    width: min(11rem, 40vw);
    height: 2px;
    background: var(--lijn, #ddd);
    border-radius: 2px;
    overflow: hidden;
}

.laadscherm__balk::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    background: var(--accent, #888);
    border-radius: inherit;
    animation: laadscherm-balk 1.15s var(--soepel, ease) infinite;
}

@keyframes laadscherm-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes laadscherm-vonk {
    0%, 100% { transform: scale(1); opacity: .85; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes laadscherm-balk {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* ═══════════════════════════════════════════════════════ binnenkomen ══

   Elementen die bij het scrollen in beeld komen. De klasse wordt door
   JavaScript gezet en niet andersom: zonder script staat er niets in de weg,
   want de begintoestand wordt óók door het script aangezet.

   Dat is de hele truc van 'js-beweegt' op de wortel: staat die er niet, dan
   is elke regel hieronder dood en staat de pagina er gewoon.
*/

.js-beweegt [data-komt-op] {
    opacity: 0;
    transform: translateY(14px);
    /* Kort houden. Een opkomst van meer dan een derde seconde valt op als
       wachten in plaats van als beweging, zeker bij snel scrollen waar er
       drie blokken tegelijk opkomen. */
    transition:
        opacity calc(var(--duur-traag, .45s) * 0.7) var(--soepel, ease),
        transform calc(var(--duur-traag, .45s) * 0.7) var(--veerkrachtig, cubic-bezier(.22, 1, .36, 1));
}

.js-beweegt [data-komt-op].is-op {
    opacity: 1;
    transform: none;
}

/* Het raster komt op met een trapje: elke kaart een tikje later dan zijn
   buur. Meer dan zes stappen wordt het wachten, dus daarna herhaalt het. */
.js-beweegt [data-komt-op][style*="--stap"] {
    transition-delay: calc(var(--stap) * 32ms);
}

/* ═════════════════════════════════════════════════════════ het beeld ══

   Een productbeeld dat bij het zweven zachtjes dichterbij komt. Dit stond al
   half in de winkel; hier krijgt het de veer van het thema mee, zodat het
   bij Lok en Lint anders aanvoelt dan bij Rek en Rust.
*/

.kaart__beeld img,
.kaart__beeld picture {
    transition: scale calc(var(--duur-traag, .45s) * 1.5) var(--soepel, ease);
}

@media (hover: hover) {
    .kaart:hover .kaart__beeld img,
    .kaart:hover .kaart__beeld picture {
        scale: 1.035;
    }
}

/* Een foto die binnenkomt, doet dat met een vloeier in plaats van met een
   sprong. Zonder dit knippert een raster van zeventig beelden zich vol. */
.js-beweegt img[data-vloei] {
    opacity: 0;
    transition: opacity calc(var(--duur-traag, .45s) * 1.2) var(--soepel, ease);
}

.js-beweegt img[data-vloei].is-geladen {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════ in de wagen ══

   De knop die bevestigt dat er iets gebeurd is. Kort, één keer, en zonder
   dat de knop van formaat verandert — dat laatste zou de hele kaart doen
   verspringen.
*/

.knop.is-gelukt {
    animation: knop-gelukt calc(var(--duur-normaal, .3s) * 2) var(--soepel, ease);
}

@keyframes knop-gelukt {
    0% { scale: 1; }
    35% { scale: .96; }
    70% { scale: 1.03; }
    100% { scale: 1; }
}

/* ═══════════════════════════════════════════════════════ stilstand ══

   Niet "iets rustiger": stil. Wie dit aanzet, heeft er een reden voor.
*/

@media (prefers-reduced-motion: reduce) {
    .laadscherm,
    .laadscherm__merk,
    .laadscherm__vonk,
    .laadscherm__balk::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    .js-beweegt [data-komt-op] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .js-beweegt img[data-vloei] {
        opacity: 1;
        transition: none;
    }

    .kaart__beeld img,
    .kaart__beeld picture,
    .kaart:hover .kaart__beeld img,
    .kaart:hover .kaart__beeld picture {
        transition: none;
        scale: 1;
    }

    .knop.is-gelukt { animation: none; }
}

/* ───────────────────────────────────────────────────── het lokvak ── */

/* Het verstopte veld tegen spam. Dit stond tot 10 september 2026 enkel in het
   thema bloesem, terwijl drie plugins het gebruiken: de cadeaulijst, de fotomuur
   en de gastenlijst. Op elk ander thema stond er dus zichtbaar een veld
   "Website" boven het formulier, en wie het invulde zag zijn bericht stil
   verdwijnen. Erger dan geen lokvak.

   Het staat daarom nu in elk thema. Verplaatsen naar één gedeeld bestand is
   beter, maar dat bestaat vandaag niet en dit moest vanavond recht. */
.brl-verstopt {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}