/* =====================================================================
 * TRANSICIONES GLOBALES DEL SITIO PÚBLICO
 * ---------------------------------------------------------------------
 * Todo el movimiento de la página vive acá: aparición al hacer scroll,
 * micro-interacciones de hover y estados de entrada.
 *
 * Cómo funciona la aparición al scroll:
 *   1. transiciones.js corre en el <head> y marca <html> con .js-anim
 *      ANTES de que el navegador pinte, así el bloque nunca se ve un
 *      instante y después desaparece.
 *   2. Este archivo esconde los bloques de LA LISTA de abajo mientras
 *      exista .js-anim.
 *   3. El mismo JS observa esos bloques y les agrega .is-inview cuando
 *      entran en pantalla; ahí se hace la transición.
 *
 * Sin JS, con JS bloqueado o con "reducir movimiento" activo la clase
 * .js-anim nunca se agrega y TODO se ve normal: no hay forma de que un
 * contenido quede invisible.
 *
 * IMPORTANTE: la lista de selectores de .rv-target está duplicada en
 * transiciones.js (const SELECTOR). Si tocás una, tocá la otra.
 * ===================================================================== */

:root {
  /* Curvas: -soft es la de salida "expo", la que da la sensación suave */
  --tr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tr-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --tr-rapida: 0.18s;
  --tr-media: 0.32s;
  --tr-lenta: 0.7s;

  /* Aparición al scroll */
  --rv-dur: 0.8s;
  --rv-dist: 28px;
  --rv-paso: 90ms;
}

/* =====================================================================
 * 1. APARICIÓN AL HACER SCROLL
 * ===================================================================== */

/* --- LISTA (mirror de SELECTOR en transiciones.js) ------------------ */
html.js-anim :is(
  /* Secciones y diseños de contenido del administrador */
  .encabezado-seccion,
  .boton,
  .caja-contenido-simple,
  .design-five,
  .carrouselsection,
  .container-time-line,
  .timeline-item,
  /* Noticias */
  .nt-hero,
  .nt-card,
  .nt-article,
  .nt-destacadas-head,
  .nt-side-item,
  .nt-back,
  .nt-empty,
  /* Galería */
  .gal-hero,
  .gal-album-card,
  .gal-video-card,
  .gal-empty,
  .gal-pag-wrap,
  /* Eventos y bonos */
  .evl-hero,
  .evl-card,
  .evl-empty,
  .evl-pag-wrap,
  /* Reservas */
  .rv-hero,
  .rv-card,
  .rv-empty,
  .rvd-hero,
  .rvd-panel,
  /* Sedes */
  .sd-hero,
  .sd-row,
  .sd-empty,
  .sd-back,
  .sd-detail-hero,
  .sd-section-head,
  .sd-mapa-wrap,
  .sd-carta-section,
  /* Calendario */
  .cal-page-header,
  .cal-section,
  /* Contacto (página y bloque del home) */
  .cnt-left,
  .cnt-right,
  .hct-info,
  .hct-form-col,
  /* Genéricos */
  .page-header,
  [data-rv]
) {
  opacity: 0;
  transform: translate3d(0, var(--rv-dist), 0);
  transition:
    opacity var(--rv-dur) var(--tr-ease-soft),
    transform var(--rv-dur) var(--tr-ease-soft);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-paso));
  will-change: opacity, transform;
}

/* --- Variantes opcionales, por si una vista quiere otro gesto -------
 * Uso en cualquier vista:  <div data-rv="left"> ... </div>
 * Todas tienen la misma especificidad que la regla de arriba, por eso
 * van después: pisan sólo el transform inicial.
 * ------------------------------------------------------------------- */
html.js-anim [data-rv="fade"] {
  transform: none;
}

html.js-anim [data-rv="left"] {
  transform: translate3d(calc(var(--rv-dist) * -1.4), 0, 0);
}

/* OJO con "right": desplazar hacia la derecha un bloque que llega al borde
   de la pantalla agrega scroll horizontal (hacia la izquierda no, el
   navegador lo recorta). Usalo sólo en bloques con aire a la derecha; si
   dudás, "zoom" da un efecto parecido y no mueve nada de lugar. */
html.js-anim [data-rv="right"] {
  transform: translate3d(calc(var(--rv-dist) * 1.4), 0, 0);
}

