/* ======================================================
   AgentBrowser — Component Styles
   Grain overlay, page-load animation, polish details
   ====================================================== */

/* --- Grain overlay for texture --- */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* --- Page load stagger --- */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-eyebrow {
  animation: page-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-title {
  animation: page-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.hero-subtitle {
  animation: page-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.hero-actions {
  animation: page-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.hero-visual {
  animation: page-enter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* --- Showcase gallery indicator dots --- */
.showcase-gallery {
  position: relative;
}
.showcase-gallery::after {
  content: 'scroll \2192';
  position: absolute;
  bottom: 12px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  opacity: 0.5;
  pointer-events: none;
}

/* --- Stagger reveal children --- */
.features-grid .feature-card:nth-child(1) { transition-delay: 0s; }
.features-grid .feature-card:nth-child(2) { transition-delay: 0.06s; }
.features-grid .feature-card:nth-child(3) { transition-delay: 0.12s; }
.features-grid .feature-card:nth-child(4) { transition-delay: 0.18s; }
.features-grid .feature-card:nth-child(5) { transition-delay: 0.24s; }
.features-grid .feature-card:nth-child(6) { transition-delay: 0.30s; }
.features-grid .feature-card:nth-child(7) { transition-delay: 0.36s; }

.steps .step:nth-child(1) { transition-delay: 0s; }
.steps .step:nth-child(2) { transition-delay: 0.1s; }
.steps .step:nth-child(3) { transition-delay: 0.2s; }

/* --- Focus styles --- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Selection --- */
::selection {
  background: var(--color-highlight);
  color: var(--color-ink);
}

/* --- Smooth image borders in showcase --- */
.showcase-gallery-scroll img {
  border: 1px solid var(--color-border);
}

/* --- Hero screenshot subtle border --- */
.hero-screenshot-wrapper {
  border: 1px solid var(--color-border);
}

/* --- Step connector lines (desktop) --- */
@media (min-width: 901px) {
  .steps {
    position: relative;
  }
  .steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(33.33% + 0.5rem);
    width: calc(33.33% - 1rem);
    height: 1px;
    background: var(--color-border);
  }
  .steps::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(66.66% + 0.5rem);
    width: calc(33.33% - 1rem);
    height: 1px;
    background: var(--color-border);
  }
}

/* --- Download button pulse on hover --- */
.btn-primary svg {
  transition: transform var(--transition);
}
.btn-primary:hover svg {
  transform: translateY(2px);
}

/* --- Ticker pause on hover --- */
.ticker:hover .ticker-track {
  animation-play-state: paused;
}

/* --- Showcase gallery scroll padding --- */
.showcase-gallery-scroll {
  scroll-padding: 0 var(--space-xs);
}