/* =========================================================================
   efectos.css  -  Capa de efectos (preloader + movimiento en scroll)

   Este archivo y efectos.js son 100% opcionales: borrando los dos, la
   pagina vuelve exactamente a como estaba, sin tocar styles.css ni el HTML.

   Contenido:
     1. Variables
     2. Preloader (telon + anillo de progreso)
     3. Motor de movimiento (transform via variables, lo maneja efectos.js)
     4. Micro-interacciones (hover en los botones)
     5. Accesibilidad (prefers-reduced-motion)
   ========================================================================= */


/* ---------------------------------------------------------------- 1. Vars */

:root{
  --efx-paper: #e2ded7;        /* color base del telon (tono del fondo.webp) */
  --efx-heart: #333333;        /* rojo del corazon que se va llenando */
  --efx-heart-bg: rgba(43, 43, 43, .2);    /* la parte que falta cargar */
  --efx-curtain-dur: .85s;     /* duracion del fundido del telon */

  /* Silueta del corazon, como mascara. Va en el CSS y no como archivo
     para que este dibujado desde el primer instante, sin esperar red. */
  --efx-heart-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23000" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
}

/* Progreso de carga 0..1. Se declara tipada para poder animarla cuando
   no hay JS (el corazon se llena y vacia solo). El JS la escribe en :root. */
@property --efx-p{ syntax: '<number>'; inherits: true; initial-value: 0; }

/* Estas dos se declaran como propiedades tipadas para que el navegador
   pueda interpolarlas en las transiciones de hover. Si el navegador no
   soporta @property las ignora: el hover sigue andando, sin suavizado. */
@property --efx-hs{ syntax: '<number>'; inherits: false; initial-value: 1; }
@property --efx-hy{ syntax: '<length>'; inherits: false; initial-value: 0px; }


/* ----------------------------------------------------------- 2. Preloader */

/* Mientras carga, el scroll queda bloqueado. Solo se aplica si el JS
   esta vivo (.efx-js): si fallara, la pagina nunca queda trabada. */
html.efx-js:not(.efx-unlock){ overflow: hidden; }

/* Telon: tapa TODO con el mismo papel del fondo. El contenido de abajo
   nunca se atenua (bajarle la opacidad al .container romperia los
   mix-blend-mode: multiply de las imagenes), simplemente esta tapado. */
body::before{
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 99998;
  background-color: var(--efx-paper);
  background-image: url('img/fondo.webp');
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
}

/* Corazon de carga: se llena de abajo hacia arriba con lo que va cargando,
   y late mientras tanto. */
body::after{
  content: "";
  position: fixed;
  top: 50%; left: 50%;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  z-index: 99999;
  background: linear-gradient(to top,
              var(--efx-heart) calc(var(--efx-p, 0) * 100%),
              var(--efx-heart-bg) 0);
  -webkit-mask: var(--efx-heart-svg) center / contain no-repeat;
          mask: var(--efx-heart-svg) center / contain no-repeat;
  animation: efx-beat 1.5s ease-in-out infinite;
}

/* Sin JS no hay progreso real: el corazon se llena solo, en loop. */
html:not(.efx-js) body::after{
  animation: efx-beat 1.5s ease-in-out infinite,
             efx-fill 2.2s ease-in-out infinite,
             efx-fade-out .4s ease 4.2s forwards;
}
html:not(.efx-js) body::before{
  animation: efx-fade-out var(--efx-curtain-dur) cubic-bezier(.22,.61,.36,1) 4.4s forwards;
}

/* Con JS: el telon se funde cuando termino de cargar todo */
html.efx-ready body::before{
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--efx-curtain-dur) cubic-bezier(.22,.61,.36,1),
              visibility 0s linear var(--efx-curtain-dur);
}
/* Al terminar, el corazon se agranda y se desvanece */
html.efx-ready body::after{
  opacity: 0;
  visibility: hidden;
  animation: none;
  transform: scale(1.35);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .45s;
}

/* Terminado el fundido, los pseudo-elementos se descartan del todo */
html.efx-done body::before,
html.efx-done body::after{ content: none; }

/* Latido: fuerte y despues uno chiquito, como de verdad */
@keyframes efx-beat{
  0%, 100%{ transform: scale(1); }
  22%     { transform: scale(1.11); }
  38%     { transform: scale(1); }
  55%     { transform: scale(1.05); }
  72%     { transform: scale(1); }
}
@keyframes efx-fill{
  0%      { --efx-p: 0; }
  70%,
  100%    { --efx-p: 1; }
}
@keyframes efx-fade-out{ to{ opacity: 0; visibility: hidden; } }


/* --------------------------------------------------- 3. Motor de movimiento */

/* efectos.js le pone esta clase a cada imagen animada y despues solo
   escribe las variables. El !important es para ganarle a los selectores
   de styles.css que ya usan transform (translateZ(0) para el multiply);
   translate3d cumple la misma funcion de promover la capa. */
.efx-el{
  transform:
    translate3d(var(--efx-x, 0px), calc(var(--efx-y, 0px) + var(--efx-hy, 0px)), 0)
    rotate(var(--efx-r, 0deg))
    scale(calc(var(--efx-s, 1) * var(--efx-hs, 1))) !important;
  transform-origin: var(--efx-origin, 50% 50%);
  backface-visibility: hidden;
}


/* ------------------------------------------------ 4. Micro-interacciones */

/* Solo en las dos imagenes-boton acotadas (las otras son capas grandes
   con mucho transparente y el hover se sentiria fuera de lugar). */
a:hover > .efx-el[src="img/agendalo.webp"],
a:hover > .efx-el[src="img/donde-como-llegar.png"]{
  --efx-hs: 1.045;
  --efx-hy: -3px;
}
a > .efx-el[src="img/agendalo.webp"],
a > .efx-el[src="img/donde-como-llegar.png"]{
  transition: --efx-hs .35s cubic-bezier(.22,.61,.36,1),
              --efx-hy .35s cubic-bezier(.22,.61,.36,1);
}
a:active > .efx-el[src="img/agendalo.webp"],
a:active > .efx-el[src="img/donde-como-llegar.png"]{
  --efx-hs: 1.01;
  --efx-hy: 0px;
}


/* ------------------------------------------------------ 5. Accesibilidad */

@media (prefers-reduced-motion: reduce){
  /* El JS ya desactiva parallax y flotado; aca se saca el latido y se
     acortan los fundidos. El corazon igual se llena: eso no es movimiento. */
  :root{ --efx-curtain-dur: .35s; }
  body::after{ animation: none; }
  html:not(.efx-js) body::after{ animation: efx-fade-out .3s ease 3s forwards; }
  html.efx-ready body::after{ transform: none; }
  a > .efx-el[src="img/agendalo.webp"],
  a > .efx-el[src="img/donde-como-llegar.png"]{ transition: none; }
  a:hover > .efx-el[src="img/agendalo.webp"],
  a:hover > .efx-el[src="img/donde-como-llegar.png"]{ --efx-hs: 1; --efx-hy: 0px; }
}