/*
 * Structuur/animatie voor de mockup-scène. Alle afmetingen zijn in cqw
 * (container query width — 1% van de breedte van de omringende
 * .pm-scene-wrap) i.p.v. px: de hele scène is ontworpen op een vaste
 * canvasbreedte van 1460px en schaalt daardoor foutloos mee met elke
 * containerbreedte (case-pagina, sidebar-widget, iframe-embed) zonder JS.
 * De exacte cqw-waarden worden per element door PM_Renderer::px() berekend
 * (px / 1460 * 100), dus deze file bevat vaste structuur/kleuren en de
 * PHP-kant levert de maten.
 */

.pm-scene-wrap {
	container-type: inline-size;
	position: relative;
	width: 100%;
	max-width: 1460px;
	margin: 0 auto;
}

.pm-scene-canvas {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--pm-bg, #f5f8ff);
}

.pm-scene-blob {
	position: absolute;
	border-radius: 999px;
}

.pm-scene-stage {
	position: relative;
}

.pm-frame-desktop {
	position: absolute;
	/*
	 * Bewust GEEN transform-style:preserve-3d hier: dit element heeft ook
	 * overflow:hidden, en de spec zegt dat overflow != visible preserve-3d
	 * altijd naar "flat" forceert — die tegenstrijdige combinatie loste
	 * Chrome stilzwijgend op maar liet in Safari de iPhone-laag (positieve
	 * translateZ, ervoor) onzichtbaar worden (bevestigd door Jeroen,
	 * 2026-09-16). Het eigen 3D-perspectief komt toch al van de
	 * .pm-scene-stage-ouder — dit element heeft geen eigen 3D-kinderen
	 * nodig.
	 */
	border-radius: 1.4cqw;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6cqw 12cqw -3cqw rgba(32, 30, 29, .45), 0 .8cqw 2.4cqw rgba(32, 30, 29, .18);
}

.pm-frame-desktop__bar {
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	background: #f2f1ef;
	border-bottom: .1cqw solid rgba(0, 0, 0, .09);
}

.pm-frame-dots {
	display: flex;
	gap: .8cqw;
}

.pm-frame-dot {
	border-radius: 999px;
	background: #ccc;
}

.pm-frame-desktop__url {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8cqw;
	background: #e4e2df;
	color: #403d39;
	border-radius: 999px;
	margin: 0 auto;
}

.pm-frame-desktop__viewport,
.pm-frame-phone__viewport {
	position: relative;
	overflow: hidden;
	background: #eef1f4;
}

.pm-scroll-img {
	position: absolute;
	inset: 0 0 auto 0;
	width: 100%;
	display: block;
	animation-timing-function: cubic-bezier(.45, 0, .55, 1);
	animation-iteration-count: infinite;
}

.pm-frame-desktop .pm-scroll-img {
	animation-name: pmDeskScroll;
	animation-duration: var(--pm-scroll-dur, 32s);
	animation-play-state: var(--pm-scroll-play, running);
}

.pm-frame-phone .pm-scroll-img {
	animation-name: pmPhoneScroll;
	animation-duration: var(--pm-scroll-dur, 32s);
	animation-play-state: var(--pm-scroll-play, running);
}

@keyframes pmDeskScroll {
	0%, 6%   { transform: translateY(0); }
	48%, 56% { transform: translateY(calc(var(--pm-desk-travel, 0px) * -1)); }
	96%, 100% { transform: translateY(0); }
}

@keyframes pmPhoneScroll {
	0%, 10%  { transform: translateY(0); }
	52%, 60% { transform: translateY(calc(var(--pm-phone-travel, 0px) * -1)); }
	98%, 100% { transform: translateY(0); }
}

.pm-frame-phone {
	position: absolute;
	/* zie .pm-frame-desktop hierboven — zelfde reden om preserve-3d hier weg te laten */
	border-radius: 3.6cqw;
	background: linear-gradient(150deg, #3a3a3c, #1c1c1e 45%, #48484a);
	box-shadow: 0 4.8cqw 7.5cqw -2.3cqw rgba(32, 30, 29, .55), 0 .4cqw 1.2cqw rgba(32, 30, 29, .3);
}

.pm-frame-phone__inner {
	position: relative;
	height: 100%;
	border-radius: 2.9cqw;
	overflow: hidden;
	background: #eef1f4;
}

.pm-frame-phone__island {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 999px;
	background: #0a0a0a;
	z-index: 3;
}

.pm-frame-phone__home {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(20, 20, 20, .55);
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	.pm-scroll-img {
		animation: none !important;
	}
}

/*
 * Compacte tegel-variant (PM_Renderer::render_tile) — vult zijn container
 * volledig (bedoeld als 1-op-1 vervanging van een <img>, bv. in
 * .pv-case-screen die zelf al een vaste hoogte + overflow:hidden heeft).
 * Gebruikt background-position-percentages i.p.v. translateY: die schalen
 * vanzelf correct tussen "boven" (0%) en "onder uitgelijnd" (100%), ongeacht
 * de werkelijke gerenderde breedte/hoogte van de tegel — geen px/cqw-
 * rekenwerk nodig zoals bij de grote scène.
 */
.pm-tile {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #eef1f4;
}

.pm-tile-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 18px;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
	background: #f2f1ef;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
	z-index: 2;
}

.pm-tile-bar span {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #ccc;
}

.pm-tile-bar span:nth-child(1) { background: #ff5f57; }
.pm-tile-bar span:nth-child(2) { background: #febc2e; }
.pm-tile-bar span:nth-child(3) { background: #28c840; }

.pm-tile-shot {
	position: absolute;
	top: 18px;
	left: 0;
	right: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center 0%;
	animation-name: pmTileScroll;
	animation-timing-function: cubic-bezier(.45, 0, .55, 1);
	animation-iteration-count: infinite;
	animation-duration: var(--pm-scroll-dur, 32s);
	animation-play-state: var(--pm-scroll-play, running);
}

@keyframes pmTileScroll {
	0%, 10%   { background-position: center 0%; }
	52%, 60%  { background-position: center 100%; }
	98%, 100% { background-position: center 0%; }
}

@media (prefers-reduced-motion: reduce) {
	.pm-tile-shot { animation: none !important; }
}

.pm-scene-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1cqw;
	color: rgba(32, 30, 29, .55);
	font-size: 1.1cqw;
}

@container (max-width: 520px) {
	.pm-scene-caption { font-size: 2.6cqw; }
}