/* =========================================================================
   Hero copy layout v2 (specs/hero-layout-v2.md). Homepage only.
   Positioning, sizes and spacing come from the spec. Colours, imagery and
   grain are ours. Every layer uses the same block geometry, vertically centred.
   Loaded after main.css, so these rules win over the earlier hero rules there.
   ========================================================================= */

:root {
	--hg: clamp(24px, 5.55vw, 96px);                                /* gutter */
	--hx: max(var(--hg), calc((100vw - 1800px) / 2 + var(--hg)));   /* left edge of the 1800px content box */
	--hw: calc(min(100vw, 1800px) - 2 * var(--hg));                 /* content box width */
}

@media (min-width: 861px) {
	:root {
		--header-h: 88px;
	}
}

.site-header {
	background: rgba(11, 15, 26, 0.75);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid rgba(138, 148, 176, 0.12);
}

/* Header and sections share the hero's content box, so everything lines up on
   the same left edge. */
.is-front .site-header .container,
.home-after .container {
	max-width: 1800px;
	padding-inline: var(--hg);
}

/* ---- copy block: identical geometry on all five layers -------------------- */
.digiai-world.is-v2 .sw-copy {
	/* Centred between the panel paddings. No transform: the engine owns that. */
	top: 132px;
	bottom: 100px;
	left: var(--hx);
	right: auto;
	width: min(calc(var(--hw) * 0.66666), 900px);
	height: fit-content;
	margin-block: auto;
	transform: none !important;
}

.digiai-world.is-v2 .dg-copy--hero {
	top: 186px;
	bottom: 130px;
	width: min(var(--hw), 900px);
}

/* hero.js drives the copy from the same eased scroll value as the images, so the
   two stay in sync. !important beats the engine's inline opacity and pointer-events. */
.digiai-world.is-v2 .sw-copy {
	opacity: var(--dg-cop, 0) !important;
	pointer-events: var(--dg-pe, none) !important;
}

/* The copy layer itself must never be faded by the old "is-done" rule: layer 05's
   block decides for itself when to go (just before the sections reach it). */
.digiai-world.is-v2.is-done .sw-copylayer {
	opacity: 1;
}

.dg-bar.is-covered {
	opacity: 0;
}

/* The sections slide over the last layer with a clean edge. The old 80px shadow
   blacked out the image behind the headline as the edge passed through the copy. */
.home-after {
	box-shadow: 0 -1px 0 rgba(138, 148, 176, 0.14), 0 -18px 36px rgba(11, 15, 26, 0.35);
}

.digiai-world.is-v2 .sw-copy__num {
	display: none; /* the scene index lives in the bottom bar */
}

.digiai-world.is-v2 .sw-copy__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 25px;
	font-size: 12px;
	font-weight: 550;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--primary);
}

.digiai-world.is-v2 .sw-copy__eyebrow::before {
	content: "";
	flex: 0 0 23px;
	height: 1px;
	background: currentColor;
}

.digiai-world.is-v2 .dg-copy--membership .sw-copy__eyebrow {
	display: inline-flex;
	padding: 7px 9px;
	border: 1px solid rgba(245, 166, 35, 0.3);
	border-radius: 5px;
	background: rgba(245, 166, 35, 0.05);
	color: var(--accent);
}

.digiai-world.is-v2 .dg-copy--membership .sw-copy__eyebrow::before {
	display: none;
}

.digiai-world.is-v2 .sw-copy__title,
.digiai-world.is-v2 .sw-copy:not(:first-child) .sw-copy__title {
	margin: 0;
	font-size: clamp(38px, 3.75vw, 60px);
	font-weight: 510;
	line-height: 1.08;
	letter-spacing: -0.052em;
	text-shadow: 0 2px 28px rgba(11, 15, 26, 0.75);
}

.digiai-world.is-v2 .dg-copy--hero .sw-copy__title {
	max-width: 850px;
	font-size: clamp(54px, 6.1vw, 96px);
	font-weight: 530;
	line-height: 1.025;
	letter-spacing: -0.065em;
}

.digiai-world.is-v2 .dg-copy--membership .sw-copy__title,
.digiai-world.is-v2 .sw-copy.dg-copy--membership:not(:first-child) .sw-copy__title {
	font-size: clamp(52px, 5.2vw, 83px);
	letter-spacing: -0.06em;
}

.digiai-world.is-v2 .dg-line {
	display: block;
}

