.reel__screen { background: var(--c-blue); }

.stages { color: #fff; line-height: 1.6; }
.stages__list { margin: 0; padding: 0; list-style: none; }
.stages__label { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .74); }
.stages__title { font-weight: 500; letter-spacing: -.005em; }
.stages__note { color: rgba(255, 255, 255, .86); text-wrap: pretty; }

.stages__glow { position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(70% 120% at 100% -10%, rgba(140, 168, 255, .62) 0, rgba(140, 168, 255, .18) 42%, rgba(140, 168, 255, 0) 70%),
		radial-gradient(70% 110% at -5% 110%, rgba(8, 18, 130, .6) 0, rgba(8, 18, 130, .18) 46%, rgba(8, 18, 130, 0) 74%); }

.stages__glow::after { content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .34) 1px, rgba(255, 255, 255, 0) 1.3px); background-size: 1.9em 1.9em;
	-webkit-mask-image: linear-gradient(215deg, #000 0, rgba(0, 0, 0, .35) 34%, rgba(0, 0, 0, 0) 62%); mask-image: linear-gradient(215deg, #000 0, rgba(0, 0, 0, .35) 34%, rgba(0, 0, 0, 0) 62%); }

.stage { position: relative; border: 1px solid rgba(255, 255, 255, .3); background: linear-gradient(180deg, rgba(8, 16, 104, .66) 0, rgba(8, 16, 104, .46) 100%); }
.stage--2 { border-color: rgba(255, 255, 255, .4); background: linear-gradient(180deg, rgba(8, 16, 104, .4) 0, rgba(8, 16, 104, .24) 100%); }
.stage--3 { border-color: rgba(255, 255, 255, .58); background: linear-gradient(180deg, rgba(255, 255, 255, .17) 0, rgba(255, 255, 255, .06) 100%); }
.stage--4 { border-color: #fff; background: linear-gradient(180deg, #fff 0, #edf0ff 100%); color: #000; }

.stage__no span { display: block; font-family: var(--font-mono); letter-spacing: .12em; color: rgba(255, 255, 255, .76); }

.stage__no b { display: block; font-family: var(--font-mono); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.stage__name { font-weight: 500; }
.stage__text { color: rgba(255, 255, 255, .88); }
.stage__to { letter-spacing: .04em; color: rgba(255, 255, 255, .76); }
.stage__service { display: inline-flex; align-items: center; gap: .5em; font-weight: 500; line-height: 1.5; color: #fff; }
.stage__service span { border-bottom: 1px solid currentColor; }
.stage__service svg { flex: none; width: 1em; height: 1em; transition: transform .5s var(--ease); }
@media (hover: hover) { .stage__service:hover svg { transform: translate3d(.3em, 0, 0); } }
.stage__service:focus-visible { outline-color: #fff; }

.stage--4 .stage__no span, .stage--4 .stage__no b, .stage--4 .stage__service { color: var(--c-blue); }
.stage--4 .stage__text { color: var(--c-grey-blue); }
.stage--4 .stage__to { color: var(--c-sub); }
.stage--4 .stage__service:focus-visible { outline-color: var(--c-blue); }

@media (min-width: 813px) {
	.reel__screen { container-type: size; }
	.stages { position: absolute; inset: 0; font-size: clamp(13px, min(1.02vw, 2.95cqh), 2rem); }
	.stages__head { position: absolute; left: 2.6em; top: 2.5em; width: calc(50% - 3.6em); z-index: 1; }
	.stages__label { font-size: .72em; }
	.stages__title { margin-top: .35em; font-size: 2.15em; line-height: 1.3; }
	.stages__note { margin-top: .9em; font-size: .86em; line-height: 1.85; }
	.stages__list { position: absolute; left: 2.6em; right: 2.6em; top: 2.5em; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); column-gap: .7em; align-items: end; overflow: hidden; }

	.stage { display: flex; flex-direction: column; min-height: var(--h); padding: 1.3em 1.25em 1.6em; border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
	.stage--1 { --h: 44%; }
	.stage--2 { --h: 60%; }
	.stage--3 { --h: 76%; }
	.stage--4 { --h: 92%; }
	.stage__no span { font-size: .68em; }

	.stage__no b { margin-top: .12em; font-size: 2.5em; font-size: clamp(2.5em, 9.5cqh, 4.6em); }
	.stage__name { margin-top: .55em; font-size: 1.42em; line-height: 1.42; }
	.stage__text { margin-top: .55em; font-size: .92em; line-height: 1.8; }
	.stage__to { margin-top: auto; padding-top: 1.1em; font-size: .74em; }
	.stage__service { align-self: flex-start; margin-top: .25em; font-size: 1.05em; }

	@container (max-width: 880px) {
		.stages__head { left: 1.7em; width: calc(50% - 2.4em); }
		.stages__list { left: 1.7em; right: 1.7em; column-gap: .55em; }
		.stage { padding: 1.1em .9em 1.3em; }
		.stage__text { display: none; }
		.stage__name { font-size: 1.2em; }
		.stage__service { font-size: .92em; gap: .35em; }
	}

	.js .reel__frame:not(.is-open) .stages { pointer-events: none; }
	.js .stages__glow { opacity: 0; transition: opacity .2s ease; }
	.js .reel__frame.is-open .stages__glow { opacity: 1; transition: opacity 1.6s ease .25s; }
	.js .stages__head > * { opacity: 0; transform: translate3d(0, 1.1em, 0); transition: opacity .2s ease, transform 0s .2s; }
	.js .reel__frame.is-open .stages__head > * { opacity: 1; transform: none; transition: opacity .9s ease .1s, transform 1.1s var(--ease) .1s; }
	.js .reel__frame.is-open .stages__head > :nth-child(2) { transition-delay: .18s; }
	.js .reel__frame.is-open .stages__head > :nth-child(3) { transition-delay: .26s; }
	.js .stage { opacity: 0; transform: translate3d(0, 102%, 0); transition: opacity .2s ease, transform 0s .2s; }
	.js .reel__frame.is-open .stage { opacity: 1; transform: none; transition: opacity .3s ease calc(.2s + var(--i) * .13s), transform 1.25s var(--ease) calc(.2s + var(--i) * .13s); }
	.js .stage > * { opacity: 0; transition: opacity .15s ease; }
	.js .reel__frame.is-open .stage > * { opacity: 1; transition: opacity .8s ease calc(.85s + var(--i) * .13s); }
}

@media (max-width: 812px) {
	.reel__frame { aspect-ratio: auto; font-size: 1rem; }
	.reel__screen { position: relative; inset: auto; }
	.stages { position: relative; padding: 2rem 1.1rem 1.2rem; font-size: .95rem; }
	.stages__head { position: relative; z-index: 1; }
	.stages__label { font-size: .7rem; }
	.stages__title { margin-top: .3em; font-size: 1.6rem; line-height: 1.35; }
	.stages__note { margin-top: .8em; font-size: .84rem; line-height: 1.85; }
	.stages__note br { display: none; }
	.stages__list { position: relative; z-index: 1; display: grid; row-gap: .6rem; margin-top: 1.5rem; }

	.stage { display: grid; grid-template-columns: 3.9em minmax(0, 1fr); column-gap: .8em; align-content: start; padding: 1.15em 1.1em 1.25em; border-radius: var(--radius-card); }
	.stage__no { grid-column: 1; grid-row: 1 / span 4; }
	.stage__no span { font-size: .62rem; }
	.stage__no b { margin-top: .2em; font-size: 1.9rem; }
	.stage__name, .stage__text, .stage__to, .stage__service { grid-column: 2; }
	.stage__name { margin-top: .15em; font-size: 1.22em; line-height: 1.45; }
	.stage__text { margin-top: .4em; font-size: .9em; line-height: 1.8; }
	.stage__to { margin-top: 1em; font-size: .74em; }
	.stage__service { justify-self: start; margin-top: .2em; font-size: 1.02em; }

	.stages__glow::after { background-size: 1.5rem 1.5rem; -webkit-mask-image: linear-gradient(200deg, #000 0, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, 0) 30%); mask-image: linear-gradient(200deg, #000 0, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, 0) 30%); }

	.js .stages__head > *, .js .stage { opacity: 0; transform: translate3d(0, 1.4em, 0); transition: opacity .9s ease, transform 1.1s var(--ease); }
	.js .reel__frame.is-open .stages__head > *, .js .reel__frame.is-open .stage { opacity: 1; transform: none; }
	.js .reel__frame.is-open .stages__head > :nth-child(2) { transition-delay: .08s; }
	.js .reel__frame.is-open .stages__head > :nth-child(3) { transition-delay: .16s; }
	.js .reel__frame.is-open .stage { transition-delay: calc(.3s + var(--i) * .14s); }
}

html.is-reduced .stages__glow, html.is-reduced .stages__head > *, html.is-reduced .stage, html.is-reduced .stage > * { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
	.stages__glow, .stages__head > *, .stage, .stage > * { transition: none !important; }
}

html.no-js .reel { display: block; margin-top: 8vw; padding: calc(2 * var(--cross)) 0; }