/* Apple-style micro animations for GateRouter */

/* ============================================================
   样式隔离契约（重要，请严格遵守）
   ------------------------------------------------------------
   ▸ 默认区块（无 @media 包裹）= Web 端（≥769px）基线
       - 改 Web 端时只动这里
   ▸ @media (max-width: 768px) { ... } = 移动端（≤768px）专属
       - 改移动端时只动 768 媒体查询块内的规则
       - 禁止修改默认区块的属性值；如需差异化，用 768 媒体查询块覆盖
   ▸ 新增移动端独有的 class/规则，统一写在文件末尾的 768 块内
   ============================================================ */

/* Global easing curves */
.landing-page {
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.32, 0.64, 1);
}

/* ─────────── Scroll reveal ─────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out-expo), transform 800ms var(--ease-out-expo);
}
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }

/* ─────────── Buttons — hover: subtle lift; press: scale down (prototype) ─────────── */
.landing-page {
  --ease-spring-soft: cubic-bezier(0.34, 1.08, 0.64, 1);
}

.landing-page .btn-dark,
.landing-page .btn-outline,
.landing-page .nav-signup,
.landing-page .nav-login,
.landing-page .btn-pill,
.landing-page .stage-cta,
.landing-page .cta-btn,
.landing-page .galaxy-cta,
.landing-page .price-card .cta-btn,
.landing-page .btn-blue,
.landing-page .btn-yellow,
.landing-page .btn-light,
.landing-page .btn-ghost-light,
.landing-page .btn-white,
.landing-page .ml2-btn,
.landing-page .deploy-confirm,
.landing-page .ml2-spin-btn {
  transition:
    transform 320ms var(--ease-spring-soft),
    background-color 200ms var(--ease-apple),
    color 200ms var(--ease-apple),
    opacity 200ms var(--ease-apple),
    box-shadow 320ms var(--ease-spring-soft);
}

.landing-page .hero-cta .btn-dark,
.landing-page .hero-cta .btn-outline,
.landing-page .ml2-btn,
.landing-page .cta-btn,
.landing-page .final-cta .btn-white,
.landing-page .final-cta .btn-ghost-light,
.landing-page .deploy-confirm,
.landing-page .ml2-spin-btn {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.landing-page .hero-cta .btn-dark:hover,
.landing-page .hero-cta .btn-outline:hover,
.landing-page .ml2-btn:hover,
.landing-page .cta-btn:hover,
.landing-page .final-cta .btn-white:hover,
.landing-page .final-cta .btn-ghost-light:hover,
.landing-page .deploy-confirm:hover,
.landing-page .ml2-spin-btn:hover {
  transform: translateY(-1px);
}

.landing-page .hero-cta .btn-dark:hover {
  background-color: #1a1a1a;
}

.landing-page .hero-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.94);
}

.landing-page .ml2-btn:hover {
  background: #15151c;
}

.landing-page .price-card.featured .cta-btn:hover {
  background: #222228;
}

.landing-page .price-card:not(.featured) .cta-btn:hover {
  background: #e8e8ee;
}

.landing-page .final-cta .btn-white:hover,
.landing-page .final-cta .btn-ghost-light:hover {
  background: #f5f6f8;
}

.landing-page .hero-cta .btn-dark:hover .btn-arrow-circle {
  transform: scale(1.04);
}

.landing-page .hero-cta .btn-dark:active,
.landing-page .hero-cta .btn-outline:active,
.landing-page .ml2-btn:active,
.landing-page .cta-btn:active,
.landing-page .final-cta .btn-white:active,
.landing-page .final-cta .btn-ghost-light:active,
.landing-page .deploy-confirm:active,
.landing-page .ml2-spin-btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.landing-page .hero-cta .btn-dark:active {
  background-color: #101010;
}

.landing-page .hero-cta .btn-outline:active {
  background: rgba(255, 255, 255, 0.76);
}

.landing-page .ml2-btn:active {
  background: #050508;
}

.landing-page .hero-cta .btn-dark .btn-arrow-circle {
  transition: transform 320ms var(--ease-spring-soft);
}

.landing-page .hero-cta .btn-dark:active .btn-arrow-circle {
  transform: scale(0.96);
}

.landing-page .btn-dark .arrow {
  transition: transform 350ms var(--ease-out-back);
}

.landing-page .btn-dark:hover .arrow {
  transform: translate(2px, -2px);
}

.landing-page .nav-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Nav link underline animation */
.nav-links a { position: relative; }
.nav-links a:not(.active)::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: -2px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: left 250ms var(--ease-apple), right 250ms var(--ease-apple);
}
.nav-links a:not(.active):hover::after { left: 0; right: 0; }

/* ─────────── Stat counter (keep original color) ─────────── */

/* ─────────── Section heading reveal ─────────── */
.section h2, .eyebrow-blue {
  transition: opacity 900ms var(--ease-out-expo), transform 900ms var(--ease-out-expo);
}

/* ─────────── Pricing card hover ─────────── */
.price-card {
  transition:
    transform 350ms var(--ease-apple),
    box-shadow 350ms var(--ease-apple);
}
.price-card:not(.featured):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,30,150,0.10);
}
.price-card.featured:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

/* ─────────── Feature list (Usage Scenario) ─────────── */
.feat-list li {
  transition:
    background 250ms var(--ease-apple),
    transform 250ms var(--ease-apple);
}
.feat-list li:not(.active):hover .feat-icon {
  transform: scale(1.06);
}
.feat-list .feat-icon {
  transition: transform 280ms var(--ease-out-back), background 250ms, color 250ms, border-color 250ms;
}
.feat-list li.active .feat-icon {
  transform: scale(1);
}

/* Orbit static — no animations */
.orbit-ring.r1, .orbit-ring.r2, .orbit-ring.r3 { animation: none; }
.orbit-stage.active .orbit-center { animation: none; }
.orbit-stage.active .orbit-node { animation: none; }

/* ─────────── Nav: blur intensifies on scroll ─────────── */
.nav { transition: padding 200ms var(--ease-apple); }
.nav-card { transition: box-shadow 250ms var(--ease-apple), background-color 250ms var(--ease-apple); }
body.landing-scrolled .landing-page .nav { padding-top: 10px; padding-bottom: 0; }
body.landing-scrolled .landing-page .nav-card { box-shadow: 0 8px 24px rgba(0,30,150,0.08); }

/* ─────────── Model orb hover (sphere logos still get static hover) ─────────── */
.item__image { transition: transform 350ms var(--ease-out-back), box-shadow 350ms; }
.item__image:hover { transform: translateZ(0) scale(1.08); }

/* ─────────── Hover gradient on cards · radiates from bottom ─────────── */
.price-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.price-card::before { display: none; }
.price-card.featured .inner::before { display: none; }
.price-card:hover::before {
  opacity: 1;
}
/* Featured price card: glow inside white inner card */
.price-card.featured { isolation: auto; overflow: hidden; }
.price-card.featured::before { display: none; }
.price-card.featured .inner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.price-card.featured .inner::before { display: none !important; }
.price-card.featured:hover .inner::before { opacity: 1; }
.price-card.featured .inner > * { position: relative; z-index: 1; }
/* Make content sit above the gradient */
.price-card > * {
  position: relative;
  z-index: 1;
}

/* ─────────── Reduced motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}