/*
 * Startseiten-Abschnitte unter dem Pult (Prototyp R3): Frisch aus dem Schnitt (Samtvorhang + Spot), Plattenkiste,
 * Mitmachen mit Aushang, Crew-Pässe, Backstage. Markup: inc/home*.php, Verhalten: assets/js/studio-home.js.
 * Nur auf der Startseite geladen.
 */

/* Die Startseiten-Spalte ist „constrained, linksbündig“ (840 px); die Abschnitte nehmen wie das Pult 1200 px */
.is-layout-constrained > .studio-home {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto !important;
}

.studio-home {
	--studio-pen: oklch(40% 0.14 262);
	color: var(--studio-text);
	font-family: var(--studio-font-text);
}

.studio-home__inner {
	margin-block: var(--wp--preset--spacing--80, 5rem);
}

.studio-home h2,
.studio-home h3 {
	color: inherit;
}

/* ---------- Frisch aus dem Schnitt: Samtvorhang über die volle Breite, Spot folgt der Maus ---------- */
.studio-wall {
	position: relative;
	isolation: isolate;
	margin-inline: calc(50% - 50vw);
	padding: calc(var(--wp--preset--spacing--70, 3rem) + 4.5rem) max(1rem, calc(50vw - 600px));
	overflow: hidden;
}

.studio-wall::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--studio-curtain);
	-webkit-mask-image: linear-gradient(transparent, #000 var(--studio-fade), #000 calc(100% - var(--studio-fade)), transparent);
	mask-image: linear-gradient(transparent, #000 var(--studio-fade), #000 calc(100% - var(--studio-fade)), transparent);
}

/* Zwei feste Seitenlichter + ein Spot. Der Spot ist ein eigenes Element und wird nur verschoben (translate) */
.studio-wall::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 170px 300px at 12% 150px, oklch(80% 0.1 95 / 0.12), transparent 75%),
		radial-gradient(ellipse 170px 300px at 88% 150px, oklch(80% 0.1 95 / 0.12), transparent 75%);
	mix-blend-mode: screen;
}

.studio-wall__spot {
	--studio-spot: 520px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: var(--studio-spot);
	height: var(--studio-spot);
	margin: calc(var(--studio-spot) / -2) 0 0 calc(var(--studio-spot) / -2);
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle closest-side, oklch(86% 0.11 95 / 0.32), oklch(74% 0.09 95 / 0.12) 55%, transparent);
	mix-blend-mode: screen;
	translate: 50vw 180px;
	transition: translate 90ms linear;
}

.studio-wall > .studio-home__inner { margin: 0; }

.studio-cut {
	display: grid;
	gap: var(--wp--preset--spacing--60, 2rem);
	align-items: start;
}

@media (min-width: 960px) {
	.studio-cut { grid-template-columns: 1fr 1.15fr; }
}

/* Sendeablauf: ausgedrucktes, zerknittertes Blatt */
.studio-rundown {
	position: relative;
	isolation: isolate;
	padding: 1.5rem 1rem 1rem;
	color: var(--studio-paper-ink);
	rotate: 0.6deg;
	filter: drop-shadow(0 16px 18px oklch(0% 0 0 / 0.55));
}

.studio-rundown::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--studio-crumple) 120px 40px / 360px, var(--studio-paper);
	background-blend-mode: multiply;
	clip-path: var(--studio-edge-a);
}

.studio-rundown > .studio-strip:nth-of-type(1) { left: -30px; top: -16px; rotate: -30deg; }
.studio-rundown > .studio-strip:nth-of-type(2) { right: -30px; top: -16px; rotate: 28deg; }

.studio-rundown__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--studio-paper-ink);
	font: 800 0.75rem / 1.2 var(--studio-font-text);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.studio-rundown__hand {
	font: 400 1rem / 1 var(--studio-font-tape);
	letter-spacing: 0;
	text-transform: none;
	color: var(--studio-pen);
}

.studio-rundown__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: studio-item;
}

.studio-rundown__item {
	counter-increment: studio-item;
	display: grid;
	grid-template-columns: 1.6rem 44px 1fr;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 0;
	border-bottom: 1px solid oklch(70% 0.02 250 / 0.5);
}

.studio-rundown__item::before {
	content: counter(studio-item, decimal-leading-zero);
	font: 700 0.8rem / 1 var(--studio-font-text);
	color: var(--studio-paper-ink-2);
	font-variant-numeric: tabular-nums;
}

