/* ============================================================
   GP Sourcing — Animations
   Vercel spotlight / Framer slide-up / Attio stagger
   ============================================================ */

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(20px); }
.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 60ms; }
.stagger > *:nth-child(3) { transition-delay: 120ms; }
.stagger > *:nth-child(4) { transition-delay: 180ms; }
.stagger > *:nth-child(5) { transition-delay: 240ms; }
.stagger > *:nth-child(6) { transition-delay: 300ms; }

/* ── Hero entrance ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes spotlightFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes raycastReveal {
  from { opacity: 0; transform: scale(0.96) translateY(36px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes borderGlowReveal {
  0% {
    border-color: var(--raycast-border-init, rgba(255, 255, 255, 0.08));
    box-shadow: 0 0 0 rgba(59, 130, 246, 0);
  }
  30% {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 
      0 0 32px rgba(59, 130, 246, 0.16),
      0 12px 36px rgba(0, 0, 0, 0.3);
  }
  65% {
    border-color: rgba(34, 211, 238, 0.4);
    box-shadow: 
      0 0 32px rgba(34, 211, 238, 0.12),
      0 12px 36px rgba(0, 0, 0, 0.3);
  }
  100% {
    border-color: var(--raycast-border-final, rgba(255, 255, 255, 0.08));
    box-shadow: var(--raycast-shadow-final);
  }
}

/* ── Screenshot fade ── */
.screen-fade {
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.screen-fade.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* ── Spotlight effect (mouse-follow glow on cards) ── */
.spotlight-card {
  position: relative;
  overflow: hidden;
}
.spotlight-card::before {
  content: '';
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  left: var(--mx, 50%);
  top:  var(--my, 50%);
  opacity: 0;
  transition: opacity 200ms;
}
.spotlight-card:hover::before { opacity: 1; }

/* ── Tab pill slide ── */
.tab-pill-track {
  position: relative;
}
.tab-pill {
  position: absolute;
  top: 3px;
  height: calc(100% - 6px);
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  transition: left var(--t-base) var(--ease-spring),
              width var(--t-base) var(--ease-spring);
  pointer-events: none;
  z-index: 0;
}

/* ── Language toggle ── */
@keyframes slideRight {
  from { transform: translateX(-2px); }
  to   { transform: translateX(0); }
}
@keyframes slideLeft {
  from { transform: translateX(2px); }
  to   { transform: translateX(0); }
}

/* ── Border beam (card hover animation) ── */
@keyframes borderBeam {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* ── Marquee ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* ── Skeleton pulse ── */
@keyframes skeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.skeleton { animation: skeleton 1.5s ease infinite; background: var(--border); border-radius: var(--r-sm); }

/* ── Superhuman Floating Blobs ── */
@keyframes floatBlob1 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(120px, 80px) scale(1.1) rotate(180deg); }
  100% { transform: translate(-50px, 150px) scale(0.9) rotate(360deg); }
}
@keyframes floatBlob2 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-100px, -120px) scale(0.85) rotate(-180deg); }
  100% { transform: translate(80px, 50px) scale(1.05) rotate(-360deg); }
}
@keyframes floatBlob3 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(150px, -70px) scale(1.15) rotate(180deg); }
  100% { transform: translate(-80px, 100px) scale(0.9) rotate(360deg); }
}
@keyframes floatBlob4 {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-120px, 100px) scale(0.9) rotate(-180deg); }
  100% { transform: translate(100px, -80px) scale(1.1) rotate(-360deg); }
}