/* Movimiento (Temas → Movimiento: Suave o Mucho). Si el celular pide "reducir movimiento", no se mueve nada. */
@media (prefers-reduced-motion:no-preference){
  /* entrada suave de cada página */
  body{animation:mo-in .32s ease-out both}
  @keyframes mo-in{from{opacity:0}to{opacity:1}}

  /* aparición al bajar */
  html.mo-js .mo-rv{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.mo-js .mo-rv.mo-in{opacity:1;transform:none}

  /* toque: rebote corto */
  .mo-tap{animation:mo-tap .38s cubic-bezier(.3,1.6,.5,1)}
  @keyframes mo-tap{0%{transform:scale(1)}35%{transform:scale(.9)}100%{transform:scale(1)}}
  .btn{transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
  .btn:active{transform:scale(.96)}
  .app-card,.p-card,.cat,.card{transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease}
  @media (hover:hover){.app-card:hover,.p-card:hover,.cat:hover{transform:translateY(-3px)}}

  /* menú de abajo: el ícono de la pestaña activa salta al llegar */
  .tabbar a[aria-current="page"] .ic{animation:mo-hop .6s .15s cubic-bezier(.3,1.7,.5,1) both}
  @keyframes mo-hop{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:translateY(0)}}

  /* ---------- solo "Mucho" ---------- */
  .mo-mucho .app-tile,.mo-mucho .about-ic{animation:mo-float 3.4s ease-in-out infinite alternate}
  .mo-mucho .app-card:nth-child(2n) .app-tile{animation-delay:-1.2s}
  .mo-mucho .app-card:nth-child(3n) .app-tile{animation-delay:-2.1s}
  @keyframes mo-float{from{transform:translateY(0) rotate(0)}to{transform:translateY(-4px) rotate(-3deg)}}
  .mo-mucho .hero::after,.mo-mucho .s-hero::after,.mo-mucho .t-hero::after{animation:mo-drift 9s ease-in-out infinite alternate}
  @keyframes mo-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.18)}}
  .mo-mucho .hero::before,.mo-mucho .s-hero::before,.mo-mucho .t-hero.lay-tecno::before{animation:mo-grid 14s linear infinite}
  @keyframes mo-grid{from{background-position:0 0}to{background-position:0 60px}}
  .mo-mucho .btn.primary,.mo-mucho .hero .btn,.mo-mucho .hero-btn{position:relative;overflow:hidden}
  .mo-mucho .btn.primary::after,.mo-mucho .hero .btn::after,.mo-mucho .hero-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:mo-shine 4.2s ease-in-out infinite}
  @keyframes mo-shine{0%,62%{left:-60%}100%{left:130%}}
  .mo-mucho .tabbar a[aria-current="page"] .ic{animation:mo-hop .6s .15s cubic-bezier(.3,1.7,.5,1) both,mo-glow 2.8s 1s ease-in-out infinite}
  @keyframes mo-glow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--accent) 70%,transparent))}}
  .mo-mucho .hero h1 .hl{animation:mo-pulse 3.2s ease-in-out infinite}
  @keyframes mo-pulse{0%,100%{text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}50%{text-shadow:0 0 34px color-mix(in srgb,var(--accent) 90%,transparent)}}
}