/* =========================================================
   animations.css — scroll reveals, micro interactions
   ========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="left"] { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="rotate"] { transform: rotate(-4deg) translateY(30px); }
[data-reveal].in-view { opacity: 1; transform: none; }

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

/* image reveal curtain */
.img-reveal { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.img-reveal::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gradient);
  transform: scaleX(1); transform-origin: right;
  transition: transform 1.1s var(--ease);
}
.img-reveal.in-view::after { transform: scaleX(0); }
.img-reveal img { transform: scale(1.14); transition: transform 1.4s var(--ease); }
.img-reveal.in-view img { transform: scale(1); }

/* typing caret */
.typing::after {
  content: "";
  display: inline-block;
  width: 3px; height: 1em;
  margin-left: 4px;
  background: var(--accent);
  vertical-align: -0.12em;
  animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* magnetic + hover lift */
.magnetic { transition: transform .25s var(--ease); }
.hover-lift { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.hover-lift:hover { transform: translateY(-8px); }

.spin-slow { animation: spin 26s linear infinite; }
.float-slow { animation: floaty 7s ease-in-out infinite; }

/* page load */
.page-fade { animation: pageFade .8s var(--ease) both; }
@keyframes pageFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.preloader {
  position: fixed; inset: 0; z-index: 2000;
  background: #fff; display: grid; place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader .ring { width: 62px; height: 62px; border-radius: 50%; border: 3px solid rgba(23,170,168,.18); border-top-color: var(--primary); animation: spin 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal], .stagger > * { opacity: 1 !important; transform: none !important; }
}