/*
 * seal/aiolos-scroll — scroll-driven opener. Tokens, borders and type follow
 * hero.css; brand orange only as a fill with white text. The stage is a
 * top-view video; the text runs in the left zone the video keeps free.
 * Without .is-live (no JS, reduced motion) the poster and the full text show.
 */

/* sticky needs a non-scrolling ancestor; clip looks the same as hidden */
main:has(.seal-aiolos-scroll) {
	overflow: clip;
}

.seal-aiolos-scroll {
	--as-ink: #0f1a20;
	--as-line: rgba(255, 255, 255, 0.22);
	--as-muted: rgba(255, 255, 255, 0.62);
	--as-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--as-pad: clamp(1.25rem, 3vw, 2.5rem);
	position: relative;
	background: #fff;
	margin: 0 !important;
	max-width: none !important;
}

.seal-aiolos-scroll.is-live {
	height: 720vh;
}

.as-stage {
	height: 100vh;
	padding: 1rem;
}

.is-live .as-stage {
	position: sticky;
	top: 0;
}

.as-teaser {
	position: relative;
	overflow: hidden;
	height: 100%;
	min-height: 560px;
	background: var(--as-ink);
	border-radius: var(--radius);
	color: #fff;
}

/* the hero's hairline frame */
.as-teaser::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--as-line);
	border-radius: var(--radius);
	pointer-events: none;
	z-index: 6;
}

/* ---------- video stage ---------- */
.as-video {
	position: absolute;
	inset: 0;
}

.as-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% 50%;
	display: block;
}

/* the story fades in evenly over the running loop, so the jump from
   wherever the loop is to the start of the story reads as one movement;
   the loop is hidden only once the story covers it, and on the way back it
   is there at once while the story fades out over it */
.as-story {
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}

.is-story .as-story {
	opacity: 1;
}

.is-story .as-loop {
	opacity: 0;
	transition: opacity 0s 0.8s;
}

/* keeps the left zone legible; darkens further for the finale */
.as-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(15, 26, 32, 0.94) 0%, rgba(15, 26, 32, 0.85) 36%, rgba(15, 26, 32, 0) 60%);
	transition: background-color 0.8s var(--as-ease);
}

.is-live[data-phase="5"] .as-video::after {
	background-color: rgba(6, 38, 47, 0.55);
}

/* ---------- type ---------- */
.as-kicker,
.as-scroll-hint,
.as-caption,
.as-stats span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--as-muted);
	margin: 0;
}

.as-title,
.as-finale h2 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--as-muted);
	margin: 0.75rem 0 1.5rem;
}

.as-title span,
.as-finale h2 span {
	color: #fff;
}

/* "Autocomplete the" always starts its own line, also where the column is
   wide enough to carry it after "Prompt a port." */
.as-title > span {
	display: block;
}

/* ---------- hero line ---------- */
/* the tagline sits a little above the bottom, so the ship at the quay
   below stays free */
.as-hero {
	position: absolute;
	z-index: 2;
	left: var(--as-pad);
	bottom: clamp(5rem, 25vh, 17rem);
	max-width: 46%;
	transition: opacity 0.6s var(--as-ease), transform 0.6s var(--as-ease);
}

/* beats the theme's .wp-site-blocks p / h1 margins */
.seal-aiolos-scroll .as-hero .as-title {
	margin-bottom: 0;
}

/* "Scroll" sits apart from the tagline, level with the ship */
.seal-aiolos-scroll .as-hero .as-scroll-hint {
	position: absolute;
	left: 0;
	/* on the height of the ship at the quay */
	top: calc(100% + clamp(1.5rem, 6vh, 5rem));
	margin: 0;
	white-space: nowrap;
}

.as-scroll-hint::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.5rem;
	margin-left: 0.75rem;
	vertical-align: middle;
	background: var(--as-muted);
	animation: as-hint 1.6s var(--as-ease) infinite;
	transform-origin: top;
}

