/*
 * Koroma: capa de comportamiento. El aspecto (tokens, clases, componentes) vive en Bricks;
 * aquí solo hay posicionamiento de la cabecera, el loader, los estados iniciales de las animaciones y los keyframes.
 *
 * Clases en <html> (inc/frontend.php):
 *   .kr-js       hay JavaScript.
 *   .kr-motion   se puede animar (sin prefers-reduced-motion). Los estados iniciales ocultos solo existen aquí.
 *   .kr-loading  primera carga de la sesión: loader visible.
 */

/* ---------- Base ---------- */
html {
	scroll-padding-top: var(--header-height);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	overflow-x: clip;
}

/* ---------- Cabecera ---------- */
#brx-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* En la home arranca en mitad del hero y se queda fija al llegar arriba (como el diseño y twks.ch). */
body.home #brx-header {
	/* El menú del diseño queda un poco por encima del centro del hero (356 de 763 px). */
	margin-top: calc(var(--hero-height) * 0.4666 - var(--header-height) / 2);
	margin-bottom: calc(-1 * (var(--hero-height) * 0.4666 + var(--header-height) / 2));
}

/* Sobre la foto: transparente y en Ice. Al fijarse (koroma.js añade .is-stuck): Sand + Burdeos, como navbar-scroll. */
.kr-js body.home #brx-header:not(.is-stuck) .kr-header {
	--kr-nav-hover: var(--gray-01);
	background-color: transparent;
	color: var(--ice);
	border-bottom-color: transparent;
}

/* Menú móvil abierto: panel Sand a pantalla completa con texto Burdeos. */
.kr-header__nav.brx-open {
	color: var(--burdeos);
}

.kr-header__nav .brxe-toggle {
	color: inherit;
}

/* ---------- Loader (solo primera carga de la sesión) ---------- */
.kr-loader {
	display: none;
}

.kr-loading {
	overflow: hidden;
}

.kr-loading .kr-loader {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 1000;
	color: var(--burdeos);
	pointer-events: none;
	/* Red de seguridad: si el JS no llega a ejecutarse, el loader se va solo. */
	animation: kr-fade-out 0.4s ease 3.2s forwards;
}

.kr-loader__bg {
	position: absolute;
	inset: 0;
	background-color: var(--sand);
}

.kr-loader__logo,
.kr-loader__icon {
	position: absolute;
	top: 50%;
	line-height: 0;
	transform: translate(-50%, -50%) scale(2.19);
	will-change: transform;
}

/* Fotograma loading-page-1: logotipo e icono grandes, centrados y separados. */
.kr-loader__logo {
	left: 33.5%;
	width: 8.9rem;
}

.kr-loader__icon {
	left: 70.9%;
	width: 2.9rem;
}

.kr-loader svg {
	display: block;
	width: 100%;
	height: auto;
}

.kr-loading .kr-header__logo,
.kr-loading .kr-header__icon {
	visibility: hidden;
}

/* Las letras entran desde abajo (koroma.js): ocultas hasta que el JS fija su punto de partida. */
.kr-motion.kr-loading .kr-loader svg {
	visibility: hidden;
}

/* ---------- Estados iniciales (solo con movimiento) ---------- */
.kr-motion .kr-hero__plan,
.kr-motion .kr-footer__frame {
	background-size: 0 1px, 1px 0, 1px 0;
}

.kr-motion .kr-title:not(.kr-cta__card .kr-title),
.kr-motion .kr-statement {
	visibility: hidden;
}

/* Hero (steelform): se queda fijo y «Sobre nosotros», opaca, lo tapa al bajar. El sticky vive dentro de .kr-cover
   (hero + Sobre nosotros), así que cuando la sección termina el hero sube con ella y nunca asoma por debajo,
   aunque en pantallas anchas el hero sea más alto que la sección. */
.kr-motion .kr-cover > .kr-hero {
	position: sticky;
	top: 0;
}

