/* ============================================================
   MOTION — shared animation primitives (all pages)
   Depends on: tokens.css
   ============================================================ */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(.2, .7, .2, 1),
    transform 0.7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal[data-delay="100"] { --reveal-delay: 100ms; }
.reveal[data-delay="200"] { --reveal-delay: 200ms; }
.reveal[data-delay="300"] { --reveal-delay: 300ms; }
.reveal[data-delay="400"] { --reveal-delay: 400ms; }
.reveal[data-delay="500"] { --reveal-delay: 500ms; }
.reveal[data-delay="600"] { --reveal-delay: 600ms; }

/* Reveal variants */
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--zoom  { transform: scale(0.92); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--zoom.is-visible { transform: none; }

/* Hero copy reveals run on load */
.hero__copy .reveal,
.hero__visual.reveal { animation: revealUp 0.7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero__copy .reveal[data-delay="200"],
.hero__visual.reveal      { animation-delay: 0.2s; }
.hero__copy .reveal[data-delay="300"] { animation-delay: 0.3s; }
.hero__copy .reveal[data-delay="400"] { animation-delay: 0.4s; }
.hero__copy .reveal[data-delay="600"] { animation-delay: 0.6s; }
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Stagger ---------- */
.stagger-in {
  animation: staggerIn 0.7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--stagger-delay, 0ms);
}
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Accent gradient shimmer ---------- */
.accent-shimmer {
  background-image: linear-gradient(90deg, var(--teal) 0%, var(--cyan) 50%, var(--lime) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--teal);
  animation: accentShimmer 4s ease-in-out infinite;
}
@keyframes accentShimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 0%; }
}
@supports not (-webkit-background-clip: text) {
  .accent-shimmer {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--teal);
    animation: none;
  }
}

/* Amber shimmer variant for the "in development" headline word */
.accent-shimmer--dev {
  background-image: linear-gradient(90deg, var(--warn) 0%, #E0A400 50%, var(--teal) 100%);
  color: var(--warn);
}

/* ---------- Floating elements ---------- */
.float-slow { animation: floatY 5s ease-in-out infinite; }
.float-mid  { animation: floatY 6s ease-in-out infinite 0.4s; }
.float-fast { animation: floatY 4s ease-in-out infinite 0.8s; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Icon pop / wiggle on hover ---------- */
.icon-pop i,
.icon-pop svg { display: inline-block; transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1); }
.icon-pop:hover i,
.icon-pop:hover svg { transform: scale(1.18) rotate(-6deg); }

/* ---------- Shine sweep across cards/buttons ---------- */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: shineSweep 4.5s ease-in-out infinite;
}
@keyframes shineSweep {
  0%   { left: -80%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}

/* ---------- Shimmer skeleton ---------- */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- Progress bar (build status) ---------- */
.progress-track {
  height: 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  width: 0;
  transition: width 1.2s cubic-bezier(.2,.7,.2,1);
  position: relative;
  overflow: hidden;
}
.progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 2.2s infinite;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .float-slow, .float-mid, .float-fast,
  .accent-shimmer, .shine::after,
  .progress-fill::after { animation: none !important; }
  .hero__copy .reveal, .hero__visual.reveal { animation: none !important; opacity: 1; transform: none; }
}