Línea 1Línea 2

/* ═══════════════════════════════════════════════════════════════
   MOTION-KIT · Home Rentals
   Animaciones reutilizables para cualquier página o maqueta.
   Todo lleva prefijo "mk-" para no chocar con styles.css.
   Funciona con motion.js (mismo directorio). Sin dependencias.
   ─────────────────────────────────────────────────────────────
   USO RÁPIDO
     <link rel="stylesheet" href="motion.css">
     <script src="motion.js" defer></script>
     Si motion.js no carga, todo se ve igualmente: el CSS solo oculta
     bloques cuando el script ha puesto la clase "mk-js" en <html>.

     Revelar al hacer scroll:   <div class="mk-rev">…</div>
       con retardo escalonado:  <div class="mk-rev mk-d2">…</div>   (mk-d1 … mk-d4)
       variantes laterales:     mk-rev-left · mk-rev-right (ponlas dentro de un
                                bloque con class="mk-clip" para que no creen
                                scroll horizontal antes de revelarse)
       zoom:                    mk-rev-zoom
       cascada automática:      <div class="mk-stagger"> hijos… </div>
                                (escalona hasta 8 hijos; del 9.º en adelante
                                entran juntos al final)
     Contador animado:          <span data-mk-count="25">0</span>
       con decimales:           <span data-mk-count="4.8" data-mk-decimals="1">0</span>
       duración (ms, 1400):     <span data-mk-count="85" data-mk-duration="2000">0</span>%
       (el sufijo «%», «€»… va FUERA del span: el script reescribe su contenido)
     Parallax de foto a sangre: <div class="mk-parallax" data-mk-parallax="0.2"><img …></div>
                                dentro de un padre position:relative CON ALTURA
                                propia (p. ej. min-height:60vh): la capa es
                                absoluta y no da altura.
     Titular por líneas:        <h1 class="mk-lines"><span>Línea 1</span><span>Línea 2</span></h1>
                                (motion.js envuelve cada línea; dentro puedes usar
                                <em> o <span> de color sin problema)
     Barra de progreso lectura: <div class="mk-progress"></div>
     Subrayado que crece:       <a class="mk-underline">enlace</a>
     Tarjeta que se eleva:      <div class="mk-lift">…</div>
   ═══════════════════════════════════════════════════════════════ */

