/*
 * Het deurtje op de kaart van ’t Keldertje, op de hoofdpagina.
 *
 * De kaart zelf komt uit het thema. Dit bestand tekent er alleen met
 * pseudo-elementen een deur boven: de tekst en de link blijven wat ze zijn, en
 * schermlezers merken er niets van. Staat de kaart niet op de hoofdpagina, dan
 * doet deze stijl niets.
 */

.kaart.act[href*="/t-keldertje/"] {
	position: relative;
	overflow: hidden;
	padding-top: 178px;
}

/* De donkere hal met kozijn, lamp en het licht achter de deur. */
.kaart.act[href*="/t-keldertje/"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 150px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23FFD58A' stop-opacity='.34'/%3E%3Cstop offset='1' stop-color='%23FFD58A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='100' cy='70' rx='100' ry='82' fill='url(%23g)'/%3E%3Crect x='58' y='21' width='84' height='123' rx='1' fill='%234A2F1B'/%3E%3Crect x='64' y='26' width='72' height='118' fill='%23FFF3D6'/%3E%3Crect x='91' y='7' width='18' height='11' rx='5.5' fill='%23FFD58A' stroke='%23222' stroke-width='1.6'/%3E%3Cpath d='M97 7v11M103 7v11M91 12.500h18' stroke='%23222' stroke-width='1'/%3E%3Cpath d='M64 144h72l22 6H42z' fill='%23FFD58A' opacity='.55'/%3E%3C/svg%3E") center top / 200px 150px no-repeat,
		#141F22;
}

/* De deur. Hij draait op zijn linkerscharnier. */
.kaart.act[href*="/t-keldertje/"]::after {
	content: "";
	position: absolute;
	top: 26px;
	left: calc(50% - 36px);
	width: 72px;
	height: 118px;
	transform: perspective(420px) rotateY(0);
	transform-origin: left center;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='118' viewBox='0 0 72 118'%3E%3Crect width='72' height='118' fill='%233E5C4E'/%3E%3Cpath d='M12 0v118M24 0v118M36 0v118M48 0v118M60 0v118' stroke='%23000' stroke-opacity='.32' stroke-width='.8'/%3E%3Crect y='13' width='72' height='9' fill='%234A6B5A'/%3E%3Crect y='96' width='72' height='9' fill='%234A6B5A'/%3E%3Cpath d='M6 96 66 22' stroke='%234A6B5A' stroke-width='7'/%3E%3Crect y='15.500' width='25' height='3.500' rx='1.700' fill='%231E2528'/%3E%3Crect y='98.500' width='25' height='3.500' rx='1.700' fill='%231E2528'/%3E%3Cg transform='rotate(-3 36 40)'%3E%3Crect x='9' y='32' width='54' height='15' rx='1.500' fill='%23F4EEDF' stroke='%23182427' stroke-width='.8'/%3E%3Ctext x='36' y='43.200' text-anchor='middle' font-family='Arial Narrow,Impact,sans-serif' font-weight='700' font-size='9' letter-spacing='.2' fill='%23182427'%3E%E2%80%99t KELDERTJE%3C/text%3E%3C/g%3E%3Ccircle cx='20' cy='70' r='9.500' fill='%2396C7A8' stroke='%23F4EEDF' stroke-width='1.200'/%3E%3Crect x='44' y='76' width='19' height='8' rx='1.500' fill='%23F4716A' transform='rotate(-8 53 80)'/%3E%3Crect x='53' y='60' width='12' height='3' rx='1.500' fill='%231E2528'/%3E%3Crect x='62' y='58' width='4' height='14' rx='2' fill='%231E2528'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}

@media (prefers-reduced-motion: no-preference) {
	.kaart.act[href*="/t-keldertje/"]::after {
		transition: transform .55s cubic-bezier(.16, 1, .3, 1);
	}
}

/* Op een kier. Zonder beweging staat hij meteen op die stand. */
@media (hover: hover) {
	.kaart.act[href*="/t-keldertje/"]:hover::after {
		transform: perspective(420px) rotateY(-38deg);
	}
}

.kaart.act[href*="/t-keldertje/"]:focus-visible::after {
	transform: perspective(420px) rotateY(-38deg);
}

@media (forced-colors: active), print {
	.kaart.act[href*="/t-keldertje/"] {
		padding-top: 28px;
	}

	.kaart.act[href*="/t-keldertje/"]::before,
	.kaart.act[href*="/t-keldertje/"]::after {
		content: none;
	}
}