.digiai-world.is-v2 .sw-copy__body {
	max-width: 580px;
	margin: 22px 0 0;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-2);
	text-shadow: 0 1px 16px rgba(11, 15, 26, 0.9);
}

.digiai-world.is-v2 .dg-copy--hero .sw-copy__body {
	max-width: 455px;
	margin-top: 28px;
	font-size: 18px;
}

.digiai-world.is-v2 .dg-copy--membership .sw-copy__body {
	max-width: 460px;
}

/* Tags on layers 02 to 04 stay as small chips. */
.digiai-world.is-v2 .sw-copy__tags {
	gap: 8px;
	margin: 26px 0 0;
}

.digiai-world.is-v2 .sw-copy__tags li {
	padding: 6px 11px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 550;
	color: var(--text);
	background: rgba(11, 15, 26, 0.35);
	border: 1px solid rgba(138, 148, 176, 0.22);
}

.digiai-world.is-v2 .dg-copy--3 .sw-copy__tags li {
	color: var(--accent);
	background: rgba(245, 166, 35, 0.07);
	border-color: rgba(245, 166, 35, 0.4);
}

/* Proof row on layer 01. */
.digiai-world.is-v2 .sw-copy__tags.dg-proof {
	gap: 24px;
	margin-top: 31px;
}

.digiai-world.is-v2 .sw-copy__tags.dg-proof li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 12px;
	font-weight: 450;
	color: var(--text-2);
}

.digiai-world.is-v2 .sw-copy__tags.dg-proof li + li {
	padding-left: 24px;
	border-left: 1px solid rgba(138, 148, 176, 0.3);
}

.digiai-world.is-v2 .dg-proof svg {
	width: 16px;
	height: 16px;
	color: var(--primary);
}

/* Buttons. */
.digiai-world.is-v2 .sw-copy__cta {
	gap: 12px;
	margin-top: 35px;
}

.digiai-world.is-v2 .sw-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 23px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 550;
	white-space: nowrap;
}

.digiai-world.is-v2 .sw-btn--primary {
	background: var(--primary);
	color: var(--on-primary);
}

.digiai-world.is-v2 .sw-btn--ghost {
	color: var(--text);
	background: rgba(11, 15, 26, 0.3);
	border: 1px solid rgba(138, 148, 176, 0.35);
}

.digiai-world.is-v2 .sw-btn svg {
	width: 17px;
	height: 17px;
}

/* ---- animated layers over a clean plate (layer 01: jellyfish + fish) ---------
   hero.js sizes .dg-layers to the plate's exact cover box and sets its
   transform-origin, so the same push-in keeps the creatures glued to the plate.
   The loops are on black and blended with "screen", which makes the black vanish. */
.digiai-world .dg-layers {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	transform: scale(var(--dg-push, 1));
	will-change: transform;
	/* A transformed box is its own blending group: its children can only blend with
	   each other, not with the plate behind. So the GROUP is blended against the plate
	   here (this is what makes the black disappear), and the children blend with each
	   other inside it (tentacles over the fish). */
	mix-blend-mode: screen;
}

.digiai-world .dg-layer {
	position: absolute;
	display: block;
	max-width: none;
	object-fit: fill;
	mix-blend-mode: screen;
	transform: rotate(var(--dg-rot, 0deg));
	pointer-events: none;
}

/* ---- bottom bar: scroll cue (layer 01 only) and scene index --------------- */
.digiai-world.is-v2 .sw-hint {
	display: none;
}

.dg-bar {
	position: fixed;
	left: var(--hx);
	right: var(--hx);
	bottom: 38px;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--text-2);
	pointer-events: none;
	transition: opacity 0.3s var(--ease);
}

.dg-bar__cue {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

button.dg-bar__cue {
	pointer-events: none;   /* only clickable while shown (scene 01) */
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}

button.dg-bar__cue:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
	border-radius: 4px;
}

.dg-bar.is-first button.dg-bar__cue {
	pointer-events: auto;
}

.dg-bar.is-first .dg-bar__cue {
	opacity: 1;
}

.dg-bar__wheel {
	stroke: var(--primary);
	animation: dg-wheel 1.8s ease-in-out infinite;
}

@keyframes dg-wheel {
	0% { opacity: 0; transform: translateY(-2px); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translateY(5px); }
}

