/* ============================================================================
   Capa de movimiento SACRyC — transiciones, microinteracciones y entradas.
   Todo vive en este archivo + motion.js. Para desactivarlo: quitar las dos
   líneas de views/layout.php. Respeta "reducir movimiento" del sistema.
   ========================================================================== */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* salida suave, "premium" */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:.18s; --dur-2:.32s; --dur-3:.6s;
}

/* ---------- 1. Transición entre páginas (Chrome, Edge, Safari 18.2+) ---------- */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-group(site-head){animation:none}
::view-transition-old(root){animation:vt-out .22s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
/* Navegadores sin view transitions: entrada suave del contenido */
html.no-vt main{animation:vt-in .55s var(--ease-out) both}

/* Barra de carga fina arriba mientras se abre la página siguiente */
.nav-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--cyan),var(--blue));transform-origin:0 50%;transform:scaleX(0);opacity:0}
.nav-progress.go{opacity:1;animation:np 2.4s var(--ease-out) forwards}
@keyframes np{0%{transform:scaleX(0)}30%{transform:scaleX(.45)}100%{transform:scaleX(.88)}}

/* ---------- 2. Header: se compacta y gana sombra al scrollear ---------- */
.site-head{transition:box-shadow var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.head-inner{transition:min-height var(--dur-2) var(--ease-out)}
.site-head.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(18,53,110,.08)}
.site-head.scrolled .head-inner{min-height:58px}

/* Menú: subrayado animado en lugar del bloque celeste */
@media(min-width:861px){
  .mainnav>a:not(.btn){position:relative;background:none!important;transition:color var(--dur-1) var(--ease-out)}
  .mainnav>a:not(.btn)::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;border-radius:2px;
    background:var(--cyan);transform:scaleX(0);transform-origin:50% 50%;transition:transform var(--dur-2) var(--ease-out)}
  .mainnav>a:not(.btn):hover{color:var(--navy)}
  .mainnav>a:not(.btn):hover::after,.mainnav>a.on::after{transform:scaleX(1)}
  .mainnav>a.on::after{background:var(--blue)}
}

/* Menú mobile: se despliega en lugar de aparecer de golpe */
@media(max-width:860px){
  .mainnav{display:flex!important;visibility:hidden;opacity:0;transform:translateY(-10px);
    transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
  .navtoggle:checked ~ .mainnav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .mainnav>a{transition:background var(--dur-1) var(--ease-out)}
  .burger{transition:transform var(--dur-2) var(--ease-out)}
  .navtoggle:checked ~ .burger{transform:rotate(90deg)}
}

/* ---------- 3. Botones: elevación, brillo y "presión" al tocar ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-cta:hover,.btn-dark:hover{box-shadow:0 10px 24px -8px rgba(59,105,177,.55)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* brillo que cruza el botón principal */
.btn-cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out)}
.btn-cta:hover::before{transform:translateX(120%)}
/* onda al tocar (la agrega motion.js) */
.ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;background:rgba(255,255,255,.35);
  transform:scale(0);animation:ripple .6s var(--ease-out) forwards}
.btn-line .ripple{background:rgba(59,105,177,.18)}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* estado "enviando" de formularios */
.btn.is-loading{pointer-events:none;color:transparent!important}
.btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 4. Tarjetas: movimiento más fluido ---------- */
.card,.edu-card,.pilar,.spon-card,.tray-item a,.rev-item a img,.person-ph,.simposio-art,.revista-band-tapa img,.pilar-img img{
  transition-timing-function:var(--ease-out)!important;transition-duration:var(--dur-3)!important}
.pilar:hover,.edu-card:hover{box-shadow:0 22px 44px -18px rgba(18,53,110,.28)}
.spon-card img{transition:filter var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.spon-card:hover img{transform:scale(1.04)}

/* Links de texto: subrayado que se dibuja */
main p a:not(.btn),main li a:not(.btn),.site-foot a{
  text-decoration:none!important;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--dur-2) var(--ease-out),color var(--dur-1)}
main p a:not(.btn):hover,main li a:not(.btn):hover,.site-foot a:hover{background-size:100% 1px}

/* ---------- 5. Formularios ---------- */
.field input,.field select,.field textarea{transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(90,177,227,.22)}
.ins-radios .ins-radio{transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),background-color var(--dur-2)}
.ins-radios .ins-radio:hover{transform:translateY(-1px)}
.ins-radios .ins-radio.on{border-color:var(--blue);background:var(--sky);box-shadow:0 8px 20px -12px rgba(59,105,177,.5)}

/* ---------- 6. Entradas al hacer scroll ---------- */
.js-motion .rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--rv-d,0s)}
.js-motion .rv.in{opacity:1;transform:none}
/* Hero: el contenido entra escalonado al cargar */
.js-motion .hero-photo-inner>*,.js-motion .simposio-txt>*,.js-motion .hero-photo-inner .ev-chips>*{
  animation:hero-in .9s var(--ease-out) both}
.js-motion .hero-photo-inner>*:nth-child(2),.js-motion .simposio-txt>*:nth-child(2){animation-delay:.08s}
.js-motion .hero-photo-inner>*:nth-child(3),.js-motion .simposio-txt>*:nth-child(3){animation-delay:.16s}
.js-motion .hero-photo-inner>*:nth-child(4),.js-motion .simposio-txt>*:nth-child(4){animation-delay:.24s}
.js-motion .hero-photo-inner>*:nth-child(n+5),.js-motion .simposio-txt>*:nth-child(n+5){animation-delay:.32s}
.js-motion .simposio-art{animation:art-in 1.1s var(--ease-out) .15s both}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}}
@keyframes art-in{from{opacity:0;transform:translateY(24px) scale(.97)}}
/* Foto de fondo del hero: leve zoom-out al entrar */
.hero-photo::before{animation:bg-in 1.8s var(--ease-out) both}
@keyframes bg-in{from{transform:scale(1.06)}}

/* Imágenes: aparecen suave al terminar de cargar */
.js-motion img.lz{opacity:0;transition:opacity .6s var(--ease-out)}
.js-motion img.lz.ok{opacity:1}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pidió ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js-motion .rv,.js-motion img.lz{opacity:1;transform:none}
}