/* =========================================================
   Empieza Puzzles — Animations & Micro-Interactions
   ---------------------------------------------------------
   Philosophy: pieces finding their place. Deliberate, never chaotic.
   Default easing: ease-out. No bounces, no spins.
   ========================================================= */

/* ---------- Reveal-on-scroll base ---------- */
/* Elements tagged with [data-reveal] start invisible/offset, then
   get .is-visible applied by the IntersectionObserver. */

[data-reveal]{
  opacity:0;
  will-change:opacity, transform;
}

/* HEADINGS: fade in upward */
[data-reveal="heading"]{
  transform:translateY(24px);
  transition:opacity .6s ease-out, transform .6s ease-out;
}
[data-reveal="heading"].is-visible{opacity:1; transform:none}

/* BODY TEXT: same motion, 80ms delayed */
[data-reveal="body"]{
  transform:translateY(24px);
  transition:opacity .6s ease-out .08s, transform .6s ease-out .08s;
}
[data-reveal="body"].is-visible{opacity:1; transform:none}

/* OVERLINE / kicker label */
[data-reveal="overline"]{
  transform:translateY(16px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal="overline"].is-visible{opacity:1; transform:none}

/* CARDS: fade up, duration 500ms. Stagger via --i index. */
[data-reveal="card"]{
  transform:translateY(32px);
  transition:
    opacity .5s ease-out calc(var(--i, 0) * 120ms),
    transform .5s ease-out calc(var(--i, 0) * 120ms);
}
[data-reveal="card"].is-visible{opacity:1; transform:none}

/* PRICING ROWS: slide from left, 400ms, 80ms stagger */
[data-reveal="price"]{
  transform:translateX(-16px);
  transition:
    opacity .4s ease-out calc(var(--i, 0) * 80ms),
    transform .4s ease-out calc(var(--i, 0) * 80ms);
}
[data-reveal="price"].is-visible{opacity:1; transform:none}

/* BENEFIT GRID: scale 0.96 -> 1, 450ms, 100ms stagger */
[data-reveal="benefit"]{
  transform:scale(.96);
  transition:
    opacity .45s ease-out calc(var(--i, 0) * 100ms),
    transform .45s ease-out calc(var(--i, 0) * 100ms);
}
[data-reveal="benefit"].is-visible{opacity:1; transform:none}

/* SECTION PHOTOS: 1.04 -> 1, 700ms */
[data-reveal="photo"]{
  transition:opacity .7s ease-out, transform .7s ease-out;
  transform:scale(1.04);
}
[data-reveal="photo"].is-visible{opacity:1; transform:none}

/* Generic "up" reveal for leftover blocks (e.g. full-width CTAs) */
[data-reveal="up"]{
  transform:translateY(20px);
  transition:opacity .55s ease-out, transform .55s ease-out;
}
[data-reveal="up"].is-visible{opacity:1; transform:none}

/* ---------- Hero load sequence ----------
   Runs once on mount. Uses simple keyframe animation with delay. */

@keyframes heroFadeUp{
  from{opacity:0; transform:translateY(24px)}
  to  {opacity:1; transform:none}
}
@keyframes heroFade{
  from{opacity:0}
  to  {opacity:1}
}
@keyframes heroPhotoIn{
  from{opacity:0; transform:scale(1.04)}
  to  {opacity:1; transform:none}
}

.hero .overline,
.hero h1,
.hero .sub,
.hero .hero-cta,
.hero-photo{
  opacity:0;
  animation-fill-mode:forwards;
  animation-timing-function:ease-out;
}
.hero .overline{
  animation:heroFade .6s ease-out .2s forwards;
}
.hero h1{
  animation:heroFadeUp .7s ease-out .4s forwards;
}
.hero .sub{
  animation:heroFade .6s ease-out .6s forwards;
}
.hero .hero-cta{
  animation:heroFadeUp .6s ease-out .75s forwards;
}
.hero-photo{
  animation:heroPhotoIn .9s ease-out .3s forwards;
}

/* ---------- Navbar: scroll state ---------- */

.nav{
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nav.nav--scrolled{
  background:var(--cream);
  box-shadow:0 6px 18px -10px rgba(58,10,30,.18);
  border-bottom-color:transparent;
}

/* ---------- Micro-interactions (hover) ---------- */

/* Primary orange buttons: subtle lift, no color change */
.btn-orange,
.btn-teal,
.btn-mustard,
.btn-cream,
.btn-white{
  box-shadow:0 2px 0 rgba(58,10,30,.02);
  transition:transform .18s ease-out, box-shadow .18s ease-out,
             background .2s ease, color .2s ease;
}
.btn-orange:hover,
.btn-teal:hover,
.btn-mustard:hover,
.btn-cream:hover,
.btn-white:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px -10px rgba(58,10,30,.28);
}
.btn-orange:active,
.btn-teal:active,
.btn-mustard:active,
.btn-cream:active,
.btn-white:active{transform:translateY(0)}

/* Outline / ghost variants: white-fill at 10% */
.btn-outline-white,
.btn-ghost-white{
  transition:background .18s ease-out, transform .18s ease-out;
}
.btn-outline-white:hover,
.btn-ghost-white:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}

/* Segmentation cards: accent bar grows 3→6px, lift -4px */
.seg-card{
  transition:transform .2s ease-out, box-shadow .2s ease-out !important;
}
.seg-card:hover{
  transform:translateY(-4px) !important;
}
.seg-body::before{
  transition:left .2s ease-out, right .2s ease-out, height .2s ease-out !important;
}
.seg-card:hover .seg-body::before{height:6px}

/* Blog cards: lift -6px, deeper shadow, photo scale 1.03 */
.blog-card{
  transition:transform .25s ease-out, box-shadow .25s ease-out !important;
}
.blog-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 24px 44px -18px rgba(58,10,30,.25) !important;
}
.blog-thumb img{transition:transform .4s ease-out !important}
.blog-card:hover .blog-thumb img{transform:scale(1.03) !important}

/* "Leer más →" / arrow links: slide arrow 4px right */
.read-more,
a.read-more{
  display:inline-flex; align-items:center; gap:6px;
}
.read-more .arrow,
.read-more::after{
  display:inline-block;
  transition:transform .15s ease-out;
}
.read-more:hover .arrow,
.read-more:hover::after{transform:translateX(4px)}

/* Benefit cards gentle lift already defined — tighten timing */
.benefit-card{
  transition:transform .2s ease-out, box-shadow .2s ease-out !important;
}

/* Nav link underline slide-in (already in base css) — make sure origin + easing match */
.nav-links a::after{
  transition:transform .2s ease-out !important;
}

/* ---------- CTA WhatsApp pulse ---------- */

@keyframes ctaPulse{
  0%, 70%, 100% { transform:scale(1) }
  80%           { transform:scale(1.03) }
  90%           { transform:scale(1) }
}
/* Target the white WhatsApp button inside the final CTA section */
.final .btn-white{
  animation:ctaPulse 4s ease-in-out infinite;
  animation-delay:2s;
}
.final .btn-white:hover{
  animation-play-state:paused;
}

/* ---------- Reduced motion: disable decorative animation ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important }
  .hero .overline,
  .hero h1,
  .hero .sub,
  .hero .hero-cta,
  .hero-photo{
    opacity:1 !important;
    animation:none !important;
  }
  .final .btn-white{ animation:none !important }
  /* Keep navbar scroll state — requested exception */
  .nav{ transition:background .3s ease, box-shadow .3s ease !important }
}