/* alphamotion.in mobile responsive overrides
   Loaded after the main Tailwind bundle so these rules win on specificity tie. */

/* Fix iOS/Android viewport: 100vh includes the URL bar on mobile, which
   causes the slider frames to be clipped. Use dvh where supported. */
@supports (height: 100dvh) {
  html, body { min-height: 100dvh; }
  main.relative.h-screen { height: 100dvh; }
  section.h-screen { height: 100dvh; }
  .flex.h-screen { height: 100dvh; }
  article.h-screen { height: 100dvh; }
}

/* Allow horizontal swipe gestures to be captured by JS instead of triggering
   the browser's back-swipe / pull-to-refresh on the slider area. */
main { overscroll-behavior: contain; touch-action: pan-y; }

@media (max-width: 640px) {
  /* Header label "Alphamotion Narrative" + "Stages 1-2 - Consulting & Setup"
     gets cramped at <380px. Tighten letter-spacing and shrink slightly. */
  header .text-\[10px\] {
    font-size: 9px;
    letter-spacing: 0.18em;
  }
  /* Make the right-side stage label wrap gracefully instead of overflowing. */
  header > div:first-child > div:last-child {
    text-align: right;
    max-width: 55%;
    line-height: 1.3;
    white-space: normal;
  }

  /* Frame top padding (pt-28 = 7rem) eats too much vertical room on short
     phones. Reduce so the headline + paragraph both fit above the footer. */
  article > div:last-child {
    padding-top: 5.5rem;     /* was 7rem (pt-28) */
    padding-bottom: 5rem;    /* was 6rem (pb-24) */
  }

  /* Stack headline block and paragraph block with breathing room; the
     description was getting stretched against the right edge. */
  article .max-w-\[980px\] { max-width: 100%; }
  article .max-w-\[70ch\]  { max-width: 100%; }

  /* Ensure the headline never overflows the viewport on very narrow devices. */
  article h1 {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    line-height: 1;
    word-break: break-word;
    hyphens: auto;
  }

  /* Tighten the bottom flex row so the paragraph isn't squeezed. */
  article .flex.items-end.justify-between { gap: 1rem; }

  /* Footer tag line + scroll velocity meter: prevent overlap on small screens. */
  footer p { font-size: 9px; letter-spacing: 0.18em; }
}

/* Tablet: keep the decorative orb visible but smaller so it doesn't dominate. */
@media (min-width: 641px) and (max-width: 1023px) {
  article .h-\[36vh\].w-\[36vh\] { height: 30vh; width: 30vh; }
}

/* Disable the heavy animated background pulse on mobile to save battery and
   prevent jank during touch-driven slide transitions. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .animate-pulse { animation: none; }
}