html.js-anim [data-rv="zoom"] {
  transform: scale(0.94);
}

html.js-anim [data-rv="down"] {
  transform: translate3d(0, calc(var(--rv-dist) * -1), 0);
}

/* En móvil las columnas se apilan y ya no hay lugar para moverse de lado:
   los gestos horizontales pasan a ser verticales. */
@media (max-width: 767.98px) {

  html.js-anim [data-rv="left"],
  html.js-anim [data-rv="right"] {
    transform: translate3d(0, var(--rv-dist), 0);
  }
}

/* --- Estado final: lo pone el JS al entrar en pantalla --------------
 * Va al final del bloque para ganarle a las variantes de arriba, que
 * tienen la misma especificidad.
 * ------------------------------------------------------------------- */
html.js-anim .is-inview {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Reset de seguridad --------------------------------------------
 * Dentro de carruseles y modales el bloque puede quedar fuera de
 * pantalla para siempre (slides ocultos, clones de slick, modal aún sin
 * abrir): ahí nunca se dispara el observer, así que se muestra directo.
 * Va después de la regla que esconde, y con más especificidad, para que
 * gane siempre.
 * ------------------------------------------------------------------- */
html.js-anim :is(
  .slick-slider,
  .slick-track,
  .carousel,
  .carrouselTrack,
  .modal,
  .sliderPanel-pista,
  .sliderMarq-cinta,
  .sliderMin-tira,
  .rvd-eventos-sede-track
) :is(.caja-contenido-simple, .design-five, .timeline-item, [data-rv]) {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

/* =====================================================================
 * 2. ENTRADA DE PÁGINA
 * El contenido principal entra con un fundido corto. Es sólo opacidad
 * (nada de transform) para no romper los sticky de la cabecera ni del
 * banner principal.
 *
 * OJO: animar la opacidad con fill "both" deja el efecto aplicado para
 * siempre, así que .main-general queda como contexto de apilamiento y
 * nada de adentro puede subir por encima del .modal-backdrop que vive en
 * el <body>. Por eso transiciones.js mueve los modales al <body>.
 * ===================================================================== */
html.js-anim .main-general {
  animation: pgEntrada 0.5s var(--tr-ease) both;
}

@keyframes pgEntrada {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* =====================================================================
 * 3. CABECERA
 * ===================================================================== */
.global-navbar {
  transition:
    box-shadow var(--tr-media) var(--tr-ease),
    background-color var(--tr-media) var(--tr-ease),
    backdrop-filter var(--tr-media) var(--tr-ease);
}

/* .is-scrolled lo agrega transiciones.js al bajar del pliegue */
.global-navbar.is-scrolled {
  box-shadow: 0 6px 24px rgba(11, 75, 62, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* Ítems del dropdown: desplazamiento corto al pasar el mouse */
.dropdown-item,
.galeria-dropdown-item {
  transition:
    background-color var(--tr-rapida) var(--tr-ease),
    color var(--tr-rapida) var(--tr-ease),
    padding-left var(--tr-rapida) var(--tr-ease);
}

.dropdown-item:hover,
.galeria-dropdown-item:hover {
  padding-left: 1.35rem;
}

.navbar-toggler {
  transition: transform var(--tr-media) var(--tr-ease-soft), box-shadow var(--tr-rapida) var(--tr-ease);
}

.navbar-toggler:active {
  transform: scale(0.92);
}

/* =====================================================================
 * 4. MICRO-INTERACCIONES GENERALES
 * Suavizan lo que ya existe; no cambian colores ni tamaños de nadie.
 * ===================================================================== */
a,
button,
.btn,
input,
select,
textarea,
summary,
[role="button"] {
  transition:
    color var(--tr-rapida) var(--tr-ease),
    background-color var(--tr-rapida) var(--tr-ease),
    border-color var(--tr-rapida) var(--tr-ease),
    box-shadow var(--tr-media) var(--tr-ease),
    opacity var(--tr-rapida) var(--tr-ease),
    transform var(--tr-media) var(--tr-ease-soft);
}

/* Respuesta táctil: el botón se hunde apenas al presionarlo */
.btn:active,
button:active,
.btn-vermas:active {
  transform: translateY(1px) scale(0.985);
}

/* Las flechas de slick también son <button>, pero están centradas
   verticalmente con transform: translate(0, -50%) (slick-theme.css). La regla
   de arriba les pisa ese transform al presionarlas —gana por especificidad,
   'button:active' pesa más que '.slick-prev'— y el botón se descolgaba media
   altura hacia abajo apenas se apretaba el mouse. Como además el transform de
   las flechas está en transición (ver más abajo), el botón se iba de abajo del
   puntero entre el mousedown y el mouseup y el clic nunca llegaba a
   dispararse: la flecha parecía muerta salvo que se le acertara justo abajo.
   Acá se repite el hundido conservando el centrado. */
.slick-prev:active,
.slick-next:active {
  transform: translate(0, -50%) scale(0.985);
}

/* Foco de teclado visible y suave en todo el sitio */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-rosa);
  outline-offset: 2px;
}

/* Imágenes de los diseños del administrador (d2-img-wrap-12, d9-img-wrap-7…)
   Todos esos contenedores ya tienen overflow:hidden. */
[class*="img-wrap-"] img,
[class*="-img-wrap"] img {
  transition: transform var(--tr-lenta) var(--tr-ease-soft);
}

.caja-contenido-simple:hover [class*="img-wrap-"] img,
.caja-contenido-simple:hover [class*="-img-wrap"] img {
  transform: scale(1.045);
}

/* Tarjetas del sitio: la sombra y el desplazamiento ya existen en
   global.css; acá sólo se les unifica la curva para que no salten. */
.nt-card,
.evl-card,
.rv-card,
.gal-album-card,
.gal-video-card,
.sd-row,
.rv-cal-sede-card,
.cal-info-card,
.nt-side-item {
  transition:
    transform var(--tr-media) var(--tr-ease-soft),
    box-shadow var(--tr-media) var(--tr-ease),
    border-color var(--tr-media) var(--tr-ease);
}

/* Íconos sociales del pie y botones flotantes */
.social-link,
.social-contact-link,
.footer-contacto-item {
  transition:
    transform var(--tr-media) var(--tr-ease-soft),
    color var(--tr-rapida) var(--tr-ease),
    opacity var(--tr-rapida) var(--tr-ease);
}

.social-link:hover,
.social-contact-link:hover {
  transform: translateY(-3px);
}

.floating-btn a {
  transition:
    transform var(--tr-media) var(--tr-ease-soft),
    box-shadow var(--tr-media) var(--tr-ease);
}

.floating-btn a:hover {
  transform: scale(1.06);
}

/* =====================================================================
 * 5. COMPONENTES DE BOOTSTRAP
 * ===================================================================== */

/* Modales: además del fundido propio de Bootstrap, un leve acercamiento */
.modal.fade .modal-dialog {
  transform: translate3d(0, 18px, 0) scale(0.97);
  transition: transform var(--tr-lenta) var(--tr-ease-soft), opacity var(--tr-media) var(--tr-ease);
}

.modal.show .modal-dialog {
  transform: none;
}

/* Acordeón: la flecha gira y el cuerpo abre con la misma curva */
.acc-chevron,
.accordion-button::after {
  transition: transform var(--tr-media) var(--tr-ease-soft);
}

.accordion-button:not(.collapsed) .acc-chevron,
.acc-boton:not(.collapsed) .acc-chevron {
  transform: rotate(180deg);
}

.accordion-collapse.collapsing {
  transition: height var(--tr-media) var(--tr-ease);
}

/* Flechas de los carruseles de Bootstrap y de Slick */
.carousel-control-prev,
.carousel-control-next,
.slick-prev,
.slick-next {
  transition: opacity var(--tr-media) var(--tr-ease), transform var(--tr-media) var(--tr-ease-soft);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  transform: scale(1.08);
}

.carousel-indicators [data-bs-target] {
  transition: opacity var(--tr-media) var(--tr-ease), width var(--tr-media) var(--tr-ease-soft);
}

/* =====================================================================
 * 6. MOVIMIENTO REDUCIDO
 * Si el sistema operativo lo pide, no hay animación de ningún tipo.
 * (transiciones.js además ni siquiera agrega .js-anim en ese caso.)
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.js-anim :is(.caja-contenido-simple, .nt-card, .evl-card, .rv-card, .sd-row, [data-rv]) {
    opacity: 1;
    transform: none;
  }
}