.kr-motion .kr-cover > .kr-hero ~ * {
	z-index: 1;
	background-color: var(--sand);
	/* Al terminar, los bordes inferiores del hero y de la sección coinciden en una posición fraccionaria y la última fila
	   del hero se colaba como una línea oscura de 1 px: este píxel de Sand la tapa sin mover nada. */
	box-shadow: 0 1px 0 var(--sand);
}

/* Footer (auar): va por debajo del contenido y sale de debajo de la foto del CTA. */
.kr-motion #brx-content {
	position: relative;
	z-index: 1;
}

.kr-motion #brx-footer {
	position: relative;
	z-index: 0;
}

/* Imágenes: --kr-reveal (entrada con zoom 1.15 → 1 ligada al scroll, koroma.js) × --kr-hover (tarjetas, archline). */
@property --kr-hover {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

.kr-media__img,
.kr-project__img {
	transform: scale(calc(var(--kr-reveal, 1) * var(--kr-hover, 1)));
}

.kr-project__img {
	transition: --kr-hover 0.43s cubic-bezier(0.44, 0, 0.56, 1);
}

.kr-project:hover .kr-project__img {
	--kr-hover: 1.05;
}

/* Botones (auar): cada palabra rueda con su copia (sombra) y un pequeño desfase; al salir sigue hacia arriba. */
.kr-btn.is-split .kr-btn__label {
	text-shadow: none;
	transform: none;
}

.kr-btn__word {
	display: inline-block;
	text-shadow: 0 2em currentColor, 0 4em currentColor;
	transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) calc(var(--i, 0) * 62.5ms);
}

.kr-btn.is-over .kr-btn__word {
	transform: translateY(-2em);
}

.kr-btn.is-out .kr-btn__word {
	transform: translateY(-4em);
}

.kr-btn.is-reset .kr-btn__word {
	transition: none;
}

/* Líneas: crecen al entrar en pantalla (interacción nativa de Bricks en las clases kr-rule y kr-stat__label). */
.kr-motion .kr-rule,
.kr-motion .kr-stat__label::after {
	transform: scaleX(0);
	transition: transform 1.4s var(--ease-out);
}

.kr-motion .kr-rule[data-inview],
.kr-motion .kr-stat__label[data-inview]::after {
	transform: none;
}

/* Logos de clientes en movimiento continuo; se pausan al pasar el ratón. */
.kr-marquee__track[aria-hidden="true"] {
	display: none;
}

/* ≈38 px/s en 1440, la velocidad de la franja de auar. */
.kr-motion .kr-marquee__track {
	animation: kr-marquee 32s linear infinite;
}

.kr-motion .kr-marquee__track[aria-hidden="true"] {
	display: flex;
}

.kr-motion .kr-marquee:hover .kr-marquee__track {
	animation-play-state: paused;
}

/* Sin movimiento: logos estáticos y centrados, con los degradados de los extremos como en el Figma;
   en móvil pasan a varias líneas y entonces sobran los degradados. */
html:not(.kr-motion) .kr-marquee {
	justify-content: center;
}

@media (max-width: 767px) {
	html:not(.kr-motion) .kr-marquee {
		mask-image: none;
	}
}

html:not(.kr-motion) .kr-marquee__track {
	flex-wrap: wrap;
	flex-shrink: 1;
	justify-content: center;
	row-gap: var(--space-l);
	padding-inline: var(--gutter);
}

/* ---------- Keyframes ---------- */
@keyframes kr-marquee {
	to {
		transform: translateX(-100%);
	}
}

@keyframes kr-pulse {
	50% {
		opacity: 0;
	}
}

@keyframes kr-fade-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kr-footer__content .kr-kicker__dot::before {
		animation: none;
	}

	.kr-btn__label,
	.kr-btn__word,
	.kr-project__img,
	.kr-project__title,
	.kr-project__client,
	.kr-accordion__heading,
	.kr-solutions__img {
		transition: none;
	}
}