/* ==========================================================================
   Ichy Car Rental — Motion (sitio público: home y páginas)
   Solo transform + opacity. Curvas propias, tiempos cortos, stagger breve.
   Tropical y con energía: entradas que "llegan" rápido y asientan suave.
   ========================================================================== */

:root {
	--m-ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* entradas */
	--m-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* movimiento en pantalla */
	--m-ease-tropical: cubic-bezier(0.34, 1.3, 0.64, 1); /* leve rebote: solo hero / momentos únicos */
	--m-press: 100ms;
	--m-hover: 140ms;
	--m-reveal: 420ms;
	--m-stagger: 55ms;
	--m-hero: 550ms;
}

/* ---- reveals de scroll ---------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity var(--m-reveal) var(--m-ease-out), transform var(--m-reveal) var(--m-ease-out);
	transition-delay: calc(var(--i, 0) * var(--m-stagger));
	will-change: auto; /* se promueve solo al acercarse al viewport (.is-near, ver motion.js) */
}
[data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="scale"] { transform: translate3d(0, 10px, 0) scale(0.96); }
/* Mientras dura el reveal esta regla (0,2,0) gana a las transiciones de hover de cada componente;
   motion.js retira data-reveal al terminar y el hover recupera sus tiempos cortos. */
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
	transition: opacity var(--m-reveal) var(--m-ease-out), transform var(--m-reveal) var(--m-ease-out);
	transition-delay: calc(var(--i, 0) * var(--m-stagger));
	will-change: auto;
}

