/* Breen browser scroll animation
   The browser frame (breen-browser.webp, 2100x1380) has a white window
   whose pixel bounds are left 202, top 211, right 1901, bottom 1158.
   The screen div is pinned to that window with percentage insets, and
   the full-page screenshot (breen-page.webp, 1700x12753) scrolls inside
   it with a looping translateY animation.

   Scroll distance: the window shows 948 of the page's 12753 pixels,
   so the image travels -(12753 - 948) / 12753 = -92.566% of its own height. */

.breen-browser {
	position: relative;
}

.breen-browser-screen {
	position: absolute;
	top: 15.29%;
	left: 9.62%;
	right: 9.43%;
	bottom: 16.01%;
	overflow: hidden;
	border-radius: 6px;
	background-color: #fff;
}

.breen-browser-screen img {
	width: 100%;
	height: auto;
	animation: breen-page-scroll 15s ease-in-out infinite;
	will-change: transform;
}

/* Loop: hold at top, glide down, hold at bottom, glide back up */
@keyframes breen-page-scroll {
	0%, 5% { transform: translateY(0); }
	45%, 55% { transform: translateY(-92.566%); }
	95%, 100% { transform: translateY(0); }
}

/* Static top of the page for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.breen-browser-screen img {
		animation: none;
	}
}