/* ========================================
   HERO + BRAIN SCROLL SECTION
   ======================================== */
.hero-brain-section {
	block-size: 650vh;
	position: relative;
	background-color: var(--color-bg);

	@media (width <= 1024px) {
		block-size: auto;
	}
}

.hero-brain-sticky {
	position: sticky;
	inset-block-start: 0;
	block-size: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: 0;
		inset-inline-end: 0;
		block-size: 25vh;
		background-image: linear-gradient(to bottom, transparent, var(--color-bg));
		z-index: 1;
		pointer-events: none;
	}

	@media (width <= 1024px) {
		position: static;
		display: block;
		block-size: auto;
		min-block-size: auto;
		overflow: visible;

		&::after {
			display: none;
		}
	}
}

@media (width <= 1024px) {
	/* Mobile hero: don't overlay the text on top of the heads — stack them.
	   The heads sit as a top band, then the title / subtitle / chat flow below,
	   so nothing covers the copy or the input. */
	.brain-split-halves {
		min-block-size: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden; /* contain the ±60vw slide-in, no horizontal scroll */
		padding-block: clamp(56px, 11vh, 112px) clamp(16px, 3vh, 32px);
	}

	/* Higher specificity than the base `.hero-content-overlay` rule (which is
	   defined later in this file) so the mobile "flow below the heads" layout
	   isn't lost to source order. */
	.hero-brain-sticky .hero-content-overlay {
		position: relative;
		inset: auto;
		block-size: auto;
		padding-block-end: clamp(48px, 9vh, 88px);
	}

	.particles-bg-wrapper {
		display: none;
	}
}

.floating-badge {
	position: absolute;
	padding: 10px 18px;
	background-color: rgb(255 255 255 / 0.55);
	backdrop-filter: blur(10px) saturate(1.4);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: var(--radius-md);
	font-size: 17px;
	font-weight: var(--font-medium);
	color: var(--color-text);
	white-space: nowrap;
	pointer-events: auto;
	cursor: pointer;
	user-select: none;
	z-index: 2;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.5),
		0 2px 10px rgb(56 59 62 / 0.06);
	transition:
		translate 0.1s linear,
		scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
		background-color 0.45s ease,
		color 0.45s ease,
		border-color 0.45s ease,
		box-shadow 0.45s ease;
}

/* Highlighted state — translucent purple tint, frosted glass */
.floating-badge.is-highlighted {
	background-color: rgb(121 92 240 / 0.28);
	border-color: rgb(121 92 240 / 0.5);
	color: #331f6e;
	scale: 1.12;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.4),
		0 10px 28px rgb(70 40 159 / 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.floating-badge.is-highlighted {
		scale: 1;
	}
}

/* Hero intro — everything hidden until typewriter finishes */
.brain-split-halves,
.floating-badges-container,
.scroll-indicator-inner {
	opacity: 0;
	transition: opacity 1s ease 0.3s;
}

.hero-brain-sticky.revealed :is(.brain-split-halves, .scroll-indicator-inner) {
	opacity: 1;
}

.floating-badges-container {
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: none;
}

.hero-brain-sticky:has(.hero-content-overlay.revealed) .floating-badges-container {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--transition-slow) 0s;
}


/* Brain */
.brain-split-halves {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	position: relative;
}

.heads-split {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(420px, 44vw, 780px);
}

.hero-head {
	inline-size: 26vw;
	max-inline-size: 420px;
	block-size: auto;
	display: block;
	transition: translate 1.2s cubic-bezier(0.2, 0.9, 0.2, 1) 0.3s;

	@media (width <= 768px) {
		inline-size: 38vw;
	}

	@media (width <= 480px) {
		inline-size: 46vw;
	}
}

.hero-head--human {
	translate: -60vw 0;
}

.hero-head--robot {
	translate: 60vw 0;
	scale: 0.96;
}

.hero-brain-sticky.revealed .hero-head {
	translate: 0 0;
}

/* Mobile: smaller gap between heads, badges hidden */
@media (width <= 1024px) {
	.heads-split {
		gap: clamp(8px, 4vw, 40px);
	}

	.floating-badges-container {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-head {
		transition: none;
	}

	.hero-head--human,
	.hero-head--robot {
		translate: 0 0;
	}
}

/* Hero content overlay */
.hero-content-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-block-start: 0;
	z-index: 2;
	pointer-events: none;

  & .container {
		max-inline-size: 768px;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    text-align: center;
    pointer-events: auto;
    justify-items: center;
    padding-inline: var(--space-20);
  }
}

