/* =========================================================================
   Animations — keyframes + scroll-reveal. All gated by prefers-reduced-motion.
   ========================================================================= */

/* Scroll reveal: elements start hidden, JS adds .is-visible */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] {
  transition-delay: 0.08s;
}
[data-reveal-delay="2"] {
  transition-delay: 0.16s;
}
[data-reveal-delay="3"] {
  transition-delay: 0.24s;
}
[data-reveal-delay="4"] {
  transition-delay: 0.32s;
}

/* Tracker pan (hero reframe) */
@keyframes tracker-pan {
  0%,
  100% {
    left: 10%;
  }
  50% {
    left: 56%;
  }
}

@keyframes pulse-arrow {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(255, 0, 51, 0.28);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 14px 40px rgba(255, 0, 51, 0.5);
  }
}

@keyframes pulse-arrow-down {
  0%,
  100% {
    transform: rotate(90deg) scale(1);
    box-shadow: 0 10px 30px rgba(255, 0, 51, 0.28);
  }
  50% {
    transform: rotate(90deg) scale(1.08);
    box-shadow: 0 14px 40px rgba(255, 0, 51, 0.5);
  }
}

@keyframes short-pop {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes short-pop-1 {
  from {
    opacity: 0;
    transform: translate(-10px, 24px) scale(0.92) rotate(-8deg);
  }
  to {
    opacity: 1;
    transform: translate(-8px, -26px) scale(1) rotate(-7deg);
  }
}

@keyframes short-pop-2 {
  from {
    opacity: 0;
    transform: translate(6px, 24px) scale(0.92) rotate(6deg);
  }
  to {
    opacity: 1;
    transform: translate(4px, 20px) scale(1) rotate(5deg);
  }
}

@keyframes short-pop-3 {
  from {
    opacity: 0;
    transform: translate(12px, 24px) scale(0.92) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: translate(10px, -10px) scale(1) rotate(-2deg);
  }
}

/* Animated count for stats handled in JS; this is the shimmer for processing */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Processing state used by the hero link field */
.is-processing {
  position: relative;
  pointer-events: none;
}

.processing-bar {
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: -1.4rem;
  height: 4px;
  border-radius: 4px;
  background: var(--surface-muted-2);
  overflow: hidden;
}

.processing-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 4px;
  background: var(--grad-brand);
  animation: indeterminate 1.1s var(--ease-in-out) infinite;
}

@keyframes indeterminate {
  0% {
    left: -40%;
  }
  100% {
    left: 100%;
  }
}

/* Floating gentle bob for hero visual */
@keyframes float-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.float {
  animation: float-bob 6s var(--ease-in-out) infinite;
}

@keyframes todo-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .reframe__tracker,
  .float,
  .reframe__arrow {
    animation: none !important;
  }

  .short-card {
    opacity: 1;
    transform: none;
  }

  .todo-carousel__viewport,
  .done-carousel__viewport {
    overflow-x: auto;
    cursor: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .todo-carousel__track,
  .done-carousel__track {
    animation: none !important;
    transform: none !important;
  }

  .todo-carousel__group + .todo-carousel__group,
  .done-carousel__group + .done-carousel__group {
    display: none;
  }
}