/* ==========================================================
   AlterMind — THE JOURNEY
   Ramapuram → AlterMind → Remote Stations
   ========================================================== */

.altermind-journey {
	position: relative;
	overflow: hidden;
	padding: 120px 0 130px;
}

.altermind-journey .am-container {
	position: relative;
	z-index: 2;
}


/* ==========================================================
   HEADER
   ========================================================== */

.journey-header {
	max-width: 850px;
	margin: 0 auto 65px;
	text-align: center;
}

.journey-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.journey-header h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.12;
}

.journey-highlight {
	color: #ffd84d;
	font-weight: 700;
}
/* ==========================================================
   WORLD VISUAL
   ========================================================== */

.journey-world {
	position: relative;
	width: 100%;
	max-width: 1180px;
	height: 610px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 34px;
	background:
		radial-gradient(
			circle at 52% 35%,
			rgba(124,92,255,.08),
			transparent 38%
		),
		radial-gradient(
			circle at 25% 80%,
			rgba(255,216,77,.055),
			transparent 30%
		),
		rgba(255,255,255,.012);
}


/* subtle atmospheric field */

.journey-world::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			circle,
			rgba(255,255,255,.10) 1px,
			transparent 1.5px
		);
	background-size: 95px 95px;
	opacity: .14;
	pointer-events: none;
}


/* ==========================================================
   WORLD LABEL
   ========================================================== */

.journey-world-label {
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;

	color: rgba(255,255,255,.30);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .18em;
}


/* ==========================================================
   REMOTE STATIONS
   ========================================================== */

.journey-station {
	position: absolute;
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 10px;
}

.journey-station-dot {
	position: relative;
	display: block;
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
	border: 1px solid rgba(255,216,77,.55);
	border-radius: 50%;
	background: #ffd84d;
	box-shadow:
		0 0 15px rgba(255,216,77,.50);
}

.journey-station-info strong {
	display: block;
	color: rgba(255,255,255,.86);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
}

.journey-station-info small {
	display: block;
	margin-top: 3px;
	color: rgba(255,255,255,.34);
	font-size: 9px;
	letter-spacing: .03em;
}


/* ==========================================================
   STATION POSITIONS
   ========================================================== */

.journey-usa {
	top: 105px;
	left: 12%;
}

.journey-europe {
	top: 285px;
	left: 22%;
}

.journey-africa {
	top: 405px;
	left: 29%;
}

.journey-middle-east {
	top: 300px;
	right: 25%;
}

.journey-asia {
	top: 175px;
	right: 12%;
}


/* ==========================================================
   ALTERMIND CENTRAL POINT
   ========================================================== */

.journey-altermind {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 42%;
	transform: translate(-50%, -50%);

	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.journey-altermind-mark {
	position: relative;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 86px;
	height: 86px;

	border: 1px solid rgba(124,92,255,.60);
	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(124,92,255,.20),
			rgba(124,92,255,.035) 65%
		);

	color: #fff;
	font-size: 27px;
	font-weight: 900;

	box-shadow:
		0 0 45px rgba(124,92,255,.20);
}

.journey-altermind-ring {
	position: absolute;
	width: 86px;
	height: 86px;
	border: 1px solid rgba(124,92,255,.25);
	border-radius: 50%;
	animation: journey-altermind-pulse 3.5s ease-out infinite;
}