/* Hero intro: initially hidden, revealed after typewriter */
.hero-title {
	max-inline-size: 15ch;
	opacity: 0;
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--color-text);
	filter: blur(10px);
	font-size: clamp(40px, 5.8vw, 83px);
	font-weight: var(--font-medium);
	line-height: 1;
	margin-block-end: var(--space-24);
	letter-spacing: -0.04em;
	transform: translateY(20%);
	transition:
		opacity 0.8s ease,
		filter 0.8s ease,
		transform 0.8s ease;

  .hero-content-overlay.revealed & {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}


.hero-subtitle {
	max-inline-size: 45ch;
  margin-block-end: var(--space-20);
	opacity: 0;
	font-size: var(--text-lg);
	color: var(--color-text);
	line-height: var(--leading-normal);
	transform: translateY(20px);
	transition:
		opacity 0.8s ease 0.2s,
		transform 0.8s ease 0.2s;

  .hero-content-overlay.revealed & {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-buttons {
	display: flex;
	gap: var(--space-16);
	flex-wrap: wrap;
	justify-content: center;
  margin-block-start: var(--space-48);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.8s ease 0.4s,
		transform 0.8s ease 0.4s;

	@media (width <= 640px) {
		flex-direction: column;
		inline-size: 100%;
		padding: 0 var(--space-20);
	}

  .hero-content-overlay.revealed & {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Hero Chat */
.hero-chat {
	inline-size: 100%;
	max-inline-size: 700px;
	margin-block-start: var(--space-20);
}

.chat-input-wrapper {
  inline-size: 100%;
	max-inline-size: 700px;
	display: flex;
	align-items: center;
	gap: var(--space-16);
	padding: var(--space-20) var(--space-24);
	background-color: var(--color-bg-white);
	border: 1.5px solid var(--color-primary-alpha-15);
	border-radius: var(--radius-xl);
	margin-block-end: var(--space-24);
	backdrop-filter: blur(5px);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease,
		box-shadow var(--transition-base);

	.hero-content-overlay.chat-revealed & {
		opacity: 1;
		transform: translateY(0);
	}

	@media (hover: hover) {
		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--shadow-card-hover);
		}
	}
}

.chat-input-icons {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	color: var(--color-text-tertiary);
	flex-shrink: 0;
}

.chat-input {
	inline-size: 100%;
	border: none;
	font-size: var(--text-base);
	white-space: nowrap;

	&::placeholder {
		color: var(--color-text-tertiary);
	}

  &:focus-visible::placeholder {
    color: transparent;
  }
}

.chat-input-submit {
	display: grid;
	place-items: center;
	margin-inline-start: auto;
	background-color: transparent;
	color: var(--color-primary);
	font-size: 22px;
	flex-shrink: 0;
	opacity: 0.3;
  scale: 1;
	transition:
		opacity var(--transition-fast),
		color var(--transition-fast),
		scale var(--transition-fast);

	@media (hover: hover) {
		&:hover {
			color: var(--color-accent);
		}
	}

	&:disabled {
		opacity: 0;
    scale: .5;
		cursor: default;
	}

  /* Hidden when input is empty — entrance animation via scale + opacity */
  .chat-input:placeholder-shown ~ & {
    pointer-events: none;
  }

  /* Full opacity when input is focused and has value, or button itself is focused */
  .chat-input:not(:placeholder-shown):focus-visible ~ &,
  .chat-input-submit:focus-visible {
    opacity: 1;
  }
}

/* Loading wave dots */
.hero-loading-dots {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 50%;
	transform: translate(-50%, -50%);
	display: none;
	gap: var(--space-8);
	align-items: center;

	& span {
		inline-size: 6px;
		block-size: 6px;
		border-radius: 50%;
		background-color: var(--color-primary);
		animation: dotWave 1.4s ease-in-out infinite;
	}

	& span:nth-child(2) {
		animation-delay: 0.2s;
	}

	& span:nth-child(3) {
		animation-delay: 0.4s;
	}
}

.chat-input-wrapper--loading .hero-loading-dots {
	display: flex;
}

:is(.chat-input-icons, .chat-input) {
	.chat-input-wrapper--loading & {
		opacity: 0;
		transition: opacity 0.2s ease;
	}
}

/* On send, the paper plane flies off to the upper-right instead of just
   fading — then the loading dots take over. */
.chat-input-wrapper--loading .chat-input-submit {
	animation: planeFlyAway 0.55s cubic-bezier(0.45, 0, 0.7, 0.2) forwards;
	pointer-events: none;
}

@keyframes planeFlyAway {
	0% {
		translate: 0 0;
		scale: 1;
		opacity: 1;
	}
	18% {
		translate: -5px 3px;
		scale: 1;
		opacity: 1;
	}
	100% {
		translate: 140px -34px;
		scale: 0.85;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.chat-input-wrapper--loading .chat-input-submit {
		animation: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}
}

@keyframes dotWave {
	0%,
	80%,
	100% {
		transform: translateY(0);
		opacity: 0.3;
	}
	40% {
		transform: translateY(-12px);
		opacity: 1;
	}
}

.chat-input--sending {
	opacity: 0;
	transform: translateX(40px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.chat-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-8);
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 0.6s ease 0.5s,
		transform 0.6s ease 0.5s;

	.hero-content-overlay.revealed & {
		opacity: 1;
		transform: translateY(0);
	}
}

.chat-tag {
	font-size: var(--text-sm);
	color: #fff;
	font-weight: var(--font-medium);
	padding: var(--space-8) var(--space-20);
	border-radius: var(--radius-full);
	border: none;
	background-color: transparent;
	background-image: var(--gradient-primary);
	box-shadow: 0 4px 16px rgb(70 40 159 / 0.22);
	transition:
		scale var(--transition-fast),
		box-shadow var(--transition-fast),
		filter var(--transition-fast);

	@media (hover: hover) {
		&:hover {
			scale: 1.04;
			filter: brightness(1.1);
			box-shadow: 0 6px 20px rgb(70 40 159 / 0.3);
		}
	}
}


/* Scroll indicator */
.scroll-indicator-inner {
	position: absolute;
	inset-block-end: 32px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 3;
	color: var(--color-text-tertiary);
	animation: scrollBounce 2s ease-in-out infinite;

	@media (width <= 1024px) {
		display: none;
	}
}

@keyframes scrollBounce {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(6px);
	}
}

/* Particles wrapper */
.particles-bg-wrapper {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
}

.particles-illustration {
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	inline-size: min(90vw, 1200px);
	block-size: auto;
	display: block;
	pointer-events: none;
}

/* Problem text inside sticky */
.brain-split-text {
	position: absolute;
	inset-inline: 0;
	max-inline-size: 1920px;
	margin-inline: auto;
	padding-inline: 27px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 27px;
	align-items: start;
	text-align: start;
	z-index: 3;
	pointer-events: none;

	@media (width <= 1024px) {
		position: static;
		grid-template-columns: 1fr;
		gap: clamp(64px, 12vw, 120px);
		padding-block: clamp(64px, 10vw, 120px);
		padding-inline: 16px;
		background-image:
			linear-gradient(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.6)),
			url("/images/network.webp");
		background-size: auto, min(200%, 900px);
		background-position: center, center;
		background-repeat: no-repeat;
	}
}

.brain-split-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	opacity: 0;
	will-change: opacity, translate;
	transition:
		opacity 0.5s ease,
		translate 0.7s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.brain-split-col--problem {
	translate: -120px 0;
	padding-inline-start: clamp(40px, 8vw, 120px);

	@media (width <= 1024px) {
		padding-inline-start: 0;
	}
}

.brain-split-col--result {
	translate: 120px 0;
	padding-inline-start: clamp(40px, 8vw, 120px);
	transition-delay: 0.25s;

	@media (width <= 1024px) {
		padding-inline-start: 0;
	}
}


.brain-split-col.is-revealed {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.brain-split-col {
		translate: 0 0;
		transition: none;
	}
}

.brain-split-label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 17px;
	font-weight: var(--font-normal);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-text);
	line-height: 1;
	margin-block-end: 16px;
}

