/* ELMAG SAFARIS — scroll animations (progressive enhancement).
   Everything below only applies when animations.js adds .anim to <html>,
   so with no JavaScript, or with reduced-motion on, the site is fully visible. */

/* no permanent will-change: dozens of promoted layers slow down mid-range phones */

/* ---- text: fade-up ---- */
.anim [data-a="up"]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform .9s cubic-bezier(.2,.65,.2,1);
  transition-delay:var(--d,0ms)}
.anim [data-a="up"].in{opacity:1;transform:none}

/* ---- headings: word-by-word rise ---- */
.anim .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.anim .w>span{display:inline-block;transform:translate3d(0,110%,0);
  transition:transform 1s cubic-bezier(.2,.7,.1,1);
  transition-delay:calc(var(--i,0)*70ms + var(--d,0ms))}
.anim [data-a="words"].in .w>span{transform:none}

/* ---- images: curtain reveal + settle ---- */
.anim .frame[data-a="img"]{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s cubic-bezier(.77,0,.18,1);transition-delay:var(--d,0ms)}
.anim .frame[data-a="img"] img{scale:1.22;
  transition:scale 1.8s cubic-bezier(.2,.65,.2,1);transition-delay:var(--d,0ms)}
.anim .frame[data-a="img"].in{clip-path:inset(0 0 0 0)}
.anim .frame[data-a="img"].in img{scale:1}

/* hero photo: never hidden (keeps LCP fast) — settles in with a slow zoom */
.anim .hero__photo .frame{clip-path:none}
.anim .hero__photo img{scale:1.14;animation:heroSettle 2.2s cubic-bezier(.2,.65,.2,1) .15s forwards}
@keyframes heroSettle{to{scale:1}}

/* parallax (JS sets --py on the frame) */
.anim .frame[data-px] img{transform:translate3d(0,var(--py,0px),0);transition:none}
.anim .frame[data-px]{--zoom:1.1}
.anim .frame[data-px].in img{scale:var(--zoom)}
.anim .hero__photo .frame[data-px] img{animation:none;scale:var(--zoom)}

/* hover: gentle image zoom on cards, gallery and rows */
.card__link .frame img,.gallery-grid .frame img,.row__media .frame img{transition:scale 1s cubic-bezier(.2,.65,.2,1)}
.card__link:hover .frame.in img,.gallery-grid a:hover .frame.in img,.row:hover .frame.in img{scale:1.06}

/* buttons: soft lift */
.btn,.btn-cta{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.btn:hover,.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,27,24,.12)}

/* scroll progress bar */
.scroll-bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:var(--ink,#1c1b18);z-index:200;pointer-events:none}

/* ---- after a reveal finishes: snappy hover, no leftover delay ---- */
.anim [data-a].done{transition-delay:0s;transition-duration:.25s}
.anim [data-a="words"].done .w>span{transition-delay:0s}

/* ---- mobile: lighter, shorter animations (kinder to the GPU and battery) ---- */
@media (max-width:760px){
  .anim [data-a="up"]{transform:translate3d(0,18px,0);transition-duration:.7s}
  .anim .w>span{transition-duration:.8s;transition-delay:calc(var(--i,0)*45ms + var(--d,0ms))}
  .anim .frame[data-a="img"]{transition-duration:.9s}
  .anim .frame[data-a="img"] img{scale:1.1;transition-duration:1.2s}
  .anim .hero__photo img{scale:1.08;animation-duration:1.6s}
}

/* ---- mobile menu: links glide in one after another ---- */
@media (max-width:1279px){
  .nav>ul>li{opacity:0;transform:translate3d(16px,0,0);transition:opacity .35s ease,transform .35s ease}
  body.nav-open .nav>ul>li{opacity:1;transform:none}
  body.nav-open .nav>ul>li:nth-child(1){transition-delay:.08s}
  body.nav-open .nav>ul>li:nth-child(2){transition-delay:.12s}
  body.nav-open .nav>ul>li:nth-child(3){transition-delay:.16s}
  body.nav-open .nav>ul>li:nth-child(4){transition-delay:.20s}
  body.nav-open .nav>ul>li:nth-child(5){transition-delay:.24s}
  body.nav-open .nav>ul>li:nth-child(6){transition-delay:.28s}
  body.nav-open .nav>ul>li:nth-child(7){transition-delay:.32s}
}

/* ---- reduced motion (e.g. Android "Remove animations"): soft fades only, nothing moves ---- */
@media (prefers-reduced-motion:reduce){
  .anim [data-a="up"]{transform:none;transition:opacity .6s ease;transition-delay:var(--d,0ms)}
  .anim .frame[data-a="img"]{clip-path:none;opacity:0;transition:opacity .7s ease;transition-delay:var(--d,0ms)}
  .anim .frame[data-a="img"].in{opacity:1}
  .anim .frame[data-a="img"] img,.anim .hero__photo img{scale:1 !important;animation:none !important;transition:none}
  .nav>ul>li{opacity:1 !important;transform:none !important;transition:none !important}
  .btn:hover,.btn-cta:hover{transform:none}
  .scroll-bar{display:none}
}