/* anne-motion.css — styles for the motion pack. Import or copy into your concept. */

/* 1. Custom cursor */
.am-cursor {
  position: fixed; left: -12px; top: -12px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; mix-blend-mode: difference;
  pointer-events: none; z-index: 9999;
  opacity: 0; transition: opacity .3s;
  will-change: transform;
}
.am-cursor.is-on { opacity: 1; }
.am-cursor.is-hover { /* scale handled inline */ }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .am-cursor { display: none; }
}
.am-magnetic { will-change: transform; transition: transform .3s cubic-bezier(.22,1,.36,1); }

/* 2. Clip-path mask text reveals */
.am-reveal .am-line { display: block; overflow: hidden; clip-path: inset(0 0 0 0); }
.am-reveal .am-line-inner {
  display: inline-block; transform: translateY(110%) rotate(3deg);
  transform-origin: 0 100%; will-change: transform;
}
.am-reveal .am-line.am-in .am-line-inner {
  transform: translateY(0) rotate(0deg);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay: inherit;
}
.am-reveal .am-line.am-in { transition-delay: 0s; }
.am-reveal .am-line { transition-delay: inherit; }
.am-reveal .am-line-inner { transition-delay: inherit; }
/* drive inner by parent delay */
.am-reveal .am-line.am-in .am-line-inner { transition-delay: inherit; }
.am-w { white-space: pre; }
@media (prefers-reduced-motion: reduce) {
  .am-reveal .am-line-inner { transform: none !important; transition: none !important; }
}

/* 3. Smooth scroll wrapper */
.am-smooth { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

/* 4. Image reveal: scale + clip */
.am-img-reveal { overflow: hidden; clip-path: inset(12% 8% 12% 8% round 4px); }
.am-img-reveal img, .am-img-reveal picture, .am-img-reveal video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.18); will-change: transform;
}
.am-img-reveal.am-in {
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 1.1s cubic-bezier(.22,1,.36,1);
}
.am-img-reveal.am-in img, .am-img-reveal.am-in picture, .am-img-reveal.am-in video {
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .am-img-reveal { clip-path: none; }
  .am-img-reveal img, .am-img-reveal picture, .am-img-reveal video { transform: none; }
}

/* 5. Odometer — tabular numerals so digits don't jump */
[data-odometer] { font-variant-numeric: tabular-nums; }

/* 6. Scroll progress hairline */
.am-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  background: currentColor; color: inherit;
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 9998; pointer-events: none;
}