/* =============================================================
   MOVIMIENTO — solo versión Full
   Todo el estado "oculto" depende de la clase .motion, que añade
   motion.js únicamente si el usuario NO pidió movimiento reducido.
   Sin JS o con prefers-reduced-motion, el contenido es visible de inmediato.
   Se animan solo transform / opacity / clip-path.
   ============================================================= */

/* ---------- Entrada cinematográfica del hero ---------- */
.motion .hero__media {
  scale: 1.14;
  transition: scale 2.6s var(--ease-out);
}

.motion .hero__shade {
  opacity: 0.4;
  background-color: rgba(0, 0, 0, 0.55);
  transition: opacity 1.6s var(--ease-out), background-color 1.8s var(--ease-out);
}

.motion .intro {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 1.1s var(--ease-out),
    translate 1.3s var(--ease-out);
}

.motion .hero__title .mask > .intro {
  opacity: 1;
  translate: 0 108%;
  transition: translate 1.25s var(--ease-out);
}

.motion .site-header {
  opacity: 0;
  translate: 0 -12px;
  transition:
    opacity 0.9s var(--ease-out) 1.1s,
    translate 0.9s var(--ease-out) 1.1s,
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.motion.is-ready .hero__media {
  scale: 1;
}

.motion.is-ready .hero__shade {
  opacity: 1;
  background-color: transparent;
}

.motion.is-ready .intro,
.motion.is-ready .hero__title .mask > .intro,
.motion.is-ready .site-header {
  opacity: 1;
  translate: 0 0;
}

.motion.is-ready .intro--1 { transition-delay: 0.35s; }
.motion.is-ready .intro--2 { transition-delay: 0.6s; }
.motion.is-ready .intro--3 { transition-delay: 0.78s; }
.motion.is-ready .intro--4 { transition-delay: 1.05s; }
.motion.is-ready .intro--5 { transition-delay: 1.3s; }

/* Indicador de scroll */
.hero__scroll span::after {
  content: '';
  position: absolute;
  left: 0;
  top: -40%;
  width: 100%;
  height: 40%;
  background: var(--amari-gold);
}

.motion .hero__scroll span::after {
  animation: scroll-cue 2.4s var(--ease-in-out) 2.2s infinite;
}

@keyframes scroll-cue {
  0% { translate: 0 0; }
  60%, 100% { translate: 0 360%; }
}

/* ---------- Indicador animado de navegación ---------- */
.motion .site-nav__indicator.is-visible {
  opacity: 1;
}

/* ---------- Revelado al desplazarse ---------- */
.motion [data-reveal]:not([data-reveal='image']) {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 0.95s var(--ease-out),
    translate 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.motion [data-reveal].is-in:not([data-reveal='image']) {
  opacity: 1;
  translate: 0 0;
}

/* Imágenes: cortina de abajo hacia arriba + ligera escala.
   El recorte se aplica a la imagen (no al contenedor) para que
   IntersectionObserver pueda detectar el contenedor. */
.motion [data-reveal='image'] img,
.motion [data-reveal='image'] iframe {
  clip-path: inset(100% 0 0 0);
  scale: 1.18;
  transition:
    clip-path 1.35s var(--ease-out),
    scale 1.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.motion [data-reveal='image'] iframe {
  scale: 1;
}

.motion [data-reveal='image'] figcaption {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.8s var(--ease-out) 0.7s, translate 0.9s var(--ease-out) 0.7s;
}

.motion [data-reveal='image'].is-in img,
.motion [data-reveal='image'].is-in iframe {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

.motion [data-reveal='image'].is-in figcaption {
  opacity: 1;
  translate: 0 0;
}

/* Hover de detalles conserva su zoom tras el revelado */
.motion .details__item.is-in:hover img {
  scale: 1.06;
}

/* Aparición escalonada */
.motion [data-stagger] > * {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 0.8s var(--ease-out),
    translate 0.95s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.motion [data-stagger].is-in > * {
  opacity: 1;
  translate: 0 0;
}

/* Aliados: entrada lateral alterna */
.motion .ally[data-reveal] {
  translate: -40px 0;
}

.motion .ally--laundry[data-reveal] {
  translate: 40px 0;
}

.motion .ally[data-reveal].is-in {
  translate: 0 0;
}

.motion .ally__visual .icon {
  scale: 0.6;
  opacity: 0;
  transition: scale 1.2s var(--ease-out) 0.35s, opacity 0.8s var(--ease-out) 0.35s;
}

.motion .ally.is-in .ally__visual .icon {
  scale: 1;
  opacity: 1;
}

.motion .ally__visual::before {
  scale: 0.4;
  transition: scale 1.8s var(--ease-out) 0.2s;
}

.motion .ally.is-in .ally__visual::before {
  scale: 1;
}

.ally:hover .ally__visual .icon {
  rotate: -6deg;
  transition: rotate var(--dur) var(--ease-out);
}

/* Descuento */
.motion .discount[data-reveal] {
  translate: 0 0;
  scale: 0.92;
  transition: opacity 0.9s var(--ease-out), scale 1.1s var(--ease-out);
}

.motion .discount[data-reveal].is-in {
  scale: 1;
}

/* Espacios de trabajo: el icono se dibuja */
.motion .workspace__icon {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.8s var(--ease-out) 0.3s;
}

.motion .workspace.is-in .workspace__icon {
  stroke-dashoffset: 0;
}

.workspace:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* ---------- Menú móvil ---------- */
.motion .mobile-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-in-out);
}

.motion .mobile-menu.is-open {
  clip-path: inset(0 0 0 0);
}

.motion .mobile-menu li,
.motion .mobile-menu__footer {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.5s var(--ease-out), translate 0.7s var(--ease-out);
}

.motion .mobile-menu.is-open li,
.motion .mobile-menu.is-open .mobile-menu__footer {
  opacity: 1;
  translate: 0 0;
}

.motion .mobile-menu.is-open li:nth-child(1) { transition-delay: 0.25s; }
.motion .mobile-menu.is-open li:nth-child(2) { transition-delay: 0.3s; }
.motion .mobile-menu.is-open li:nth-child(3) { transition-delay: 0.35s; }
.motion .mobile-menu.is-open li:nth-child(4) { transition-delay: 0.4s; }
.motion .mobile-menu.is-open li:nth-child(5) { transition-delay: 0.45s; }
.motion .mobile-menu.is-open li:nth-child(6) { transition-delay: 0.5s; }
.motion .mobile-menu.is-open li:nth-child(7) { transition-delay: 0.55s; }
.motion .mobile-menu.is-open .mobile-menu__footer { transition-delay: 0.6s; }

.motion .wa-float {
  scale: 0;
  transition: scale 0.6s var(--ease-out), transform var(--dur) var(--ease-out), background-color var(--dur), color var(--dur);
}

.motion .wa-float.is-visible {
  scale: 1;
}

/* ---------- Microinteracciones de botones ---------- */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg-hover);
  border-radius: inherit;
  translate: 0 101%;
  transition: translate 0.55s var(--ease-out);
}

.btn:hover::before {
  translate: 0 0;
}

.btn:hover {
  background: var(--btn-bg);
}

.btn.is-pending::before {
  display: none;
}

/* ---------- Galería: elevación sutil ---------- */
.gallery__track img {
  transition: scale 1.1s var(--ease-out);
}

.gallery__track li:hover img {
  scale: 1.04;
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}