/* ============================================================
   El Mercadito de Isolina — capa de animaciones
   Creado por The Future Place CR · Se carga después de styles.css
   Todo va envuelto en no-preference: si el usuario pide menos
   movimiento, el sitio queda exactamente como antes.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* — Revelado al hacer scroll (lo aplica animaciones.js) — */
  .anim-reveal{opacity:0;transform:translateY(26px);
    transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--anim-delay,0s);will-change:opacity,transform}
  .anim-reveal.anim-in{opacity:1;transform:none}

  /* — Hero: Ken Burns lento sobre el video/póster — */
  .hero-media .hero-video{animation:hero-kenburns 26s ease-in-out infinite alternate}
  @keyframes hero-kenburns{from{transform:scale(1.001)}to{transform:scale(1.09)}}

  /* — Entrada escalonada del contenido del hero — */
  .hero-content>*{animation:hero-rise 1s cubic-bezier(.22,.61,.36,1) both}
  .hero-content>*:nth-child(2){animation-delay:.12s}
  .hero-content>*:nth-child(3){animation-delay:.24s}
  .hero-content>*:nth-child(4){animation-delay:.36s}
  .hero-content>*:nth-child(5){animation-delay:.48s}
  @keyframes hero-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

  /* — Ticker: se pausa al pasar el mouse para poder leer — */
  .ticker:hover .ticker-track{animation-play-state:paused}

  /* — Productos: levitan y la foto respira — */
  .product{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .product:hover{transform:translateY(-6px)}
  .product .product-image{overflow:hidden}
  .product .product-image img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
  .product:hover .product-image img{transform:scale(1.07)}
  .product .product-image-label{transition:letter-spacing .4s ease,background-color .4s ease}
  .product:hover .product-image-label{letter-spacing:.22em}
  .product .product-name{transition:color .3s ease}
  .product:hover .product-name{color:var(--wine)}

  /* — Botones: responden al tacto — */
  .button,.add-button,.bag-button,.collection-link,.copy-button,.continue-shopping{
    transition:transform .3s ease,box-shadow .3s ease,filter .3s ease,background-color .3s ease,color .3s ease}
  .button:hover,.add-button:hover,.bag-button:hover,.continue-shopping:hover{transform:translateY(-2px);filter:brightness(1.07)}
  .button:active,.add-button:active,.bag-button:active{transform:translateY(0) scale(.97)}

  /* — Botón de WhatsApp: brillo que recorre — */
  .whatsapp-order{position:relative;overflow:hidden}
  .whatsapp-order::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 30%,#ffffff2e 50%,transparent 70%);
    transform:translateX(-110%);animation:wa-shine 3.4s ease-in-out infinite}
  @keyframes wa-shine{0%,55%{transform:translateX(-110%)}100%{transform:translateX(110%)}}

  /* — Carrito flotante: el contador hace pop — */
  .bag-count{animation:bag-pop .45s cubic-bezier(.34,1.56,.64,1)}
  @keyframes bag-pop{0%{transform:scale(.3)}100%{transform:scale(1)}}
  .floating-cart{transition:transform .3s ease,box-shadow .3s ease}
  .floating-cart:hover{transform:translateY(-3px)}

  /* — Header: sombra suave al bajar — */
  .site-header{transition:box-shadow .35s ease}
  .site-header.anim-scrolled{box-shadow:0 12px 32px #3d0f1a2e}

  /* — Tarjetas de colección y esencia — */
  .collection-card{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
  .collection-card:hover{transform:translateY(-5px)}
  .collection-card img,.essence-image img,.pairing-photo img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
  .collection-card:hover img,.essence-image:hover img,.pairing-photo:hover img{transform:scale(1.05)}

  /* — Encabezados de sección: subrayado que se dibuja — */
  .section-heading h2{position:relative}
  .section-heading h2::after{content:"";display:block;height:2px;width:64px;margin-top:16px;
    background:var(--gold);transform:scaleX(0);transform-origin:left;
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1) .25s}
  .section-heading.anim-in h2::after{transform:scaleX(1)}

  /* — Toast: entra con resorte solo cuando se muestra — */
  .toast.is-shown{animation:toast-in .5s cubic-bezier(.34,1.4,.64,1) both}
  @keyframes toast-in{from{opacity:0;transform:translate(-50%,14px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}

  /* — Icono de scroll: invita a bajar — */
  .scroll-link{transition:transform .3s ease,opacity .3s ease}
  .scroll-link:hover{transform:translateY(4px)}

  /* — Desplazamiento suave entre secciones — */
  html{scroll-behavior:smooth}

  /* — Crédito del footer (lo inserta animaciones.js) — */
  .footer-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .3s ease}
  .footer-credit a:hover{color:var(--gold)}
  .footer-credit .admin-link{opacity:.72;text-decoration:none}
  .footer-credit .admin-link:hover{opacity:1;text-decoration:underline}
}

/* El aviso de demostración se oculta de inmediato con CSS (sin tocar el
   HTML pre-renderizado: React lo retira solo al hidratar, sin destellos). */
.catalog-demo{display:none!important}

/* Logo de marca: el monograma SVG y el texto del encabezado se reemplazan
   por la insignia oficial SOLA (sin disco ni aro), al tamaño completo del
   antiguo círculo. Hecho 100% con CSS (contenido generado ::before), así no
   se toca el DOM que React hidrata y sobrevive a cualquier re-render. */
.site-header .brand svg,
.site-header .brand > span{display:none}
.site-header .brand::before{
  content:"";display:block;width:72px;height:72px;
  background:url(./logo.png) center/contain no-repeat;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
@media (max-width:640px){
  .site-header .brand::before{width:58px;height:58px}
}
@media (prefers-reduced-motion: no-preference){
  .site-header .brand::before{transition:transform .35s ease,filter .35s ease}
  .site-header .brand:hover::before{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
}