/* ===================================================================
   EFECTOS
   Capa de movimiento sobre la Propuesta A. Va en un archivo aparte por la
   misma razón que el cotizador: front-page.php se regenera desde el HTML
   de la propuesta y esto tiene que sobrevivir a eso.

   Regla de la casa: todo lo que se mueve se apaga con
   prefers-reduced-motion, y lo que sigue al cursor solo existe donde hay
   cursor (hover:hover). En el celular la página queda igual de rápida.
   Los colores son los de la marca, ya definidos en front-page.php.
   =================================================================== */

/* ----------------------------------------------------------- portada */
/* Subrayado amarillo que se dibuja bajo "Agricultura Boliviana" una vez que el
   titular terminó de entrar. Es fondo y no pseudoelemento para que
   acompañe el salto de línea sin romper la frase.
   El alto va en em y no en px: así la línea guarda el mismo grosor relativo
   en el celular, donde el titular baja de 3,5 a 2,2 rem. */
.portada h1 span{
  background:linear-gradient(var(--amarillo),var(--amarillo)) no-repeat 0 92%/0% .15em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .05em;margin:0 -.05em}

/* Destello que cruza la foto cuando termina de abrirse la cortina amarilla:
   el mismo gesto del logo en la intro, para que la entrada se lea como una. */
.portada .foto::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.30) 50%,transparent 58%);
  background-size:250% 100%;background-repeat:no-repeat;background-position:220% 0}

/* ------------------------------------------------------------- cifras */
.cifra b{display:inline-block}

/* --------------------------------------------------- títulos de sección */
/* nada aquí fuera del bloque de movimiento */

/* -------------------------------------------------------- botones */
/* Un brillo que cruza el botón al pasar el cursor. Va recortado al botón. */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:38%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);opacity:0}

/* ----------------------------------------------------- catálogo */
.item .lgp{transition:transform .3s cubic-bezier(.2,.7,.25,1)}
.item:hover .lgp{transform:translateX(5px)}

/* ----------------------------------------------------- contacto */
.dato .ic{transition:background .25s,color .25s,transform .25s}
.dato:hover .ic{background:var(--amarillo);color:var(--tinta);transform:translateY(-2px)}

/* ------------------------------------------------- flotantes */
.wsp{position:fixed}
.wsp::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.55)}

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

  /* --- portada ------------------------------------------------------ */
  .portada h1 span{animation:efMarca .75s cubic-bezier(.2,.7,.25,1) 1.15s forwards}
  @keyframes efMarca{to{background-size:100% .15em}}
  .portada .foto::before{animation:efDestello 1.5s ease 1.25s forwards}
  @keyframes efDestello{to{background-position:-150% 0}}
  /* mientras el telón está puesto, esperan igual que el resto de la portada */
  body.presenta .portada h1 span,
  body.presenta .portada .foto::before{animation-play-state:paused}

  /* --- cifras: un latido al terminar de contar ---------------------- */
  .cifra.ap.vis b{animation:efLatido .55s cubic-bezier(.34,1.56,.64,1) 1.1s}
  @keyframes efLatido{45%{transform:scale(1.14);color:#fff}}

  /* --- títulos: la raya del rótulo crece y el h2 se destapa de abajo
         hacia arriba en vez de solo aparecer ------------------------- */
  .rot.ap::before{width:0;transition:width .65s cubic-bezier(.2,.7,.25,1) .1s}
  .rot.ap.vis::before{width:24px}
  section h2.ap{clip-path:inset(0 0 100% 0);transform:translateY(30px);
    transition:opacity .75s cubic-bezier(.2,.7,.25,1),transform .75s cubic-bezier(.2,.7,.25,1),
               clip-path .85s cubic-bezier(.2,.7,.25,1)}
  section h2.ap.vis{clip-path:inset(-8% 0 -18% 0);transform:none}

  /* --- botones ------------------------------------------------------ */
  .btn:hover::after{animation:efBrilloBtn .75s ease forwards}
  @keyframes efBrilloBtn{from{left:-45%;opacity:1}to{left:125%;opacity:1}}

  /* --- ficha del producto: la foto acerca despacio y el contenido entra
         renglón por renglón mientras el panel se desliza --------------- */
  .panel>div:first-child{overflow:hidden}
  .panel.on .pfoto{animation:efAcerca 1.4s cubic-bezier(.16,.6,.3,1) both}
  @keyframes efAcerca{from{transform:scale(1.1)}to{transform:none}}
  .panel.on .pcab,.panel.on .pcue>*{animation:efSube .6s cubic-bezier(.2,.7,.25,1) both}
  @keyframes efSube{from{opacity:0;transform:translateY(16px)}}
  .panel.on .pcab{animation-delay:.22s}
  .panel.on .pcue>*:nth-child(1){animation-delay:.30s}
  .panel.on .pcue>*:nth-child(2){animation-delay:.35s}
  .panel.on .pcue>*:nth-child(3){animation-delay:.40s}
  .panel.on .pcue>*:nth-child(4){animation-delay:.45s}
  .panel.on .pcue>*:nth-child(5){animation-delay:.50s}
  .panel.on .pcue>*:nth-child(6){animation-delay:.55s}
  .panel.on .pcue>*:nth-child(7){animation-delay:.60s}
  .panel.on .pcue>*:nth-child(8){animation-delay:.65s}
  .panel.on .pcue>*:nth-child(9){animation-delay:.70s}
  .panel.on .pcue>*:nth-child(10){animation-delay:.75s}
  .panel.on .pcue>*:nth-child(11){animation-delay:.80s}
  .panel.on .pcue>*:nth-child(12){animation-delay:.85s}
  .panel.on .pcue>*:nth-child(n+13){animation-delay:.9s}

  /* --- WhatsApp: un anillo que se expande cada tanto ---------------- */
  .wsp::before{animation:efAnillo 2.8s ease-out infinite}
  @keyframes efAnillo{to{box-shadow:0 0 0 20px rgba(37,211,102,0)}}

  /* --- cotizador: el botón salta cuando se agrega algo -------------- */
  .cotbtn.pum{animation:efPum .55s cubic-bezier(.34,1.56,.64,1)}
  @keyframes efPum{40%{transform:scale(1.22) rotate(-7deg)}}
}

/* =================================================================== */
/* Lo que sigue al cursor. Con pantalla táctil no existe. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){

  /* Foco de luz verde que acompaña al cursor sobre las tarjetas de línea y
     las filas del catálogo. --mx/--my los escribe efectos.js en píxeles. */
  .lin::after,.item::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .35s;
    background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(31,168,74,.15),transparent 62%)}
  .item{position:relative;overflow:hidden}
  .lin:hover::after,.item:hover::after{opacity:1}

  /* Las tarjetas de línea y las páginas del catálogo se inclinan hacia el
     cursor, como una hoja que se levanta. */
  .lin:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
  .hoja:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}

  /* En las bandas verdes oscuras, una luz ámbar tenue sigue al cursor. */
  .contacto,.cifras{position:relative}
  .contacto>.wrap,.cifras>.wrap{position:relative;z-index:1}
  .contacto::before,.cifras::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    opacity:0;transition:opacity .5s;
    background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(245,179,28,.14),transparent 62%)}
  .contacto:hover::before,.cifras:hover::before{opacity:1}
}