/* ===========================================================
   AnyJob 新官网 — shared styles
   (custom keyframes + scroll-reveal + preserved logo wall)
   =========================================================== */

/* ---------- Scroll reveal (replicates motion/react FadeIn) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.dir-down  { transform: translateY(-40px); }
.reveal.dir-left  { transform: translateX(40px); }
.reveal.dir-right { transform: translateX(-40px); }
.reveal.dir-none  { transform: none; }
.reveal.is-visible { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Custom animations referenced by Tailwind classes ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slide-up .5s ease-out both; }

@keyframes pulse-fast {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.animate-pulse-fast { animation: pulse-fast 1s cubic-bezier(.4,0,.6,1) infinite; }

/* Hero background blobs (replaces motion scale/opacity loop) */
@keyframes breathe {
  0%, 100% { transform: scale(1);    opacity: .5; }
  50%      { transform: scale(1.08); opacity: .7; }
}
.animate-breathe { animation: breathe 8s ease-in-out infinite; }
.animate-breathe-slow { animation: breathe 10s ease-in-out infinite; }

/* Used by arbitrary class animate-[scan_3s_ease-in-out_infinite] (Workflow / Features mockups) */
@keyframes scan {
  0%   { transform: translateY(-20px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(300px); opacity: 0; }
}

/* ===========================================================
   Preserved "以下品牌/团队正在使用" logo wall (unchanged)
   =========================================================== */
.logo-mask { position: relative; overflow: hidden; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  gap: 64px;
  align-items: center;
  animation: marquee 28s linear infinite;
}
.marquee-track li { white-space: nowrap; flex-shrink: 0; }
.logo-mask:hover .marquee-track { animation-play-state: paused; }

/* Fixed row height (prevents vertical overlap) */
#logos .logo-mask { --logo-h: .75rem; }
@media (min-width: 640px) {
  #logos .logo-mask { --logo-h: 1.85rem; }
}

/* Make the two tracks sit side-by-side (no stacking/overlap) */
#logos .marquee-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  will-change: transform;
  animation: logos-marquee 35s linear infinite;
}
#logos .marquee-track ul {
  display: flex;
  gap: 2rem;
  flex: 0 0 auto;
  min-width: 100%;
}

/* Logo sizing */
#logos .logo-row .logo {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
}

/* Fade edges */
#logos .logo-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  #logos .marquee-track { animation: none; }
}