/* Photo frames (2026-10-11): the five Isaac kept from the review rounds
(~/Desktop/Photo frames review/, round three), and Layered (2026-10-14),
for the hero's split photo and two-column's image. Markup from launchpad_photo_frame()
(inc/photo-frames.php); named in both blocks' block.json, so it loads in
the editor's canvas too. Every colour is a palette token, with the light
look by default and the dark one inside .is-dark (Modern's hero is always
dark). Sizes are in cqi, the frame's own width, so a frame scales as one
piece. Nothing moves until js/photo-frames.js adds .is-moving on the
front end; .is-still pauses it (the pause button, offscreen, a hidden
tab). */

.lp-frame {
	--lp-frame-ring: #fff;
	--lp-frame-ring-shadow: 0 2.4cqi 7cqi rgb(16 24 40 / 0.16);
	--lp-frame-line: var(--primary-300, #2f5387);
	--lp-frame-dot-1: var(--accent-300, #615ff8);
	--lp-frame-dot-2: var(--primary-200, #94a9c3);
	--lp-frame-dot-3: var(--accent-200, #a5a4fb);
	--lp-frame-glass: rgb(255 255 255 / 0.84);
	--lp-frame-glass-ink: var(--neutral-400, #242527);
	--lp-frame-glass-soft: var(--neutral-300, #6b717e);
	--lp-frame-glass-line: rgb(255 255 255 / 0.8);
	--lp-frame-edge: #fff;
	--lp-frame-tile: var(--cta-default, #615ff8);
	--lp-frame-on-tile: var(--cta-text, #fff);
	--lp-frame-muted: var(--text-secondary, #6b717e);
	--lp-frame-shadow: 0 3cqi 9cqi rgb(16 24 40 / 0.22);
	position: relative;
	width: min(100%, var(--lp-frame-w, 520px));
	aspect-ratio: var(--lp-frame-ar, 1);
	margin-inline: auto;
	container-type: inline-size;
}

.is-dark .lp-frame {
	--lp-frame-ring: rgb(255 255 255 / 0.09);
	--lp-frame-ring-shadow: 0 3cqi 9cqi rgb(0 0 0 / 0.45);
	--lp-frame-line: rgb(255 255 255 / 0.85);
	--lp-frame-dot-1: var(--accent-200, #a5a4fb);
	--lp-frame-glass: color-mix(in srgb, var(--primary-400, #25426c) 55%, transparent);
	--lp-frame-glass-ink: #fff;
	--lp-frame-glass-soft: rgb(255 255 255 / 0.74);
	--lp-frame-glass-line: rgb(255 255 255 / 0.2);
	--lp-frame-edge: rgb(255 255 255 / 0.14);
	--lp-frame-muted: rgb(255 255 255 / 0.7);
	--lp-frame-shadow: 0 3cqi 9cqi rgb(0 0 0 / 0.4);
}

@media screen and (max-width: 765px) {
	.lp-frame {
		--lp-frame-w: 420px;
	}
}

.lp-frame > * {
	position: absolute;
	box-sizing: border-box;
}

.lp-frame img {
	display: block;
	max-width: none;
	object-fit: cover;
}

.lp-frame__photo {
	width: 100%;
	height: 100%;
}

/* Motion, only once the script runs */
@keyframes lp-frame-drift {
	to { transform: translate(var(--dx, 1cqi), var(--dy, -1.6cqi)); }
}

@keyframes lp-frame-bob {
	to { transform: translateY(-1.6cqi); }
}

@keyframes lp-frame-slide {
	to { transform: translateX(-50%); }
}

@keyframes lp-frame-up {
	to { transform: translateY(-50%); }
}

@keyframes lp-frame-down {
	from { transform: translateY(-50%); }
	to { transform: translateY(0); }
}

.lp-frame.is-still *,
.lp-frame.is-still {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	.lp-frame *,
	.lp-frame {
		animation: none !important;
		transition: none !important;
	}
}

/* The pause button (WCAG 2.2.2), for the deck, the ribbon and the wall:
two bars, a triangle while paused, as the hero's slideshow. The script
hides it under reduced motion, where nothing moves. */
.lp-frame__pause {
	right: 2cqi;
	bottom: 2cqi;
	z-index: 6;
	display: grid;
	place-items: center;
	width: max(36px, 8cqi);
	height: max(36px, 8cqi);
	padding: 0;
	border: 1px solid var(--lp-frame-glass-line);
	border-radius: 50%;
	background: var(--lp-frame-glass);
	color: var(--lp-frame-glass-ink);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: pointer;
}

.lp-frame__pause[hidden] {
	display: none;
}

.lp-frame__pause::before {
	content: "";
	width: 30%;
	height: 34%;
	background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.lp-frame__pause[aria-pressed="true"]::before {
	margin-left: 8%;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* On a light section white glass vanishes: a faint edge and shadow there. */
.lp-block:not(.is-dark) .lp-frame__pause,
.lp-block:not(.is-dark) .lp-frame__step {
	border-color: rgb(16 24 40 / 0.1);
	box-shadow: 0 2px 8px rgb(16 24 40 / 0.14);
}

.lp-frame__pause:focus-visible,
.lp-frame__step:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Ring and dots: the photo in a circle on a halo, coloured dots around */
.lp-frame--ring .lp-frame__halo {
	inset: 5%;
	border-radius: 50%;
	background: var(--lp-frame-ring);
	box-shadow: var(--lp-frame-ring-shadow);
}

.is-dark .lp-frame--ring .lp-frame__halo {
	border: 1px solid rgb(255 255 255 / 0.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.lp-frame--ring .lp-frame__photo {
	inset: 13%;
	width: 74%;
	height: 74%;
	border: 2.2cqi solid var(--lp-frame-line);
	border-radius: 50%;
}

.lp-frame__dot {
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: var(--c, var(--lp-frame-dot-1));
}

.lp-frame.is-moving .lp-frame__dot {
	animation: lp-frame-drift var(--t, 7s) ease-in-out infinite alternate;
}

.lp-frame__dot--1 { --s: 11cqi; --t: 8s; top: 6%; left: 3%; }
.lp-frame__dot--2 { --s: 5.5cqi; --t: 6s; --dx: -1cqi; top: 2%; left: 25%; }
.lp-frame__dot--3 { --s: 5cqi; --t: 9s; --c: var(--lp-frame-dot-2); top: 31%; left: 1%; }
.lp-frame__dot--4 { --s: 12cqi; --t: 7.5s; --c: var(--lp-frame-dot-2); --dy: 1.4cqi; right: 2%; bottom: 18%; }
.lp-frame__dot--5 { --s: 5.5cqi; --t: 6.5s; right: 19%; bottom: 3%; }
.lp-frame__dot--6 { --s: 3.5cqi; --t: 10s; --c: var(--lp-frame-dot-3); top: 13%; right: 8%; }

/* Floating chips: a rounded photo with up to three glass chips over its
edges, the third a pill */
.lp-frame--chips .lp-frame__photo {
	inset: 6%;
	width: 88%;
	height: 88%;
	border-radius: 6cqi;
	box-shadow: var(--lp-frame-shadow);
}

.lp-frame__chips {
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

.lp-frame__chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 2.4cqi;
	max-width: 70%;
	margin: 0;
	padding: 2.2cqi 3.4cqi 2.2cqi 2.2cqi;
	border: 1px solid var(--lp-frame-glass-line);
	border-radius: 4cqi;
	background: var(--lp-frame-glass);
	box-shadow: 0 2cqi 6cqi rgb(16 24 40 / 0.2);
	color: var(--lp-frame-glass-ink);
	font-size: max(13px, 3.8cqi);
	font-weight: 700;
	line-height: 1.15;
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	pointer-events: auto;
}

.lp-frame.is-moving .lp-frame__chip {
	animation: lp-frame-bob 5.5s ease-in-out infinite alternate;
}

.lp-frame__chip small {
	display: block;
	margin-top: 0.4cqi;
	color: var(--lp-frame-glass-soft);
	font-size: max(12px, 3cqi);
	font-weight: 500;
}

.lp-frame__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: max(28px, 8.6cqi);
	height: max(28px, 8.6cqi);
	border-radius: 2.2cqi;
	background: var(--lp-frame-tile);
	color: var(--lp-frame-on-tile);
}

.lp-frame__icon svg {
	width: 52%;
	height: 52%;
}

.lp-frame__icon .lp-frame__icon-img {
	width: 62%;
	height: 62%;
	object-fit: contain;
}

.lp-frame__live {
	flex: none;
	width: max(8px, 2cqi);
	height: max(8px, 2cqi);
	border-radius: 50%;
	background: var(--lp-frame-tile);
	box-shadow: 0 0 0 1cqi color-mix(in srgb, var(--lp-frame-tile) 25%, transparent);
}

.lp-frame__chip--1 { top: 11%; left: -3%; }
.lp-frame__chip--2 { right: -4%; bottom: 10%; }
.lp-frame__chip--3 { top: 47%; right: -6%; padding: 2cqi 3.6cqi; border-radius: 999px; font-size: max(12px, 3.4cqi); }
.lp-frame.is-moving .lp-frame__chip--2 { animation-duration: 6.5s; animation-delay: -2s; }
.lp-frame.is-moving .lp-frame__chip--3 { animation-delay: -4s; }

/* A narrow frame keeps its chips inside, so a phone never scrolls sideways. */
@container (max-width: 440px) {
	.lp-frame__chip--1 { left: 1%; }
	.lp-frame__chip--2 { right: 1%; }
	.lp-frame__chip--3 { right: 1%; }
}

/* Card deck: up to five photos as cards, the front one level, two
fanned behind; arrows, dots, a click on the front card, and on its own
every four seconds */
.lp-frame--deck {
	--lp-frame-ar: 1 / 1.02;
}

.lp-frame__cards {
	inset: 0;
}

.lp-frame__card {
	position: absolute;
	top: 8%;
	left: 19%;
	width: 62%;
	height: 74%;
	margin: 0;
	overflow: hidden;
	border: 1.5cqi solid var(--lp-frame-edge);
	border-radius: 5cqi;
	background: var(--lp-frame-edge);
	box-shadow: 0 3cqi 9cqi rgb(0 0 0 / 0.22);
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s, z-index 0s 0.25s;
}

.lp-frame__card-img {
	width: 100%;
	height: 100%;
	border-radius: 3.5cqi;
}

.lp-frame__card[data-pos="0"] { z-index: 4; transform: rotate(-1.5deg); cursor: pointer; }
.lp-frame__card[data-pos="1"] { z-index: 3; transform: translateX(27%) rotate(8deg) scale(0.93); }
.lp-frame__card[data-pos="2"] { z-index: 2; transform: translateX(-27%) rotate(-9deg) scale(0.93); }
.lp-frame__card[data-pos="3"],
.lp-frame__card[data-pos="4"] { z-index: 1; opacity: 0; transform: translateY(4%) scale(0.86); }

.lp-frame__nav {
	bottom: 1%;
	left: 50%;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 2.4cqi;
	transform: translateX(-50%);
}

.lp-frame--deck .lp-frame__pause {
	position: static;
}

.lp-frame__step {
	display: grid;
	place-items: center;
	width: max(36px, 8cqi);
	height: max(36px, 8cqi);
	padding: 0;
	border: 1px solid var(--lp-frame-glass-line);
	border-radius: 50%;
	background: var(--lp-frame-glass);
	color: var(--lp-frame-glass-ink);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: pointer;
}

.lp-frame__step::before {
	content: "";
	width: 26%;
	height: 26%;
	border: solid currentColor;
	border-width: 0 2.5px 2.5px 0;
	transform: translateX(-15%) rotate(-45deg);
}

.lp-frame__step--prev::before {
	transform: translateX(15%) rotate(135deg);
}

.lp-frame__dots {
	display: flex;
	gap: 1.4cqi;
}

.lp-frame__dots i {
	width: max(7px, 1.8cqi);
	height: max(7px, 1.8cqi);
	border-radius: 50%;
	background: var(--lp-frame-muted);
	opacity: 0.45;
	transition: opacity 0.3s, width 0.3s;
}

.lp-frame__dots i.is-on {
	width: max(18px, 5cqi);
	border-radius: 1cqi;
	background: var(--lp-frame-tile);
	opacity: 1;
}

/* Ribbon: one straight band under the photo, the words scrolling along it */
.lp-frame--ribbon {
	--lp-frame-ar: 1 / 1.04;
}

.lp-frame--ribbon .lp-frame__photo {
	top: 0;
	left: 0;
	width: 100%;
	height: 83%;
	border-radius: 5cqi;
	box-shadow: var(--lp-frame-shadow);
}

.lp-frame--ribbon .lp-frame__pause {
	top: 2cqi;
	bottom: auto;
}

.lp-frame__tape {
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 11cqi;
	overflow: hidden;
	border-radius: 3cqi;
	background: var(--lp-frame-tile);
	color: var(--lp-frame-on-tile);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-frame__track {
	display: flex;
	flex: none;
}

.lp-frame.is-moving .lp-frame__track {
	animation: lp-frame-slide 24s linear infinite;
}

.lp-frame__words {
	display: flex;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-family-heading, inherit);
	font-size: max(14px, 4.4cqi);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.lp-frame__words li {
	margin: 0;
	padding: 0 2.2cqi;
}

.lp-frame__words li::after {
	content: "\2726";
	padding-left: 4.4cqi;
}

/* Photo wall: three columns of photos, the outer two scrolling up and the
middle one down, the ends fading */
.lp-frame--wall {
	--lp-frame-ar: 1 / 1.08;
}

.lp-frame__wall {
	inset: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3cqi;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

/* The bottom padding matches the gap, so the second half starts exactly
where the first began and the loop has no seam. */
.lp-frame__col {
	display: flex;
	flex-direction: column;
	gap: 3cqi;
	padding-bottom: 3cqi;
}

.lp-frame__col:nth-child(2) {
	transform: translateY(-50%);
}

.lp-frame.is-moving .lp-frame__col {
	animation: lp-frame-up 30s linear infinite;
}

.lp-frame.is-moving .lp-frame__col:nth-child(2) {
	animation-name: lp-frame-down;
	animation-duration: 36s;
}

.lp-frame.is-moving .lp-frame__col:nth-child(3) {
	animation-duration: 26s;
}

.lp-frame__again {
	display: contents;
}

.lp-frame__tile {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 3.6cqi;
}

.lp-frame__col > .lp-frame__tile:nth-child(2),
.lp-frame__again > .lp-frame__tile:nth-child(2) {
	aspect-ratio: 1;
}

/* Layered (2026-10-14, the modern gap mockups): the photo up and to the
left, the first Frame photo over its lower edge, a cutout standing on the
frame's foot with a soft shadow, and the first Frame words as a badge at
the top right, its icon on the accent. A tall cutout stops at half the
frame's height. */
.lp-frame--layered .lp-frame__photo {
	inset: 4% 14% 18% 0;
	width: 86%;
	height: 78%;
	border-radius: 6cqi;
	box-shadow: var(--lp-frame-shadow);
}

.lp-frame--layered .lp-frame__layer {
	right: -2%;
	bottom: 0;
	z-index: 1;
	width: 68%;
	height: auto;
	max-height: 50%;
	object-fit: contain;
	object-position: right bottom;
	filter: drop-shadow(0 3.5cqi 4cqi rgb(16 24 40 / 0.25));
}

.lp-frame__badge {
	top: 7%;
	right: 4%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 2.4cqi;
	max-width: 64%;
	padding: 2cqi 4cqi 2cqi 2cqi;
	border: 1px solid var(--lp-frame-glass-line);
	border-radius: 999px;
	background: var(--lp-frame-glass);
	box-shadow: var(--lp-frame-shadow);
	color: var(--lp-frame-glass-ink);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
}

.lp-frame__badge-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: max(36px, 10cqi);
	height: max(36px, 10cqi);
	border-radius: 999px;
	background: var(--lp-accent-fill, var(--accent-300, #615ff8));
	color: var(--lp-accent-ink, #fff);
}

.lp-frame__badge-icon svg {
	width: 50%;
	height: 50%;
}

.lp-frame__badge-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--lp-frame-glass-soft);
	font-size: max(12px, 2.6cqi);
	line-height: 1.25;
}

.lp-frame__badge-title {
	color: var(--lp-frame-line);
	font-family: var(--font-family-heading, inherit);
	font-size: max(16px, 4.2cqi);
	font-weight: 700;
	line-height: 1.1;
}

.lp-frame__badge small {
	font-size: inherit;
}

/* A narrow frame keeps the layer inside, so a phone never scrolls sideways. */
@container (max-width: 440px) {
	.lp-frame--layered .lp-frame__layer { right: 0; }
}

/* Offset outline (2026-10-20, Isaac, the Wheel Equipment rebuild: option
1's hero photo): the photo whole at its own shape, in the flow, a soft
shadow under it, and behind it a line in the accent's fill offset up and
to the left. The frame gives up the offset on its left and top so the line
stays inside the column on a phone. A line, not text, so a light accent
stays itself on a light band. */
.lp-frame--outline {
	--lp-frame-outline-offset: 14px;
	width: calc(100% - var(--lp-frame-outline-offset));
	aspect-ratio: auto;
	margin: var(--lp-frame-outline-offset) 0 0 var(--lp-frame-outline-offset);
	container-type: normal;
}

.lp-frame--outline::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--lp-frame-outline-offset)) var(--lp-frame-outline-offset) var(--lp-frame-outline-offset) calc(-1 * var(--lp-frame-outline-offset));
	border: 3px solid var(--lp-accent-fill, var(--accent-300, #615ff8));
	border-radius: var(--card-radius, 12px);
}

.lp-frame--outline > .lp-frame__photo {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--card-radius, 12px);
	box-shadow: 0 24px 55px rgb(0 0 0 / 0.35);
}

/* The editor's word on a frame that cannot show (missing photos or words). */
.lp-frame-note {
	margin: 0.75rem 0 0;
	padding: 0.5rem 0.75rem;
	border: 1px dashed currentColor;
	border-radius: 8px;
	font-size: 0.875rem;
	opacity: 0.8;
}