/* ──────────────────────────────────────────────────────────────────────
   premium-mobile.css — Trillion-dollar polish layer for advai.cloud
   Loaded after design-system.css. Targets mobile premium UX.
   ────────────────────────────────────────────────────────────────────── */

/* ── Root: native feel + theme matching ──────────────────────────────── */
:root {
  color-scheme: dark;                                /* form controls go dark */
  --premium-spring: cubic-bezier(.34, 1.56, .64, 1); /* Apple-style overshoot */
  --premium-ease:   cubic-bezier(.22, 1, .36, 1);    /* sharp out, smooth in */
}

/* Kill iOS blue tap flash, prevent landscape font scaling */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* iOS momentum scroll on overflow regions */
.nsb-messages, .ds-card-grid, [data-scroll] {
  -webkit-overflow-scrolling: touch;
}

/* Disable pull-to-refresh on app-like surfaces (does not affect document scroll) */
body { overscroll-behavior-y: none; }

/* Horizontal safe-area for landscape iPhones with notches */
@supports (padding: max(0px)) {
  .ds-container, .nav, .ds-footer__inner, .header, .topbar {
    padding-left:  max(var(--container-pad, 16px), env(safe-area-inset-left));
    padding-right: max(var(--container-pad, 16px), env(safe-area-inset-right));
  }
}

/* ── Typography: system fallback before Inter loads (FOUT prevention) ── */
body, html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               'SF Pro Display', 'Segoe UI', Roboto, system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'ss01';     /* Inter aesthetic tweaks */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Premium tap response (spring scale, not just opacity) ───────────── */
@media (hover: none) and (pointer: coarse) {
  button, a, [role=button], .ds-btn, .pcard-cta, .wizard-option,
  .wizard-size, .nsb-fab, .sticky-cta, .tab-btn {
    transition: transform .15s var(--premium-spring), opacity .12s ease;
    will-change: transform;
  }
  button:active, a:active, [role=button]:active, .ds-btn:active,
  .pcard-cta:active, .wizard-option:active, .wizard-size:active,
  .nsb-fab:active, .sticky-cta:active, .tab-btn:active {
    transform: scale(.96);
    opacity: .85;
  }
  /* The chat FAB gets a tighter scale because it's already small */
  .nsb-fab:active { transform: scale(.92); }
}

/* ── Focus states: visible only on keyboard nav, not on tap ──────────── */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent2, #2dd4bf);
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent2, #2dd4bf);
  outline-offset: 0;
}

/* ── Glassmorphism nav: backdrop-blur on scroll ─────────────────────── */
.nav, header.nav, .header, .topbar {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ── Layout shift prevention (CLS=0) ────────────────────────────────── */
img, iframe, video {
  display: block;
  max-width: 100%;
  height: auto;
}
img:not([width]):not([height]),
iframe:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .03);
}

/* ── Reduced motion: respect user preference ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .orb, .live-dot, .ticker, .typewriter-cursor { animation: none !important; }
}

/* ── Better text selection color (subtle brand tint) ────────────────── */
::selection {
  background: rgba(45, 212, 191, .25);
  color: inherit;
}

/* ── Scrollbar styling (when visible — desktop fallback) ────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.20); }

/* ── Hide scrollbars on horizontal scroll regions (carousels, ticker) ── */
.ticker-wrapper, [data-hide-scrollbar] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ticker-wrapper::-webkit-scrollbar,
[data-hide-scrollbar]::-webkit-scrollbar { display: none; }

/* ── Form inputs: premium feel ──────────────────────────────────────── */
@media (max-width: 600px) {
  input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 12px;
  }
  /* Number-input spinners off (cleaner) */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; margin: 0;
  }
}

/* ── Bottom-aligned primary CTA in thumb zone (mobile only) ─────────── */
@media (max-width: 600px) {
  /* Gentle padding-bottom on body so sticky CTAs don't cover content */
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Ticker hover-pause, premium polish ─────────────────────────────── */
.ticker-wrapper:hover .ticker { animation-play-state: paused; }

/* ── Skeleton shimmer for loading states (utility class) ────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 8px;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Hero entry animation — subtle fade-up (CLS-safe) ───────────────── */
@media (max-width: 768px) {
  .ds-hero__title, .hero h1, .header h1 {
    opacity: 0;
    animation: fadeup .6s var(--premium-ease) forwards;
  }
  .ds-hero__sub, .hero p, .header p {
    opacity: 0;
    animation: fadeup .6s var(--premium-ease) .1s forwards;
  }
  .ds-hero__cta-pair, .hero-cta-row {
    opacity: 0;
    animation: fadeup .6s var(--premium-ease) .2s forwards;
  }
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pricing card "popular" badge: subtle glow pulse ────────────────── */
.pcard.popular::before, .tier.featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent, #14b8a6), var(--accent2, #2dd4bf));
  z-index: -1;
  opacity: .35;
  filter: blur(20px);
  animation: glowpulse 3s var(--premium-ease) infinite;
}
@keyframes glowpulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: .50; }
}

/* ── Wizard option selected: spring-pop confirmation ────────────────── */
.wizard-option.selected, .wizard-size.selected {
  animation: pop .35s var(--premium-spring);
}
@keyframes pop {
  0%   { transform: scale(.96); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Chat FAB: subtle pulse hint on first load (one-shot) ───────────── */
.nsb-fab[data-pulse-once]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent2, #2dd4bf);
  animation: fab-pulse 2s ease-out 1s 2;  /* runs twice, then stops */
  pointer-events: none;
}
@keyframes fab-pulse {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.6); opacity: 0;  }
}