.brain-split-label::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: var(--color-text);
	flex-shrink: 0;
}

.brain-split-problem {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.brain-split-problem p {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: var(--font-medium);
	color: var(--color-text);
}


/* Section badge / label — unified label with dot */
.section-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--text-sm);
	font-weight: var(--font-normal);
	letter-spacing: 0.02em;
	color: var(--color-text);
	text-transform: uppercase;
	line-height: 1;
	margin-block-end: var(--space-16);

	&::before {
		content: "";
		inline-size: 10px;
		block-size: 10px;
		border-radius: 50%;
		background-color: var(--color-text);
		flex-shrink: 0;
	}
}

.section-badge .badge-arrow {
	display: none;
}

.section-label {
	display: inline-block;
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-text-tertiary);
	margin-block-end: var(--space-16);

	&::before {
		content: "‹";
		margin: 0 var(--space-8);
		opacity: 0.5;
	}

	&::after {
		content: "›";
		margin: 0 var(--space-8);
		opacity: 0.5;
	}
}

.precision-title {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-block-end: var(--space-16);
	margin-block-start: var(--space-20);
}

.precision-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin-block-end: var(--space-32);
	justify-content: center;
}

.precision-tag {
	padding: var(--space-8) var(--space-16);
	background-color: var(--color-bg-white);
	border: 1.5px solid var(--color-primary-alpha-15);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--color-text);
	font-weight: var(--font-medium);
}