/* ======================================================
   JJ Paper — Motion Pack
   Fondo animado, superposición (parallax/depth) y
   micro-interacciones. GPU-friendly, respeta reduced-motion.
   Depende de variables.css (vars de marca).
   ====================================================== */

/* ---------- 1. Mesh gradient animado (fondo hero) ---------- */
.mesh-layer {
  position:absolute; inset:0; overflow:hidden; z-index:0;
  pointer-events:none;
}
.mesh-blob {
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.38;
  will-change:transform;
  mix-blend-mode:screen;
}
.mesh-blob.b1 { width:520px; height:520px; top:-140px; left:-80px;
  background:radial-gradient(circle,#7FAE45,transparent 70%);
  animation:meshFloat1 18s ease-in-out infinite }
.mesh-blob.b2 { width:460px; height:460px; bottom:-160px; right:-60px;
  background:radial-gradient(circle,#3E8E6E,transparent 70%);
  animation:meshFloat2 22s ease-in-out infinite }
.mesh-blob.b3 { width:340px; height:340px; top:34%; left:44%;
  background:radial-gradient(circle,#1B6F56,transparent 70%);
  animation:meshFloat3 26s ease-in-out infinite }
@keyframes meshFloat1 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(80px,60px) scale(1.15)}
  66%{transform:translate(30px,-40px) scale(.95)} }
@keyframes meshFloat2 {
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-90px,-50px) scale(1.2)} }
@keyframes meshFloat3 {
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-60px,40px) scale(1.1)}
  75%{transform:translate(50px,30px) scale(.9)} }

/* ---------- 2. Superposición: partículas de papel ---------- */
.particles {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  width:100%; height:100%;
}

/* ---------- 3. Parallax (profundidad por capas) ---------- */
[data-parallax] { will-change:transform; }

/* ---------- 4. Reveal escalonado (dirección + stagger) ---------- */
.rv-up    { opacity:0; transform:translateY(34px) }
.rv-left  { opacity:0; transform:translateX(-40px) }
.rv-right { opacity:0; transform:translateX(40px) }
.rv-zoom  { opacity:0; transform:scale(.9) }
.rv-up,.rv-left,.rv-right,.rv-zoom {
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--rv-delay,0ms);
}
.rv-up.vi,.rv-left.vi,.rv-right.vi,.rv-zoom.vi {
  opacity:1; transform:none;
}

/* ---------- 5. Count-up (evita salto de layout) ---------- */
[data-count]{ font-variant-numeric:tabular-nums }

/* ---------- 6. Tilt 3D en tarjetas ---------- */
.tilt {
  transform-style:preserve-3d; will-change:transform;
  transition:transform .18s ease;
}
.tilt .tilt-inner { transform:translateZ(30px) }

/* ---------- 7. Botón magnético + ripple ---------- */
.magnetic { position:relative; will-change:transform; transition:transform .25s cubic-bezier(.2,.7,.2,1) }
.ripple-ink {
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.45); pointer-events:none;
  animation:rippleGo .6s ease-out forwards;
}
@keyframes rippleGo { to{ transform:scale(2.6); opacity:0 } }

/* ---------- 8. Wave animada del hero ---------- */
.h-wave svg path { animation:waveMorph 8s ease-in-out infinite alternate }
@keyframes waveMorph {
  from{ d:path("M0,40 C360,80 1080,0 1440,40 L1440,80 L0,80 Z") }
  to  { d:path("M0,46 C420,6 1020,86 1440,34 L1440,80 L0,80 Z") }
}

/* ---------- 9. Cursor glow (sutil, solo desktop fino) ---------- */
.cursor-glow {
  position:fixed; top:0; left:0; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle,rgba(103,164,39,.14),transparent 65%);
  pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
  opacity:0; transition:opacity .3s ease; mix-blend-mode:multiply;
  will-change:left,top;
}

/* ---------- 9b. Título palabra por palabra ---------- */
.wr-w {
  display:inline-block; opacity:0; transform:translateY(16px) rotate(2deg);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.wr-in .wr-w { opacity:1; transform:none }
@media (prefers-reduced-motion:reduce) {
  .wr-w { opacity:1 !important; transform:none !important; transition:none }
}

/* ---------- 10. Shine sweep en botón primario ---------- */
.btn-p, .btn-wa { position:relative; overflow:hidden; }
.btn-p::after, .btn-wa::after {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
}
.btn-p:hover::after, .btn-wa:hover::after { animation:shineSweep .7s ease }
@keyframes shineSweep { to{ left:160% } }

/* ---------- Accesibilidad: apaga movimiento pesado ---------- */
@media (prefers-reduced-motion:reduce) {
  .mesh-blob, .h-wave svg path { animation:none !important }
  .particles, .cursor-glow { display:none !important }
  [data-parallax] { transform:none !important }
  .rv-up,.rv-left,.rv-right,.rv-zoom { opacity:1 !important; transform:none !important; transition:none }
  .btn-p::after,.btn-wa::after { display:none }
  .tilt { transform:none !important }
}
/* Táctil: sin tilt/magnetic/cursor (no hay puntero fino) */
@media (hover:none) {
  .cursor-glow { display:none }
}

/* Mobile: los blobs con blur(70px) son muy caros en GPU móvil.
   Se ocultan y el hero recibe un degradado estático equivalente. */
@media (max-width:768px) {
  .mesh-blob { display:none }
  .mesh-layer {
    background:
      radial-gradient(circle at 12% 8%,  rgba(127,174,69,.26), transparent 55%),
      radial-gradient(circle at 88% 92%, rgba(62,142,110,.24), transparent 55%),
      radial-gradient(circle at 55% 42%, rgba(27,111,86,.26),  transparent 60%);
  }
}