/* ============================================================
   Whop CLI landing - motion layer
   Drop-in, additive. Touches no existing rules.
   Everything is gated by `html.motion` (added by JS only when the
   user has NOT requested reduced motion) and by the
   prefers-reduced-motion media query, so it degrades to the
   current static page for anyone who opts out or has JS off.
   Brand orange: #ff5a1f   Status green: #36c66f
   ============================================================ */

/* ---- Copy button feedback (interaction, always on) ---- */
.copy-btn {
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.copy-btn.is-copied {
  color: #ff5a1f;
  border-color: rgba(255, 90, 31, .55);
}

/* ---- Sticky nav: gains a hairline + blur once you scroll past the hero ---- */
nav {
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(10, 10, 12, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* ============================================================
   Everything below only runs when motion is allowed.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ---- Hovers: feature cards lift, commands light up ---- */
  .feature {
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
  }
  .feature:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 90, 31, .35);
    background-color: rgba(255, 255, 255, .025);
  }

  .resource-group li {
    transition: color .18s ease, transform .18s ease;
  }
  .resource-group li:hover {
    color: #ff5a1f;
    transform: translateX(2px);
  }

  .btn .arrow {
    display: inline-block;
    transition: transform .2s ease;
  }
  .btn:hover .arrow {
    transform: translateX(4px);
  }

  .nav-cta {
    transition: transform .2s ease, background-color .2s ease;
  }
  .nav-cta:hover {
    transform: translateY(-1px);
  }
  .copy-btn:hover {
    color: #fff;
  }

  /* ---- Breathing dots: footer status + hero eyebrow ---- */
  .status-dot {
    animation: whopPulse 2.4s ease-in-out infinite;
  }
  .eyebrow-dot {
    animation: whopPulse 2.4s ease-in-out infinite;
  }
  @keyframes whopPulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(54, 198, 111, .45); }
    50%      { opacity: .6;  box-shadow: 0 0 0 5px rgba(54, 198, 111, 0); }
  }

  /* ---- Blinking caret on the primary install command ---- */
  html.motion .install .install-cmd::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1.05em;
    margin-left: 5px;
    vertical-align: -2px;
    background: #ff5a1f;
    animation: whopCaret 1.1s steps(1) infinite;
  }
  @keyframes whopCaret {
    0%, 50%      { opacity: 1; }
    50.01%, 100% { opacity: 0; }
  }

  /* ---- Scroll reveal: fade + rise, set by JS via .reveal ---- */
  html.motion .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: opacity, transform;
  }
  html.motion .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* ---- Hero intro (above the fold, plays on load) ---- */
  html.motion .hero-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  html.motion .hero-in.is-visible {
    opacity: 1;
    transform: none;
  }

  /* ---- Payments table prints row by row ---- */
  html.motion .row-in {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .4s ease;
  }
  html.motion .row-in.is-visible {
    opacity: 1;
    transform: none;
  }

  /* ---- whop doctor checkmarks pop in one at a time ---- */
  html.motion .check-in {
    opacity: 0;
    transform: scale(.4);
    transform-origin: center;
    transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  }
  html.motion .check-in.is-visible {
    opacity: 1;
    transform: none;
  }
}