.laskuriluvut {
	--ympyra-koko: 180px;          
	--viivan-paksuus: 9px;         
	--vari-tausta: #e2e8f0;        
	--vari-paalla: url(#liukuvari); 
	max-width: 720px;
}
.laskuriluvut .is-layout-constrained {
	position: relative; display: flex; align-items: center; justify-content: center;
	min-width: var(--ympyra-koko); min-height: var(--ympyra-koko); z-index: 1;
}
.laskuriluvut .has-4-x-large-font-size {
	position: relative; z-index: 10; margin: 0 !important; font-size: 2.5rem; font-variant-numeric: tabular-nums; 
}
.laskuriluvut .bg-svg-wrapper {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
}
/* Rivitys. Vajaa rivi keskittyy itsestään (flex-wrap + justify-content:center),
   joten 3 -> 2+1, 5 -> 3+2 jne. ilman lukumääräkohtaisia sääntöjä.
   !important voittaa lohkon is-nowrap- ja space-between-asetukset, jotka WP
   tulostaa ajonaikaisena layout-tyylinä. */
.laskuriluvut {
	flex-wrap: wrap !important;
	justify-content: center !important;
	--laskuri-gap: 1.5rem;
}

/* Kaksi rinnakkain: 3 -> 2+1, 4 -> 2+2.
   Viisi tai kuusi mahtuu kolmeen sarakkeeseen: 3+2 ja 3+3. */
@media (max-width: 1023px) {
	.laskuriluvut > * {
		flex: 0 1 calc(50% - var(--laskuri-gap));
	}
	.laskuriluvut:has(> :nth-child(5)) > * {
		flex: 0 1 calc(33.333% - var(--laskuri-gap));
	}
}

/* Kapeimmilla kaikki allekkain keskitettynä. */
@media (max-width: 599px) {
	.laskuriluvut > *,
	.laskuriluvut:has(> :nth-child(5)) > * {
		flex: 0 1 100%;
	}
}


/* >> INTERSECTION-OBSERVER ANIMAATIOT */
/* 1. PERUSASETUKSET KAIKILLE ANIMOITAVILLE ELEMENTEILLE */
.feidaus, 
.vasemmalta, 
.oikealta, 
.ylhaalta, 
.alhaalta,
.skaalaus,
.perspektiivi {
    /* Sijainti ja muoto */
    --x-liike: 0px;
    --y-liike: 0px;
    --skaala: 1;
    --kaanto-y: 0deg;

    /* 1. Kestot (Oletus) */
    --kesto-feidaus: var(--smi-anim-speed, 0.75s);
    --kesto-liike: var(--smi-anim-speed, 1.5s);
    --kesto-skaalaus: var(--smi-anim-speed, 3s);
    --kesto-perspek: var(--smi-anim-speed, 3.5s);

    /* 2. Easingit (Oletus) */
    --ease-feidaus: ease-in;
    --ease-liike: ease-out;
    --ease-skaalaus: ease-out;
    --ease-perspek: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Modernit erilliset ominaisuudet! (Mahdollistaa eri ajastukset) */
    transform: perspective(1000px); /* Pidetään perspektiivi pohjalla */
    translate: var(--x-liike) var(--y-liike);
    scale: var(--skaala);
    rotate: y var(--kaanto-y);
    opacity: 0;
    
    /* Määritetään jokaiselle ominaisuudelle oma kestonsa ja easinginsa */
    transition: 
        opacity var(--kesto-feidaus) var(--ease-feidaus),
        translate var(--kesto-liike) var(--ease-liike),
        scale var(--kesto-skaalaus) var(--ease-skaalaus),
        rotate var(--kesto-perspek) var(--ease-perspek);
}

/* 2. LÄHTÖTILANTEET ERI LUOKILLE */
.vasemmalta   { --x-liike: -3rem; }
.oikealta     { --x-liike: 3rem; }
.ylhaalta     { --y-liike: -3rem; }
.alhaalta     { --y-liike: 3rem; }
.skaalaus     { --skaala: 0.8; }
.perspektiivi { --kaanto-y: -90deg; }
/* Vaakasiirtymä pois kapeilla näytöillä.
   3rem (48px) siirtymä työntää lohkon näkymän oikean reunan yli ennen kuin
   vieritys paljastaa sen -> sivu on vaakavieritettävä, vaikka lopullinen
   asettelu on kunnossa. Häivytys ja pystyliike säilyvät ennallaan.
   Estetään ylivuoto sen sijaan että piilotettaisiin se overflow-x:clipillä —
   clip säiliössä peittäisi myös tulevat aidot ylivuodot tarkistuksilta. */
@media (max-width: 1023px) {
	.vasemmalta, .oikealta { --x-liike: 0px; }
}

/* 3. LOPPUTILANNE (.appear-luokka, jonka JS lisää) */
.feidaus.appear, 
.vasemmalta.appear, 
.oikealta.appear, 
.ylhaalta.appear, 
.alhaalta.appear,
.skaalaus.appear,
.perspektiivi.appear {
    --x-liike: 0px;
    --y-liike: 0px;
    --skaala: 1;
    --kaanto-y: 0deg;
    opacity: 1;
}

/* 4. YLEISET VIIVEET (Koskee kaikkia efektejä kerralla) */
.viive250 { transition-delay: 0.25s; }
.viive500 { transition-delay: 0.5s; }
.viive750 { transition-delay: 0.75s; }
.viive1000 { transition-delay: 0.5s; }
.viive1500 { transition-delay: 1.5s; }
.viive2000 { transition-delay: 2s; }

/* 5. ERILLISET KESTOT */

/* Feidaus (Opacity) */
.feidaus-kesto250  { --kesto-feidaus: 0.25s; }
.feidaus-kesto500  { --kesto-feidaus: 0.5s; }
.feidaus-kesto1000 { --kesto-feidaus: 1s; }

/* Liike (Translate) */
.liike-kesto250  { --kesto-liike: 0.25s; }
.liike-kesto500  { --kesto-liike: 0.5s; }
.liike-kesto1000 { --kesto-liike: 1s; }

/* Skaalaus (Scale) */
.skaalaus-kesto250  { --kesto-skaalaus: 0.25s; }
.skaalaus-kesto500  { --kesto-skaalaus: 0.5s; }
.skaalaus-kesto1000 { --kesto-skaalaus: 1s; }

/* Perspektiivi (Rotate) */
.perspek-kesto250  { --kesto-perspek: 0.25s; }
.perspek-kesto500  { --kesto-perspek: 0.5s; }
.perspek-kesto1000 { --kesto-perspek: 1s; }
.perspek-kesto1500 { --kesto-perspek: 1.5s; }


/* 6. ERILLISET EASINGIT */

/* Liike Easing */
.liike-ease-in     { --ease-liike: ease-in; }
.liike-ease-linear { --ease-liike: linear; }
.liike-ease-pomppu { --ease-liike: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Skaalaus Easing */
.skaalaus-ease-in     { --ease-skaalaus: ease-in; }
.skaalaus-ease-linear { --ease-skaalaus: linear; }
.skaalaus-ease-pomppu { --ease-skaalaus: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Perspektiivi Easing */
.perspek-ease-in     { --ease-perspek: ease-in; }
.perspek-ease-linear { --ease-perspek: linear; }
.perspek-ease-pomppu { --ease-perspek: cubic-bezier(0.175, 0.885, 0.32, 1.275); }