.studio-rundown__item:last-child { border-bottom: 0; }

/* Ohne JS fehlt die Taste (display: grid unten würde hidden überstimmen); der Platz bleibt, damit die Spalten stehen */
.studio-rundown__play[hidden] { display: none; }

.studio-rundown__play[hidden] + .studio-rundown__body,
.studio-rundown__kind + .studio-rundown__body { grid-column: 3; }

.studio-rundown__play {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 2px solid var(--studio-paper-ink);
	border-radius: 50%;
	background: transparent;
	color: var(--studio-paper-ink);
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms;
}

/* ▶ bzw. ❚❚ als Formen (keine Schrift-Glyphen, die je nach System anders aussehen) */
.studio-rundown__play span {
	width: 0;
	height: 0;
	margin-left: 3px;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
}

.studio-rundown__play[aria-pressed="true"] span {
	width: 12px;
	height: 14px;
	margin: 0;
	border: 0;
	border-inline: 4px solid currentColor;
}

.studio-rundown__play:hover { background: var(--studio-brand); border-color: var(--studio-brand); color: var(--studio-on-brand); }
.studio-rundown__play[aria-pressed="true"] { background: var(--studio-paper-ink); color: var(--studio-paper); }
.studio-rundown__play:focus-visible { outline: 3px solid var(--studio-brand); outline-offset: 2px; }

.studio-rundown__kind {
	grid-column: 2;
	width: 44px;
	text-align: center;
	font-size: 1.2rem;
	color: var(--studio-paper-ink-2);
}

.studio-rundown__title {
	color: var(--studio-paper-ink);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.studio-rundown__title:hover,
.studio-rundown__title:focus-visible {
	color: var(--studio-paper-ink);
	text-decoration: underline;
	text-decoration-color: var(--studio-brand);
	text-decoration-thickness: 2px;
}

.studio-rundown__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.75rem;
	align-items: center;
	margin-top: 0.2rem;
	font-size: var(--studio-step--1);
	color: var(--studio-paper-ink-2);
}

.studio-rundown__cat {
	padding: 0.2em 0.5em;
	background: var(--studio-tape);
	color: var(--studio-tape-ink);
	font: 400 0.85rem / 1 var(--studio-font-tape);
}

/* Tonspur (studentenfunk_studio_track): zweite Ebene in Blau wird nach dem Fortschritt aufgedeckt (clip-path über
 * --studio-progress). Ausnahme von Regel 6: keine Animation, sondern ein Fortschrittsstand ~4× pro Sekunde.
 * Darüber liegt ein unsichtbarer Regler (Klick springt an die Stelle); sein Fokus umrandet die ganze Spur. */
.studio-track {
	position: relative;
	display: block;
	width: 120px;
	height: 22px;
	padding: 2px 0;
}

.studio-track__wave { display: block; width: 100%; height: 18px; overflow: visible; }
.studio-track__wave rect { fill: oklch(60% 0.02 250); }
.studio-track__done { clip-path: inset(0 calc(100% - var(--studio-progress, 0) * 100%) 0 0); }
.studio-track__done rect { fill: oklch(52% 0.13 234); }

.studio-track__seek {
	position: absolute;
	inset: -6px 0;
	width: 100%;
	height: calc(100% + 12px);
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.studio-track__seek[hidden] { display: none; }
.studio-track:hover .studio-track__wave rect { fill: oklch(48% 0.03 250); }
.studio-track:hover .studio-track__done rect { fill: oklch(52% 0.13 234); }
.studio-track:has(.studio-track__seek:focus-visible) { outline: 3px solid var(--studio-brand); outline-offset: 3px; border-radius: 2px; }

.studio-track__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--studio-paper-ink);
}

.studio-track__time[hidden] { display: none; }

/* Tonband unter der Hauptkassette: Papierstreifen mit Taste, langer Spur und Zeit */
.studio-cut__tape {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 0.75rem;
	align-items: center;
	max-width: 30rem;
	margin-top: var(--wp--preset--spacing--40, 1rem);
	padding: 0.6rem 0.9rem 0.6rem 0.6rem;
	background: var(--studio-grain), var(--studio-paper);
	color: var(--studio-paper-ink);
	rotate: -0.5deg;
	box-shadow: 0 10px 18px oklch(0% 0 0 / 0.45);
}

.studio-cut__tape .studio-track { width: 100%; height: 30px; }
.studio-cut__tape .studio-track__wave { height: 26px; }
.studio-cut__tape:not(:has(.studio-rundown__play:not([hidden]))) { display: none; }

