/* motion.css — portea scroll-reveal & motion system */

/* ── Base reveal states ── */
.reveal,.reveal-left,.reveal-right,.reveal-scale{
  opacity:0;
  will-change:opacity,transform;
  transition:opacity .6s ease-out,transform .6s ease-out;
}
.reveal{transform:translateY(30px)}
.reveal-left{transform:translateX(-40px)}
.reveal-right{transform:translateX(40px)}
.reveal-scale{transform:scale(.92);transition-duration:.5s}

.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible{
  opacity:1;transform:none
}

/* ── Delay utilities ── */
.reveal-delay-1{transition-delay:100ms}
.reveal-delay-2{transition-delay:200ms}
.reveal-delay-3{transition-delay:300ms}
.reveal-delay-4{transition-delay:400ms}

/* ── Hero background gradient animated ── */
@keyframes heroGradientShift{
  from{background-position:0% 50%}
  to{background-position:100% 50%}
}
.hero-animated-bg{
  background:linear-gradient(135deg,var(--cream) 0%,var(--sand) 35%,var(--coral-pale) 65%,var(--cream) 100%);
  background-size:300% 300%;
  animation:heroGradientShift 12s ease-in-out infinite alternate;
}

/* ── CTA shimmer (auto, every 3s) ── */
@keyframes shimmerAuto{
  0%{left:-120%;opacity:0}
  8%{opacity:1}
  45%{left:160%;opacity:0}
  100%{left:160%;opacity:0}
}
.btn-shimmer{position:relative;overflow:hidden}
.btn-shimmer::after{
  content:'';position:absolute;top:0;left:-120%;
  width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:shimmerAuto 3s ease-in-out infinite;
  pointer-events:none
}

/* ── Card spring hover ── */
.card-spring{
  transition:transform 300ms cubic-bezier(.34,1.56,.64,1),
             box-shadow 300ms cubic-bezier(.34,1.56,.64,1),
             border-top-color 300ms ease;
  border-top:2px solid transparent;
}
.card-spring:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(26,21,18,.12);
  border-top-color:var(--coral);
}

/* ── Icon pulse (one-shot on reveal) ── */
@keyframes iconPulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
.icon-pulse.visible{animation:iconPulse .5s cubic-bezier(.34,1.56,.64,1) forwards}

/* ── Read progress bar (/funciones/) ── */
#read-progress{
  position:fixed;top:0;left:0;
  width:0%;height:3px;
  background:var(--coral);
  z-index:9999;
  transition:width .05s linear;
}

/* ── SVG check draw ── */
@keyframes checkDraw{
  from{stroke-dashoffset:20;opacity:0}
  to{stroke-dashoffset:0;opacity:1}
}
.check-draw{stroke-dasharray:20;stroke-dashoffset:20;opacity:0}
.visible .check-draw{animation:checkDraw .4s ease forwards}

/* ── Timeline vertical line draw ── */
@keyframes timelineDraw{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0% 0)}
}
.tl-line.visible{animation:timelineDraw 1.2s ease forwards}

/* ── Comparar: portea column fill ── */
@keyframes colFill{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(0% 0 0 0)}
}
.portea-col.table-visible{animation:colFill .55s ease-out forwards}
.cmp-row.table-visible{animation:fadeRowIn .35s ease forwards}
@keyframes fadeRowIn{from{opacity:0}to{opacity:1}}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{
    opacity:1 !important;transform:none !important;transition:none !important
  }
  .btn-shimmer::after{animation:none !important}
  .hero-animated-bg{animation:none !important}
  .icon-pulse.visible{animation:none !important}
  #read-progress{transition:none !important}
  .tl-line.visible{animation:none !important;clip-path:none !important}
  .portea-col.table-visible{animation:none !important;clip-path:none !important}
}