/* Watch the tour — dark-portal cinema. Inherits .dark-portal tokens + --teal/--mono/--font.
   Layout: centred hero → theater (featured stage + chapter rail, ambient glow
   behind) → shared bridge CTA card. The stage is a link out to Screen Studio;
   the rail only switches what the stage shows. */

.dark-portal {
	--tour-accent: #2fbf9a;
	--tour-dim: rgba(255, 255, 255, 0.56);
	--tour-faint: rgba(255, 255, 255, 0.34);
}

.breadcrumb-wrap { max-width: 1240px; margin: 0 auto; padding: 96px 32px 0; }
.dark-portal .breadcrumb a { color: var(--tour-dim); }
.dark-portal .breadcrumb a:hover { color: #fff; }
.dark-portal .breadcrumb-sep { color: var(--tour-faint); }
.dark-portal .breadcrumb span:last-child { color: rgba(255, 255, 255, 0.8); }

/* ── Hero ── */
.tour-hero {
	max-width: 880px;
	margin: 0 auto;
	padding: 44px 32px 8px;
	text-align: center;
}
.tour-eyebrow {
	font-family: var(--mono);
	font-size: 14px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--tour-accent);
}
.tour-h1 {
	margin-top: 16px;
	font-size: clamp(44px, 7vw, 76px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: #fff;
}
.tour-h1 em { color: var(--tour-accent); font-style: normal; }
.tour-sub {
	margin: 20px auto 0;
	font-size: clamp(17px, 2vw, 21px);
	line-height: 1.55;
	color: var(--tour-dim);
	max-width: 680px;
}
.tour-meta {
	margin-top: 22px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tour-faint);
	display: flex;
	justify-content: center;
	gap: 12px;
}
.tour-meta-dot { color: rgba(255, 255, 255, 0.18); }

/* ── Theater ── */
.tour-theater {
	position: relative;
	max-width: 1240px;
	margin: 44px auto 0;
	padding: 0 32px;
}

/* Ambient glow — the active poster, blurred, bleeding past the stage like
   light off a screen in a dark room. Sits behind everything, never catches
   the pointer. */
.tour-glow {
	position: absolute;
	inset: -48px 12px -64px;
	z-index: 0;
	filter: blur(72px) saturate(1.6);
	opacity: 0.5;
	pointer-events: none;
}
.tour-glow img {
	position: absolute;
	inset: 6%;
	width: 88%;
	height: 88%;
	object-fit: cover;
	border-radius: 40px;
	opacity: 0;
	transition: opacity 1s ease;
}
.tour-glow img.is-active { opacity: 1; }

.tour-stage-row {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 348px;
	gap: 22px;
	align-items: start;
}

/* The stage — poster carousel that becomes an inline player on play. */
.tour-stage {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: 2140 / 1080;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #0a0a0a;
	box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55);
	transition: border-color 0.2s;
}
.tour-stage:hover { border-color: rgba(47, 191, 154, 0.45); }
.tour-stage-posters { position: absolute; inset: 0; }
.tour-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	display: none;
}
/* While media is loaded the stage IS the player: native controls only. */
.tour-stage.has-media .tour-video { display: block; }
.tour-stage.has-media .tour-stage-posters,
.tour-stage.has-media .tour-stage-scrim,
.tour-stage.has-media .tour-play,
.tour-stage.has-media .tour-stage-info { display: none; }
.tour-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.035);
	transition: opacity 0.55s ease, transform 1.4s cubic-bezier(0.2, 0, 0, 1);
}
.tour-poster.is-active { opacity: 1; transform: scale(1); }
.tour-stage-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0) 60%);
}

/* Play button + pulsing halo */
.tour-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: none;
	padding: 0;
	cursor: pointer;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--tour-accent);
	color: #06231c;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 40px rgba(47, 191, 154, 0.35);
	transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.tour-play svg { margin-left: 5px; }