/* ---------- Plattenkiste ---------- */
.studio-crate__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(180px, 22vw, 230px);
	gap: var(--wp--preset--spacing--60, 2rem);
	margin: 0;
	padding: 2rem 0.5rem 1rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0.5rem;
}

.studio-crate__item { position: relative; scroll-snap-align: start; }

/* Die herausgezogene Platte liegt über der Hülle daneben */
.studio-crate__item:hover,
.studio-crate__item:focus-within { z-index: 2; }

/* ---------- Mitmachen + Aushang ---------- */
.studio-join {
	display: grid;
	gap: var(--wp--preset--spacing--60, 2rem);
	align-items: center;
}

@media (min-width: 900px) {
	.studio-join { grid-template-columns: 1.1fr 1fr; }
}

.studio-join__title {
	max-width: 14ch;
	margin: 0;
	font: 850 clamp(2.2rem, 1.4rem + 3.2vw, 4.2rem) / 1.02 var(--studio-font-text);
	letter-spacing: -0.01em;
}

.studio-join__when.studio-tape { margin: 1.5rem 0 1rem; font-size: var(--studio-step-1); }

.studio-join__text p,
.studio-join__text ul {
	max-width: 46ch;
	color: var(--studio-text-2);
}

.studio-join__text ul { padding-left: 1.1rem; }
.studio-join__text .studio-btn { margin-top: 0.5rem; }

/* Aushang: zerknittert und vergilbt, mit dem einen Kaffeerand der Seite */
.studio-notice {
	position: relative;
	isolation: isolate;
	justify-self: center;
	/* gedreht ragen die Ecken seitlich hinaus; schmal genug, dass nichts über den Rand steht */
	width: min(100% - 1rem, 420px);
	padding: 1rem 1rem 0;
	color: var(--studio-paper-ink);
	rotate: -1.5deg;
	filter: drop-shadow(0 16px 18px oklch(0% 0 0 / 0.55));
}

.studio-notice::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle 55px at 82% 86%, transparent 46px, oklch(62% 0.08 60 / 0.16) 47px 52px, transparent 53px),
		radial-gradient(120% 90% at 50% 40%, transparent 55%, oklch(70% 0.07 75 / 0.35)),
		var(--studio-crumple) 200px 90px / 360px,
		var(--studio-paper-aged);
	background-blend-mode: normal, normal, multiply, normal;
	clip-path: var(--studio-edge-b);
}

.studio-notice > .studio-strip { left: 50%; top: -14px; translate: -50% 0; rotate: 2deg; }

/* Foto in echten Farben, leicht entsättigt wie ein Abzug am Brett (kein Blaufilter, Wunsch 16.10.2026) */
.studio-notice__pic { background: var(--studio-paper-ink); }

.studio-notice__pic img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 70%;
	filter: saturate(0.85) contrast(1.05);
}

.studio-notice__title {
	margin: 1rem 0 0.5rem;
	font: 400 var(--studio-step-2) / 1.1 var(--studio-font-tape);
}

.studio-notice__text { margin: 0 0 1rem; color: var(--studio-paper-ink-2); }

.studio-notice__tabs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	margin-inline: -1rem;
	border-top: 2px dashed var(--studio-paper-ink);
}

.studio-notice__tab {
	min-height: 132px;
	padding: 0.7rem 0.3rem;
	border: 0;
	border-left: 2px dashed var(--studio-paper-ink);
	background: transparent;
	color: var(--studio-paper-ink);
	font: 400 0.8rem / 1.1 var(--studio-font-tape);
	text-align: left;
	writing-mode: vertical-rl;
	rotate: 180deg;
	cursor: pointer;
}

.studio-notice__tab:last-child { border-left: 0; }
.studio-notice__tab:hover { background: oklch(92% 0.04 234 / 0.6); }
.studio-notice__tab:focus-visible { outline: 3px solid var(--studio-pen); outline-offset: -4px; }
.studio-notice__tab.is-torn { visibility: hidden; }

/* Fallendes Blatt (Kopie des Zettels, fixiert, nur transform/opacity) */
.studio-notice__leaf {
	position: fixed;
	z-index: 80;
	margin: 0;
	pointer-events: none;
	background: var(--studio-paper);
	filter: drop-shadow(0 6px 6px oklch(0% 0 0 / 0.4));
	rotate: none;
}

.studio-notice__torn:empty { display: none; }

