/* Animaciones de Campo Somático.
   Todo lo que esconde contenido va dentro de html.js (si no carga JS, se ve todo)
   y de prefers-reduced-motion: no-preference (quien pidió menos movimiento, no ve animaciones). */

/* Barra de progreso de lectura y menú */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20; background: var(--terra);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.nav { transition: box-shadow .3s, background .3s; }
.nav.scrolled { box-shadow: 0 8px 30px -18px rgba(46,39,35,.35); background: rgba(246,239,228,.95); }
.links a:not(.btn) { position: relative; transition: color .25s; }
.links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--terra); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s ease; }
.links a.active { color: var(--terra) !important; }
.links a.active::after, .links a:not(.btn):hover::after { transform: scaleX(1); }

:root { --soft: cubic-bezier(.25,.8,.25,1); }
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Portada: el texto está desde el primer instante; solo las ondas aparecen ---------- */
  html.js .hero .ripples { animation: fadeIn .8s ease both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- Ondas que respiran ---------- */
  .breath { transform-box: fill-box; transform-origin: center; animation: breathe 7s ease-in-out infinite; }
  .rings circle { transform-box: fill-box; transform-origin: center; animation: wave 7s ease-in-out infinite; }
  .rings circle:nth-child(2) { animation-delay: .5s; }
  .rings circle:nth-child(3) { animation-delay: 1s; }
  .rings circle:nth-child(4) { animation-delay: 1.5s; }
  .rings circle:nth-child(5) { animation-delay: 2s; }
  .rings circle:nth-child(6) { animation-delay: 2.5s; }
  .orbit { transform-box: view-box; transform-origin: 50% 50%; animation: spin 110s linear infinite; }
  .orbit-rev { animation-duration: 150s; animation-direction: reverse; }
  .hero .ripples { translate: 0 var(--py, 0px); will-change: translate; }

  @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
  @keyframes wave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); stroke-opacity: .55; } }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ---------- Detalles que se animan (el contenido principal NO se anima) ----------
     anim.js marca con .rv solo los detalles: números, píldoras, frases en cursiva, íconos, la firma. */
  html.js .rv { opacity: 0; translate: 0 8px;
    transition: opacity .6s ease var(--d, 0s), translate .7s var(--soft) var(--d, 0s), scale .7s cubic-bezier(.3,1.5,.5,1) var(--d, 0s); }
  html.js .rv-left { translate: -16px 0; }
  html.js .rv-pop { translate: 0 0; scale: .4; }
  html.js .rv.in { opacity: 1; translate: 0 0; scale: 1; }
  html.js .rv-draw { opacity: 1; translate: none; transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--soft) var(--d, 0s); }
  html.js .rv-draw.in { transform: scaleX(1); }
  html.js .rv-sign { opacity: 1; translate: none; }
  .about .sign span { display: inline-block; }
  html.js .rv-sign span { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--soft) var(--d, 0s); }
  html.js .rv-sign.in span { clip-path: inset(0 0 0 0); }

  /* Frase final: la línea se dibuja y los puntos flotan sin parar */
  .pull svg { overflow: visible; }
  .pull svg circle { transform-box: fill-box; transform-origin: center; animation: drift 4.2s ease-in-out infinite; }
  .pull svg circle:nth-child(2) { animation-duration: 4.8s; animation-delay: -1.6s; }
  .pull svg circle:nth-child(3) { animation-duration: 3.8s; animation-delay: -2.9s; }
  @keyframes drift { 0%, 100% { transform: translateY(0) scale(1); } 25% { transform: translateY(-4px) scale(1.06); }
    50% { transform: translateY(1px) scale(.96); } 75% { transform: translateY(3px) scale(1.03); } }

  /* Botón de pausa de la supervisión con grabación */
  .pause i { animation: pausePulse 2.8s ease-in-out infinite; transform-origin: center bottom; }
  .pause i:nth-child(2) { animation-delay: 1.4s; }
  @keyframes pausePulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }

  /* ---------- Al pasar el mouse ---------- */
  .area, .card, .pillar, .week, .box { transition: transform .9s var(--soft), box-shadow .9s var(--soft); }
  .area:hover, .card:hover, .week:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(46,39,35,.38); }
  .pillar:hover { transform: translateX(-4px); }
  .pillar .dot { transition: transform .9s var(--soft); }
  .pillar:hover .dot { transform: scale(1.06); }
  .ev { transition: transform .7s var(--soft); }
  .ev:hover { transform: scale(1.02); }
  .list li { transition: padding-left .8s var(--soft); }
  .list li:hover { padding-left: 8px; }
  .btn { position: relative; overflow: hidden; }
  .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform 1.2s var(--soft); }
  .btn:hover::after { transform: translateX(120%); }
  .btn-ghost::after { background: linear-gradient(110deg, transparent 30%, rgba(182,92,59,.12) 50%, transparent 70%); }

  /* Formulario enviado */
  .form.sent .status { animation: pop .7s cubic-bezier(.3,1.5,.5,1) both; }
  .form.sent .status::before { content: "✓"; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    background: var(--sage-deep); color: var(--paper); font-size: 26px; margin-bottom: 14px; animation: pop .6s cubic-bezier(.3,1.6,.5,1) .25s both; }
  @keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: no-preference) {
  /* De a poco: el 05 late con un halo y las otras áreas orbitan despacio a su alrededor */
  .growth .halo-ring { transform-box: fill-box; transform-origin: center; animation: haloPulse 3.2s ease-out infinite; }
  .growth .halo-ring.h2r { animation-delay: 1.6s; }
  @keyframes haloPulse { 0% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1.22); opacity: 0; } }
  .growth .orbit-ring { transform-box: view-box; transform-origin: 50% 50%; animation: spin 90s linear infinite; }
  .growth .sat { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite reverse; }
  .growth .sat circle { transform-box: fill-box; transform-origin: center; }
  .proposal .next span { display: inline-block; animation: bob 2.2s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }


  /* Grabaciones: el play late y el audio suena */
  .tiles .tile:nth-child(3) svg { animation: playPulse 2.6s ease-in-out infinite; }
  @keyframes playPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
  .eq i { animation: eq 1.1s ease-in-out infinite alternate; transform-origin: bottom; }
  .eq i:nth-child(2) { animation-delay: .2s; } .eq i:nth-child(3) { animation-delay: .45s; }
  .eq i:nth-child(4) { animation-delay: .1s; } .eq i:nth-child(5) { animation-delay: .3s; }
  @keyframes eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
  .tile { transition: transform .9s var(--soft); }
  .tile:hover { transform: translateY(-4px); }
}
}