/* ---- hero: entrada orquestada al cargar ----------------------------------- */
@keyframes ichy-m-rise {
	from { opacity: 0; transform: translate3d(0, 22px, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes ichy-m-rise-soft {
	from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.985); }
	to   { opacity: 1; transform: none; }
}
.ichy-motion .ichy-hero-inner > * {
	animation: ichy-m-rise var(--m-hero) var(--m-ease-tropical) both;
}
.ichy-motion .ichy-hero-inner > :nth-child(1) { animation-delay: 40ms; }
.ichy-motion .ichy-hero-inner > :nth-child(2) { animation-delay: 110ms; }
.ichy-motion .ichy-hero-inner > :nth-child(3) { animation-delay: 190ms; }
.ichy-motion .ichy-hero-inner > :nth-child(4) { animation-delay: 260ms; }
.ichy-motion .ichy-hero-inner > :nth-child(5) { animation-delay: 330ms; }
.ichy-motion .ichy-booking {
	animation: ichy-m-rise-soft 520ms var(--m-ease-out) 380ms both;
}
.ichy-motion .ichy-hero-video { transition: opacity 900ms var(--m-ease-in-out); }

/* ---- header ---------------------------------------------------------------- */
.ichy-header {
	transition: box-shadow 220ms var(--m-ease-out), background-color 220ms var(--m-ease-out);
}
.ichy-header.is-scrolled {
	box-shadow: 0 10px 30px rgba(20, 16, 15, 0.1);
}
.ichy-nav a {
	position: relative;
	transition: color var(--m-hover) var(--m-ease-out);
}
.ichy-nav a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--ichy-orange, #EC6D17);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 180ms var(--m-ease-out);
}
.ichy-nav a.active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.ichy-nav a:hover { color: var(--ichy-orange, #EC6D17); }
	.ichy-nav a:hover::after { transform: scaleX(1); }
}

/* ---- botones / pressables -------------------------------------------------- */
.ichy-btn,
.ichy-acct-btn,
.ichy-menu-toggle {
	transition: transform var(--m-hover) var(--m-ease-out), box-shadow var(--m-hover) var(--m-ease-out),
		background-color var(--m-hover) var(--m-ease-out), color var(--m-hover) var(--m-ease-out);
}
.ichy-btn i[data-lucide="arrow-right"],
.ichy-btn svg.lucide-arrow-right {
	transition: transform 180ms var(--m-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.ichy-btn:hover { transform: translateY(-1px); }
	.ichy-btn:hover i[data-lucide="arrow-right"],
	.ichy-btn:hover svg.lucide-arrow-right { transform: translateX(3px); }
}
.ichy-btn:active,
.ichy-acct-btn:active,
.ichy-menu-toggle:active {
	transform: scale(0.97);
	transition-duration: var(--m-press);
}

/* ---- chips, tarjetas, promos ---------------------------------------------- */
.ichy-chip {
	transition: transform var(--m-hover) var(--m-ease-out), box-shadow var(--m-hover) var(--m-ease-out),
		background-color var(--m-hover) var(--m-ease-out), color var(--m-hover) var(--m-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.ichy-chip:hover { transform: translateY(-2px); }
}
.ichy-chip:active { transform: scale(0.97); transition-duration: var(--m-press); }

.ichy-vcard {
	transition: transform 200ms var(--m-ease-out), box-shadow 200ms var(--m-ease-out);
}
.ichy-vcard-media img,
.ichy-vcard-media svg,
.ichy-vcard-media i {
	transition: transform 260ms var(--m-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.ichy-vcard:hover { transform: translateY(-4px); }
	.ichy-vcard:hover .ichy-vcard-media img,
	.ichy-vcard:hover .ichy-vcard-media svg,
	.ichy-vcard:hover .ichy-vcard-media i { transform: scale(1.06); }
}
.ichy-vcard:active { transform: translateY(-1px) scale(0.985); transition-duration: var(--m-press); }

.ichy-promo { overflow: hidden; }
.ichy-promo,
.ichy-promo-img img {
	transition: transform 260ms var(--m-ease-out), box-shadow 200ms var(--m-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.ichy-promo:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(20, 16, 15, 0.14); }
	.ichy-promo:hover .ichy-promo-img img { transform: scale(1.04); }
}

.ichy-trust-item, .ichy-stat { transition: transform var(--m-hover) var(--m-ease-out); }
.ichy-footer-col a { display: block; }
.ichy-footer-bottom-links a { display: inline-block; }
.ichy-footer-col a,
.ichy-footer-bottom-links a {
	transition: transform var(--m-hover) var(--m-ease-out), color var(--m-hover) var(--m-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.ichy-footer-col a:hover,
	.ichy-footer-bottom-links a:hover { transform: translateX(3px); }
}

/* campos del buscador: foco vivo */
.ichy-field, .ichy-select {
	transition: border-color var(--m-hover) var(--m-ease-out), box-shadow var(--m-hover) var(--m-ease-out), transform var(--m-hover) var(--m-ease-out);
}
.ichy-field:focus-within { transform: translateY(-1px); }

/* ---- estadística con conteo ------------------------------------------------ */
.ichy-stat-value { font-variant-numeric: tabular-nums; }

/* ---- páginas internas (legales) ------------------------------------------- */
.ichy-motion .wp-block-post-title,
.ichy-motion .entry-content > * {
	animation: ichy-m-rise 380ms var(--m-ease-out) both;
}
.ichy-motion .entry-content > :nth-child(-n+8) { animation-delay: calc(var(--n, 0) * 40ms); }

/* ---- accesibilidad --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { transform: none; transition: opacity 200ms ease; }
	.ichy-motion .ichy-hero-inner > *,
	.ichy-motion .ichy-booking,
	.ichy-motion .entry-content > *,
	.ichy-motion .wp-block-post-title { animation: ichy-m-fade 200ms ease both; }
	.ichy-btn, .ichy-chip, .ichy-vcard, .ichy-promo, .ichy-promo-img img, .ichy-field, .ichy-footer-col a, .ichy-nav a::after,
	.ichy-vcard-media img, .ichy-vcard-media svg, .ichy-vcard-media i { transition-property: color, background-color, border-color, box-shadow, opacity; }
	.ichy-btn:hover, .ichy-chip:hover, .ichy-vcard:hover, .ichy-promo:hover, .ichy-field:focus-within, .ichy-footer-col a:hover,
	.ichy-btn:active, .ichy-chip:active, .ichy-vcard:active { transform: none; }
	.ichy-vcard:hover .ichy-vcard-media img, .ichy-vcard:hover .ichy-vcard-media svg, .ichy-vcard:hover .ichy-vcard-media i, .ichy-promo:hover .ichy-promo-img img { transform: none; }
}
@keyframes ichy-m-fade { from { opacity: 0; } to { opacity: 1; } }

/* impeccable · optimize: capa de composición solo cerca del viewport */
[data-reveal].is-near:not(.is-visible) { will-change: opacity, transform; }