/* ============================================================
   otherwise — animations.css
   ------------------------------------------------------------
   All keyframes + reveal-on-scroll utility classes.
   ============================================================ */


/* ---------- Keyframes ---------- */
@keyframes fadeIn       { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeUp       { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@keyframes lineUp       { from { transform: translateY(110%) } to { transform: translateY(0) } }
@keyframes pulse        { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.6) } }
@keyframes cueDrop      { 0% { transform: translateY(-14px); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(14px); opacity: 0 } }
@keyframes marquee      { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes spin         { to { transform: rotate(360deg) } }
@keyframes shimmer      { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }


/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }
.reveal.delay-5 { transition-delay: .40s; }
.reveal.delay-6 { transition-delay: .48s; }


/* ---------- Image reveal (clip-path) ---------- */
.reveal-img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.7,0,.3,1);
  will-change: clip-path;
}
.reveal-img.in { clip-path: inset(0 0 0 0); }


/* ---------- Image scale-in ---------- */
.reveal-zoom { overflow: hidden; }
.reveal-zoom img {
  transform: scale(1.25);
  transition: transform 1.6s var(--ease);
  will-change: transform;
}
.reveal-zoom.in img { transform: scale(1); }


/* ---------- Line-by-line text reveal ---------- */
.line-reveal { display: block; overflow: hidden; }
.line-reveal > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.line-reveal.in > span { transform: translateY(0); }


/* ---------- Word-stagger reveal ---------- */
.words-reveal { display: inline-block; }
.words-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-inline-end: .22em;
}
.words-reveal .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
}
.words-reveal.in .word > span { transform: translateY(0); }
.words-reveal .word:nth-child(1) > span { transition-delay: .00s; }
.words-reveal .word:nth-child(2) > span { transition-delay: .05s; }
.words-reveal .word:nth-child(3) > span { transition-delay: .10s; }
.words-reveal .word:nth-child(4) > span { transition-delay: .15s; }
.words-reveal .word:nth-child(5) > span { transition-delay: .20s; }
.words-reveal .word:nth-child(6) > span { transition-delay: .25s; }
.words-reveal .word:nth-child(7) > span { transition-delay: .30s; }
.words-reveal .word:nth-child(8) > span { transition-delay: .35s; }


/* ---------- Counter ---------- */
.count { font-variant-numeric: tabular-nums; }


/* ---------- Magnetic ---------- */
.magnetic {
  display: inline-block;
  transition: transform .3s var(--ease);
  will-change: transform;
}


/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0;
  background: var(--ink);
  z-index: 200;
  display: grid; place-items: center;
  transition: opacity .8s var(--ease) .2s, visibility 0s linear 1s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-mark {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 84px);
  color: var(--paper);
  font-weight: 300;
  letter-spacing: -0.02em;
  position: relative;
  overflow: hidden;
}
.loader-mark::after {
  content: ".";
  color: var(--sage);
  animation: pulse 1.2s ease-in-out infinite;
  display: inline-block;
}
.loader-bar {
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 1px;
  background: rgba(255,255,255,.2);
  overflow: hidden;
}
.loader-bar::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--sage), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}


/* ---------- Section transitions on scroll ---------- */
@keyframes drift {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-14px) }
}
.drift { animation: drift 6s ease-in-out infinite; }


/* ---------- Hover lift ---------- */
.lift { transition: transform .5s var(--ease); }
.lift:hover { transform: translateY(-6px); }