/* Animation — reveal, keyframes, scroll progress. Duration constants honor
 * --theme-motion-scale from tokens.css. */

@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes slide-left  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-right { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes type-breathe {
  0%, 100% { font-variation-settings: "wght" calc(var(--wght-display-hero) - 140), "SOFT" var(--frau-soft), "opsz" var(--frau-opsz), "WONK" var(--frau-wonk); }
  50%      { font-variation-settings: "wght" calc(var(--wght-display-hero) + 60),  "SOFT" calc(var(--frau-soft) + 30), "opsz" var(--frau-opsz), "WONK" var(--frau-wonk); }
}
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
[data-reveal="in"] { opacity: 1; transform: none; }
[data-reveal="fade"]    { transform: none; }
[data-reveal="slide-l"] { transform: translateX(-24px); }
[data-reveal="slide-r"] { transform: translateX(24px); }
[data-reveal="scale"]   { transform: scale(0.96); }

[data-reveal-delay="1"] { transition-delay: calc(60ms  * var(--theme-motion-scale)); }
[data-reveal-delay="2"] { transition-delay: calc(140ms * var(--theme-motion-scale)); }
[data-reveal-delay="3"] { transition-delay: calc(220ms * var(--theme-motion-scale)); }
[data-reveal-delay="4"] { transition-delay: calc(320ms * var(--theme-motion-scale)); }
[data-reveal-delay="5"] { transition-delay: calc(440ms * var(--theme-motion-scale)); }
[data-reveal-delay="6"] { transition-delay: calc(580ms * var(--theme-motion-scale)); }

.kinetic {
  display: inline-block;
  animation: type-breathe calc(7s / max(var(--theme-motion-scale), 0.4)) var(--ease-in-out) infinite;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: var(--theme-radius-inset);
  color: transparent;
  pointer-events: none;
}

.float-slow { animation: float 9s var(--ease-in-out) infinite; }
.spin-slow { animation: orbit 40s linear infinite; transform-origin: center; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--line-soft);
  z-index: var(--z-header);
  pointer-events: none;
}
.scroll-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 120ms linear;
}

/* Theme-swap ribbon — momentary primary-color sweep across viewport on swap */
.theme-sweep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-modal);
  background: linear-gradient(110deg, transparent 0 40%, var(--color-primary) 50%, transparent 60% 100%);
  opacity: 0.22;
  transform: translateX(-100%);
  animation: sweep 720ms var(--ease-out-expo) forwards;
}
@keyframes sweep { to { transform: translateX(100%); } }

.anim-fade  { animation: fade-in  var(--dur-slow) var(--ease-out-soft) both; }
.anim-rise  { animation: rise-in  var(--dur-slow) var(--ease-out-expo) both; }
.anim-scale { animation: scale-in var(--dur-slow) var(--ease-out-expo) both; }
.anim-left  { animation: slide-left  var(--dur-slow) var(--ease-out-expo) both; }
.anim-right { animation: slide-right var(--dur-slow) var(--ease-out-expo) both; }

@media (prefers-reduced-motion: reduce) {
  .kinetic, .float-slow, .spin-slow, .blob, .theme-sweep { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}