@keyframes as-hint {
	0% { transform: scaleY(0); }
	60% { transform: scaleY(1); }
	100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- the feed: messages, prompt, output, right on the video ---------- */
/* feed and figures share one column anchored at the bottom: like a chat,
   each new line opens below and pushes the earlier ones up; what no longer
   fits fades out at the top */
.as-col {
	position: absolute;
	z-index: 2;
	left: var(--as-pad);
	/* the shell's baseline sits in the lower third, not on the stage edge */
	--as-base: clamp(4rem, 20vh, 12rem);
	bottom: var(--as-base);
	width: min(560px, 34.5%);
	/* full height, so the fade only touches lines that run out at the top */
	height: calc(100% - clamp(88px, 13vh, 150px) - var(--as-base));
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 3rem);
	mask-image: linear-gradient(180deg, transparent 0, #000 3rem);
}

.as-feed {
	font-family: var(--wp--preset--font-family--mono);
	/* the same size as the contact chat and the career shell */
	font-size: clamp(0.85rem, min(1.1vw, 2vh), 1.05rem);
	line-height: 1.55;
}

.as-feed p {
	margin: 0 0 0.5em;
}

.as-msg {
	color: var(--as-muted);
}

.as-msg time {
	margin-right: 0.5em;
}

.as-msg b {
	color: #fff;
	font-weight: 500;
}

.as-prompt {
	margin-top: 1.1em !important;
	color: #fff;
}

.as-ps {
	color: var(--as-muted);
}

.as-cursor {
	display: inline-block;
	width: 0.6em;
	height: 1.15em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: #fff;
	animation: as-blink 1.05s steps(1) infinite;
}

@keyframes as-blink {
	50% { opacity: 0; }
}

/* Aiolos asks back, the visitor tabs through its suggestions */
.as-ask {
	color: #fff;
}

.as-ghost {
	color: var(--as-muted);
	transition: color 0.3s;
}

.as-pick.is-taken .as-ghost {
	color: #fff;
}

.as-tab {
	margin-left: 0.25em;
	font-size: 0.85em;
	color: var(--as-muted);
	white-space: nowrap;
}

.as-tab:not(:empty)::before {
	content: "⇥ ";
}

/* deliberate exception to the brand rule: orange text on the dark stage */
.as-ac {
	color: var(--brand-primary);
	white-space: nowrap;
	display: none;
}

.as-pick.is-taken .as-ac {
	display: inline;
}

.as-out {
	color: #fff;
}

/* ---------- stats ---------- */
.as-stats {
	display: flex;
	flex-wrap: wrap;
	/* labels are broken by hand into two lines, so the figures stay side by side */
	gap: 0.75rem 2.5rem;
	margin-top: clamp(1rem, 3vh, 2rem);
	padding-top: clamp(0.75rem, 2vh, 1.25rem);
	border-top: 1px solid var(--as-line);
}

.as-stats span {
	white-space: nowrap;
}

.as-stats strong {
	display: block;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

/* the counter keeps the width of its final value ('1000+') from the start,
   so the figures beside it do not move while it counts */
.as-stats .as-count::before {
	content: attr(data-final);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.as-caption {
	flex-basis: 100%;
	font-size: 0.75rem;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- finale ---------- */
.as-finale {
	position: absolute;
	z-index: 4;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: var(--as-pad);
	/* the closing line stands where the tagline stood at the start */
	padding-bottom: clamp(5rem, 25vh, 17rem);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s var(--as-ease);
}

.as-finale h2 {
	max-width: 60%;
	margin: 0;
}

.as-finale h2 .as-f1 {
	color: var(--as-muted);
}

/* the two lines arrive one after the other with the scroll */
.is-live .as-finale h2 span {
	display: inline-block;
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.6s var(--as-ease), transform 0.8s var(--as-ease);
}

.is-live .as-finale h2 span.is-on {
	opacity: 1;
	transform: none;
}

/* ---------- phases (data-phase set by view.js) ---------- */
.is-live .as-feed,
.is-live .as-stats {
	opacity: 0;
	transition: opacity 0.6s var(--as-ease);
}

/* lines take no space until they arrive; then they are there at full height
   at once and fade in, while view.js lets the history glide up like a chat */
.is-live .as-msg,
.is-live .as-prompt,
.is-live .as-ask,
.is-live .as-pick,
.is-live .as-out {
	display: none;
	opacity: 0;
}

.is-live .as-msg.is-on,
.is-live .as-prompt.is-on,
.is-live .as-ask.is-on,
.is-live .as-pick.is-on,
.is-live .as-out.is-on {
	display: block;
	animation: as-arrive 0.4s var(--as-ease) forwards;
}

@keyframes as-arrive {
	from { opacity: 0; }
	to { opacity: 1; }
}

.is-live .as-prompt.is-on,
.is-live .as-ask.is-on {
	margin-top: 0.6em !important;
}

.is-live .as-stats {
	display: none;
}

.is-live[data-phase="4"] .as-stats {
	display: flex;
	animation: as-arrive 0.5s var(--as-ease) forwards;
}

.is-live[data-phase]:not([data-phase="0"]) .as-hero {
	opacity: 0;
	transform: translateY(-1rem);
}

.is-live[data-phase="1"] .as-feed,
.is-live[data-phase="2"] .as-feed,
.is-live[data-phase="3"] .as-feed,
.is-live[data-phase="4"] .as-feed,
.is-live[data-phase="4"] .as-stats {
	opacity: 1;
}

.is-live[data-phase="5"] .as-finale {
	opacity: 1;
}


/* ---------- static fallback ---------- */
.seal-aiolos-scroll:not(.is-live) .as-hero {
	position: relative;
	left: auto;
	bottom: auto;
	padding: clamp(96px, 16vh, 160px) var(--as-pad) 0;
	max-width: 760px;
}

.seal-aiolos-scroll:not(.is-live) .as-col,
.seal-aiolos-scroll:not(.is-live) .as-finale {
	position: relative;
	inset: auto;
	left: auto;
	top: auto;
	width: auto;
	max-width: 760px;
	opacity: 1;
	padding: 0 var(--as-pad);
	margin-bottom: 2rem;
}

.seal-aiolos-scroll:not(.is-live) .as-stage {
	height: auto;
}

.seal-aiolos-scroll:not(.is-live) .as-stats,
.seal-aiolos-scroll:not(.is-live) .as-scroll-hint,
.seal-aiolos-scroll:not(.is-live) .as-cursor,
.seal-aiolos-scroll:not(.is-live) .as-story {
	display: none;
}

/* ---------- small screens: the port on top, the shell below it ---------- */
/* like the career card: the video fills the upper part and fades into the
   stage, the text runs on the dark ground underneath and never over the port */
@media (max-width: 767.98px) {
	.as-video {
		inset: 0 0 auto 0;
		height: 58%;
		overflow: hidden;
	}

	/* only the lower edge fades into the card, the port above stays bright */
	.as-video::after {
		background: linear-gradient(180deg, rgba(15, 26, 32, 0) 85%, var(--as-ink) 100%);
	}

	/* the closing line sits below the video here, so the port stays unveiled */
	.is-live[data-phase="5"] .as-video::after {
		background-color: transparent;
	}

	/* a portrait cut from the right of the square: the train at the top,
	   crane 7 and berth 3 at the bottom; the video is scaled so that cut
	   fills the width, berth 3 stays in view and the roofs give way first */
	.as-video video {
		inset: auto auto 0 -71.9%;
		width: 176.5%;
		height: auto;
		aspect-ratio: 1;
		transform: translateY(10%);
	}

	/* while the page loads, the phone still shows its address bar and covers
	   the bottom of the card (100vh minus 100svh): the tagline and "Scroll"
	   sit that much higher */
	.as-hero {
		max-width: none;
		right: var(--as-pad);
		bottom: calc(var(--as-pad) + 100vh - 100svh + 8vh);
	}

	.seal-aiolos-scroll .as-hero .as-scroll-hint {
		position: static;
		margin-top: 1.25rem;
	}

	/* the shell starts where the video has faded out; older lines leave at
	   the top like a chat */
	.as-col {
		--as-base: var(--as-pad);
		/* one line of the shell */
		--as-row: calc(14px * 1.55);
		right: var(--as-pad);
		width: auto;
		/* one line short of the video, so the shell never runs into berth 3 */
		height: calc(48% - var(--as-base) - var(--as-row));
		transition: bottom 0.45s var(--as-ease), height 0.45s var(--as-ease);
	}

	/* the figures sit one line higher and close under the shell, while the
	   top of the shell stays where it is */
	.is-live[data-phase="4"] .as-col {
		bottom: calc(var(--as-base) + var(--as-row));
		height: calc(48% - var(--as-base) - 2 * var(--as-row));
	}

	.as-stats {
		margin-top: 0.5rem;
		padding-top: 0.6rem;
	}

	/* the same size as the other two shells on phones */
	.as-feed {
		font-size: 14px;
	}

	/* a message runs onto a second line right after its train, berth or
	   crane number, instead of breaking somewhere in the sentence */
	.as-msg-text {
		display: block;
	}

	/* the three figures side by side in one row */
	.as-stats {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 1rem;
	}

	.as-stats strong {
		font-size: 1.5rem;
	}

	.as-stats span {
		font-size: 0.68rem;
	}

	.as-finale h2 {
		max-width: none;
	}

	/* larger headlines on phones, so the card is not half empty; the tagline
	   stops where "global supply chain." still fits one line */
	.as-title {
		font-size: 9.2vw;
	}

	.as-finale h2 {
		font-size: 10.5vw;
	}

	/* on the line of "Meet Boreas"; by now the address bar is gone, so no
	   room is kept for it as for the tagline */
	.as-finale {
		padding-bottom: calc(var(--as-pad) + 8vh);
	}
}