.tour-stage:hover .tour-play { transform: translate(-50%, -50%) scale(1.08); }
.tour-play::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid rgba(47, 191, 154, 0.45);
	animation: tourPulse 2.4s cubic-bezier(0.2, 0, 0.4, 1) infinite;
}
@keyframes tourPulse {
	0% { transform: scale(0.9); opacity: 0.9; }
	70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.tour-play::before { animation: none; }
}

.tour-stage-info {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.tour-stage-kicker {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tour-accent);
}
.tour-stage-title {
	margin-top: 6px;
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: #fff;
}
.tour-stage-hint {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tour-dim);
	white-space: nowrap;
	padding-bottom: 4px;
	text-decoration: none;
	transition: color 0.2s;
}
.tour-stage-hint:hover { color: var(--tour-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Chapter rail ── */
.tour-rail { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tour-chap {
	display: grid;
	grid-template-columns: auto 84px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	cursor: pointer;
	text-align: left;
	font-family: var(--font);
	transition: background 0.18s, border-color 0.18s;
}
.tour-chap:hover { background: rgba(255, 255, 255, 0.04); }
.tour-chap.is-active {
	background: var(--dark-surface);
	border-color: rgba(47, 191, 154, 0.4);
}
.tour-chap-num {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--tour-faint);
}
.tour-chap.is-active .tour-chap-num { color: var(--tour-accent); }
.tour-chap-thumb {
	width: 84px;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--dark-border);
	opacity: 0.8;
	transition: opacity 0.18s;
	display: block;
}
.tour-chap:hover .tour-chap-thumb,
.tour-chap.is-active .tour-chap-thumb { opacity: 1; }
.tour-chap-body { min-width: 0; }
.tour-chap-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.87);
}
.tour-chap-desc {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--tour-dim);
}
.tour-chap-dur {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--tour-faint);
	align-self: center;
}
.tour-chap.is-active .tour-chap-dur { color: var(--tour-accent); }

.tour-note {
	position: relative;
	z-index: 1;
	margin: 22px auto 0;
	text-align: center;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	color: var(--tour-faint);
}

/* ── CTA footnote ── */
.tour-demo-line {
	text-align: center;
	margin: -20px auto 88px;
	font-size: 14px;
	color: var(--tour-dim);
}
.tour-demo-line a {
	color: var(--tour-accent);
	font-weight: 600;
	text-decoration: none;
}
.tour-demo-line a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Responsive: rail becomes a snap filmstrip under the stage ── */
@media (max-width: 1020px) {
	.tour-stage-row { grid-template-columns: minmax(0, 1fr); }
	.tour-rail {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(250px, 68vw);
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 6px 2px 12px;
		-webkit-overflow-scrolling: touch;
	}
	.tour-chap {
		grid-template-columns: minmax(0, 1fr) auto;
		scroll-snap-align: start;
		align-items: start;
		border-color: var(--dark-border);
		background: var(--dark-surface);
	}
	.tour-chap-thumb { width: 100%; order: -1; grid-column: 1 / -1; }
	.tour-chap-num { display: none; }
	.tour-chap-dur { align-self: start; padding-top: 2px; }
	.tour-glow { inset: -24px 8px -32px; filter: blur(56px) saturate(1.5); }
	.tour-note { display: none; }
}
@media (max-width: 640px) {
	.breadcrumb-wrap { padding: 88px 20px 0; }
	.tour-hero { padding: 36px 20px 4px; }
	.tour-theater { padding: 0 16px; }
	.tour-meta { flex-wrap: wrap; gap: 8px; }
	.tour-stage { border-radius: 14px; }
	.tour-play { width: 64px; height: 64px; }
	.tour-stage-info { left: 16px; right: 16px; bottom: 14px; }
	.tour-stage-hint { display: none; }
	.tour-demo-line { margin: -8px auto 64px; padding: 0 20px; }
}