/* ===== Motion (opt-in via class name) ===== */

/* Plays only once an ancestor (or itself) carries .in-view — set that
   class directly for above-the-fold content, or via IntersectionObserver
   (see footer.php) for scroll-triggered reveals. */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
}
.in-view .fade-up,
.fade-up.in-view {
  animation: fade-up 0.7s ease forwards;
}
.in-view .fade-up:nth-child(1), .fade-up.in-view:nth-child(1) { animation-delay: 0s; }
.in-view .fade-up:nth-child(2), .fade-up.in-view:nth-child(2) { animation-delay: .2s; }
.in-view .fade-up:nth-child(3), .fade-up.in-view:nth-child(3) { animation-delay: .4s; }
.in-view .fade-up:nth-child(4), .fade-up.in-view:nth-child(4) { animation-delay: .6s; }
.in-view .fade-up:nth-child(5), .fade-up.in-view:nth-child(5) { animation-delay: .8s; }

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

.typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent);
  width: 0;
  animation:
    typing 1.6s steps(var(--typing-steps, 20), end) forwards,
    typing-caret .8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes typing-caret {
  50% { border-color: transparent; }
}

.float {
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.pulse-ring { position: relative; }
.pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--accent);
  animation: pulse-ring 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up, .typing, .float, .pulse-ring::after {
    animation: none !important;
    transition: none !important;
  }
  .fade-up { opacity: 1; transform: none; }
  .typing { width: auto; border-right: none; }
}