@keyframes journey-altermind-pulse {
	0% {
		transform: scale(.9);
		opacity: .8;
	}

	75% {
		transform: scale(1.7);
		opacity: 0;
	}

	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

.journey-altermind-info {
	margin-top: 15px;
}

.journey-altermind-info strong {
	display: block;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .12em;
}

.journey-altermind-info small {
	display: block;
	margin-top: 5px;
	color: rgba(255,255,255,.40);
	font-size: 10px;
}


/* ==========================================================
   ORIGIN — RAMAPURAM
   ========================================================== */

.journey-origin {
	position: absolute;
	z-index: 12;

	left: 7%;
	bottom: 42px;

	display: flex;
	align-items: center;
	gap: 18px;

	min-width: 290px;
	padding: 22px 25px;

	border: 1px solid rgba(255,216,77,.35);
	border-radius: 22px;

	background:
		radial-gradient(
			circle at left center,
			rgba(255,216,77,.13),
			transparent 60%
		),
		rgba(10,10,10,.32);

	box-shadow:
		0 15px 45px rgba(0,0,0,.22),
		0 0 45px rgba(255,216,77,.06);
}

.journey-origin-glow {
	position: absolute;
	left: 23px;
	top: 50%;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: rgba(255,216,77,.13);
	filter: blur(12px);
	animation: journey-origin-glow 2.5s ease-in-out infinite;
}

@keyframes journey-origin-glow {
	0%,
	100% {
		opacity: .45;
		transform: translateY(-50%) scale(.9);
	}

	50% {
		opacity: .9;
		transform: translateY(-50%) scale(1.2);
	}
}

.journey-origin-icon {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;
	flex: 0 0 52px;

	border: 1px solid rgba(255,216,77,.35);
	border-radius: 50%;

	background: rgba(255,216,77,.07);

	font-size: 21px;
}

.journey-origin-copy {
	position: relative;
	z-index: 2;
}

.journey-origin-copy strong {
	display: block;
	color: #ffd84d;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .08em;
}

.journey-origin-copy span {
	display: block;
	margin-top: 3px;
	color: rgba(255,255,255,.65);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .10em;
}

.journey-origin-copy small {
	display: block;
	margin-top: 5px;
	color: rgba(255,255,255,.36);
	font-size: 10px;
}

.journey-origin-point {
	position: absolute;
	left: -7px;
	top: 50%;
	width: 12px;
	height: 12px;
	transform: translateY(-50%);

	border: 2px solid #ffd84d;
	border-radius: 50%;

	background: #151208;

	box-shadow:
		0 0 20px rgba(255,216,77,.85);
}

/* ==========================================================
   JOURNEY CONNECTION LINES
   ========================================================== */

.journey-network-lines {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: visible;
}


/*
 * Every connection is positioned by JavaScript.
 * JS calculates the exact distance and angle between
 * AlterMind and each remote station.
 */

.network-line {
	position: absolute;

	left: 0;
	top: 0;

	width: 0;
	height: 1px;

	transform-origin: 0 50%;
	transform: rotate(0deg) scaleX(0);

	opacity: 0;

	background:
		linear-gradient(
			90deg,
			rgba(124,92,255,.70),
			rgba(124,92,255,.12)
		);

	box-shadow:
		0 0 8px rgba(124,92,255,.12);

	transition:
		transform 1.2s cubic-bezier(.22,.61,.36,1),
		opacity .45s ease;
}


/*
 * Activated by JavaScript.
 */

.network-line.journey-network-active {
	opacity: 1;
}


/*
 * Small moving light travelling along
 * each connection.
 */

.network-line::after {
	content: "";

	position: absolute;

	left: 0;
	top: 50%;

	width: 5px;
	height: 5px;

	transform:
		translate(-50%, -50%)
		scale(0);

	border-radius: 50%;

	background: #ffd84d;

	box-shadow:
		0 0 12px rgba(255,216,77,.9),
		0 0 24px rgba(255,216,77,.45);

	opacity: 0;
}


/*
 * Once the network line is active,
 * send a light from AlterMind toward
 * the remote station.
 */

.network-line.journey-network-active::after {

	transform:
		translate(-50%, -50%)
		scale(1);

	opacity: 1;

	animation:
		journey-network-travel 1.2s
		ease-out
		forwards;

}


@keyframes journey-network-travel {

	0% {
		left: 0;
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		left: 100%;
		opacity: 0;
	}

}


/* ==========================================================
   REMOTE STATION ACTIVATION
   ========================================================== */

.journey-station-dot {

	transition:
		transform .6s ease,
		box-shadow .6s ease,
		background .6s ease;

}


/*
 * Station remains quiet until the connection
 * reaches it.
 */

.journey-station
.journey-station-dot {

	background: rgba(255,216,77,.35);

	box-shadow:
		0 0 0 rgba(255,216,77,0);

}


/*
 * Connection has reached station.
 */

.journey-station.journey-station-active
.journey-station-dot {

	transform: scale(1.5);

	background: #ffd84d;

	box-shadow:
		0 0 10px rgba(255,216,77,.95),
		0 0 25px rgba(255,216,77,.65),
		0 0 50px rgba(255,216,77,.30);

}


/* ==========================================================
   RAMAPURAM → ALTER MIND
   ========================================================== */

.journey-origin-path {

	position: absolute;

	z-index: 20;

	left: 0;
	top: 0;

	width: 0;
	height: 2px;

	transform-origin: 0 50%;

	opacity: 0;

	background:
		linear-gradient(
			90deg,
			#ffd84d 0%,
			#ffd84d 35%,
			rgba(124,92,255,.85) 100%
		);

	box-shadow:
		0 0 8px rgba(255,216,77,.35);

	pointer-events: none;

	transition:
	opacity .5s ease,
	transform 2s cubic-bezier(.45,.05,.55,.95);

}


/*
 * Activated path.
 */

.journey-origin-path.journey-path-active {
	opacity: 1;
}


/*
 * Particle travelling from Ramapuram
 * to AlterMind.
 */

.journey-origin-particle {

	position: absolute;

	top: 50%;
	left: 0;

	width: 8px;
	height: 8px;

	border-radius: 50%;

	background: #ffd84d;

	box-shadow:
		0 0 14px rgba(255,216,77,1),
		0 0 30px rgba(255,216,77,.55);

	opacity: 0;
}


@keyframes journey-origin-travel {

	0% {
		left: 0;
		opacity: 0;
	}

	8% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		left: 100%;
		opacity: 0;
	}

}
/* ==========================================================
   ATMOSPHERIC PARTICLES
   ========================================================== */

