/* ===== Efectos extra y transiciones suaves (se carga después de site.css) ===== */

/* --- 1) Transiciones del hero: sin parpadeo ni retardo ---
   La diapositiva nueva entra ENCIMA de la anterior (que se mantiene opaca hasta terminar),
   así nunca se ve el fondo oscuro entre una foto y otra. */
.hero{--td:1.1s;--te:cubic-bezier(.4,0,.2,1)}
.hero-slide{opacity:0;visibility:hidden;z-index:0;transition:none;backface-visibility:hidden;will-change:opacity,transform}
.hero-slide.leaving{opacity:1;visibility:visible;z-index:1;transform:none;filter:none;clip-path:none;
  transition:transform var(--td) var(--te),filter var(--td) var(--te)}
.hero-slide.active{opacity:1;visibility:visible;z-index:2;transform:none;filter:none;clip-path:inset(0) ;
  transition:opacity var(--td) var(--te),transform var(--td) var(--te),filter var(--td) var(--te),clip-path var(--td) var(--te)}
.hero-img{backface-visibility:hidden;transform:translateZ(0)}
/* el movimiento de la foto continúa mientras se desvanece (antes "saltaba") */
.eff-kenburns .hero-slide.leaving .hero-img{animation:kb 14s ease-in-out infinite alternate}
.eff-zoom-out .hero-slide.leaving .hero-img{animation:zo 12s ease-out both}

/* Transiciones originales, ahora suaves */
.trans-fade .hero-slide:not(.active):not(.leaving){opacity:0}
.trans-slide .hero-slide:not(.active):not(.leaving){opacity:1;transform:translate3d(100%,0,0)}
.trans-slide .hero-slide.leaving{transform:translate3d(-22%,0,0)}
.trans-slide .hero-slide.active{transform:none}
.trans-zoom .hero-slide:not(.active):not(.leaving){transform:scale(1.18)}
.trans-zoom .hero-slide.active{transform:none}
/* Transiciones nuevas (5) */
.trans-wipe .hero-slide:not(.active):not(.leaving){opacity:1;clip-path:inset(0 0 0 100%)}
.trans-wipe .hero-slide.active{clip-path:inset(0 0 0 0)}
.trans-circle .hero-slide:not(.active):not(.leaving){opacity:1;clip-path:circle(0% at 50% 50%)}
.trans-circle .hero-slide.active{clip-path:circle(150% at 50% 50%);transition-duration:1.4s}
.trans-blur .hero-slide:not(.active):not(.leaving){filter:blur(22px);transform:scale(1.08)}
.trans-blur .hero-slide.active{filter:none;transform:none}
.trans-slide-up .hero-slide:not(.active):not(.leaving){opacity:1;transform:translate3d(0,100%,0)}
.trans-slide-up .hero-slide.leaving{transform:translate3d(0,-22%,0)}
.trans-slide-up .hero-slide.active{transform:none}
.trans-rotate .hero-slide:not(.active):not(.leaving){transform:rotate(5deg) scale(1.25)}
.trans-rotate .hero-slide.active{transform:none}
.trans-wipe .hero-slide.leaving,.trans-circle .hero-slide.leaving{clip-path:none}

/* --- 2) Efectos de movimiento en las fotos del hero (3 nuevos) --- */
.eff-pan .hero-img{transform:scale(1.18)}
.eff-pan .hero-slide.active .hero-img,.eff-pan .hero-slide.leaving .hero-img{animation:pan 16s ease-in-out infinite alternate}
.eff-zoom-in .hero-slide.active .hero-img,.eff-zoom-in .hero-slide.leaving .hero-img{animation:zi 14s ease-out both}
.eff-float .hero-slide.active .hero-img,.eff-float .hero-slide.leaving .hero-img{animation:fl 10s ease-in-out infinite alternate}
@keyframes pan{from{transform:scale(1.18) translateX(-4%)}to{transform:scale(1.18) translateX(4%)}}
@keyframes zi{from{transform:scale(1)}to{transform:scale(1.22)}}
@keyframes fl{from{transform:scale(1.12) translateY(-3%)}to{transform:scale(1.12) translateY(3%)}}

/* --- 3) Efectos al pasar el mouse (4 nuevos) --- */
.hover-shine .g-media,.hover-shine .card-media,.hover-shine .split-media{position:relative;overflow:hidden}
.hover-shine .g-media::before,.hover-shine .card-media::before,.hover-shine .split-media::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:none}
.hover-shine .g-item:hover .g-media::before,.hover-shine .card:hover .card-media::before,.hover-shine .split-media:hover::before{left:140%;transition:left .9s ease}
.hover-rotate .g-media img,.hover-rotate .card-media img,.hover-rotate .split-media img,.hover-rotate figure img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.hover-rotate .g-item:hover img,.hover-rotate .card:hover img,.hover-rotate .split-media:hover img,.hover-rotate figure:hover img{transform:scale(1.14) rotate(2.5deg)}
.hover-sepia img{transition:filter .6s ease,transform .6s ease}
.hover-sepia .g-item:hover img,.hover-sepia .card:hover img,.hover-sepia figure:hover img,.hover-sepia .split-media:hover img{filter:sepia(.85) contrast(1.08) saturate(1.2);transform:scale(1.04)}
.hover-spotlight .g-item,.hover-spotlight .card{transition:opacity .4s ease,filter .4s ease,transform .4s ease}
.hover-spotlight:hover .g-item:not(:hover),.hover-spotlight:hover .card:not(:hover){opacity:.4;filter:blur(2px) grayscale(.5)}
.hover-spotlight .g-item:hover,.hover-spotlight .card:hover{transform:scale(1.03)}

/* --- 4) Animaciones de entrada al hacer scroll (3 nuevas) --- */
html.js [data-anim=rotate-in]{transform:rotate(-8deg) scale(.88) translateY(30px)}
html.js [data-anim=bounce]{transform:translateY(70px) scale(.92);transition:opacity .4s ease var(--ad,0ms),transform var(--adur,700ms) cubic-bezier(.34,1.56,.64,1) var(--ad,0ms)}
html.js [data-anim=reveal]{opacity:1;clip-path:inset(0 0 100% 0);transform:translateY(16px);transition:clip-path var(--adur,700ms) cubic-bezier(.65,0,.35,1) var(--ad,0ms),transform var(--adur,700ms) cubic-bezier(.2,.7,.2,1) var(--ad,0ms)}
html.js [data-anim=reveal].in{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){html.js [data-anim=reveal]{clip-path:none!important}.hero-slide{transition:none!important}}