.dg-bar__index {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.dg-bar__index i {
	display: block;
	width: 60px;
	height: 1px;
	margin-right: 8px;
	background: rgba(138, 148, 176, 0.5);
}

.dg-bar__index b {
	font-weight: 550;
	color: var(--text);
}

/* hero.js: a tall panel is passing under the bar, so the scene number steps aside */
.dg-bar__index {
	transition: opacity 0.2s var(--ease);
}

.dg-bar.is-over-copy .dg-bar__index {
	opacity: 0;
}

.digiai-world.is-done .dg-bar {
	opacity: 0;
}

/* ---- scrims: one per scene, so they crossfade with the image ---------------
   Spec opacities x 0.6 (our stills are darker), then tuned by eye. Layer 01
   keeps the jellyfish (top right) and the planet glow. Layer 05 keeps the core. */
.digiai-world.is-v2 .sw-copylayer::before,
.digiai-world.is-v2 .sw-copylayer::after {
	display: none;
}

.digiai-world.is-v2 .dg-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(11, 15, 26, 0.56) 0%, rgba(11, 15, 26, 0.38) 58%, rgba(11, 15, 26, 0.21) 100%),
		linear-gradient(0deg, rgba(11, 15, 26, 0.6) 0%, rgba(11, 15, 26, 0.59) 9%, rgba(11, 15, 26, 0) 65%);
}

.digiai-world.is-v2 .dg-scene--1::after {
	background:
		linear-gradient(90deg, rgba(11, 15, 26, 0.46) 0%, rgba(11, 15, 26, 0.25) 50%, rgba(11, 15, 26, 0) 63%),
		linear-gradient(0deg, rgba(11, 15, 26, 0.6) 1%, rgba(11, 15, 26, 0.3) 22%, rgba(11, 15, 26, 0) 48%);
}

.digiai-world.is-v2 .dg-scene--5::after {
	background:
		linear-gradient(90deg, rgba(11, 15, 26, 0.74) 0%, rgba(11, 15, 26, 0.62) 26%, rgba(11, 15, 26, 0.3) 40%, rgba(11, 15, 26, 0) 53%),
		linear-gradient(0deg, rgba(11, 15, 26, 0.6) 0%, rgba(11, 15, 26, 0.4) 9%, rgba(11, 15, 26, 0) 40%);
}

/* Between the phone breakpoint and the engine's 860px breakpoint: same geometry. */
@media (max-width: 860px) {
	.digiai-world.is-v2 .sw-copy,
	.digiai-world.is-v2 .dg-copy--hero {
		left: var(--hx);
		right: var(--hx);
		width: auto;
		max-width: none;
	}
}

/* ---- phone values (<= 640px) --------------------------------------------- */
@media (max-width: 640px) {
	.digiai-world.is-v2 .sw-copy,
	.digiai-world.is-v2 .dg-copy--hero {
		top: 112px;
		bottom: 75px;
	}

	/* Layer 01 on phones: anchored to the bottom padding instead of centred, so the
	   whole block sits below the jellyfish bell. */
	.digiai-world.is-v2 .dg-copy--hero {
		top: auto;
		margin-block: 0;
	}

	.digiai-world.is-v2 .sw-copy__eyebrow {
		gap: 10px;
		margin-bottom: 24px;
		font-size: 10px;
		letter-spacing: 0.16em;
	}

	.digiai-world.is-v2 .sw-copy__eyebrow::before {
		flex-basis: 18px;
	}

	.digiai-world.is-v2 .sw-copy__title,
	.digiai-world.is-v2 .sw-copy:not(:first-child) .sw-copy__title {
		max-width: 320px;
		font-size: 37px;
		line-height: 1.13;
	}

	.digiai-world.is-v2 .dg-copy--hero .sw-copy__title {
		max-width: 327px;
		font-size: 51px;
		line-height: 1.075;
	}

	.digiai-world.is-v2 .dg-copy--membership .sw-copy__title,
	.digiai-world.is-v2 .sw-copy.dg-copy--membership:not(:first-child) .sw-copy__title {
		max-width: 300px;
		font-size: 47px;
	}

	.digiai-world.is-v2 .sw-copy__body,
	.digiai-world.is-v2 .dg-copy--hero .sw-copy__body {
		margin-top: 20px;
		font-size: 15px;
		line-height: 1.75;
	}

	.digiai-world.is-v2 .dg-copy--hero .sw-copy__body {
		max-width: 290px;
	}

	.digiai-world.is-v2 .sw-copy__tags.dg-proof {
		gap: 14px;
		margin-top: 25px;
	}

	.digiai-world.is-v2 .sw-copy__tags.dg-proof li {
		font-size: 10px;
		gap: 6px;
	}

	.digiai-world.is-v2 .sw-copy__tags.dg-proof li + li {
		padding-left: 14px;
	}

	.digiai-world.is-v2 .dg-proof svg {
		width: 13px;
		height: 13px;
	}

	.digiai-world.is-v2 .sw-copy__cta {
		flex-wrap: nowrap;
		gap: 9px;
		margin-top: 30px;
	}

	.digiai-world.is-v2 .sw-btn {
		min-height: 48px;
		padding: 0 16px;
		font-size: 11px;
		gap: 7px;
	}

	.dg-bar {
		bottom: 29px;
		font-size: 9px;
	}

	/* Text runs the full width on a phone, so the scrim is even left to right and
	   strongest through the band where the copy sits. The top stays clear. */
	.digiai-world.is-v2 .dg-scene::after,
	.digiai-world.is-v2 .dg-scene--1::after,
	.digiai-world.is-v2 .dg-scene--5::after {
		background: linear-gradient(180deg, rgba(11, 15, 26, 0) 0%, rgba(11, 15, 26, 0.16) 24%, rgba(11, 15, 26, 0.6) 44%, rgba(11, 15, 26, 0.66) 74%, rgba(11, 15, 26, 0.82) 100%);
	}
}

