/* ==========================================================================
   Animations — Fuel Oil Terminal Curaçao B.V.
   ========================================================================== */

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp{ from{ opacity:0; transform:translateY(36px);} to{ opacity:1; transform:translateY(0);} }
@keyframes slideLeft{ from{ opacity:0; transform:translateX(40px);} to{ opacity:1; transform:translateX(0);} }
@keyframes slideRight{ from{ opacity:0; transform:translateX(-40px);} to{ opacity:1; transform:translateX(0);} }
@keyframes zoomIn{ from{ opacity:0; transform:scale(.92);} to{ opacity:1; transform:scale(1);} }

/* Hero entrance sequencing */
.hero .eyebrow{ animation:slideUp .8s var(--ease) .15s both; }
.hero h1{ animation:slideUp .9s var(--ease) .32s both; }
.hero p.lead{ animation:slideUp .9s var(--ease) .48s both; }
.hero-ctas{ animation:slideUp .9s var(--ease) .64s both; }
.scroll-indicator{ animation:fadeIn 1s var(--ease) 1.2s both; }

.page-header h1{ animation:slideUp .8s var(--ease) .2s both; }
.page-header .breadcrumb{ animation:fadeIn .8s var(--ease) .1s both; }

/* Banner-card entrance sequencing (home hero + page headers) */
.banner-card{ animation:slideUp .8s var(--ease) .1s both; }
.banner-card .eyebrow{ animation:fadeIn .7s var(--ease) .25s both; }
.banner-card h1{ animation:fadeIn .7s var(--ease) .35s both; }
.banner-card p.lead{ animation:fadeIn .7s var(--ease) .45s both; }
.banner-card .hero-ctas{ animation:fadeIn .7s var(--ease) .55s both; }
.banner-card .banner-divider{ animation:fadeIn .7s var(--ease) .6s both; }
.banner-card .banner-pills{ animation:fadeIn .7s var(--ease) .68s both; }

/* Scroll reveal system: JS toggles .in-view on .reveal elements */
.reveal{
  opacity:0;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.fade{ transform:none; }
.reveal.up{ transform:translateY(44px); }
.reveal.left{ transform:translateX(46px); }
.reveal.right{ transform:translateX(-46px); }
.reveal.zoom{ transform:scale(.94); }

.reveal.in-view{
  opacity:1;
  transform:none;
}

/* Stagger helper: children get incremental delay via inline style set by JS,
   fallback nth-child delays for elements without JS-set delay */
.reveal.in-view{ transition-delay:var(--reveal-delay, 0s); }

/* Card hover motion already defined in style.css; add icon float */
.card-icon{ will-change:transform; }
.card:hover .card-icon{ animation:iconFloat .6s var(--ease); }
@keyframes iconFloat{
  0%{ transform:translateY(0); }
  40%{ transform:translateY(-6px); }
  100%{ transform:translateY(0); }
}

/* Counter number pop */
.stat-number.counting{ animation:zoomIn .5s var(--ease); }

/* Marquee-less pulse for CTA accent */
.cta-banner{ position:relative; }
.cta-banner .btn-primary{ animation:none; }
.cta-banner .btn-primary:hover{ animation:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
}