/*
 * CapFat — movimiento.
 *  1. Logo: tag con spray al cargar (y al volver a pasar el ratón, con pausa).
 *  2. Logo: al pasar el ratón aparece «Inicio» (el botón Inicio del menú se
 *     oculta en escritorio con ratón; en táctil/Android sigue visible).
 *  3. Logo: una animación distinta, sobria y corta, cada vez que se cambia
 *     de bloque. Las manchas de pintura son fijas: no se animan.
 * Todo se desactiva con «reducir movimiento». Sin JS, todo se ve estático.
 */

/* ---------- 1. Logo · tag con spray ---------- */

body.capfat-front-page .site-branding__logo.capfat-tag {
	height: auto;
	aspect-ratio: 1575 / 546;
	overflow: visible;
	color: #121110;
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	transform-origin: 30% 60%;
}

.capfat-tag__stroke {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 0;
}

.capfat-tag__nozzle {
	opacity: 0;
	pointer-events: none;
}

.capfat-tag.is-tagging .capfat-tag__settle {
	opacity: 0;
	animation: capfat-tag-settle 0.35s ease-out 1.8s forwards;
}

.capfat-tag.is-tagging .capfat-tag__stroke--letters {
	stroke-dashoffset: 1;
	animation: capfat-tag-draw 1.15s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

.capfat-tag.is-tagging .capfat-tag__stroke--swoosh {
	stroke-dashoffset: 1;
	animation: capfat-tag-draw 0.5s cubic-bezier(0.3, 0, 0.2, 1) 1.1s forwards;
}

.capfat-tag.is-tagging .capfat-tag__stroke--drips {
	stroke-dashoffset: 1;
	animation: capfat-tag-draw 0.45s ease-in 1.55s forwards;
}

.capfat-tag.is-tagging .capfat-tag__nozzle {
	animation: capfat-tag-mist 1.35s ease-out forwards;
}

@keyframes capfat-tag-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes capfat-tag-settle {
	to { opacity: 1; }
}

@keyframes capfat-tag-mist {
	0% { opacity: 0; }
	8% { opacity: 1; }
	80% { opacity: 0.85; }
	100% { opacity: 0; }
}

/* ---------- 2. Logo · «Inicio» en bocadillo al pasar el ratón ----------
 * Mismo lenguaje que el tooltip del botón de música: bocadillo oscuro,
 * texto pequeño y una flecha que apunta al logo. */

body.capfat-front-page .site-branding__link {
	position: relative;
}

body.capfat-front-page .site-branding__home-label {
	position: absolute;
	left: 18%;
	top: calc(100% + 10px);
	z-index: 30;
	padding: 5px 10px;
	background: var(--capfat-dark, #1e1d1b);
	color: var(--capfat-light, #fff);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	white-space: nowrap;
	border-radius: var(--radius-sm, 4px);
	box-shadow: 0 6px 16px rgba(30, 29, 27, 0.22);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

/* Flecha del bocadillo. */
body.capfat-front-page .site-branding__home-label::before {
	content: '';
	position: absolute;
	left: 14px;
	bottom: 100%;
	border: 5px solid transparent;
	border-bottom-color: var(--capfat-dark, #1e1d1b);
}

@media (hover: hover) and (pointer: fine) {
	body.capfat-front-page .site-branding__link:hover .site-branding__home-label,
	body.capfat-front-page .site-branding__link:focus-visible .site-branding__home-label {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 250ms; /* como un texto alternativo: aparece tras un instante */
	}

	body.capfat-front-page .site-branding__link:hover .capfat-tag,
	body.capfat-front-page .site-branding__link:focus-visible .capfat-tag {
		transform: rotate(-2deg) scale(1.03);
	}

	/* Con ratón el logo hace de «Inicio»: el botón del menú sobra. */
	body.capfat-front-page .site-nav .site-nav__item--hero {
		display: none;
	}
}

/* En táctil (Android, iPad…) no hay hover: el botón Inicio sigue en el menú. */
@media (hover: none) {
	body.capfat-front-page .site-branding__home-label {
		display: none;
	}
}

/* ---------- 3. Logo · animación distinta al cambiar de bloque ----------
 * motion.js añade al logo .is-anim-<pantalla> cada vez que se pasa a otra
 * pantalla del carrusel. Las manchas de pintura NO se animan: son fijas.
 * Al volver a Inicio se repite el tag con spray. */

.capfat-tag[class*='is-anim-'] {
	animation-duration: 0.8s;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	animation-fill-mode: both;
}

/* Servicios · agitar la lata antes de pintar. */
.capfat-tag.is-anim-servicios { animation-name: capfat-logo-shake; animation-duration: 0.7s; }

/* Trabajos · repaso de brocha de izquierda a derecha (el recorte va en la
 * tinta: Chrome no aplica clip-path animado al <svg> raíz). */
.capfat-tag.is-anim-trabajos .capfat-tag__ink {
	animation: capfat-logo-wipe 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Proceso · la pintura gotea: se estira hacia abajo y vuelve. */
.capfat-tag.is-anim-proceso { animation-name: capfat-logo-drip; animation-duration: 0.9s; transform-origin: 50% 0; }

/* Especiales · enfoque de spray, de difuso a nítido. */
.capfat-tag.is-anim-especiales { animation-name: capfat-logo-focus; animation-duration: 0.8s; }

/* Sobre DIME · golpe de sello con destello naranja. */
.capfat-tag.is-anim-sobre-dime { animation-name: capfat-logo-stamp; animation-duration: 0.75s; }

/* Cuéntame tu idea · giro con rebote, como una pegatina que se pega. */
.capfat-tag.is-anim-contacto { animation-name: capfat-logo-sticker; animation-duration: 0.85s; }

/* FAQ · aparición tranquila. */
.capfat-tag.is-anim-faq { animation-name: capfat-logo-soft; animation-duration: 1s; }

/* Servicios en detalle (scroll vertical): una animación por servicio. */
.capfat-tag.is-anim-sub-murales-interiores .capfat-tag__ink { animation: capfat-logo-roller 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.capfat-tag.is-anim-sub-murales-exteriores .capfat-tag__ink { animation: capfat-logo-wipe-rtl 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.capfat-tag.is-anim-sub-retratos { animation-name: capfat-logo-flash; animation-duration: 0.8s; }
.capfat-tag.is-anim-sub-mascotas { animation-name: capfat-logo-hop; animation-duration: 0.7s; }
.capfat-tag.is-anim-sub-ilustracion { animation-name: capfat-logo-sketch; animation-duration: 0.7s; }
.capfat-tag.is-anim-sub-lienzos { animation-name: capfat-logo-unfold; animation-duration: 0.75s; }
.capfat-tag.is-anim-sub-talleres { animation-name: capfat-logo-tilt; animation-duration: 0.8s; }
.capfat-tag.is-anim-sub-eventos { animation-name: capfat-logo-pop; animation-duration: 0.75s; }
/* Sobre DIME → «Mi historia». */
.capfat-tag.is-anim-sub-historia { animation-name: capfat-logo-unfold; animation-duration: 0.75s; }

@keyframes capfat-logo-roller {
	0% { clip-path: inset(0 -2% 100% 0) view-box; }
	100% { clip-path: inset(0 -2% -2% 0) view-box; }
}

@keyframes capfat-logo-wipe-rtl {
	0% { clip-path: inset(-10% -2% -10% 100%) view-box; }
	100% { clip-path: inset(-10% -2% -10% 0) view-box; }
}

@keyframes capfat-logo-flash {
	0%, 100% { color: #121110; }
	30%, 55% { color: var(--capfat-orange, #e8611a); }
}

@keyframes capfat-logo-hop {
	0% { translate: 0 0; }
	35% { translate: 0 -9px; }
	65% { translate: 0 2px; }
	100% { translate: 0 0; }
}

@keyframes capfat-logo-sketch {
	0% { transform: skewX(-12deg); opacity: 0.5; }
	100% { transform: skewX(0); opacity: 1; }
}

@keyframes capfat-logo-unfold {
	0% { scale: 0.2 1; opacity: 0; }
	100% { scale: 1 1; opacity: 1; }
}

@keyframes capfat-logo-tilt {
	0% { rotate: 0deg; }
	30% { rotate: 6deg; }
	65% { rotate: -2deg; }
	100% { rotate: 0deg; }
}

@keyframes capfat-logo-pop {
	0% { scale: 0.85; }
	55% { scale: 1.06; }
	100% { scale: 1; }
}

@keyframes capfat-logo-shake {
	0% { rotate: 0deg; }
	20% { rotate: -5deg; }
	40% { rotate: 4deg; }
	60% { rotate: -2.5deg; }
	80% { rotate: 1deg; }
	100% { rotate: 0deg; }
}

@keyframes capfat-logo-wipe {
	0% { clip-path: inset(-10% 100% -10% 0) view-box; }
	100% { clip-path: inset(-10% -2% -10% 0) view-box; }
}

@keyframes capfat-logo-drip {
	0% { scale: 1 1; }
	35% { scale: 0.98 1.1; }
	70% { scale: 1.01 0.97; }
	100% { scale: 1 1; }
}

@keyframes capfat-logo-focus {
	0% { opacity: 0.25; filter: blur(7px); }
	100% { opacity: 1; filter: blur(0); }
}

@keyframes capfat-logo-stamp {
	0% { scale: 1.14; color: var(--capfat-orange, #e8611a); }
	45% { scale: 0.96; }
	70% { scale: 1.02; color: var(--capfat-orange, #e8611a); }
	100% { scale: 1; color: #121110; }
}

@keyframes capfat-logo-sticker {
	0% { rotate: -8deg; scale: 0.88; }
	60% { rotate: 2deg; scale: 1.03; }
	100% { rotate: 0deg; scale: 1; }
}

@keyframes capfat-logo-soft {
	0% { opacity: 0.2; translate: 0 -4px; }
	100% { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.capfat-tag.is-tagging .capfat-tag__stroke,
	.capfat-tag.is-tagging .capfat-tag__settle,
	.capfat-tag.is-tagging .capfat-tag__nozzle,
	.capfat-tag[class*='is-anim-'],
	.capfat-tag[class*='is-anim-'] .capfat-tag__ink {
		animation: none;
		stroke-dashoffset: 0;
	}

	.capfat-tag.is-tagging .capfat-tag__settle {
		opacity: 1;
	}

	body.capfat-front-page .site-branding__home-label {
		transition: none;
	}
}