.studio-notice__torn {
	margin: 0 -1rem;
	padding: 0.75rem 1rem;
	background: var(--studio-paper-ink);
	color: var(--studio-paper);
	font-weight: 600;
}

.studio-notice__torn a { color: var(--studio-brand-hover); }

/* ---------- Crew: Backstage-Pässe an der Stange ---------- */
.studio-crew__intro { max-width: 52ch; margin: 0; color: var(--studio-text-2); }

.studio-crew__rail {
	height: 10px;
	margin-top: 1.5rem;
	border-radius: 5px;
	background: linear-gradient(oklch(62% 0.01 245), oklch(34% 0.01 245) 60%, oklch(22% 0.01 245));
	box-shadow: 0 6px 10px oklch(0% 0 0 / 0.6);
}

.studio-crew__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 210px;
	gap: 1.5rem;
	margin: 0;
	padding: 0 0.5rem 2rem;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
}

.studio-pass { display: grid; justify-items: center; scroll-snap-align: start; }

.studio-pass__swing { display: grid; justify-items: center; transform-origin: 50% 0; }
.studio-pass:hover .studio-pass__swing,
.studio-pass:focus-within .studio-pass__swing { animation: studio-sway 2.6s ease-in-out; }

/* studio-crew.js: Pendel-Physik übernimmt das Pendeln, beim Gleiten kein Einrasten */
.studio-crew__list.is-physics .studio-pass:hover .studio-pass__swing,
.studio-crew__list.is-physics .studio-pass:focus-within .studio-pass__swing { animation: none; }
.studio-crew__list.is-gliding { scroll-snap-type: none; }

.studio-crew__auto {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	min-height: 44px;
	margin: 0.25rem 0 0 -0.5rem;
	padding: 0.5rem;
	border: 0;
	background: none;
	color: var(--studio-text-2);
	font: 600 var(--studio-step--1) / 1 var(--studio-font-text);
	cursor: pointer;
}

.studio-crew__auto:hover { color: var(--studio-text); }

/* Pause: zwei Balken; angehalten: Dreieck */
.studio-crew__auto-icon {
	width: 10px;
	height: 12px;
	background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.studio-crew__auto.is-off .studio-crew__auto-icon {
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.studio-crew__auto:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }

@keyframes studio-sway {
	0% { rotate: 0deg; }
	18% { rotate: 3.2deg; }
	40% { rotate: -2.2deg; }
	60% { rotate: 1.2deg; }
	80% { rotate: -0.5deg; }
	100% { rotate: 0deg; }
}

/* Band: blau = Vorstand, Tape = Ressortleitung */
.studio-pass__strap {
	display: grid;
	place-items: center;
	width: 22px;
	height: var(--studio-strap, 96px);
	overflow: hidden;
	background: var(--studio-tape);
	clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
}

.studio-pass__strap::after {
	content: "STUDENTENFUNK · STUDENTENFUNK";
	writing-mode: vertical-rl;
	white-space: nowrap;
	color: var(--studio-tape-ink);
	font: 800 0.5rem / 1 var(--studio-font-text);
	letter-spacing: 0.2em;
}

.studio-pass.is-board .studio-pass__strap { background: var(--studio-brand); }
.studio-pass.is-board .studio-pass__strap::after { color: var(--studio-on-brand); }

.studio-pass__clip {
	width: 16px;
	height: 18px;
	margin-top: -2px;
	border-radius: 3px 3px 5px 5px;
	background: linear-gradient(90deg, oklch(45% 0.005 245), oklch(80% 0.005 245) 45%, oklch(50% 0.005 245));
	box-shadow: 0 2px 3px oklch(0% 0 0 / 0.5);
}

.studio-pass__card {
	position: relative;
	width: 188px;
	aspect-ratio: 54 / 86;
	margin-top: -4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--studio-paper-ink);
	font: inherit;
	text-align: left;
	perspective: 900px;
	cursor: pointer;
}

.studio-pass__card:focus-visible { outline: 3px solid var(--studio-brand); outline-offset: 4px; border-radius: 10px; }

.studio-pass__flip {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 800ms var(--studio-ease-out);
}

.studio-pass__card[aria-pressed="true"] .studio-pass__flip { transform: rotateY(180deg); }

.studio-pass__side {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	overflow: hidden;
	border-radius: 10px;
	background: var(--studio-paper);
	backface-visibility: hidden;
	box-shadow: 0 18px 28px -14px oklch(0% 0 0 / 0.9), inset 0 0 0 1px oklch(100% 0 0 / 0.6);
}

