/* Front-page-only rules (parallax window + pillar mask-wipe). */

/* parallax "window" — image pans within its frame on scroll */
.block .media .media-fill img{height:150% !important;top:-25% !important;bottom:auto !important;
  will-change:transform}
/* trajnost river shot: wide landscape — pull back the parallax zoom */
.block .media .media-fill img#trajnost-img{height:118% !important;top:-9% !important}
/* strategija desk shot — pull back the parallax zoom */
.block .media .media-fill img#strategija-img{height:100% !important;top:0 !important;transform:none !important}
@media(prefers-reduced-motion:reduce){
  .block .media .media-fill img{height:100% !important;top:0 !important;transform:none !important}
}

/* ============ pillar copy reveal — mask wipe-up + rise (Strategija · Finančna trdnost · Trajnostni razvoj · Naša ekipa) ============ */
@media(prefers-reduced-motion:no-preference){
  .block .copy.reveal.stagger-host .stagger-line{
    opacity:0;
    transform:translateY(44px);
    -webkit-mask:linear-gradient(180deg,#000 50%,transparent) 0 100% / 100% 220% no-repeat;
            mask:linear-gradient(180deg,#000 50%,transparent) 0 100% / 100% 220% no-repeat;
    transition:
      opacity .85s cubic-bezier(.2,.85,.25,1),
      transform 1.1s cubic-bezier(.2,.85,.25,1),
      -webkit-mask-position 1.1s cubic-bezier(.2,.85,.25,1),
      mask-position 1.1s cubic-bezier(.2,.85,.25,1);
    transition-delay:calc(var(--si,0) * 165ms);
    will-change:opacity,transform,mask-position;
  }
  .block .copy.reveal.stagger-host.in .stagger-line{
    opacity:1;
    transform:none;
    -webkit-mask-position:0 0;
            mask-position:0 0;
  }
  /* The mask above clips at the line's border box, which would cut off the
     CTA arrow's +5px hover nudge. 8px right padding gives the box headroom
     (negative margin hands the space back, so layout is unchanged) and the
     underline is pulled in by the same 8px to keep its old length. */
  .block .copy.reveal.stagger-host .cta{padding-right:8px;margin-right:-8px}
  .block .copy.reveal.stagger-host .cta::after{right:8px}
}

/* ============ Hero entrance. ============
   h1 rises first, the slogan a beat later, the scrollcue fades in last —
   gated on body.loaded from main.js. */
@media(prefers-reduced-motion:no-preference){
  .hero .hero-inner h1,
  .hero .hero-inner .slogan{
    opacity:0;transform:translateY(28px);
    transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1)}
  .hero .hero-inner .slogan{
    transition-delay:120ms}
  .hero .scrollcue{
    opacity:0;transition:opacity .9s ease-out .5s}
  body.loaded .hero .hero-inner h1,
  body.loaded .hero .hero-inner .slogan{
    opacity:1;transform:none}
  body.loaded .hero .scrollcue{opacity:1}
}

/* ============ Ken Burns settle on the hero slideshow (P5). ============
   The active slide drifts from a slight zoom down to rest — the Oniverse
   move that makes a photo hero feel alive with zero library code. The
   animation (re)starts each time hero-slideshow.js activates a layer, so
   every slide gets its own settle; easeOutQuad keeps the drift perceptible
   across the whole 7 s hold instead of dying in the first second. When
   .is-active leaves (the outgoing slide fades under the next one), the
   animation drops and transform reverts to none — identical to the settled
   end state, so there's no snap. Slide opacity transitions live in main.css
   (locked); this only adds transform. */
@media(prefers-reduced-motion:no-preference){
  .hero-slide.is-active{animation:pl-kenburns 7s cubic-bezier(.25,.46,.45,.94) both}
}
@keyframes pl-kenburns{from{transform:scale(1.05)}to{transform:scale(1)}}