/* =========================================================
   MOTION EFFECTS V1 — TRANSICIONES EDITORIALES
   Clínica boutique / revista médica premium.

   Objetivo:
   - movimiento discreto
   - sensación editorial
   - nada brusco ni promocional
   - responsive
   - respeta prefers-reduced-motion
   ========================================================= */

:root{
  --motion-duration:680ms;
  --motion-duration-fast:480ms;
  --motion-distance:20px;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}

/* Evita flashes: JS añade .motion-ready cuando está activo */
html.motion-ready .motion-reveal{
  opacity:0;
  transform:translate3d(0,var(--motion-distance),0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}

html.motion-ready .motion-reveal.motion-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Variantes */
html.motion-ready .motion-reveal.motion-from-left{
  transform:translate3d(-20px,0,0);
}

html.motion-ready .motion-reveal.motion-from-right{
  transform:translate3d(20px,0,0);
}

html.motion-ready .motion-reveal.motion-from-left.motion-visible,
html.motion-ready .motion-reveal.motion-from-right.motion-visible{
  transform:translate3d(0,0,0);
}

/* =========================================================
   HERO — entrada inicial más cuidada
   ========================================================= */

html.motion-ready .hero .hero-eyebrow,
html.motion-ready .hero h1,
html.motion-ready .hero .hero-description,
html.motion-ready .hero .actions,
html.motion-ready .hero .hero-visual,
html.motion-ready .hero .hero-badge{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:
    opacity 760ms var(--motion-ease),
    transform 760ms var(--motion-ease);
}

html.motion-ready.motion-loaded .hero .hero-eyebrow{
  opacity:1;
  transform:none;
  transition-delay:80ms;
}

html.motion-ready.motion-loaded .hero h1{
  opacity:1;
  transform:none;
  transition-delay:150ms;
}

html.motion-ready.motion-loaded .hero .hero-description{
  opacity:1;
  transform:none;
  transition-delay:220ms;
}

html.motion-ready.motion-loaded .hero .actions{
  opacity:1;
  transform:none;
  transition-delay:290ms;
}

html.motion-ready .hero .hero-visual{
  transform:translate3d(22px,0,0);
}

html.motion-ready.motion-loaded .hero .hero-visual{
  opacity:1;
  transform:none;
  transition-delay:180ms;
}

html.motion-ready .hero .hero-badge{
  transform:translate3d(-12px,12px,0);
}

html.motion-ready.motion-loaded .hero .hero-badge{
  opacity:1;
  transform:none;
  transition-delay:430ms;
}

/* =========================================================
   HOVERS FINOS
   Solo pequeños detalles; no cambian layout.
   ========================================================= */

.motion-card{
  transition:
    transform 260ms var(--motion-ease),
    box-shadow 260ms var(--motion-ease),
    border-color 260ms var(--motion-ease);
}

@media(hover:hover) and (pointer:fine){
  .motion-card:hover{
    transform:translateY(-3px);
  }

  .motion-image img{
    transition:transform 520ms var(--motion-ease);
  }

  .motion-image:hover img{
    transform:scale(1.012);
  }
}

/* =========================================================
   LÍNEAS / EYEBROWS
   Entrada leve de los detalles editoriales.
   ========================================================= */

.motion-visible .hero-eyebrow-line,
.motion-visible .condition-rule{
  transform:scaleX(1);
  transform-origin:left center;
}

.hero-eyebrow-line,
.condition-rule{
  transition:transform 700ms var(--motion-ease);
}

/* =========================================================
   MÓVIL
   Menos recorrido y duración para evitar sensación pesada.
   ========================================================= */

@media(max-width:700px){
  :root{
    --motion-duration:560ms;
    --motion-duration-fast:420ms;
    --motion-distance:13px;
  }

  html.motion-ready .motion-reveal.motion-from-left,
  html.motion-ready .motion-reveal.motion-from-right{
    transform:translate3d(0,var(--motion-distance),0);
  }

  html.motion-ready .hero .hero-visual{
    transform:translate3d(0,14px,0);
  }

  html.motion-ready .hero .hero-badge{
    transform:translate3d(0,10px,0);
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media(prefers-reduced-motion:reduce){
  html.motion-ready .motion-reveal,
  html.motion-ready .hero .hero-eyebrow,
  html.motion-ready .hero h1,
  html.motion-ready .hero .hero-description,
  html.motion-ready .hero .actions,
  html.motion-ready .hero .hero-visual,
  html.motion-ready .hero .hero-badge,
  .motion-card,
  .motion-image img,
  .hero-eyebrow-line,
  .condition-rule{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}