/* ==========================================================================
   Himalayan Plein-Air — animations.css
   Scroll reveals, title letter animation, reduced-motion rules.
   Classes are added by assets/js/site.js; without JS everything is visible.
   ========================================================================== */

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-stagger>*{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal-stagger.in>*{opacity:1;transform:none}
.js .reveal-stagger.in>*:nth-child(2){transition-delay:.08s}
.js .reveal-stagger.in>*:nth-child(3){transition-delay:.16s}
.js .reveal-stagger.in>*:nth-child(4){transition-delay:.24s}
.js .reveal-stagger.in>*:nth-child(5){transition-delay:.32s}
.js .reveal-stagger.in>*:nth-child(6){transition-delay:.40s}

/* Brush-stroke wipe for images: a painted edge sweeps across */
.js .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.js .wipe.in{clip-path:inset(0 0 0 0)}

/* --- Animated title: letters rise in snowcap yellow, paint drips over ---- */
.split-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.split-line .word{display:inline-block;white-space:nowrap}
.split-line .ch{display:inline-block}
.js .anim-title .ch{
  transform:translateY(110%);
  background-image:var(--drip-img);
  background-size:100% 320%;
  background-position:50% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:
    ch-rise .75s var(--ease) forwards,
    ch-drip 1s cubic-bezier(.5,0,.3,1) forwards;
  animation-delay:calc(var(--i) * 45ms + .15s), calc(var(--i) * 45ms + .75s);
}
/* paper top drips over snowcap bottom */
.anim-title{--drip-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 320' preserveAspectRatio='none'%3E%3Crect width='100' height='320' fill='%23FFC620'/%3E%3Cpath d='M0 0H100V150C92 150 90 168 84 168S76 150 70 150 64 176 56 176 48 150 42 150 36 162 30 162 22 150 16 150 10 172 4 172 0 150 0 150Z' fill='%23F9F8F5'/%3E%3C/svg%3E")}
/* on a light background (Home sky): deep green drips over the yellow */
.anim-title.on-light{--drip-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 320' preserveAspectRatio='none'%3E%3Crect width='100' height='320' fill='%23FFC620'/%3E%3Cpath d='M0 0H100V150C92 150 90 168 84 168S76 150 70 150 64 176 56 176 48 150 42 150 36 162 30 162 22 150 16 150 10 172 4 172 0 150 0 150Z' fill='%231F2A24'/%3E%3C/svg%3E")}
/* the hyphen stays snowcap yellow as an accent */
.anim-title .ch-hy{--drip-img:linear-gradient(#E8B21C,#E8B21C)}
/* snowcap lines stay snowcap: rise only, gentle glow */
.anim-title .snow-line{--drip-img:linear-gradient(var(--snow),var(--snow))}
@keyframes ch-rise{to{transform:none}}
@keyframes ch-drip{to{background-position:50% 0}}

/* One warm light sweep across the finished title */
.glint{position:relative}
.js .glint::after{
  content:"";position:absolute;inset:-10% -5%;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,214,90,.55) 50%,transparent 60%);
  mix-blend-mode:soft-light;transform:translateX(-120%);
  animation:glint 1.2s ease-in-out 2.2s forwards;
}
@keyframes glint{to{transform:translateX(120%)}}

/* Hero content fades up after title */
.js .after-title{opacity:0;transform:translateY(16px);animation:fade-up .8s var(--ease) forwards;animation-delay:var(--d,1.6s)}
@keyframes fade-up{to{opacity:1;transform:none}}


/* --- Respect reduced motion --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .js .reveal,.js .reveal-stagger>*,.js .wipe{opacity:1;transform:none;clip-path:none}
  .js .anim-title .ch{transform:none;background:none;color:var(--paper)}
  .js .anim-title .snow-line .ch{color:var(--snow)}
  .js .anim-title.on-light .ch{color:var(--alpine)}
  .js .anim-title .ch-hy{color:var(--snow-deep)!important}
  .js .after-title{opacity:1;transform:none}
  .js .glint::after{display:none}
}