/* start.php — dynamic path picker */

@keyframes ab-start-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2%, -3%) scale(1.04); }
  66% { transform: translate(-2%, 2%) scale(0.98); }
}

@keyframes ab-start-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes ab-start-pulse-ring {
  0% { transform: scale(0.92); opacity: 0.55; }
  70% { transform: scale(1.08); opacity: 0; }
  100% { transform: scale(1.08); opacity: 0; }
}

@keyframes ab-start-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.ab-start-orb {
  animation: ab-start-float 14s ease-in-out infinite;
}

.ab-start-orb--delay {
  animation-delay: -5s;
}

.ab-start-orb--delay2 {
  animation-delay: -9s;
}

.ab-start-shimmer-text {
  background: linear-gradient(105deg, #38bdf8 0%, #818cf8 35%, #c084fc 65%, #38bdf8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ab-start-shimmer 5s linear infinite;
}

.ab-start-carousel {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.ab-start-carousel::-webkit-scrollbar {
  display: none;
}

.ab-start-path-card {
  scroll-snap-align: center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
  transform: scale(0.94);
  opacity: 0.72;
}

.ab-start-path-card.is-active {
  transform: scale(1);
  opacity: 1;
}

.ab-start-path-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ab-start-dot {
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease;
}

.ab-start-dot.is-active {
  width: 1.75rem;
}

.ab-start-preview-pane {
  animation: ab-start-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ab-start-preview-banner {
  position: relative;
  width: 100%;
  line-height: 0;
}

.ab-start-preview-banner-img {
  display: block;
  width: 100%;
  height: 8rem;
  object-fit: cover;
  object-position: center 42%;
}

.ab-start-preview-banner-fade {
  position: absolute;
  inset: auto 0 0;
  height: 2.75rem;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0) 0%,
    rgba(15, 23, 42, 0.12) 45%,
    rgba(15, 23, 42, 0.38) 100%
  );
  pointer-events: none;
}

.ab-start-preview-pane.is-banner #previewBody {
  padding-top: 0.5rem;
}

.ab-start-phone-glow {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 25px 50px -12px rgba(15, 23, 42, 0.55),
    0 0 80px -20px var(--ab-glow, rgba(56, 189, 248, 0.35));
}

.ab-start-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--ab-ring, rgba(56, 189, 248, 0.45));
  animation: ab-start-pulse-ring 2.4s ease-out infinite;
  pointer-events: none;
}

.ab-start-sticky-cta {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .ab-start-orb,
  .ab-start-shimmer-text,
  .ab-start-ring::after,
  .ab-start-preview-pane {
    animation: none !important;
  }

  .ab-start-path-card {
    transition: none;
  }
}