/* Insider marketing motion — see motion.js for preset toggles */

@media (prefers-reduced-motion: no-preference) {
  /* H1 — hero load stagger */
  html.motion-enabled.motion-h1 [data-hero-item] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.motion-enabled.motion-h1 [data-hero-item].is-visible {
    opacity: 1;
    transform: none;
  }

  /* H2 — hero screenshot entrance */
  html.motion-enabled.motion-h2 [data-hero-shot] {
    opacity: 0;
    transform: scale(0.98) translateY(18px);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.motion-enabled.motion-h2 [data-hero-shot].is-visible {
    opacity: 1;
    transform: none;
  }

  /* H3 — floating hero constellation chips */
  html.motion-enabled.motion-h3 .hero-stage {
    min-height: 22rem;
  }

  html.motion-enabled.motion-h3 .hero-constellation {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  html.motion-enabled.motion-h3 .hero-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: #222222;
    border: 1px solid #2D2D2D;
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.85);
    color: #F4F4F5;
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    opacity: 0;
    animation:
      hero-chip-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      hero-float 6s ease-in-out 0.55s infinite;
  }

  html.motion-enabled.motion-h3 .hero-chip .chip-icon {
    flex-shrink: 0;
    opacity: 0.9;
  }

  html.motion-enabled.motion-h3 .hero-chip.chip-soft {
    border-color: rgba(167, 139, 250, 0.35);
  }

  html.motion-enabled.motion-h3 .hero-chip.chip-mute {
    color: #D4D4D8;
    border-color: #3F3F46;
  }

  @keyframes hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  @keyframes hero-chip-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (max-width: 900px) {
    html.motion-enabled.motion-h3 .hero-constellation {
      display: none;
    }

    html.motion-enabled.motion-h3 .hero-stage {
      min-height: 0;
    }
  }

  /* S1 — section scroll reveals */
  html.motion-enabled.motion-s1 [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.motion-enabled.motion-s1 [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* S2 — screenshot scroll reveal */
  html.motion-enabled.motion-s2 [data-shot-reveal] {
    opacity: 0;
    transform: scale(0.98);
    transition:
      opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.motion-enabled.motion-s2 [data-shot-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* C2 — card hover lift */
  html.motion-enabled.motion-c2 .hook-card,
  html.motion-enabled.motion-c2 .motion-card {
    transition:
      border-color 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  html.motion-enabled.motion-c2 .hook-card:hover,
  html.motion-enabled.motion-c2 .motion-card:hover {
    transform: translateY(-2px);
    border-color: rgba(109, 40, 217, 0.55);
    box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.75);
  }

  /* C1 — feature board tile stagger */
  html.motion-enabled.motion-c1 [data-feature-stagger] .feature-tile {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.motion-enabled.motion-c1 [data-feature-stagger].is-staggered .feature-tile.is-visible {
    opacity: 1;
    transform: none;
  }

  /* C3 — how-it-works step cascade */
  html.motion-enabled.motion-c3 [data-steps-cascade] [data-step-item] {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  html.motion-enabled.motion-c3 [data-steps-cascade].is-cascaded [data-step-item].is-visible {
    opacity: 1;
    transform: none;
  }
}