.journey-particle {
	position: absolute;

	width: 3px;
	height: 3px;

	border-radius: 50%;

	background: rgba(255,255,255,.45);

	box-shadow:
		0 0 8px rgba(255,255,255,.25);

	animation:
		journey-particle-drift 5s ease-in-out infinite alternate;
}

.particle-01 {
	left: 19%;
	top: 17%;
	animation-delay: -.4s;
}

.particle-02 {
	left: 34%;
	top: 25%;
	animation-delay: -1.2s;
}

.particle-03 {
	left: 43%;
	top: 14%;
	animation-delay: -2s;
}

.particle-04 {
	left: 59%;
	top: 20%;
	animation-delay: -.8s;
}

.particle-05 {
	left: 72%;
	top: 14%;
	animation-delay: -1.7s;
}

.particle-06 {
	left: 83%;
	top: 31%;
	animation-delay: -2.4s;
}

.particle-07 {
	left: 16%;
	top: 42%;
	animation-delay: -1.4s;
}

.particle-08 {
	left: 37%;
	top: 54%;
	animation-delay: -.7s;
}

.particle-09 {
	left: 64%;
	top: 55%;
	animation-delay: -2.1s;
}

.particle-10 {
	left: 78%;
	top: 47%;
	animation-delay: -1.1s;
}

.particle-11 {
	left: 48%;
	top: 70%;
	animation-delay: -2.7s;
}

.particle-12 {
	left: 69%;
	top: 72%;
	animation-delay: -.3s;
}

@keyframes journey-particle-drift {
	0% {
		transform: translate(0, 0);
		opacity: .20;
	}

	50% {
		opacity: .75;
	}

	100% {
		transform: translate(12px, -8px);
		opacity: .20;
	}
}


/* ==========================================================
   ORIGIN CAPTION
   ========================================================== */

.journey-origin-caption {
	position: absolute;
	left: 7%;
	bottom: 18px;

	color: rgba(255,255,255,.28);

	font-size: 10px;
	letter-spacing: .08em;
}


/* ==========================================================
   STORY
   ========================================================== */

.journey-story {
	max-width: 850px;
	margin: 65px auto 0;
	text-align: center;
}

.journey-story-main {
	margin: 0;

	color: rgba(255,255,255,.66);

	font-size: 18px;
	line-height: 1.8;
}

.journey-story-line {
	width: 80px;
	height: 1px;

	margin: 25px auto;

	background:
		linear-gradient(
			90deg,
			transparent,
			#ffd84d,
			transparent
		);
}

.journey-story-actions {
	margin: 0 0 22px;

	color: rgba(255,255,255,.40);

	font-size: 12px;
	font-weight: 800;

	letter-spacing: .12em;

	text-transform: uppercase;
}

.journey-story-actions span {
	margin-left: 12px;
}

.journey-story h3 {
	margin: 0;

	color: #fff;

	font-size: clamp(30px, 4vw, 48px);

	line-height: 1.15;
}

.journey-story h3 strong {
	color: #ffd84d;
	font-weight: 900;
}


/* ==========================================================
   MOBILE
   ========================================================== */
/* ==========================================================
   JOURNEY — JAVASCRIPT STORY STATES
   ========================================================== */

.journey-ready .journey-origin,
.journey-ready .journey-altermind,
.journey-ready .journey-station,
.journey-ready .journey-story {

	opacity: 0;

	transform: translateY(14px);

	transition:
		opacity .9s ease,
		transform .9s ease;

}


