/* Homepage: wat alleen de negen homepages hebben, bovenop de glaslaag van de site (css/site-glass.css)
 * (founder 11 nov 2026; uitgeprobeerd op /glass-morphism/). scripts/home-lively.mjs zet data-glass,
 * data-glass-smoke en data-glass-home op <html>. Elke pagina draagt de klasse "home" (een rest van WordPress),
 * dus het onderscheid zit in data-glass-home, niet in body.home.
 *
 * Onderdelen: de linkerkant van de hero (keuze, knoppen), het dashboard in de hero (zonder "Verken de demo" en
 * "Voorbeeld"), de schuifkaarten, het overzicht, "Koppel je shop" als zwevend okerkleurig glazen paneel, de
 * prijzen en het slot als zwevend donker glazen paneel met de stippen en de puls van de hero. */

html[data-glass-home] body.home .hero > .sg-smoke {
	display: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	/* De zwevende meldingen over het dashboard: glas op glas. */
	html[data-glass-home] body.home .hero .dm-pop {
		background: color-mix(in srgb, var(--card) 64%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
		border-color: var(--gl-edge);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 24px 48px -20px rgba(0, 0, 0, 0.35);
	}
	html[data-glass-home][data-theme="dark"] body.home .hero .dm-pop {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 48px -20px rgba(0, 0, 0, 0.8);
	}
}

/* ================================================================== hero: de linkerkant
 * Een vleugje van het glas van het dashboard ernaast (founder, 11 nov 2026): de keuze, de knoppen en het
 * labeltje krijgen glas; de streepjeslijn en de tekst blijven zoals ze zijn. */
html[data-glass-home] body.home .hero .hero-route-seg {
	background: var(--gl-fill);
	border-color: var(--gl-edge);
	box-shadow: inset 0 1px 0 var(--gl-hi), 0 12px 28px -18px rgba(0, 0, 0, 0.25);
}
html[data-glass-home] body.home .hero :is(.hero-copy:not([data-route="new"]) .hero-route-opt[data-route-opt="yes"], .hero-copy[data-route="new"] .hero-route-opt[data-route-opt="new"]) {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
}
/* Alleen de keuze die niet gekozen is krijgt een glazen hover; de gekozen blijft inkt, ook onder de muis
 * (anders verdween zijn witte tekst op het lichte glas). */
html[data-glass-home] body.home .hero :is(.hero-copy:not([data-route="new"]) .hero-route-opt[data-route-opt="new"], .hero-copy[data-route="new"] .hero-route-opt[data-route-opt="yes"]):hover {
	background: color-mix(in srgb, var(--hover) 60%, transparent);
}
html[data-glass-home] body.home .hero .hero-copy:not([data-route="new"]) .hero-route-tag {
	background: color-mix(in srgb, var(--paper) 55%, transparent);
	box-shadow: inset 0 0 0 1px var(--gl-edge-soft);
}
html[data-glass-home][data-lv2] body.home .hero .hero-demo-btn:not(:hover):not(:focus-visible):not(:active) {
	background: var(--gl-fill);
	box-shadow: inset 0 1px 0 var(--gl-hi), 0 12px 28px -18px rgba(0, 0, 0, 0.25);
}

/* ================================================================== hero: geen lijn om de tekst
 * De streepjeslijn hoorde bij het stippenraster, dat hier niet is; een lichtrand is geprobeerd en weer
 * weggehaald (founder, 11 nov 2026). */
html[data-glass-home][data-lv2] body.home .hero .sg-hero-frame {
	display: none;
}

/* ================================================================== hero: het dashboard als glas */
html[data-glass-home] body.home .hero .demo-frame {
	background: color-mix(in srgb, var(--card) 58%, transparent);
	border-color: var(--gl-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 70px -30px rgba(0, 0, 0, 0.35);
}
html[data-glass-home] body.home .hero .dm-rail {
	background: color-mix(in srgb, var(--paper-2) 40%, transparent);
	border-right-color: color-mix(in srgb, var(--line) 60%, transparent);
}
html[data-glass-home] body.home .hero :is(.dm-card, .dm-ri.is-on, .dm-grow-btn) {
	background: color-mix(in srgb, var(--card) 62%, transparent);
	border-color: rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* "Vandaag te doen", de cijfers en "Winst per dag" samen in één glazen venster, met fijne scheidingslijnen
 * in plaats van drie losse vensters (founder, 11 nov 2026). De ruimte tussen de drie verdwijnt; die tussen
 * "Overzicht" en het venster blijft. */
html[data-glass-home][data-lv2] body.home .hero {
	--gl-win-edge: rgba(255, 255, 255, 0.6);
	--gl-win-div: color-mix(in srgb, var(--line) 75%, transparent);
}
html[data-glass-home][data-theme="dark"][data-lv2] body.home .hero {
	--gl-win-edge: rgba(255, 255, 255, 0.12);
	--gl-win-div: rgba(255, 255, 255, 0.08);
}
html[data-glass-home][data-lv2] body.home .hero .dm-main {
	row-gap: 0;
}
html[data-glass-home][data-lv2] body.home .hero .dm-today-slot {
	margin-top: 0.72em;
}
html[data-glass-home][data-lv2] body.home .hero :is(.dm-today, .dm-kpis, .dm-chart) {
	background: color-mix(in srgb, var(--card) 62%, transparent);
	border: 1px solid var(--gl-win-edge);
	box-shadow: none;
}
html[data-glass-home][data-lv2] body.home .hero .dm-today {
	border-bottom: 0;
	border-radius: 0.75em 0.75em 0 0;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
html[data-glass-home][data-theme="dark"][data-lv2] body.home .hero .dm-today {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-glass-home][data-lv2] body.home .hero .dm-kpis {
	margin-top: -1px;
	padding-block: 0.7em;
	border-radius: 0;
	border-top-color: var(--gl-win-div);
	border-bottom-color: var(--gl-win-div);
}
html[data-glass-home][data-lv2] body.home .hero .dm-chart {
	border-top: 0;
	border-radius: 0 0 0.75em 0.75em;
}
html[data-glass-home][data-theme="dark"] body.home .hero .demo-frame {
	background: color-mix(in srgb, var(--card) 55%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 30px 70px -30px rgba(0, 0, 0, 0.8);
}
html[data-glass-home][data-theme="dark"] body.home .hero :is(.dm-card, .dm-ri.is-on, .dm-grow-btn) {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Zonder "Verken de demo" en "Voorbeeld" (founder, 11 nov 2026). Het hele dashboard blijft een link naar
 * de demo; schermlezers horen nog "Open de demo" (.hero-demo-sr), en met het toetsenbord krijgt het
 * venster een rand. */
/* Het labeltje "Nog niet op Kaufland" in het venster van de Kansen-kaart (founder, 11 nov 2026). */
html[data-glass-home] body.home .lk-vis-countries .kc-new {
	display: none;
}
html[data-glass-home] body.home .hero .dm-sample {
	display: none;
}
/* Onzichtbaar maar op zijn plek: het Grip-kaartje lijnt zich links ervan uit (landingv2-hero.js
 * placeGrip), zoals voorheen (founder, 11 nov 2026: niet verder naar rechts). */
html[data-glass-home] body.home .hero .hero-demo-go {
	visibility: hidden;
}
html[data-glass-home] body.home .hero .hero-demo-open:focus-visible .demo-frame {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

/* ================================================================== de schuifkaarten
 * Dicht in hun eigen kleur (geen spookbeeld van de kaart erachter), glas door licht. Alles statisch
 * geschilderd; schuiven en schalen gaan via de GPU zonder opnieuw te tekenen. */
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card:is(.sk-c1, .sk-c2, .sk-c3, .sk-c4, .sk-c5) {
	isolation: isolate;
	border: 1px solid var(--gl-edge-soft);
	box-shadow: inset 0 1px 0 var(--gl-hi), inset 0 0 0 1px rgba(255, 255, 255, 0.05), var(--gl-shadow);
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card:is(.sk-c2, .sk-c5) {
	border-color: var(--gl-edge);
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .sk-stack > .sk-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 22%, transparent 44%),
		radial-gradient(60% 55% at 88% 108%, rgba(255, 255, 255, 0.1), transparent 70%),
		radial-gradient(120% 50% at 50% -12%, rgba(255, 255, 255, 0.1), transparent 60%);
}
/* De vensters in de kaarten: een lichte glasrand. */
html[data-glass-home] body.home .sk-card .lk-vis {
	border: 1px solid var(--gl-edge);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 22px 44px -22px rgba(0, 0, 0, 0.45);
}
html[data-glass-home][data-theme="dark"] body.home .sk-card .lk-vis {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 22px 44px -22px rgba(0, 0, 0, 0.8);
}
html[data-glass-home] body.home .sk-card .gx-box {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 44px -22px rgba(0, 0, 0, 0.55);
}

/* ================================================================== overzicht: één glazen paneel */
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .sk-grid-cols {
	background: color-mix(in srgb, var(--card) 66%, transparent);
	border-color: var(--gl-edge);
	box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
}
html[data-glass-home].sg-lively body.home .sg-grid-grip {
	background: color-mix(in srgb, var(--paper-2) 55%, transparent);
}
html[data-glass-home] body.home .sk-grid-ico {
	background: color-mix(in srgb, var(--paper) 70%, transparent);
}

/* ================================================================== "Koppel je shop": zwevend glazen paneel
 * Geen band over de volle breedte meer: een paneel in okerglas op de doorlopende achtergrond, met de
 * stappen in glazen rondjes. De telefoon erin blijft zoals hij is (founder, 11 nov 2026). */
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .sk-connect {
	background: transparent;
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .sk-connect .sk-cn {
	position: relative;
	padding: clamp(28px, calc(4vw / var(--vz, 1)), 56px);
	border: 1px solid var(--gl-edge);
	border-radius: 28px;
	background:
		linear-gradient(155deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 55%),
		color-mix(in srgb, var(--lv-ochre-wash) 74%, transparent);
	box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
}
html[data-glass-home][data-theme="dark"][data-lv2][lang] body.home:not(.sg-academy) .sk-connect .sk-cn {
	background:
		linear-gradient(155deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 55%),
		color-mix(in srgb, var(--lv-ochre-wash) 82%, transparent);
}
html[data-glass-home] body.home .sk-connect .sk-num {
	background: var(--gl-fill);
	border-color: var(--gl-edge);
	box-shadow: inset 0 1px 0 var(--gl-hi);
}

/* ================================================================== prijzen: glazen kaarten */
html[data-glass-home] body.home #pricing .plan {
	background: color-mix(in srgb, var(--card) 66%, transparent);
	border-color: var(--gl-edge);
	box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow);
}
html[data-glass-home] body.home #pricing .plan.plan-rec {
	background: rgba(11, 11, 11, 0.88);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--gl-shadow);
}

/* ================================================================== slot: zwevend donker glazen paneel
 * Met de stippen en de puls van de hero erin (dezelfde regels als de slotband op de home, op .final-box). */
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .section.final {
	background: transparent;
	border-block: 0;
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .section.final::before,
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .section.final::after {
	display: none;
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .final-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(32px, calc(4vw / var(--vz, 1)), 56px) clamp(24px, calc(4vw / var(--vz, 1)), 56px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 28px;
	background: rgba(11, 11, 11, 0.9);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--gl-shadow);
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .final-box::before,
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .final-box::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle, var(--fin-dot) 1.25px, transparent 1.75px);
	background-size: 22px 22px;
	background-position: 11px 11px;
	-webkit-mask-image: var(--fin-area);
	mask-image: var(--fin-area);
}
html[data-glass-home][data-lv2][lang] body.home:not(.sg-academy) .final-box::after {
	opacity: 0;
	background-image: radial-gradient(circle, var(--fin-dot-strong) 1.25px, transparent 1.75px);
	-webkit-mask-image: radial-gradient(circle 1100px at var(--fin-x) var(--fin-y), transparent calc(var(--sg-breath) - var(--ring-a, 220px)), #000 calc(var(--sg-breath) - var(--ring-b, 60px)), #000 var(--sg-breath), transparent calc(var(--sg-breath) + var(--ring-c, 90px))), var(--fin-area);
	-webkit-mask-composite: source-in;
	mask-image: radial-gradient(circle 1100px at var(--fin-x) var(--fin-y), transparent calc(var(--sg-breath) - var(--ring-a, 220px)), #000 calc(var(--sg-breath) - var(--ring-b, 60px)), #000 var(--sg-breath), transparent calc(var(--sg-breath) + var(--ring-c, 90px))), var(--fin-area);
	mask-composite: intersect;
}
@media (prefers-reduced-motion: no-preference) {
	html[data-glass-home].sg-lively body.home:not(.sg-academy) .section.final.sg-in .final-box::after {
		animation: sg-breath 5s cubic-bezier(0.35, 0.1, 0.35, 1) 0.1s 1 both;
	}
	html[data-glass-home].sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-a .final-box::after {
		animation: sg-breath-now-a 3.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
	html[data-glass-home].sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-b .final-box::after {
		animation: sg-breath-now-b 3.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
}
@media (max-width: 959px) and (prefers-reduced-motion: no-preference) {
	html[data-glass-home].sg-lively body.home:not(.sg-academy) .section.final.sg-in .final-box::after {
		animation: sg-phone-breath 3.2s cubic-bezier(0.35, 0.1, 0.35, 1) 0.1s 1 both;
	}
	html[data-glass-home].sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-a .final-box::after {
		animation: sg-phone-pulse-a 2.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
	html[data-glass-home].sg-lively body.home:not(.sg-academy) .section.final.sg-pulse-b .final-box::after {
		animation: sg-phone-pulse-b 2.6s cubic-bezier(0.25, 0.5, 0.35, 1) 0s 1 both;
	}
}

/* ================================================================== de gloed (data-glass-glow)
 * Founder 11 nov 2026: geen rook die over de hele pagina loopt, maar drie gloeden, elk achter een product:
 * het dashboard in de hero (de tekst links staat op rust), de telefoon bij "Koppel je shop" en het slotpaneel
 * (vooral rond de knop). Het glas van het dashboard heeft er zo iets om te breken. Licht: oker, abrikoos en
 * zacht rozé; donker: wijnrood, amber en koper. Langzaam drijvend, stil bij minder beweging. Het verhaal
 * (de kaarten, het overzicht) houdt geen rook: daar dragen de kleuren van de kaarten het. */
/* De gloed zelf (kleuren, drie vlekken, het drijven) staat in css/site-glass.css, want de Academy-landing
 * heeft hem ook; hier alleen waar hij op de homepage ligt. */
/* Achter het dashboard: iets groter dan het venster, het zwaartepunt rechts van het midden. */
.sg-glow-hero { inset: -22% -16% -26% -12%; }
/* Achter de telefoon: smal en hoog, zoals het toestel. */
/* Elke drager is een eigen laag (isolation), zodat de gloed achter de inhoud valt maar vóór de achtergrond van
 * de sectie. */
html[data-glass-glow] body.home :is(.hero .hero-demo-box, #connect .sk-cn-media, .section.final > .wrap) { isolation: isolate; }
#connect .sk-cn-media { position: relative; }
.sg-glow-phone { inset: -6% -30% -10% -30%; }
.sg-glow-phone .g1 { left: 18%; top: 4%; width: 64%; height: 52%; }
.sg-glow-phone .g2 { left: 26%; top: 38%; width: 60%; height: 50%; }
.sg-glow-phone .g3 { left: 8%; top: 54%; width: 50%; height: 40%; }
/* Rond het slotpaneel, het zwaarst rechts bij de knop. */
html[data-glass-glow] body.home .section.final > .wrap { position: relative; }
.sg-glow-final { inset: -16% -3% -18% -3%; }
.sg-glow-final .g1 { left: 52%; top: 2%; width: 50%; height: 96%; }
.sg-glow-final .g2 { left: 0; top: 10%; width: 46%; height: 80%; }
.sg-glow-final .g3 { left: 30%; top: 30%; width: 40%; height: 70%; }
/* De gloed mag nooit zijwaarts scrollen veroorzaken. */
html[data-glass-glow] body.home :is(.hero, #connect, .section.final) { overflow-x: clip; }
@media (max-width: 959px) {
	.sg-glow-hero { inset: -10% -10% -14% -10%; }
	.sg-glow-final { inset: -10% 0 -12% 0; }
	.sg-glow-phone { inset: -4% -8% -6% -8%; }
}
/* De voet loopt door op dezelfde achtergrond, zonder scheidingslijn (zoals eerst met de rook). */
html[data-glass-glow] .site-footer {
	background: transparent;
	border-top: 0;
}
/* Met de gloed staat de oude rook van de hero uit (die liep ook achter de tekst). */
html[data-glass-glow] body.home .hero > .sg-smoke {
	display: none;
}