/* ============================================================
   gobierno-corporativo-anim.css — Animation layer
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes gv-rise {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:none; }
}
@keyframes gv-from-left {
  from { opacity:0; transform:translateX(-44px) translateY(12px); }
  to   { opacity:1; transform:none; }
}
@keyframes gv-from-right {
  from { opacity:0; transform:translateX(44px) translateY(12px); }
  to   { opacity:1; transform:none; }
}
@keyframes gv-pop {
  from { opacity:0; transform:scale(.86) translateY(20px); }
  to   { opacity:1; transform:none; }
}
@keyframes gv-clip-up {
  from { clip-path:inset(0 0 110% 0); opacity:0; }
  to   { clip-path:inset(0 0 0 0);    opacity:1; }
}
@keyframes gv-letter-pop {
  from { opacity:0; transform:scale(.5) translateY(16px) rotate(-6deg); }
  to   { opacity:1; transform:none; }
}

/* ── Neutralise the shared .reveal transition system ──────── */
/* Container .reveal elements become visible instantly;
   their children are gated and animated individually below.   */
.js-gv .reveal {
  transition: none;
}
.js-gv .section-head.reveal,
.js-gv .section-head.reveal.in,
.js-gv .gov-bodies.reveal,
.js-gv .gov-bodies.reveal.in,
.js-gv .gov-pillars.reveal,
.js-gv .gov-pillars.reveal.in,
.js-gv .esg.reveal,
.js-gv .esg.reveal.in {
  opacity: 1;
  transform: none;
  transition: none;
}
/* .gov-intro IS the directly animated element — keep it hidden */
.js-gv .gov-intro.reveal,
.js-gv .gov-intro.reveal.in {
  opacity: 0;
  transform: none;
  transition: none;
}

/* ── Progressive enhancement gate ──────────────────────────── */
/* Hero */
.js-gv .ab-hero .marker        { opacity: 0; }
.js-gv .ab-hero h1 .gw         { display:inline-block; opacity: 0; }
.js-gv .ab-hero-sub            { opacity: 0; }
/* Section head children */
.js-gv .section-head .marker   { opacity: 0; }
.js-gv .section-head h2        { opacity: 0; }
.js-gv .section-head .right    { opacity: 0; }
/* Gov intro */
.js-gv .gov-intro              { opacity: 0; }
/* Gov bodies */
.js-gv .gov-body               { opacity: 0; }
/* Gov pillars */
.js-gv .gov-pillar             { opacity: 0; }
/* ESG head children */
.js-gv .esg-head .marker       { opacity: 0; }
.js-gv .esg-head h3            { opacity: 0; }
.js-gv .esg-head .esg-lead     { opacity: 0; }
/* ESG cards */
.js-gv .esg-card               { opacity: 0; }

/* ── Hero animations ────────────────────────────────────────── */
.js-gv .ab-hero .marker.gv-in {
  animation: gv-from-left .55s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .ab-hero h1.gv-in .gw {
  animation: gv-clip-up .65s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .ab-hero-sub.gv-in {
  animation: gv-rise .7s cubic-bezier(.16,1,.3,1) both;
}

/* ── Section head children ──────────────────────────────────── */
.js-gv .section-head .marker.gv-in {
  animation: gv-from-left .5s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .section-head h2.gv-in {
  animation: gv-rise .65s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .section-head .right.gv-in {
  animation: gv-from-right .6s cubic-bezier(.16,1,.3,1) both;
}

/* ── Gov intro ──────────────────────────────────────────────── */
.js-gv .gov-intro.gv-in {
  animation: gv-rise .65s cubic-bezier(.16,1,.3,1) both;
}

/* ── Gov bodies — directional ───────────────────────────────── */
.js-gv .gov-body.gv-left.gv-in {
  animation: gv-from-left  .72s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .gov-body.gv-right.gv-in {
  animation: gv-from-right .72s cubic-bezier(.16,1,.3,1) both;
}

/* ── Gov pillars ────────────────────────────────────────────── */
.js-gv .gov-pillar.gv-in {
  animation: gv-pop .52s cubic-bezier(.16,1,.3,1) both;
}

/* ── ESG head children ──────────────────────────────────────── */
.js-gv .esg-head .marker.gv-in {
  animation: gv-from-left .5s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .esg-head h3.gv-in {
  animation: gv-rise .65s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .esg-head .esg-lead.gv-in {
  animation: gv-from-right .6s cubic-bezier(.16,1,.3,1) both;
}

/* ── ESG cards — pop with letter accent ─────────────────────── */
.js-gv .esg-card.gv-in {
  animation: gv-pop .5s cubic-bezier(.16,1,.3,1) both;
}
.js-gv .esg-card.gv-in .esg-letter {
  animation: gv-letter-pop .55s cubic-bezier(.16,1,.3,1) .18s both;
}

/* ── Instant-show for scroll-up re-entries (no animation) ───── */
.js-gv .gv-snap,
.js-gv .gv-snap * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  .js-gv .ab-hero .marker,
  .js-gv .ab-hero h1 .gw,
  .js-gv .ab-hero-sub,
  .js-gv .section-head .marker,
  .js-gv .section-head h2,
  .js-gv .section-head .right,
  .js-gv .gov-intro,
  .js-gv .gov-body,
  .js-gv .gov-pillar,
  .js-gv .esg-head .marker,
  .js-gv .esg-head h3,
  .js-gv .esg-head .esg-lead,
  .js-gv .esg-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}