/* ===========================================================
   Animations & scroll-driven reveals
   =========================================================== */

/* Anchor offset so the sticky nav doesn't cover the section title
   when jumping to #pricing, #features, etc. Used both by browser-
   native :target jumps and by the smooth scroll handler in main.js. */
.section[id],
[id="hero"],
[id="pricing"],
[id="features"],
[id="funciones"] {
  scroll-margin-top: 88px;
}
@media (max-width: 720px) {
  .section[id],
  [id="hero"],
  [id="pricing"],
  [id="features"],
  [id="funciones"] {
    scroll-margin-top: 76px;
  }
}

/* Reveal on scroll: starts hidden, JS adds .is-visible */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* Stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* Hero entrance: applied immediately on load */
.hero__badge,
.hero__title,
.hero__desc,
.hero__actions,
.hero__meta {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-in 900ms var(--ease-out) forwards;
}
.hero__title  { animation-delay: 100ms; }
.hero__desc   { animation-delay: 220ms; }
.hero__actions { animation-delay: 340ms; }
.hero__meta   { animation-delay: 460ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-stack__phone {
  opacity: 0;
  animation: phone-in 1000ms var(--ease-out) 200ms forwards;
}
.hero-float {
  opacity: 0;
  animation: float-in 1000ms var(--ease-out) forwards, hero-float 6s ease-in-out infinite 1500ms;
}
.hero-float--top    { animation-delay: 700ms, 1500ms; }
.hero-float--bottom { animation-delay: 900ms, 1500ms; }
@keyframes phone-in {
  from { opacity: 0; transform: rotate(-2deg) translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: rotate(-2deg) translateY(0)    scale(1);    }
}
@keyframes float-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Number counter animation hook */
[data-count] { display: inline-block; }

/* Page transition fade */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main { animation: page-in 400ms var(--ease-out); }

/* Underline reveal on hover */
.underline-reveal {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration) var(--ease-out);
}
.underline-reveal:hover { background-size: 100% 1.5px; }

/* Subtle hover lift utility */
.hover-lift {
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Pulse glow for important CTAs */
.pulse-glow {
  position: relative;
}
.pulse-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--grad-primary);
  filter: blur(16px);
  opacity: 0.4;
  z-index: -1;
  animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.3; transform: scale(0.98); }
  50%      { opacity: 0.55; transform: scale(1.04); }
}

/* Grain overlay (optional) */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.018;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}