/* getmint.club: targeted design overrides applied on top of the
 * minified vite bundle. Lives outside the build so we can iterate
 * fast without rebuilding.
 */

/* Hero phone mockup: the React component animates .floaty with a
 * keyframe that sets transform:translateY, which beats any static
 * transform on the same element. So we both stop that animation and
 * shrink the phone via a static scale + translateY for a slight
 * vertical-bob feel that does not flicker. */
@media (min-width: 768px) {
  .floaty {
    animation: none !important;
    transform: scale(0.84) !important;
    transform-origin: top center;
    margin-top: -8px;
  }
}

/* Smooth out the spec marquee. Was visibly jerky:
 * - GPU-promote the track so the browser does not repaint each frame
 * - Slow it down a touch so the perceived stutter at the loop seam
 *   is less noticeable on lower-refresh-rate displays */
.marquee-track {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation-duration: 70s !important;
  animation-timing-function: linear !important;
}

@media (prefers-reduced-motion: reduce) {
  .floaty { animation: none !important; transform: scale(0.84) !important; }
  .marquee-track { animation: none !important; }
}

/* Locations grid: bundle markup uses Tailwind's `lg:grid-cols-7`, but Tailwind
 * JIT only ships classes that appeared in the source at build time and 7-col
 * was never used until now. Define the missing utility ourselves so the
 * locations strip lays out as one 7-column row on >=lg viewports. */
@media (min-width: 1024px) {
  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}