/* ==========================================================================
   Nord Terminals Kotka Oy — Animations
   ========================================================================== */

@keyframes scrollLine{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(88px); }
}
@keyframes pulseDot{
  0%,100%{ box-shadow:0 0 0 0 rgba(76,175,114,.5); }
  50%{ box-shadow:0 0 0 6px rgba(76,175,114,0); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

@keyframes fadeUpIn{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes slideLeftIn{
  from{ opacity:0; transform:translateX(-40px); }
  to{ opacity:1; transform:translateX(0); }
}
@keyframes slideRightIn{
  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); }
}
@keyframes loadBar{
  from{ width:0%; }
  to{ width:100%; }
}

/* ---- hero load sequence ---- */
.hero__tag{ opacity:0; animation:fadeUpIn .8s var(--ease) .15s forwards; }
.hero h1{ opacity:0; animation:fadeUpIn 1s var(--ease) .32s forwards; }
.hero__subtitle{ opacity:0; animation:fadeUpIn 1s var(--ease) .5s forwards; }
.hero__actions{ opacity:0; animation:fadeUpIn 1s var(--ease) .66s forwards; }
.hero__stats{ opacity:0; animation:fadeUpIn 1s var(--ease) .82s forwards; }
.scroll-indicator{ opacity:0; animation:fadeIn 1s var(--ease) 1.2s forwards; }
.page-hero h1{ opacity:0; animation:fadeUpIn .9s var(--ease) .15s forwards; }
.page-hero .breadcrumb{ opacity:0; animation:fadeUpIn .8s var(--ease) .05s forwards; }

/* ---- scroll reveal (JS toggles .in-view via IntersectionObserver) ---- */
.reveal{ opacity:0; transform:translateY(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

.reveal-left{ opacity:0; transform:translateX(-36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.in-view{ opacity:1; transform:translateX(0); }

.reveal-right{ opacity:0; transform:translateX(36px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right.in-view{ opacity:1; transform:translateX(0); }

.reveal-zoom{ opacity:0; transform:scale(.94); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-zoom.in-view{ opacity:1; transform:scale(1); }

.reveal-stagger > *{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.14s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.23s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.32s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.41s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.5s; }

.loading-bar__fill.run{ animation:loadBar 1.4s var(--ease) forwards; }

/* page transition fade for main content on load */
.page-fade{ animation:fadeIn .6s var(--ease); }