/* =====================================================================
   jg-delight.css · Animaciones sencillas ("delight") para JGOCFoto
   ---------------------------------------------------------------------
   - Todo vive dentro de prefers-reduced-motion: no-preference, así que
     quien pide menos movimiento en su sistema ve el sitio igual que antes.
   - Se usan las propiedades individuales translate/scale/rotate para no
     pisar los transform que ya pone la plantilla (masonry, iconos, etc.).
   - La aparición al hacer scroll la activa js/jg-delight.js: sin JS el
     contenido se ve normal (la clase .jg-rv solo la pone el script).
   Colores de marca: azul 0750A2 → 1EC7FF, acento amarillo FFB81C.
   ===================================================================== */

:root {
  --jg-azul: #0750A2;
  --jg-cian: #1EC7FF;
  --jg-amarillo: #FFB81C;
  --jg-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: no-preference) {

  /* 1. Aparición suave al entrar en pantalla (tarjetas, textos, formularios) */
  .jg-rv {
    opacity: 0;
    translate: 0 28px;
    transition: opacity .8s var(--jg-ease), translate .8s var(--jg-ease);
    transition-delay: var(--jg-d, 0ms);
  }
  .jg-rv.is-in {
    opacity: 1;
    translate: 0 0;
  }

  /* 2. Botones: se sienten "presionables" */
  .ashade-button,
  .ashade-contact-form__submit input,
  .ashade-contact-form__submit button {
    transition: border-color .3s, background-color .3s, color .3s, scale .18s var(--jg-ease), box-shadow .3s;
  }
  .ashade-button:active,
  .ashade-contact-form__submit input:active,
  .ashade-contact-form__submit button:active {
    scale: .96;
  }

  /* 3. Botón de WhatsApp: un "latido" de luz azul, solo 3 veces y luego descansa */
  .jg-cta-whatsapp {
    animation: jg-latido 2.4s ease-out 2.5s 3;
  }
  @keyframes jg-latido {
    0%   { box-shadow: 0 0 0 0 rgba(30, 199, 255, .55); }
    70%  { box-shadow: 0 0 0 14px rgba(30, 199, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(30, 199, 255, 0); }
  }

  /* 4. Avisos flotantes de la portada: entran deslizándose desde la derecha */
  .jg-aviso-temporada {
    animation: jg-entra-derecha .8s var(--jg-ease) 1.6s backwards;
  }
  .jg-aviso-temporada + .jg-aviso-temporada {
    animation-delay: 1.8s;
  }
  @keyframes jg-entra-derecha {
    from { opacity: 0; translate: 40px 0; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* 5. Subrayado que se dibuja en los enlaces de los textos */
  .ashade-intro a {
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--jg-azul), var(--jg-cian));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size .45s var(--jg-ease), color .3s;
  }

  /* Contador de logros: el número "aterriza" con un pequeño rebote */
  .ashade-counter-item.jg-rv .ashade-counter-value {
    display: inline-block;
    scale: .85;
    transition: scale .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--jg-d, 0ms) + 150ms);
  }
  .ashade-counter-item.jg-rv.is-in .ashade-counter-value {
    scale: 1;
  }
}

/* Efectos de hover: solo en equipos con mouse (en celular no se quedan "pegados") */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {

  /* Tarjetas de álbum y servicio: zoom más lento y cinematográfico */
  .ashade-album-item img,
  .ashade-service-card__image img {
    transition: transform 1s var(--jg-ease), filter .6s;
  }
  .ashade-album-item:hover img,
  .ashade-service-card:hover .ashade-service-card__image img {
    transform: scale(1.06);
    filter: saturate(1.12) brightness(1.04);
  }
  .ashade-service-card__image {
    overflow: hidden;
  }

  /* Título del álbum: la línea superior cambia a azul de marca */
  .ashade-album-item h5 span {
    transition: color .4s;
  }
  .ashade-album-item:hover h5 span {
    color: var(--jg-cian);
  }

  /* Botones: brillo azul al pasar el mouse */
  .ashade-button:hover {
    box-shadow: 0 6px 22px -8px rgba(30, 199, 255, .55);
  }

  .ashade-intro a:hover {
    background-size: 100% 2px;
  }

  /* Iconos de contacto: un guiño al pasar por la fila */
  .ashade-contact-icon {
    transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), border-color .3s, color .3s;
  }
  .ashade-contact-details__list li:hover .ashade-contact-icon {
    rotate: -12deg;
    border-color: var(--jg-cian);
    color: var(--jg-cian);
  }

  /* Avisos flotantes: se levantan un poco */
  .jg-aviso-temporada {
    transition: opacity .4s ease, background .3s ease, translate .35s var(--jg-ease), border-color .3s;
  }
  .jg-aviso-temporada:hover {
    translate: -6px 0;
  }
}