/* Laura Pascual – Animaciones */

/* Hero intro. Pure CSS so it runs on first paint, whatever happens to the scripts (caching plugins
   may delay them). The portrait and the H1 only move — they are never hidden — so the largest
   element of the first screen is painted immediately. */
@media (prefers-reduced-motion: no-preference) {
	#hero .et_pb_image {
		animation: lp-hero-portrait 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	#hero .et_pb_column:last-child > * {
		animation: lp-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	#hero .et_pb_column:last-child > :nth-child(1) {
		animation-delay: 0.1s;
	}

	#hero .et_pb_column:last-child > :nth-child(2) {
		animation-name: lp-hero-slide;
		animation-duration: 1s;
	}

	#hero .et_pb_column:last-child > .et_pb_divider {
		animation-name: lp-hero-draw;
		animation-duration: 1s;
		animation-delay: 0.45s;
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
		transform-origin: left center;
	}

	#hero .et_pb_column:last-child > :nth-child(4) {
		animation-delay: 0.6s;
	}

	#hero .et_pb_column:last-child > :nth-child(5) {
		animation-delay: 0.78s;
	}
}

/* Hero of the second cover (#hero-v2): text column first, portrait second. */
@media (prefers-reduced-motion: no-preference) {
	#hero-v2 .et_pb_column:first-child > * {
		animation: lp-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* The H1 is the first element: it only moves, it is never hidden. */
	#hero-v2 .et_pb_column:first-child > :nth-child(1) {
		animation-name: lp-hero-slide;
		animation-duration: 1s;
	}

	#hero-v2 .et_pb_column:first-child > :nth-child(2) {
		animation-delay: 0.3s;
	}

	#hero-v2 .et_pb_column:first-child > :nth-child(3) {
		animation-delay: 0.45s;
	}

	#hero-v2 .et_pb_column:last-child > .et_pb_image {
		animation: lp-hero-arch 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	/* "backwards" (not "both"): once it has entered, the seal is released so the script can float it. */
	#hero-v2 .et_pb_column:last-child > .et_pb_group {
		animation: lp-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s backwards;
	}
}

/* Header of service pages (#hero-servicio): breadcrumb, H1, subtitle, buttons, then the banner. */
@media (prefers-reduced-motion: no-preference) {
	#hero-servicio .et_pb_row:first-child .et_pb_column > * {
		animation: lp-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* The H1 only moves, it is never hidden. */
	#hero-servicio .et_pb_row:first-child .et_pb_column > :nth-child(2) {
		animation-name: lp-hero-slide;
		animation-duration: 1s;
	}

	#hero-servicio .et_pb_row:first-child .et_pb_column > :nth-child(3) {
		animation-delay: 0.3s;
	}

	#hero-servicio .et_pb_row:first-child .et_pb_column > :nth-child(4) {
		animation-delay: 0.45s;
	}

	#hero-servicio .et_pb_row:last-child .et_pb_group {
		animation: lp-hero-arch 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
	}
}

/* Header of «Sobre mí» (#hero-sobre): breadcrumb, H1, subtitle and button, with the portrait beside. */
@media (prefers-reduced-motion: no-preference) {
	#hero-sobre .et_pb_column:first-child > * {
		animation: lp-hero-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	/* The H1 only moves, it is never hidden. */
	#hero-sobre .et_pb_column:first-child > :nth-child(2) {
		animation-name: lp-hero-slide;
		animation-duration: 1s;
	}

	#hero-sobre .et_pb_column:first-child > :nth-child(3) {
		animation-delay: 0.3s;
	}

	#hero-sobre .et_pb_column:first-child > :nth-child(4) {
		animation-delay: 0.45s;
	}

	#hero-sobre .et_pb_column:last-child > .et_pb_image {
		animation: lp-hero-arch 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@keyframes lp-hero-arch {
	from {
		transform: translateY(36px) scale(0.96);
	}
}

@keyframes lp-hero-portrait {
	from {
		transform: scale(0.9) rotate(-4deg);
	}
}

@keyframes lp-hero-slide {
	from {
		transform: translateY(30px);
	}
}

@keyframes lp-hero-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
}

@keyframes lp-hero-draw {
	from {
		transform: scaleX(0);
	}
}

/* Words of animated titles: inline-block so they can move, without breaking the line flow. */
.lp-word {
	display: inline-block;
	will-change: transform, opacity;
}

/* Cards and buttons: gentle lift on hover. */
#main-content .et_pb_group[class*="et_pb_group_"],
#main-content .et_pb_button,
.et-l--header .et_pb_button,
.et-l--header .et_pb_icon {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background-color 0.3s ease;
}

#main-content .et_pb_button:hover,
.et-l--header .et_pb_button:hover,
.et-l--header .et_pb_icon:hover {
	transform: translateY(-2px);
}

#main-content .lp-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(4, 60, 95, 0.12);
}

/* Images zoom slightly inside their rounded frame. */
#main-content .lp-zoom .et_pb_image_wrap {
	overflow: hidden;
}

#main-content .lp-zoom img {
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#main-content .lp-zoom:hover img {
	transform: scale(1.04);
}

/* Stacking cards: each one sticks below the header and the next slides over it, leaving the edge of
   the previous cards visible. Only where there is room for a whole card on screen. */
@media (min-width: 981px) and (min-height: 700px) {
	#main-content .lp-stack-card {
		position: sticky;
		top: calc(104px + var(--lp-stack-index, 0) * 28px);
		transform-origin: center top;
		box-shadow: 0 -14px 44px rgba(4, 60, 95, 0.1);
		will-change: transform;
	}

	.admin-bar #main-content .lp-stack-card {
		top: calc(136px + var(--lp-stack-index, 0) * 28px);
	}

	#main-content .lp-stack-2 {
		--lp-stack-index: 1;
	}

	#main-content .lp-stack-3 {
		--lp-stack-index: 2;
	}

	#main-content .lp-stack-4 {
		--lp-stack-index: 3;
	}
}

/* Index of areas: the arrow reacts when the row is hovered. */
.lp-area-row {
	transition: background-color 0.35s ease, border-radius 0.35s ease;
}

.lp-area-row:hover {
	border-radius: 24px;
}

.lp-area-row .lp-arrow {
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
}

.lp-area-row:hover .lp-arrow {
	transform: translateX(6px);
	background-color: #043c5f;
}

.lp-area-row:hover .lp-arrow p {
	color: #fff;
}

/* Photographic cards: the background breathes in on hover. */
.lp-photo-card {
	transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
	#main-content .et_pb_group,
	#main-content .et_pb_button,
	#main-content .lp-zoom img {
		transition: none;
	}
}