/* ---------------------------------------------------------------- Intro (siehe assets/js/logo.js) */
.rm-splash { display: none; }
/* Sichtbar während des Intros und bis der Flug ins Header-Logo zu Ende ist. */
.rm-splash-on .rm-splash, .rm-splash.is-leaving {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* Ledertextur als eigene Ebene, damit sie ausblenden kann, während das Logo fliegt. */
.rm-splash::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--leather);
	background-image: var(--grain), var(--pores), radial-gradient(90% 70% at 50% 45%, #3a2416 0%, transparent 70%);
	background-blend-mode: multiply, soft-light, normal;
	transition: opacity .7s var(--ease) .1s;
}
.rm-splash.is-leaving::before { opacity: 0; }
.rm-splash__logo {
	position: relative;
	width: min(72vw, 880px);
	aspect-ratio: 634.3 / 249.27;
	transform-origin: 0 0;
	transition: transform .9s cubic-bezier(.65, 0, .25, 1);
}
.rm-splash.is-gone { display: none; }
.rm-splash canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* Rive zeichnet unsichtbar; logo.js kopiert jedes Bild eingefärbt (Messing/Creme) in .rm-splash__out. */
.rm-splash canvas.rm-splash__src { opacity: 0; }
.rm-splash canvas.rm-splash__out { position: absolute; inset: 0; z-index: 2; }
/* Stilles Logo, falls die Animation nicht lädt. */
.rm-splash__still {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: var(--bone);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
	transition: opacity .8s var(--ease);
}
.rm-splash.is-static .rm-splash__still { opacity: 1; }
.rm-splash.is-static canvas, .rm-splash.is-static canvas.rm-splash__out { opacity: 0; }

/* Während des Intros: nicht scrollen, Header-Logo und Hero warten. */
.rm-splash-on body { overflow: hidden; }
.rm-splash-on .rm-header .rm-logo { opacity: 0; transition: none; }

.rm-splash-on .rm-header nav, .rm-splash-on .rm-header__end { opacity: 0; }
.rm-header nav, .rm-header__end { transition: opacity 1s var(--ease) .3s; }

/* ---------------------------------------------------------------- Hero: erster Bildschirm */
.rm-hero {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gap);
	align-items: start;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: clamp(110px, 11vw, 150px);
	padding-bottom: clamp(90px, 11vh, 130px);
}
.rm-hero__main { grid-column: 1 / 9; }
.rm-hero__title { font-size: clamp(44px, min(7vw, 11.5vh), 120px); line-height: .98; letter-spacing: -.015em; }
.rm-hero__side { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 56px); margin-top: clamp(28px, 4.5vh, 52px); }
.rm-hero__side p { max-width: 26ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; }
.rm-hero__side .cap { color: var(--brass); line-height: 2; white-space: nowrap; }

.rm-hero__figure { grid-column: 9 / 13; }
.rm-hero__figure .rm-frame { aspect-ratio: 4 / 5; }
.rm-hero__figure img { object-position: 50% 30%; }
.rm-hero__figure figcaption { display: flex; justify-content: space-between; margin-top: 14px; color: var(--bone-dim); }

.rm-hero__cue { position: absolute; left: 50%; bottom: 28px; width: 1px; height: 56px; overflow: hidden; background: rgba(182, 147, 90, .2); }
.rm-hero__cue::after { content: ""; position: absolute; inset: 0; background: var(--brass); animation: rm-cue 2.6s var(--ease) infinite; }
@keyframes rm-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (max-width: 960px) {
	.rm-hero { min-height: 0; padding-bottom: clamp(70px, 12vw, 110px); }
	.rm-hero__main, .rm-hero__figure { grid-column: 1 / -1; }
	.rm-hero__title { font-size: clamp(40px, 12vw, 72px); }
	.rm-hero__side { flex-direction: column; align-items: flex-start; gap: 18px; }
	.rm-hero__figure { width: 78%; justify-self: end; margin-top: 44px; }
	.rm-hero__cue { display: none; }
	.rm-splash__logo { width: 84vw; }
}
@media (prefers-reduced-motion: reduce) {
	.rm-hero__cue::after { animation: none; }
}