:root {
  --mk-ease: cubic-bezier(.22, 1, .36, 1);   /* salida suave, sin rebote */
  --mk-dur: .9s;
  --mk-accent: var(--gold, #C8A96E);         /* coge el dorado de la web si existe */
  --mk-accent-soft: var(--gold-soft, #E4D3B0);
}

/* ── Revelado al entrar en pantalla ─────────────────────────── */
.mk-rev,
.mk-rev-left,
.mk-rev-right,
.mk-rev-zoom {
  transition: opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease);
}
/* El estado oculto SOLO existe (a) si motion.js se ha ejecutado (html.mk-js)
   y (b) mientras el bloque no es visible. Una vez revelado, el kit no fija
   transform/opacity: el :hover de la página (.card:hover, .apt:hover…) manda.
   :where() no suma especificidad, así reduced-motion sigue ganando por orden. */
:where(html.mk-js) .mk-rev:not(.is-vis),
:where(html.mk-js) .mk-rev-left:not(.is-vis),
:where(html.mk-js) .mk-rev-right:not(.is-vis),
:where(html.mk-js) .mk-rev-zoom:not(.is-vis) { opacity: 0; will-change: opacity, transform; }
:where(html.mk-js) .mk-rev:not(.is-vis)       { transform: translateY(34px); }
:where(html.mk-js) .mk-rev-left:not(.is-vis)  { transform: translateX(-32px); }
:where(html.mk-js) .mk-rev-right:not(.is-vis) { transform: translateX(32px); }
:where(html.mk-js) .mk-rev-zoom:not(.is-vis)  { transform: scale(.94); }

/* retardos escalonados para hermanos */
.mk-d1 { transition-delay: .12s; }
.mk-d2 { transition-delay: .24s; }
.mk-d3 { transition-delay: .36s; }
.mk-d4 { transition-delay: .48s; }

/* recorta el eje X sin crear contenedor de scroll (sticky sigue funcionando) */
.mk-clip { overflow-x: clip; }

/* escalonado automático: los hijos directos de .mk-stagger se revelan en cascada */
.mk-stagger > * {
  transition: opacity var(--mk-dur) var(--mk-ease), transform var(--mk-dur) var(--mk-ease);
}
:where(html.mk-js) .mk-stagger:not(.is-vis) > * { opacity: 0; transform: translateY(24px); }
.mk-stagger.is-vis > :nth-child(2)  { transition-delay: .08s; }
.mk-stagger.is-vis > :nth-child(3)  { transition-delay: .16s; }
.mk-stagger.is-vis > :nth-child(4)  { transition-delay: .24s; }
.mk-stagger.is-vis > :nth-child(5)  { transition-delay: .32s; }
.mk-stagger.is-vis > :nth-child(6)  { transition-delay: .40s; }
.mk-stagger.is-vis > :nth-child(7)  { transition-delay: .48s; }
.mk-stagger.is-vis > :nth-child(8)  { transition-delay: .56s; }
.mk-stagger.is-vis > :nth-child(n+9) { transition-delay: .64s; }

/* ── Titular que entra línea a línea (al cargar) ───────────── */
/* motion.js envuelve cada línea en un <span> interior: el exterior es la
   máscara (clip-path con aire para acentos y descendentes) y NUNCA se
   transforma; solo se anima el interior. Sin :has(): vale en todo navegador. */
.mk-lines > span { display: block; clip-path: inset(-.1em 0 -.15em); }
.mk-lines > span > span {
  display: block;
  transform: translateY(130%);
  animation: mk-rise 1.1s var(--mk-ease) forwards;
}
.mk-lines > span:nth-child(2) > span { animation-delay: .18s; }
.mk-lines > span:nth-child(3) > span { animation-delay: .36s; }
.mk-lines > span:nth-child(4) > span { animation-delay: .54s; }
@keyframes mk-rise { to { transform: none; } }

/* aparecer simple tras el titular (subtítulo, botón…) */
.mk-fade-in { opacity: 0; animation: mk-fade 1s ease forwards; }
.mk-fade-in.mk-late { animation-delay: .9s; }
.mk-fade-in.mk-later { animation-delay: 1.6s; }
@keyframes mk-fade { to { opacity: 1; } }

/* ── Parallax de foto a sangre ─────────────────────────────── */
.mk-parallax { position: absolute; inset: 0; overflow: hidden; }
.mk-parallax > img {
  position: absolute; top: -10%; left: 0;   /* el 20 % sobrante se reparte arriba y abajo */
  width: 100%; height: 120%;
  object-fit: cover; display: block;
  will-change: transform;
}

/* ── Barra de progreso de lectura ──────────────────────────── */
.mk-progress {
  /* 65: sobre la cabecera sticky de styles.css (60) y bajo todo lo modal
     (mobile-bar/to-top 70, skip-link 100, wa-hi 120, lang-banner 150, lightbox 200) */
  position: fixed; top: 0; left: 0; z-index: 65;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--mk-accent), var(--mk-accent-soft));
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Micro-interacciones ───────────────────────────────────── */
.mk-underline {
  background-image: linear-gradient(var(--mk-accent), var(--mk-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .45s var(--mk-ease);
  text-decoration: none;
}
.mk-underline:hover, .mk-underline:focus-visible { background-size: 100% 1px; }

.mk-lift { transition: transform .5s var(--mk-ease), box-shadow .5s var(--mk-ease); }
.mk-lift:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(30, 34, 40, .14); }

.mk-zoom-img { overflow: hidden; }
.mk-zoom-img > img { transition: transform 1.2s var(--mk-ease); display: block; }
.mk-zoom-img:hover > img { transform: scale(1.05); }

/* indicador "desliza" con gota que cae */
.mk-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
}
.mk-cue::after {
  content: ""; width: 1px; height: 44px;
  background: linear-gradient(var(--mk-accent), transparent);
  animation: mk-drip 2.2s ease-in-out infinite;
}
@keyframes mk-drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Accesibilidad: quien pide menos movimiento, lo recibe ──── */
@media (prefers-reduced-motion: reduce) {
  :where(html.mk-js) .mk-rev:not(.is-vis),
  :where(html.mk-js) .mk-rev-left:not(.is-vis),
  :where(html.mk-js) .mk-rev-right:not(.is-vis),
  :where(html.mk-js) .mk-rev-zoom:not(.is-vis),
  :where(html.mk-js) .mk-stagger:not(.is-vis) > * { opacity: 1; transform: none; }
  .mk-rev, .mk-rev-left, .mk-rev-right, .mk-rev-zoom, .mk-stagger > * { transition: none; }
  .mk-lines > span > span { transform: none; animation: none; }
  .mk-fade-in { opacity: 1; animation: none; }
  .mk-cue::after { animation: none; }
  .mk-parallax > img { top: 0; height: 100%; transform: none !important; }
  .mk-lift:hover { transform: none; }
  .mk-zoom-img:hover > img { transform: none; }
}