/* =============================================================================
   Animaciones del sitio ADR.
   Se carga desde el <head> de index.html, aparte del export de DesignCode, para
   que reemplazar index.html no se lleve puestas las animaciones. Lo único que el
   markup aporta son atributos `data-*` (ver anim.js y el README).

   Regla de oro: todo lo que arranca invisible (`[data-reveal]`) sólo lo hace si
   `anim.js` pudo correr y marcó <html class="adr-js">. Sin JS, o si el script
   falla, el contenido se ve igual — nunca una página en blanco.
   ============================================================================= */

/* --- Keyframes ------------------------------------------------------------ */
@keyframes adrRevealUp   { from { opacity:0; transform:translate3d(0,38px,0); }   to { opacity:1; transform:none; } }
@keyframes adrRevealDown { from { opacity:0; transform:translate3d(0,-28px,0); }  to { opacity:1; transform:none; } }
@keyframes adrRevealLeft { from { opacity:0; transform:translate3d(-44px,0,0); }  to { opacity:1; transform:none; } }
@keyframes adrRevealRight{ from { opacity:0; transform:translate3d(44px,0,0); }   to { opacity:1; transform:none; } }
@keyframes adrRevealZoom { from { opacity:0; transform:scale(.9); }               to { opacity:1; transform:none; } }
@keyframes adrRevealFade { from { opacity:0; }                                    to { opacity:1; } }
@keyframes adrRevealClip { from { opacity:0; clip-path:inset(0 100% 0 0); }       to { opacity:1; clip-path:inset(0 0 0 0); } }

@keyframes adrFloat    { 0%,100% { transform:translateY(0); }      50% { transform:translateY(-10px); } }
@keyframes adrKenBurns { from { transform:scale(1.02); }           to  { transform:scale(1.14); } }
@keyframes adrShine    { from { transform:translateX(-130%) skewX(-18deg); } to { transform:translateX(320%) skewX(-18deg); } }
@keyframes adrHalo     { 0% { box-shadow:0 0 0 0 rgba(215,200,11,.5); } 70%,100% { box-shadow:0 0 0 16px rgba(215,200,11,0); } }
@keyframes adrBarGrow  { from { transform:scaleX(0); }             to  { transform:scaleX(1); } }
@keyframes adrDrift    { from { background-position:0 0; }         to  { background-position:160px 160px; } }
@keyframes adrBob      { 0%,100% { transform:translateY(0); opacity:.85; } 50% { transform:translateY(7px); opacity:.35; } }

/* --- Reveal al entrar en viewport ----------------------------------------- */
/* Sólo se esconde si anim.js está vivo. `.adr-done` es la red de seguridad del
   watchdog: revela todo pase lo que pase. */
html.adr-js [data-reveal]:not(.adr-in):not(.adr-done) { opacity: 0; }

html.adr-js [data-reveal].adr-in {
  animation: adrRevealUp 760ms cubic-bezier(.22,.8,.26,1) both;
  animation-delay: calc(var(--adr-i, 0) * 85ms);
}
html.adr-js [data-reveal="down"].adr-in  { animation-name: adrRevealDown; }
html.adr-js [data-reveal="left"].adr-in  { animation-name: adrRevealLeft; }
html.adr-js [data-reveal="right"].adr-in { animation-name: adrRevealRight; }
html.adr-js [data-reveal="zoom"].adr-in  { animation-name: adrRevealZoom; }
html.adr-js [data-reveal="fade"].adr-in  { animation-name: adrRevealFade; }
html.adr-js [data-reveal="clip"].adr-in  { animation-name: adrRevealClip; animation-duration: 900ms; }

/* --- Transiciones en todo lo clickeable ----------------------------------- */
/* El export define los estilos inline y los hovers con `style-hover`, que el
   runtime vuelca a reglas `!important`. No hay clases a las que engancharse, así
   que seleccionamos por el propio style inline: React lo serializa normalizado
   ("cursor: pointer"), lo que lo vuelve un gancho estable. */
[style*="cursor: pointer"],
a[href],
button {
  transition:
    transform 420ms cubic-bezier(.22,.8,.26,1),
    box-shadow 420ms cubic-bezier(.22,.8,.26,1),
    background-color 260ms ease,
    border-color 260ms ease,
    color 260ms ease,
    opacity 260ms ease;
}
[style*="cursor: pointer"]:active { transform: scale(.97); }

/* --- Tarjetas: levantan y hacen zoom a su imagen --------------------------- */
[data-card] { transition: transform 480ms cubic-bezier(.22,.8,.26,1), box-shadow 480ms cubic-bezier(.22,.8,.26,1), border-color 300ms ease; }
[data-card]:hover { transform: translateY(-8px); box-shadow: 0 26px 60px -24px rgba(0,0,0,.85); }
/* Las fotos de producto y de viaje no son <img>: el export las pinta como
   background-image sobre un div. Por eso el zoom tiene que cubrir los dos casos. */
[data-card] img, [data-zoom] { transition: transform 900ms cubic-bezier(.22,.8,.26,1), filter 600ms ease; }
[data-card]:hover img, [data-card]:hover [data-zoom] { transform: scale(1.08); filter: grayscale(0) contrast(1.06); }

/* --- Botones: barrido de luz al pasar por encima --------------------------- */
[data-shine] { position: relative; overflow: hidden; }
[data-shine]::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: 0; width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-130%) skewX(-18deg); pointer-events: none; opacity: 0;
}
[data-shine]:hover::after { opacity: 1; animation: adrShine 820ms ease-out; }

/* --- Links con subrayado que crece ---------------------------------------- */
[data-underline] { position: relative; }
[data-underline]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: #D7C80B; transform: scaleX(0); transform-origin: left;
  transition: transform 340ms cubic-bezier(.22,.8,.26,1);
}
[data-underline]:hover::after { transform: scaleX(1); }

/* --- Ambientes ------------------------------------------------------------ */
[data-float]    { animation: adrFloat 5.5s ease-in-out infinite; }
[data-halo]     { animation: adrHalo 2.6s ease-out infinite; }
[data-kenburns] { animation: adrKenBurns 26s ease-in-out infinite alternate; transform-origin: 50% 55%; }
[data-drift]    { animation: adrDrift 14s linear infinite; }
[data-bob]      { animation: adrBob 2s ease-in-out infinite; }
html.adr-js [data-bar].adr-in { animation: adrBarGrow 900ms cubic-bezier(.22,.8,.26,1) both; transform-origin: left; }

/* --- Accesibilidad -------------------------------------------------------- */
/* Quien pidió menos movimiento ve el contenido quieto y, sobre todo, VISIBLE:
   los reveals se anulan con opacity 1, no quedan en su estado inicial. */
@media (prefers-reduced-motion: reduce) {
  html.adr-js [data-reveal],
  html.adr-js [data-reveal].adr-in { opacity: 1 !important; animation: none !important; }
  [data-float], [data-halo], [data-kenburns], [data-drift], [data-bob],
  html.adr-js [data-bar].adr-in { animation: none !important; }
  [data-card]:hover { transform: none; }
  [data-card]:hover img, [data-card]:hover [data-zoom] { transform: none; }
  [data-shine]:hover::after { animation: none; opacity: 0; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}