/* ============================================================
   Animaciones y efectos — Energía Aldyl (todas las páginas)
   ============================================================ */

/* ---------- Entrada del header ---------- */
@keyframes navDrop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.site-header .brand,
header .logo{animation:navDrop .8s cubic-bezier(.22,.61,.36,1) both}
.site-header .nav-pill,
header .navpill{animation:navDrop .8s cubic-bezier(.22,.61,.36,1) .12s both}

/* ---------- Título de hero (subpáginas) ---------- */
@keyframes heroTitleIn{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
.hero-title{animation:heroTitleIn 1s cubic-bezier(.22,.61,.36,1) .2s both}

/* ---------- Reveal al hacer scroll ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
}
html.js .reveal.visible{opacity:1;transform:none}
html.js .reveal-d1{transition-delay:.12s}
html.js .reveal-d2{transition-delay:.24s}
html.js .reveal-d3{transition-delay:.36s}

/* ---------- Menú móvil con fade ---------- */
.mobilemenu,
.mobile-nav{
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.mobilemenu.open,
.mobile-nav.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .35s ease;
}

/* ---------- Hover en tarjetas y columnas ---------- */
.cols3>div,
.pillar,
.kpi,
.stat{transition:transform .35s ease}
.cols3>div:hover,
.pillar:hover,
.kpi:hover{transform:translateY(-6px)}
.cols3 .ico img,
.pillar-icon img,
.stat img{transition:transform .35s ease}
.cols3>div:hover .ico img,
.pillar:hover .pillar-icon img,
.stat:hover img{transform:scale(1.1)}
.kpi strong{transition:color .3s ease}
.kpi:hover strong{color:#0a2b4b}

/* ---------- Filas de tablas ---------- */
.production-table tbody tr,
.plan-table tbody tr{transition:background .25s ease}
.production-table tbody tr:hover{background:#dde3ee}
.plan-table tbody tr:hover{background:#dfe4ee}

/* ---------- Imágenes con zoom sutil ---------- */
.stack-imgs img,
.barriles .split>img,
.barriles .devices,
.services-image,
.image-strip img,
.eco-col img,
.location-map img,
.regional-map img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.stack-imgs img:hover,
.barriles .split>img:hover,
.services-image:hover,
.image-strip img:hover,
.eco-col img:hover,
.location-map img:hover{transform:scale(1.025)}

/* ---------- Gráfico de producción (home) ---------- */
#chart .ch-grid{opacity:0;transition:opacity .7s ease}
#chart.in .ch-grid{opacity:1}
#chart .ch-area{opacity:0;transition:opacity 1.3s ease .25s}
#chart.in .ch-area{opacity:1}
#chart .ch-marker{
  opacity:0;
  transform:scale(0);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
}
#chart.in .ch-marker{opacity:1;transform:scale(1)}
#chart .ch-label,
#chart .ch-xlabel{opacity:0;transition:opacity .55s ease}
#chart.in .ch-label,
#chart.in .ch-xlabel{opacity:1}

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html.js .reveal{opacity:1;transform:none}
  #chart .ch-grid,#chart .ch-area,#chart .ch-marker,
  #chart .ch-label,#chart .ch-xlabel{opacity:1}
}