/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║                  NUDGE — ANIMATIONS                         ║
 * ║                                                              ║
 * ║  All keyframes, scroll reveals, marquees, transitions.      ║
 * ║  Edit durations/easings here to change site-wide motion.    ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ─────────────────────────────────────────────
   SCROLL REVEAL
   ─────────────────────────────────────────────
   Add .anim to any element to reveal it on scroll.
   Add .anim-d1 through .anim-d5 for staggered delays.

   Usage:
   <div class="anim">…</div>
   <div class="anim anim-d1">…</div>
   ───────────────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.anim.show {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.anim-d1 { transition-delay:  50ms; }
.anim-d2 { transition-delay: 100ms; }
.anim-d3 { transition-delay: 150ms; }
.anim-d4 { transition-delay: 200ms; }
.anim-d5 { transition-delay: 250ms; }

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; }
}


/* ─────────────────────────────────────────────
   HORIZONTAL MARQUEE
   ─────────────────────────────────────────────
   For testimonials, logo strips, and other
   infinitely scrolling rows.

   Usage:
   <div class="marquee-wrap">
     <div class="marquee-track">…doubled content…</div>
   </div>
   ───────────────────────────────────────────── */
@keyframes scroll-left  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

.marquee-wrap {
  overflow: hidden;
  position: relative;
}

/* Fade edges */
.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--app-background), transparent);
}
.marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--app-background), transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-left 45s linear infinite;
}
.marquee-track-rev {
  display: flex;
  width: max-content;
  animation: scroll-right 38s linear infinite;
}


/* ─────────────────────────────────────────────
   EMAIL MARQUEE (horizontal cards)
   ─────────────────────────────────────────────
   Slower, used for the email design showcase strip.
   ───────────────────────────────────────────── */
@keyframes emailScrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* .email-marquee-track is defined in components.css */


/* ─────────────────────────────────────────────
   INTEGRATIONS BAR MOBILE SCROLL
   ─────────────────────────────────────────────
   Used for the features section integrations
   bar on mobile viewports.
   ───────────────────────────────────────────── */
@keyframes integ-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ─────────────────────────────────────────────
   VERTICAL GALLERY
   ─────────────────────────────────────────────
   For multi-column email gallery showcases.
   ───────────────────────────────────────────── */
@keyframes gallery-up   { from { transform: translateY(0);    } to { transform: translateY(-50%); } }
@keyframes gallery-down { from { transform: translateY(-50%); } to { transform: translateY(0);    } }

.gallery-track-up {
  animation: gallery-up 50s linear infinite;
  display: flex;
  flex-direction: column;
}
.gallery-track-down {
  animation: gallery-down 50s linear infinite;
  display: flex;
  flex-direction: column;
}


/* ─────────────────────────────────────────────
   KEYFRAMES — general utility
   ───────────────────────────────────────────── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* FAQ accordion (Radix-style) */
@keyframes slideDown {
  from { height: 0px; }
  to   { height: var(--radix-collapsible-content-height); }
}
@keyframes slideUp {
  from { height: var(--radix-collapsible-content-height); }
  to   { height: 0px; }
}

/* ─────────────────────────────────────────────
   PROMPT PILL POP + CURSOR
   ─────────────────────────────────────────────
   The email marquee prompt pill bounces in when
   its card becomes visible in the viewport.
   Triggered by adding class .pill-pop to .prompt-pill.
   ───────────────────────────────────────────── */
@keyframes pillPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.72) translateY(4px); }
  100% { opacity: 1; transform: translateX(-50%) scale(1)    translateY(0);   }
}

@keyframes pillCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ─────────────────────────────────────────────
   HERO ANIMATION KEYFRAMES
   Used inside the AI chat mockup in the hero.
   ───────────────────────────────────────────── */

/* Typing indicator dots */
@keyframes heroDot {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.35; }
  30%            { transform: translateY(-4px); opacity: 1;    }
}

/* Cursor blink in prompt input */
@keyframes heroCursor {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Loading spinner (generating state) */
@keyframes heroSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────
   LIVE DOT
   ─────────────────────────────────────────────
   Pulsing green indicator (e.g., "Live preview").
   Usage: <span class="live-dot"></span>
   ───────────────────────────────────────────── */
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(22,163,74,0.45); }
  50%       { box-shadow: 0 0 0 5px rgba(22,163,74,0);    }
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  animation: live-pulse 2.2s ease-in-out infinite;
}