/* Opening curtain. The hero underneath stays the page. */

html.rb-intro-on,
html.rb-intro-on body { overflow: hidden; }

.rb-intro {
	position: fixed;
	z-index: 80;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 42%, rgba(212, 180, 131, 0.16), transparent 34%),
		var(--night);
	color: var(--cream);
	overflow: hidden;
}

.rb-intro.is-out {
	transform: translateY(-100%);
	transition: transform 0.7s ease;
}

.rb-intro__staff {
	position: absolute;
	left: 6vw;
	right: 6vw;
	top: 46%;
	display: grid;
	gap: 0.72rem;
}

.rb-intro__staff span {
	display: block;
	height: 1px;
	background: rgba(212, 180, 131, 0.45);
	transform: scaleX(0);
	transform-origin: left center;
}

.rb-intro.is-live .rb-intro__staff span { animation: rb-staff 0.9s ease forwards; }
.rb-intro.is-live .rb-intro__staff span:nth-child(2) { animation-delay: 0.08s; }
.rb-intro.is-live .rb-intro__staff span:nth-child(3) { animation-delay: 0.16s; }
.rb-intro.is-live .rb-intro__staff span:nth-child(4) { animation-delay: 0.24s; }
.rb-intro.is-live .rb-intro__staff span:nth-child(5) { animation-delay: 0.32s; }

.rb-intro__notes { position: absolute; inset: 0; pointer-events: none; }
.rb-intro__notes i {
	position: absolute;
	color: var(--gold);
	opacity: 0;
	width: 1.1rem;
}
.rb-intro__notes svg { display: block; width: 100%; height: auto; }
.rb-intro__notes i:nth-child(1) { top: 18%; left: 12%; }
.rb-intro__notes i:nth-child(2) { top: 28%; right: 14%; }
.rb-intro__notes i:nth-child(3) { bottom: 22%; left: 18%; }
.rb-intro__notes i:nth-child(4) { bottom: 16%; right: 16%; }
.rb-intro__notes i:nth-child(5) { top: 14%; left: 42%; }
.rb-intro__notes i:nth-child(6) { bottom: 28%; right: 38%; }
.rb-intro.is-live .rb-intro__notes i { animation: rb-note 2.8s ease forwards; }
.rb-intro.is-live .rb-intro__notes i:nth-child(2) { animation-delay: 0.25s; }
.rb-intro.is-live .rb-intro__notes i:nth-child(3) { animation-delay: 0.45s; }
.rb-intro.is-live .rb-intro__notes i:nth-child(4) { animation-delay: 0.15s; }
.rb-intro.is-live .rb-intro__notes i:nth-child(5) { animation-delay: 0.55s; }
.rb-intro.is-live .rb-intro__notes i:nth-child(6) { animation-delay: 0.35s; }

.rb-intro__stage { position: relative; z-index: 1; text-align: center; }

.rb-intro__vinyl {
	position: relative;
	width: min(42vw, 220px);
	margin: 0 auto;
	aspect-ratio: 1;
}
.rb-intro__ring {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(212, 180, 131, 0.45);
	border-radius: 50%;
	opacity: 0;
}
.rb-intro.is-live .rb-intro__ring { animation: rb-ring 2.2s ease-out infinite; }
.rb-intro.is-live .rb-intro__ring:nth-child(2) { animation-delay: 0.7s; }
.rb-intro.is-live .rb-intro__ring:nth-child(3) { animation-delay: 1.4s; }

.rb-intro__disc {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, transparent 0 27%, rgba(212, 180, 131, 0.45) 28% 29.2%, transparent 30.2% 38%, rgba(246, 240, 230, 0.2) 39% 40%, transparent 41%),
		repeating-radial-gradient(circle at 50% 50%, #221c17 0 2px, #100e0c 3px 5px);
	box-shadow: 0 0 0 1px rgba(212, 180, 131, 0.35), 0 24px 70px rgba(0, 0, 0, 0.45);
}
.rb-intro.is-live .rb-intro__disc { animation: rb-spin 7s linear infinite; }
.rb-intro__disc img {
	width: 46%;
	height: 46%;
	max-width: none;
	border-radius: 50%;
}
.rb-intro.is-live .rb-intro__disc img { animation: rb-spin 7s linear infinite reverse; }

.rb-intro__name,
.rb-intro__live { opacity: 0; }
.rb-intro.is-live .rb-intro__name,
.rb-intro.is-live .rb-intro__live { animation: rb-rise 0.7s ease 1.05s forwards; }
.rb-intro__name {
	margin: 1.1rem 0 0.2rem;
	font-family: var(--serif);
	font-size: clamp(2.4rem, 6vw, 4.4rem);
	font-weight: 520;
	letter-spacing: -0.03em;
	line-height: 0.95;
}
.rb-intro__live {
	margin: 0;
	color: var(--gold);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.rb-intro__skip {
	position: absolute;
	z-index: 2;
	top: max(0.85rem, env(safe-area-inset-top));
	right: 4rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid rgba(246, 240, 230, 0.4);
	border-radius: 999px;
	background: rgba(16, 12, 9, 0.45);
	color: var(--cream);
	cursor: pointer;
}
html.rb-intro-on .rb-hero__pause {
	position: fixed;
	z-index: 90;
	top: max(0.85rem, env(safe-area-inset-top));
	right: 0.85rem;
}

@media (max-width: 700px) {
	.rb-intro__vinyl { width: min(58vw, 210px); }
	.rb-intro__notes i:nth-child(n + 5) { display: none; }
	.rb-intro__staff { top: 44%; }
}

@media (prefers-reduced-motion: reduce) {
	.rb-intro.is-live .rb-intro__disc,
	.rb-intro.is-live .rb-intro__disc img,
	.rb-intro.is-live .rb-intro__ring,
	.rb-intro.is-live .rb-intro__notes i,
	.rb-intro.is-live .rb-intro__staff span,
	.rb-intro.is-live .rb-intro__name,
	.rb-intro.is-live .rb-intro__live { animation: none; }
	.rb-intro__staff span { transform: none; }
	.rb-intro__name,
	.rb-intro__live { opacity: 1; }
}

@keyframes rb-staff { to { transform: scaleX(1); } }
@keyframes rb-note {
	0% { opacity: 0; transform: translateY(10px); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-28px); }
}
@keyframes rb-ring {
	from { transform: scale(0.62); opacity: 0.7; }
	to { transform: scale(1.7); opacity: 0; }
}
@keyframes rb-spin { to { transform: rotate(1turn); } }
@keyframes rb-rise { to { opacity: 1; transform: none; } }