/* cubelegend-loaders.css — de laadschermen (design_handoff_animals_loadingscreens
   05 laden · 06 tussentijds · 10 geen verbinding · 12 laden compact).
   Laadt in <head> NA CubeRunnerz.css: het bootscherm (<launchLoader>) staat in
   de HTML vóór het eerste script en moet bij de eerste frame al kloppen.
   De apps tekenen 05 zelf (LoadingView op iOS/Android): maten/kleuren hier
   wijzigen = daar meewijzigen. */

@keyframes ld_bob     { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes ld_glow    { 0%,100% { opacity:.55; transform:scale(.96); } 50% { opacity:1; transform:scale(1.04); } }
@keyframes ld_twinkle { 0%,100% { opacity:.35; transform:scale(.7) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(20deg); } }
@keyframes ld_slide   { 0% { left:-40%; } 100% { left:100%; } }
@keyframes ld_orbit   { to { transform:rotate(360deg); } }
@keyframes ld_orbit_r { to { transform:rotate(-360deg); } }
@keyframes ld_pulse   { 0%,100% { transform:scale(1); opacity:.9; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes ld_spin    { to { transform:rotate(360deg); } }
@keyframes ld_count   { from { stroke-dashoffset:0; } to { stroke-dashoffset:113; } }
@keyframes ld_fade    { from { opacity:0; } to { opacity:1; } }
@keyframes ld_sheet   { from { transform:translateY(-44%) scale(.94); opacity:0; } to { transform:translateY(-44%) scale(1); opacity:1; } }

/* ---- 05/06 · het volledige-schermlaadscherm --------------------------- */
launchLoader
{
	position:fixed; inset:0; width:100vw; height:100vh; height:var(--vh100); z-index:4; color:#fff; overflow:hidden;
	font-family:p, sans-serif; background:#0b0318; display:block; opacity:1; transition:opacity .35s ease;
}
launchLoader.loaded { opacity:0; pointer-events:none; }
launchLoader.hidden { display:none; }
.ld_bg
{
	position:absolute; inset:0; pointer-events:none;
	background:radial-gradient(ellipse at 50% 40%, #9a00ff80, transparent 60%), linear-gradient(#0b0318aa, #0b0318f5 80%), url(/public/img/cbg0.jpeg) center/cover, #0b0318;
}
.ld_kolom
{
	position:relative; height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;
	padding:calc(env(safe-area-inset-top) + 60px) 32px calc(env(safe-area-inset-bottom) + 48px);
}
.ld_midden { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; width:100%; min-height:0; }
.ld_art { position:relative; width:240px; height:240px; flex:none; }
.ld_art_glow { position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle, #ffb30088, #9a00ff55 55%, transparent 72%); filter:blur(18px); animation:ld_glow 2.4s ease-in-out infinite; }
.ld_art > img { position:relative; width:240px; height:240px; object-fit:contain; animation:ld_bob 2.4s ease-in-out infinite; }
/* de roterende flair op de kubusrand (ontwerp: hoek rechtsboven van het logo) */
.ld_flair { position:absolute; left:140px; top:-4px; width:96px; height:96px; z-index:2; pointer-events:none; animation:ld_bob 2.4s ease-in-out infinite; }
.ld_flair svg { width:96px; height:96px; filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 14px #FFC107); animation:ld_twinkle 2.6s ease-in-out infinite; }
.ld_flair path { fill:#fff; }
.ld_tagline
{
	display:flex; align-items:center; gap:6px; max-width:100%; box-sizing:border-box; height:28px; padding:0 11px; border-radius:14px;
	background:#00000080; border:1px solid #ffc10755; font-family:headers; font-size:11.5px; letter-spacing:0; color:#FFC46B; white-space:nowrap; overflow:hidden;
}
.ld_tagline svg { flex:none; width:13px; height:13px; fill:#FFC107; }
.ld_titel { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ld_titel b { font-family:headers; font-size:26px; letter-spacing:1.5px; text-shadow:0 3px 0 #000; font-weight:normal; }
.ld_titel span { font-size:15px; color:#ffffffb3; text-wrap:pretty; }
/* De weetjeskaart wacht onder de rand van het scherm en schuift pas in als het laden lang duurt
   (.ld_tip_in, loaders.js: na 1,5 s). Zijn plek in de kolom blijft gereserveerd: het artwork
   verspringt niet als hij komt. */
.ld_tip
{
	width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:14px; background:#00000080; border:1px solid #ffffff1f;
	opacity:0; transform:translateY(70vh); transition:transform .5s cubic-bezier(.2,.9,.25,1), opacity .25s ease;
}
.ld_tip.ld_tip_in { opacity:1; transform:none; }
.ld_tip_kop { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ld_tip_kop > span:first-child { font-family:headers; font-size:13px; letter-spacing:1.5px; color:#FFC46B; }
.ld_tip_disc { display:flex; align-items:center; gap:6px; font-family:headers; font-size:12px; letter-spacing:1px; white-space:nowrap; color:#fff; }
.ld_tip_disc img { width:20px; height:20px; }
.ld_tip_tekst { min-height:66px; font-size:15px; line-height:22px; color:#ffffffdd; text-wrap:pretty; transition:opacity .3s; }
.ld_tip.ld_wissel .ld_tip_tekst { opacity:0; }
.ld_voet { width:100%; display:flex; flex-direction:column; gap:12px; flex:none; }
.ld_status { display:flex; justify-content:space-between; align-items:baseline; }
.ld_status > span:first-child { font-size:15px; color:#ffffffcc; }
.ld_status > span:last-child { font-family:headers; font-size:18px; letter-spacing:1px; color:#FFC46B; }
launchLoader.ld_tussen .ld_status { justify-content:center; }
launchLoader.ld_tussen .ld_status > span:last-child { display:none; }
.ld_balk_rand { border:4px solid #000; border-radius:14px; }
.ld_balk { position:relative; height:18px; border-radius:10px; background:#00000099; border:2px solid #ffffff1f; overflow:hidden; }
.ld_balk > i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:8px; background:linear-gradient(0deg, #e09b00, #FFC107); box-shadow:inset 0 0 0 2px #ffe07a; transition:width .25s linear; }
.ld_balk > i::after { content:''; position:absolute; top:2px; left:3px; right:3px; height:40%; background:#fff; opacity:.35; border-radius:4px; }
launchLoader.ld_tussen .ld_balk > i { width:38%; left:-40%; transition:none; animation:ld_slide 1.3s cubic-bezier(.5,0,.5,1) infinite; }
launchLoader .ld_titel { display:none; }
launchLoader.ld_tussen .ld_titel { display:flex; }
launchLoader.ld_tussen .ld_tagline { display:none; }

/* ---- 12 · laden compact: kaart (blokkeert kort) en toast (achtergrond) --- */
.center-body.ld_compact
{
	background:radial-gradient(circle at 50% 50%, #0b031855, #0b0318cc 65%) !important;
	backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
	animation:ld_fade .18s ease both;
}
.ld_kaart_rand { border:4px solid #000; border-radius:30px; box-shadow:0 24px 60px #000000bb; }
.ld_kaart
{
	width:220px; box-sizing:border-box; border:3px solid #6631c3; border-radius:26px; background:linear-gradient(0deg, #2a0650 50%, #5b14a3);
	box-shadow:inset 0 0 26px #00000066; padding:20px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.ld_kaart b { font-family:headers; font-size:18px; letter-spacing:2px; text-shadow:0 2px #000; color:#fff; font-weight:normal; }
.ld_orbit { position:relative; width:160px; height:160px; flex:none; }
.ld_orbit_glow { position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle, #ffb30066, #9a00ff44 55%, transparent 72%); filter:blur(10px); animation:ld_pulse 2s ease-in-out infinite; }
.ld_orbit_ring
{
	position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 55%, #ffc10733 70%, #FFC107 96%, #fff 100%);
	-webkit-mask:radial-gradient(circle, transparent 73px, #000 74px); mask:radial-gradient(circle, transparent 73px, #000 74px); animation:ld_orbit 1.1s linear infinite;
}
.ld_orbit_bol { position:absolute; inset:0; animation:ld_orbit 1.1s linear infinite; }
.ld_orbit_bol i { position:absolute; left:50%; top:-3px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff, 0 0 16px #FFC107, 0 0 26px #FFC107; }
.ld_orbit_dash { position:absolute; inset:14px; border-radius:50%; border:2px dashed #b04dff66; animation:ld_orbit_r 6s linear infinite; }
.ld_orbit > img { position:absolute; left:50%; top:50%; width:118px; height:118px; margin:-59px 0 0 -59px; object-fit:contain; filter:drop-shadow(0 8px 14px #000000aa); animation:ld_bob 1.8s ease-in-out infinite; }
.ld_toast_rand { position:fixed; left:14px; right:14px; top:calc(env(safe-area-inset-top) + 58px); z-index:999; border:4px solid #000; border-radius:22px; box-shadow:0 18px 40px #000000aa; animation:ld_fade .2s ease both; pointer-events:none; }
.ld_toast { display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; border:3px solid #6631c3; border-radius:18px; background:linear-gradient(0deg, #2a0650 50%, #5b14a3); color:#fff; }
.ld_toast .ld_orbit { width:60px; height:60px; }
.ld_toast .ld_orbit_ring { -webkit-mask:radial-gradient(circle, transparent 23px, #000 24px); mask:radial-gradient(circle, transparent 23px, #000 24px); }
.ld_toast .ld_orbit > img { width:44px; height:44px; margin:-22px 0 0 -22px; }
.ld_toast > div { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ld_toast b { font-family:headers; font-size:16px; letter-spacing:1px; font-weight:normal; }
.ld_toast span { font-size:13px; color:#ffffffb3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- 10 · geen verbinding (in-app modal) ------------------------------- */
.ld_offline { position:fixed; inset:0; z-index:1000; color:#fff; font-family:p, sans-serif; animation:ld_fade .25s ease both; }
.ld_offline_dim { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%, #0b031866, #0b0318d9 70%); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.ld_offline_vel { position:absolute; left:22px; right:22px; top:50%; transform:translateY(-44%); animation:ld_sheet .35s cubic-bezier(.2,.9,.3,1) both; }
.ld_offline_mascotte { position:absolute; left:50%; top:-168px; width:210px; height:200px; margin-left:-105px; object-fit:contain; z-index:1; filter:drop-shadow(0 12px 22px #000000aa); animation:ld_bob 2.6s ease-in-out infinite; }
.ld_offline_rand { position:relative; z-index:2; border:4px solid #000; border-radius:28px; box-shadow:0 30px 70px #000000cc; }
.ld_offline_kaart
{
	position:relative; border:3px solid #6631c3; border-radius:24px; background:linear-gradient(0deg, #2a0650 50%, #5b14a3); box-shadow:inset 0 0 30px #00000066;
	padding:40px 18px 18px; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.ld_offline_sticker { position:absolute; left:50%; top:-22px; transform:translateX(-50%) rotate(-2deg); border:4px solid #000; border-radius:14px; box-shadow:0 5px 0 #00000080; }
.ld_offline_sticker > div { position:relative; display:flex; align-items:center; gap:8px; padding:6px 16px; border:2px solid #ff9a9a; border-radius:10px; background:linear-gradient(0deg, #b3261e, #ff5a5a); overflow:hidden; white-space:nowrap; }
.ld_offline_sticker > div::before { content:''; position:absolute; top:2px; left:2px; right:2px; height:42%; background:#fff; opacity:.25; border-radius:7px; }
.ld_offline_sticker svg { position:relative; width:20px; height:20px; }
.ld_offline_sticker b { position:relative; font-family:headers; font-size:20px; letter-spacing:2px; text-shadow:0 2px #000; font-weight:normal; }
.ld_offline_titel { font-family:headers; font-size:28px; letter-spacing:1px; line-height:1.05; text-shadow:0 3px 0 #000; }
.ld_offline_titel span { color:#FFC107; }
.ld_offline_tekst { font-size:16px; line-height:23px; color:#ffffffd6; text-wrap:pretty; max-width:280px; }
.ld_offline_pil { display:flex; align-items:center; gap:10px; height:40px; padding:0 14px 0 6px; border-radius:20px; background:#00000066; border:1px solid #ff5a5a80; }
.ld_offline.ld_bezig .ld_offline_pil { border-color:#ffc10780; }
.ld_offline_pil svg { width:30px; height:30px; }
.ld_offline_pil .ld_ring { transform:rotate(-90deg); }
.ld_offline_pil .ld_ring circle:last-child { stroke-dasharray:113; animation:ld_count 5s linear infinite; }
.ld_offline_pil .ld_spinner { display:none; animation:ld_spin .8s linear infinite; }
.ld_offline.ld_bezig .ld_ring { display:none; }
.ld_offline.ld_bezig .ld_spinner { display:block; }
.ld_offline_pil span { font-size:14px; color:#fff; white-space:nowrap; }
.ld_offline_cta_rand { width:100%; border:4px solid #000; border-radius:17px; box-shadow:0 0 30px #ffc10755; margin-top:2px; box-sizing:border-box; }
.ld_offline_cta
{
	position:relative; width:100%; height:58px; border:3px solid #ffe07a; border-radius:13px; background:linear-gradient(0deg, #e09b00, #FFC107); cursor:pointer; overflow:hidden;
	font-family:headers; font-size:21px; letter-spacing:2px; color:#3a1c00; box-sizing:border-box; display:flex; align-items:center; justify-content:center;
	-webkit-appearance:none; appearance:none; /* iOS: een native knop-uiterlijk kan de font-keuze negeren */
}
.ld_offline_cta::before { content:''; position:absolute; top:3px; left:3px; right:3px; height:44%; background:#fff; opacity:.32; border-radius:8px; }
/* het opschrift expliciet in de CTA-font (Super Sedan = `headers`): een
   algemene span-regel elders zet anders de tekstfont op de knoptekst — zelfde
   reden waarom cubelegend-animals.css `.an_cta span` apart benoemt (eigenaar, 5 nov) */
.ld_offline_cta span { position:relative; font-family:headers; letter-spacing:2px; }
.ld_offline.ld_bezig .ld_offline_cta { opacity:.85; }
.ld_offline_terug { padding:6px 12px; background:none; border:0; cursor:pointer; font-family:p, sans-serif; font-size:15px; color:#ffffffb3; }
/* vóór de boot is er geen vorig scherm (de eerste appData-aanvraag mislukte) */
.ld_offline.ld_offline_boot .ld_offline_terug { display:none; }