/*
 * My True Why — de voordeur. Hoort bij [mtw_voordeur]; de basis staat in mtw.css.
 *
 * Twee deuren van gelijk gewicht, elk een boog waardoor je een eigen wereld ziet: links de kroes
 * (de test), rechts de kaart onder de sterren (de kaartreis). Achter de pagina lopen die twee in
 * elkaar over: gloed van links onder, sterren van rechts boven.
 */

.mtw-pagina .mtw-voordeur { position: relative; width: 100%; }

/* ---------- De achtergrond: twee werelden in één beeld ---------- */

/* Achter het eerste scherm (en de kop van de site): gloed van links onder, sterren van rechts boven.
   De laag loopt een eind door onder het eerste scherm en dooft daar uit, zodat er geen naad ontstaat. */
.mtw-pagina .mtw-vd-eerste { position: relative; }
.mtw-pagina .mtw-vd-eerste::before, .mtw-pagina .mtw-vd-eerste::after { content: ""; position: absolute; z-index: -1; top: -120px; bottom: -260px; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; }
.mtw-pagina .mtw-vd-eerste::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(ellipse 62% 400px at 14% calc(100% - 240px), rgba(226, 140, 48, 0.36), transparent 70%),
		radial-gradient(ellipse 84% 520px at 6% calc(100% - 200px), rgba(140, 50, 30, 0.5), transparent 72%),
		radial-gradient(ellipse 72% 480px at 92% calc(100% - 220px), rgba(122, 46, 42, 0.44), transparent 72%);
	-webkit-mask-image: linear-gradient(#000 calc(100% - 230px), transparent); mask-image: linear-gradient(#000 calc(100% - 230px), transparent); }
.mtw-pagina .mtw-vd-eerste::after {
	background-image:
		radial-gradient(1.2px 1.2px at 22px 34px, #FFF4DC 50%, transparent 51%),
		radial-gradient(1px 1px at 96px 12px, #E9CC84 50%, transparent 51%),
		radial-gradient(0.8px 0.8px at 148px 88px, #FFF4DC 50%, transparent 51%),
		radial-gradient(1px 1px at 60px 132px, rgba(255, 244, 220, 0.7) 50%, transparent 51%),
		radial-gradient(0.8px 0.8px at 190px 158px, rgba(233, 204, 132, 0.8) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 250px 60px, rgba(255, 244, 220, 0.85) 50%, transparent 51%),
		radial-gradient(0.8px 0.8px at 290px 200px, #FFF4DC 50%, transparent 51%),
		radial-gradient(1px 1px at 120px 236px, rgba(255, 244, 220, 0.6) 50%, transparent 51%);
	background-size: 320px 270px;
	-webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 72%), linear-gradient(#000 20%, transparent 70%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(100deg, transparent 30%, #000 72%), linear-gradient(#000 20%, transparent 70%);
	mask-composite: intersect; }

/* ---------- Het eerste scherm ---------- */

.mtw-pagina .mtw-vd-eerste { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: calc(100vh - 52px - var(--sr-cookie-h, 0px)); min-height: calc(100svh - 52px - var(--sr-cookie-h, 0px)); padding: 6px 16px 26px; }

.mtw-pagina .mtw-verder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 6px; max-width: 100%; margin: 0 0 14px; padding: 2px 8px 2px 16px; border: 1px solid rgba(217, 178, 90, 0.45); border-radius: 24px; background: rgba(20, 13, 11, 0.7); }
.mtw-pagina .mtw-verder[hidden], .mtw-pagina .mtw-verder__link[hidden] { display: none; }
.mtw-pagina .mtw-verder__kop { font-family: var(--mtw-kap); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mtw-accent); padding: 8px 6px 8px 0; }
.mtw-pagina .mtw-verder__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: 15.5px; line-height: 1.25; color: var(--mtw-gedempt); text-decoration: none; }
.mtw-pagina .mtw-verder__link strong { font-family: var(--mtw-display); font-weight: 400; font-size: 18px; color: var(--mtw-inkt); white-space: nowrap; }
.mtw-pagina .mtw-verder__link .sr-pijl { color: var(--mtw-goud); }
.mtw-pagina .mtw-verder__link:hover { color: var(--mtw-inkt); background: rgba(217, 178, 90, 0.1); }

.mtw-pagina .mtw-vd-kop { text-align: center; }
.mtw-pagina .mtw-vd-naam { font-size: clamp(50px, 13.4vw, 118px); font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; padding-bottom: 0.08em; }
.mtw-pagina .mtw-vd-naam em { font-style: italic; color: var(--mtw-accent); background: var(--mtw-nadruk); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.06em; }
.mtw-pagina .mtw-vd-zin { margin-top: 6px; font-size: clamp(18px, 2.2vw, 25px); line-height: 1.35; color: var(--mtw-inkt); text-wrap: balance; }
.mtw-pagina .mtw-vd-kies { margin-top: 18px; font-size: 11px; }

/* ---------- De twee deuren ---------- */

.mtw-pagina .mtw-deuren { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 58rem); margin-top: 16px; }
.mtw-pagina .mtw-deur { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 999px 999px 18px 18px; border: 1px solid rgba(217, 178, 90, 0.6); background: #140D0B; color: var(--mtw-inkt); text-decoration: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.25s ease, box-shadow 0.35s ease; animation: mtw-deur-op 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.mtw-pagina .mtw-deur--kaart { animation-delay: 0.12s; }
.mtw-pagina .mtw-deur::after { content: ""; position: absolute; inset: 5px; border-radius: 999px 999px 14px 14px; border: 1px solid rgba(217, 178, 90, 0.2); pointer-events: none; }
.mtw-pagina .mtw-deur:hover, .mtw-pagina .mtw-deur:focus-visible { transform: translateY(-4px); border-color: #F3DC9E; }
.mtw-pagina .mtw-deur--test:hover, .mtw-pagina .mtw-deur--test:focus-visible { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 70px rgba(226, 140, 48, 0.28); }
.mtw-pagina .mtw-deur--kaart:hover, .mtw-pagina .mtw-deur--kaart:focus-visible { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 70px rgba(180, 80, 95, 0.3); }
.mtw-pagina .mtw-deur:focus-visible { outline: 2px solid var(--mtw-inkt); outline-offset: 4px; }
@keyframes mtw-deur-op { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.mtw-pagina .mtw-deur__beeld { position: relative; display: block; flex: none; height: clamp(150px, 31vw, 318px); overflow: hidden; }
.mtw-pagina .mtw-deur__beeld::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(transparent, #140D0B); pointer-events: none; }

/* De kroes: een stuk erts met een goudader, korrels die loskomen, het vuur eronder. */
.mtw-pagina .mtw-deur__beeld--kroes { background:
	radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 206, 120, 0.6), transparent 70%),
	radial-gradient(ellipse 130% 66% at 50% 108%, rgba(214, 110, 40, 0.7), transparent 72%),
	radial-gradient(ellipse 160% 100% at 50% 116%, rgba(120, 38, 30, 0.8), transparent 76%),
	linear-gradient(#0C0807, #1A0E0A); }
.mtw-pagina .mtw-deur__beeld--kroes::after { height: 16%; }
.mtw-pagina .mtw-deur__kroes { position: absolute; left: 50%; bottom: -30%; width: 136%; height: 50%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse 62% 74% at 50% 0%, rgba(255, 230, 160, 0.95), rgba(232, 148, 52, 0.8) 42%, rgba(96, 28, 18, 0.92) 78%, #1a0c0a); border-top: 1.5px solid rgba(248, 214, 140, 0.95); box-shadow: inset 0 10px 30px rgba(255, 224, 160, 0.4), 0 -18px 60px rgba(236, 150, 60, 0.35); }
.mtw-pagina .mtw-erts { position: absolute; left: 50%; top: 20%; width: 58%; height: auto; overflow: visible; transform: translateX(-50%) rotate(-4deg); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(236, 160, 70, 0.25)); animation: mtw-zweef 6s ease-in-out infinite; }
.mtw-pagina .mtw-erts__ader { transition: opacity 0.4s ease; opacity: 0.92; }
.mtw-pagina .mtw-deur--test:hover .mtw-erts__ader, .mtw-pagina .mtw-deur--test:focus-visible .mtw-erts__ader { opacity: 1; }
.mtw-pagina .mtw-korrels { position: absolute; left: 50%; top: 66%; display: flex; gap: 9%; width: 30%; justify-content: center; transform: translateX(-50%); }
.mtw-pagina .mtw-korrels i { flex: none; width: 7px; height: 7px; border-radius: 46% 54% 50% 50%; background: var(--mtw-goudglans); box-shadow: 0 0 12px rgba(255, 196, 96, 0.9); animation: mtw-drup 3.2s cubic-bezier(0.5, 0, 0.9, 0.6) infinite; }
.mtw-pagina .mtw-korrels i:nth-child(2) { animation-delay: 1.05s; margin-top: 6px; }
.mtw-pagina .mtw-korrels i:nth-child(3) { animation-delay: 2.1s; margin-top: 2px; }
.mtw-pagina .mtw-vonk { position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%; background: #FFE2A0; opacity: 0; animation: mtw-stijg 4.4s linear infinite; }
.mtw-pagina .mtw-vonk--1 { left: 18%; animation-delay: 0s; }
.mtw-pagina .mtw-vonk--2 { left: 31%; animation-delay: 1.3s; width: 2px; height: 2px; }
.mtw-pagina .mtw-vonk--3 { left: 44%; animation-delay: 2.6s; }
.mtw-pagina .mtw-vonk--4 { left: 58%; animation-delay: 0.7s; width: 2px; height: 2px; background: #F0983C; }
.mtw-pagina .mtw-vonk--5 { left: 69%; animation-delay: 3.3s; }
.mtw-pagina .mtw-vonk--6 { left: 81%; animation-delay: 1.9s; width: 2px; height: 2px; }
.mtw-pagina .mtw-vonk--7 { left: 25%; animation-delay: 3.8s; background: #F0983C; }
@keyframes mtw-zweef { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); } 50% { transform: translateX(-50%) translateY(-5px) rotate(-2.5deg); } }
@keyframes mtw-drup { 0% { opacity: 0; transform: translateY(-8px) scale(0.7); } 18% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(260%) translateY(34px) scale(0.6); } }
@keyframes mtw-stijg { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: 0.95; } 100% { opacity: 0; transform: translate(10px, -150px); } }

/* De kaart: de voorbeeldchart onder de sterren. De --hd-kleuren zijn die van de nacht van de kaartreis. */
.mtw-pagina .mtw-deur__beeld--kaart {
	--hd-midden-boven: #F3DD9C; --hd-midden-onder: #B98A33; --hd-vast-rand: #F8EBC0; --hd-arcering: #F6E3A8; --hd-ster: #DDB766; --hd-buis-buiten: #403935; --hd-buis-binnen: #1E1716; --hd-open-vul: #1B1513; --hd-open-rand: #8A7052; --hd-ontwerp: #D08A48; --hd-persoon: #B5505F; --hd-badge-tekst: #FFF6E4; --hd-gedempt: #B3A088; --hd-pil-tekst: #F3EADA; --hd-pil-o1: #7A5636; --hd-pil-o2: #5C4029; --hd-pil-p1: #6A323C; --hd-pil-p2: #4B222B; --hd-wit: #FFFFFF; --hd-schaduw: #000000; --hd-gedempt-vast: #4A3312; --hd-halo-kern: 0.2; --hd-halo-rand: 0.07; --hd-schaduw-dekking: 0.5; --hd-glans-dekking: 0.18; --hd-pil-rand-dekking: 0.14;
	background:
		radial-gradient(ellipse 120% 60% at 50% 112%, rgba(140, 51, 38, 0.6), transparent 72%),
		linear-gradient(#0E0A0D, #1A0F0E); }
.mtw-pagina .mtw-sterren { position: absolute; inset: 0; opacity: 0.95;
	background-image:
		radial-gradient(1.3px 1.3px at 14px 22px, #FFF4DC 50%, transparent 51%),
		radial-gradient(1px 1px at 58px 64px, #E9CC84 50%, transparent 51%),
		radial-gradient(0.9px 0.9px at 92px 18px, rgba(255, 244, 220, 0.8) 50%, transparent 51%),
		radial-gradient(1px 1px at 30px 104px, rgba(255, 244, 220, 0.7) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 112px 96px, #FFF4DC 50%, transparent 51%),
		radial-gradient(0.8px 0.8px at 76px 128px, rgba(233, 204, 132, 0.85) 50%, transparent 51%);
	background-size: 130px 150px;
	-webkit-mask-image: linear-gradient(#000 40%, transparent 92%); mask-image: linear-gradient(#000 40%, transparent 92%); }
.mtw-pagina .mtw-kring { position: absolute; left: 50%; top: 56%; width: min(66%, 15rem); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(217, 178, 90, 0.34); background: radial-gradient(closest-side, rgba(217, 178, 90, 0.26), rgba(140, 51, 38, 0.24) 55%, transparent 78%); box-shadow: 0 0 0 16px rgba(217, 178, 90, 0.05), 0 0 0 34px rgba(217, 178, 90, 0.03); transition: box-shadow 0.4s ease; }
.mtw-pagina .mtw-deur--kaart:hover .mtw-kring, .mtw-pagina .mtw-deur--kaart:focus-visible .mtw-kring { box-shadow: 0 0 0 16px rgba(217, 178, 90, 0.09), 0 0 0 34px rgba(217, 178, 90, 0.05), 0 0 50px rgba(217, 178, 90, 0.25); }
.mtw-pagina .mtw-chart { position: absolute; left: 50%; top: 11%; bottom: 3%; aspect-ratio: 488 / 652; transform: translateX(-50%); }
.mtw-pagina .mtw-chart .sr-chart { display: block; width: 100%; height: 100%; }
.mtw-pagina .mtw-chart .sr-chart text { font-family: var(--mtw-brood); }
.mtw-pagina .mtw-chart .sr-chart--reis [data-variable], .mtw-pagina .mtw-chart .sr-chart--reis [data-deel="kolommen"] { display: none; }

.mtw-pagina .mtw-deur__tekst { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; gap: 5px; padding: 8px 12px 14px; text-align: center; }
.mtw-pagina .mtw-deur__merk { font-family: var(--mtw-kap); font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mtw-accent); }
.mtw-pagina .mtw-deur__naam { font-family: var(--mtw-display); font-weight: 340; font-size: clamp(27px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -0.015em; font-variation-settings: "opsz" 144; color: var(--mtw-inkt); }
.mtw-pagina .mtw-deur__vraag { font-family: var(--mtw-display); font-style: italic; font-size: clamp(15.5px, 1.7vw, 22px); line-height: 1.25; color: #EADBC2; text-wrap: balance; }
.mtw-pagina .mtw-deur__feiten { margin-top: 4px; font-size: clamp(13.5px, 1.2vw, 16px); line-height: 1.3; color: var(--mtw-gedempt); text-wrap: balance; }
.mtw-pagina .mtw-deur__feiten span { display: block; }
.mtw-pagina .mtw-deur__knop { display: inline-flex; align-items: center; justify-content: center; gap: 9px; align-self: stretch; margin-top: auto; min-height: 46px; padding: 0 8px; border-radius: 999px; font-family: var(--mtw-kap); font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #1F120B; background: var(--mtw-goudglans); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(90, 55, 10, 0.45), 0 8px 26px rgba(217, 150, 60, 0.25); }
.mtw-pagina .mtw-deur__feiten + .mtw-deur__knop { margin-top: auto; }
.mtw-pagina .mtw-deur__tekst > .mtw-deur__feiten { padding-bottom: 12px; }
.mtw-pagina .mtw-deur__knop .sr-pijl { display: none; transition: transform 0.25s ease; }
.mtw-pagina .mtw-deur:hover .mtw-deur__knop .sr-pijl { transform: translateX(4px); }

@media (min-width: 30rem) {
	.mtw-pagina .mtw-deur__knop { font-size: 12.5px; letter-spacing: 0.14em; padding: 0 18px; }
	.mtw-pagina .mtw-deur__knop .sr-pijl { display: block; }
	.mtw-pagina .mtw-deur__tekst { padding: 10px 20px 20px; gap: 7px; }
	.mtw-pagina .mtw-deur__merk { font-size: 11px; }
}
@media (min-width: 48rem) {
	.mtw-pagina .mtw-vd-eerste { padding: 0 24px 34px; }
	.mtw-pagina .mtw-deuren { gap: clamp(24px, 4vw, 56px); margin-top: 22px; width: min(100%, 54rem); }
	.mtw-pagina .mtw-deur { border-radius: 999px 999px 26px 26px; }
	.mtw-pagina .mtw-deur::after { inset: 7px; border-radius: 999px 999px 20px 20px; }
	.mtw-pagina .mtw-deur__tekst { padding: 12px 34px 30px; gap: 8px; }
	.mtw-pagina .mtw-deur__knop { align-self: center; min-height: 54px; padding: 0 30px; font-size: 14px; }
	.mtw-pagina .mtw-deur__merk { font-size: 12px; }
	.mtw-pagina .mtw-korrels i { width: 10px; height: 10px; }
	.mtw-pagina .mtw-vonk { width: 4px; height: 4px; }
	.mtw-pagina .mtw-vd-kies { font-size: 12px; }
	.mtw-pagina .mtw-verder { margin-bottom: 18px; }
}
/* Een laag scherm (laptop): de deuren iets lager, zodat alles op het eerste scherm past. */
@media (min-width: 48rem) and (max-height: 56.5rem) {
	.mtw-pagina .mtw-deur__beeld { height: clamp(150px, 27vh, 300px); }
	.mtw-pagina .mtw-vd-naam { font-size: clamp(50px, 11vh, 104px); }
	.mtw-pagina .mtw-deuren { width: min(100%, 48rem); }
	.mtw-pagina .mtw-deur__naam { font-size: clamp(27px, 4.6vh, 44px); }
}

/* ---------- Hulp voor wie twijfelt, en wat gratis is ---------- */

.mtw-pagina .mtw-vd-hulp { position: relative; max-width: 50rem; margin: 0 auto; padding: 44px 20px 72px; text-align: center; }
.mtw-pagina .mtw-vd-hulp::before { content: ""; display: block; width: 7px; height: 7px; margin: 0 auto 30px; transform: rotate(45deg); background: var(--mtw-goudglans); box-shadow: -60px 60px 0 -3px rgba(217, 178, 90, 0), 0 0 0 0 transparent; }
.mtw-pagina .mtw-vd-keuze { display: grid; gap: 18px; margin-top: 26px; text-align: left; }
.mtw-pagina .mtw-vd-keuze p { padding: 18px 20px; border: 1px solid var(--mtw-lijn); border-radius: 18px; background: rgba(20, 13, 11, 0.6); font-size: 17.5px; line-height: 1.5; color: var(--mtw-gedempt); }
.mtw-pagina .mtw-vd-keuze strong { display: block; margin-bottom: 4px; font-family: var(--mtw-display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--mtw-inkt); }
.mtw-pagina .mtw-vd-los { margin-top: 22px; font-family: var(--mtw-display); font-style: italic; font-size: 20px; color: var(--mtw-accent); }
.mtw-pagina .mtw-vd-gratis { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin-top: 30px; text-align: left; font-size: 16.5px; line-height: 1.5; color: var(--mtw-inkt); }
.mtw-pagina .mtw-etiket { flex: none; margin-top: 1px; padding: 3px 12px; border: 1px solid var(--mtw-goud); border-radius: 999px; font-family: var(--mtw-kap); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mtw-accent); }
.mtw-pagina .mtw-vd-hulp .mtw-stil { margin-top: 18px; }
@media (min-width: 44rem) {
	.mtw-pagina .mtw-vd-keuze { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.mtw-pagina .mtw-erts, .mtw-pagina .mtw-deur { animation: none; }
	.mtw-pagina .mtw-korrels i { animation: none; opacity: 1; }
	.mtw-pagina .mtw-vonk { animation: none; opacity: 0.8; bottom: 26%; }
	.mtw-pagina .mtw-vonk--2, .mtw-pagina .mtw-vonk--5 { bottom: 40%; }
	.mtw-pagina .mtw-vonk--3, .mtw-pagina .mtw-vonk--7 { bottom: 33%; }
	.mtw-pagina .mtw-deur:hover, .mtw-pagina .mtw-deur:focus-visible { transform: none; }
}

@media print {
	.mtw-pagina .mtw-vd-eerste::before, .mtw-pagina .mtw-vd-eerste::after, .mtw-pagina .mtw-deur__beeld { display: none; }
	.mtw-pagina .mtw-voordeur, .mtw-pagina .mtw-voordeur * { color: #1d1915 !important; -webkit-text-fill-color: currentColor !important; background: none !important; box-shadow: none !important; }
}