/* Glanz der Schutzhülle */
.studio-pass__side::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, oklch(100% 0 0 / 0.35) 0%, transparent 28%, transparent 62%, oklch(100% 0 0 / 0.14) 70%, transparent 82%);
}

.studio-pass__side--back { transform: rotateY(180deg); }

.studio-pass__slot {
	justify-self: center;
	width: 38px;
	height: 7px;
	margin: 9px 0 6px;
	border-radius: 4px;
	background: oklch(25% 0.01 245);
	box-shadow: inset 0 1px 2px oklch(0% 0 0 / 0.6);
}

.studio-pass__band {
	padding: 0.4rem 0.75rem;
	background: var(--studio-tape);
	color: var(--studio-tape-ink);
	font: 800 0.68rem / 1 var(--studio-font-text);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.studio-pass.is-board .studio-pass__band { background: var(--studio-brand); color: var(--studio-on-brand); }

.studio-pass__body {
	display: grid;
	gap: 0.35rem;
	align-content: start;
	padding: 0.65rem 0.75rem 0.4rem;
}

.studio-pass__body img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 4px;
	background: var(--studio-surface-3);
	filter: saturate(0.95);
}

.studio-pass__name { font: 800 1rem / 1.15 var(--studio-font-text); }
.studio-pass__role { font: 400 0.9rem / 1.15 var(--studio-font-tape); color: var(--studio-paper-ink-2); }

.studio-pass__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.75rem 0.6rem;
	color: var(--studio-paper-ink-2);
	font: 700 0.6rem / 1.1 var(--studio-font-text);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.studio-pass__code {
	width: 54px;
	height: 18px;
	background: repeating-linear-gradient(90deg, var(--studio-paper-ink) 0 1px, transparent 1px 3px, var(--studio-paper-ink) 3px 5px, transparent 5px 6px, var(--studio-paper-ink) 6px 7px, transparent 7px 9px);
}

.studio-pass__bio {
	padding: 0.7rem 0.8rem;
	overflow: hidden;
	color: var(--studio-paper-ink);
	font-size: 0.85rem;
	line-height: 1.45;
}

.studio-pass__turn { font: 400 0.8rem / 1 var(--studio-font-tape); color: var(--studio-pen); letter-spacing: 0; text-transform: none; }

/* ---------- Backstage ---------- */
.studio-backstage__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 2rem 1.5rem;
	margin: 0;
	padding: 1rem 0 0;
	list-style: none;
}

@media (max-width: 600px) {
	.studio-backstage__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 0.75rem; }
}

.studio-backstage__photo {
	display: block;
	text-decoration: none;
	rotate: -2.4deg;
	transition: rotate 200ms var(--studio-ease), translate 200ms var(--studio-ease);
}

.studio-backstage__grid li:nth-child(even) .studio-backstage__photo { rotate: 1.8deg; translate: 0 12px; }

.studio-backstage__photo:hover,
.studio-backstage__photo:focus-visible { color: var(--studio-paper-ink); rotate: 0deg; translate: 0 -4px; }
.studio-backstage__photo:focus-visible { outline: 3px solid var(--studio-brand); outline-offset: 6px; }
.studio-backstage__photo > .studio-strip { left: 32%; top: -13px; width: 70px; }

.studio-backstage__cap {
	display: block;
	padding: 0.75rem 0.25rem 0.25rem;
	font: 400 var(--studio-step-0) / 1.2 var(--studio-font-tape);
	overflow-wrap: anywhere;
}

@media (max-width: 600px) {
	.studio-backstage__cap { font-size: 0.85rem; }
}

/* ---------- Papier wird beim Scrollen angeheftet (nur mit JS und ohne „weniger Bewegung“) ---------- */
.studio-motion [data-studio-reveal] {
	opacity: 0;
	translate: 0 -26px;
	transition: opacity 700ms ease var(--studio-delay, 0ms), translate 900ms var(--studio-ease-out) var(--studio-delay, 0ms);
}

.studio-motion .studio-section-head[data-studio-reveal],
.studio-motion .studio-join__text[data-studio-reveal] { translate: 0 22px; }

.studio-motion [data-studio-reveal].is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	.studio-wall__spot,
	.studio-backstage__photo,
	.studio-pass__flip { transition: none; }
	.studio-pass:hover .studio-pass__swing,
	.studio-pass:focus-within .studio-pass__swing { animation: none; }
}