/* Ramapuram */

.journey-ready .journey-origin.journey-visible {

	opacity: 1;

	transform: translateY(0);

}


/* AlterMind */

.journey-ready .journey-altermind.journey-visible {

	opacity: 1;

	transform: translate(-50%, -50%);

}


/* Remote stations */

.journey-ready .journey-station.journey-visible {

	opacity: 1;

	transform: translateY(0);

}


/* Preserve the middle-right station positioning */

.journey-ready .journey-middle-east.journey-visible {

	transform: translateY(0);

}


/* Origin path */

.journey-origin-path {

	opacity: .25;

	transition:
		opacity 1s ease;

}

.journey-origin-path.journey-path-active {

	opacity: 1;

}


/* Network particles */

.journey-ready .journey-particle {

	opacity: 0;

	transition:
		opacity 1.2s ease;

}

.journey-ready .journey-particle.journey-particle-active {

	opacity: 1;

}



/* ==========================================================
   FINAL STORY
   ========================================================== */

.journey-story {

	max-width: 850px;

	margin: 65px auto 0;

	text-align: center;

	opacity: 0;

	transform: translateY(18px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease;

}

.journey-story.journey-story-active {

	opacity: 1;

	transform: translateY(0);

}
/* ==========================================================
   JOURNEY — NETWORK GROWTH
   ========================================================== */

.network-line {
	transform-origin: left center;
	transform: scaleX(0);
	opacity: 0;

	transition:
		transform 1.1s cubic-bezier(.22,.61,.36,1),
		opacity .5s ease;
}

.network-line.journey-network-active {
	transform: scaleX(1);
	opacity: 1;
}


/* ==========================================================
   JOURNEY — REMOTE STATION ACTIVATION
   ========================================================== */

.journey-station-dot {
	transition:
		transform .6s ease,
		box-shadow .6s ease,
		background-color .6s ease;
}

.journey-station.journey-station-active
.journey-station-dot {

	transform: scale(1.45);

	background: #ffd84d;

	box-shadow:
		0 0 10px rgba(255,216,77,.8),
		0 0 25px rgba(255,216,77,.55),
		0 0 45px rgba(255,216,77,.25);

}


/* ==========================================================
   JOURNEY — ORIGIN PARTICLE
   ========================================================== */
.journey-origin-particle-run {
	animation:
		journey-origin-travel 2s
		cubic-bezier(.45,.05,.55,.95)
		1 forwards;
}
@keyframes journey-origin-travel {

	0% {
		left: var(--journey-start-x);
		top: var(--journey-start-y);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		left: var(--journey-end-x);
		top: var(--journey-end-y);
		opacity: 0;
	}

}


/* ==========================================================
   JOURNEY — ORIGIN COMPLETION
   ========================================================== */

.journey-origin-complete
.journey-origin-point {

	box-shadow:
		0 0 15px rgba(255,216,77,.9),
		0 0 35px rgba(255,216,77,.45);

}

@media (max-width: 768px) {

	.altermind-journey {
		padding: 80px 0 90px;
	}

	.journey-header {
		margin-bottom: 40px;
	}

	.journey-world {
		height: 720px;
		border-radius: 24px;
	}

	.journey-world-label {
		top: 22px;
	}

	.journey-altermind {
		top: 34%;
	}

	.journey-origin {
		left: 50%;
		bottom: 45px;

		transform: translateX(-50%);

		min-width: 0;
		width: calc(100% - 40px);

		justify-content: center;
	}

	.journey-origin-caption {
		left: 50%;
		bottom: 20px;
		transform: translateX(-50%);
		white-space: nowrap;
	}

	.journey-station {
		transform: none;
	}

	.journey-usa {
		top: 105px;
		left: 8%;
	}

	.journey-europe {
		top: 180px;
		left: 8%;
	}

	.journey-africa {
		top: 405px;
		left: 8%;
	}

	.journey-middle-east {
		top: 255px;
		right: 8%;
	}

	.journey-asia {
		top: 115px;
		right: 8%;
	}

	.journey-network-lines {
		opacity: .65;
	}

	.journey-story {

	max-width: 850px;

	margin: 65px auto 0;

	text-align: center;

	opacity: 0;

	transform: translateY(18px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease;

}

.journey-story.journey-story-active {

	opacity: 1;

	transform: translateY(0);
	}

	.journey-story-main {
		font-size: 16px;
	}

	.journey-story h3 {
		font-size: 32px;
	}

}