/* ---- sections below the hero: grid sizes from the spec -------------------- */
.home-after .section__head {
	margin-bottom: 0;
}

.home-after .grid--tutorials {
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 38px;
}

.home-after .grid--prompts {
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 32px;
	max-width: 790px;
}

@media (max-width: 900px) {
	.home-after .grid--tutorials {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.home-after .grid--tutorials,
	.home-after .grid--prompts {
		grid-template-columns: 1fr;
	}

	.home-after .grid--tutorials {
		gap: 24px;
	}
}

/* Card sizes from the spec. */
.home-after .card {
	border: 1px solid rgba(138, 148, 176, 0.17);
	border-radius: 10px;
	background: rgba(19, 26, 43, 0.87);
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.home-after .card:hover {
	transform: translateY(-4px);
	border-color: var(--primary);
}

.home-after .card__body {
	padding: 20px 18px 16px;
}

.home-after .card__title {
	font-size: 17px;
	font-weight: 520;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.home-after .card__text {
	font-size: 14px;
	color: var(--text-2);
}

.home-after .card__meta {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(138, 148, 176, 0.14);
	font-size: 12px;
}

/* ---- journey mode: idle loops in rest zones, scrubbed clips in travel zones ----
   hero.js writes --dg-op (which zone is showing) and --dg-vx (where a portrait
   phone looks inside the 16:9 frame). No push-in any more: the clips are the motion. */
.digiai-world.is-journey .sw-scene {
	opacity: var(--dg-op, 0) !important;
	z-index: var(--dg-z, 100) !important;
}

.digiai-world.is-journey .sw-scene__still {
	transform: none !important;
	object-position: 50% 50%;
}

.digiai-world.is-journey .sw-scene__still:not([src]) {
	visibility: hidden;
}

.digiai-world.is-journey .sw-scene__video,
.digiai-world .dg-idle {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--dg-vx, 50%) 50%;
	z-index: 1;
}

/* The idle loop appears only once it is really playing, with a short fade, so the
   sharp poster never flashes to black and the poster-to-video swap is soft. */
.digiai-world .dg-idle {
	opacity: 0;
	transition: opacity 0.45s var(--ease);
}

.digiai-world .dg-idle.is-on {
	opacity: 1;
}

/* The jellyfish overlay sits above every scene inside the stage. */
.digiai-world.is-journey .sw-stage > .dg-layers {
	z-index: 300;
	transform: none;
}

.digiai-world.is-journey .digiai-world__poster,
.digiai-world__poster {
	object-position: 50% 50%;
}

/* Travel 01-02 starts on scene 01, so it carries scene 01's lighter scrim. */
.digiai-world.is-v2 .dg-scene--t1::after {
	background:
		linear-gradient(90deg, rgba(11, 15, 26, 0.46) 0%, rgba(11, 15, 26, 0.25) 50%, rgba(11, 15, 26, 0) 63%),
		linear-gradient(0deg, rgba(11, 15, 26, 0.6) 1%, rgba(11, 15, 26, 0.3) 22%, rgba(11, 15, 26, 0) 48%);
}

/* Scene snapping on touch devices: the finger drives the position inside the hero (hero.js),
   so native momentum scrolling is off there. Buttons and links stay tappable. */
.digiai-world.is-touch-snap {
	touch-action: none;
}