/* ============================================================
   Starlink Sales Solutions — shared site styles
   Extracted verbatim from the original index.html <style> block
   so every page shares one stylesheet. Tailwind (CDN) provides
   utilities; this file holds the custom bits Tailwind can't.
   ============================================================ */
html { font-family: 'Poppins', sans-serif; }
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; } }
.grad-text { background: linear-gradient(90deg,#1E90FF,#5EB8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-overlay { background: linear-gradient(115deg, rgba(7,11,24,.95) 0%, rgba(11,19,39,.85) 45%, rgba(7,11,24,.55) 100%); }
/* Verkada-style radial cyan glow (from design research) */
.glow-halo { position:absolute; border-radius:9999px; filter: blur(90px); opacity:.55; background: radial-gradient(circle, rgba(30,144,255,.9) 0%, rgba(30,144,255,0) 70%); pointer-events:none; }
.glow-halo.pulse { animation: haloPulse 6s ease-in-out infinite; }
@keyframes haloPulse { 0%,100%{opacity:.4; transform:scale(1);} 50%{opacity:.65; transform:scale(1.08);} }
.partner-logo { filter: grayscale(1); opacity:.65; transition: filter .3s, opacity .3s, transform .3s; }
.partner-logo:hover { filter: grayscale(0); opacity:1; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .glow-halo.pulse{ animation:none; } }
.card-hover { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 22px 50px -18px rgba(11,19,39,.45); }
.nav-blur { backdrop-filter: saturate(180%) blur(12px); }
.marquee { animation: scroll 26s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Subtle interactivity layer — micro-animations that make the
   page feel alive without being distracting. Everything here
   respects prefers-reduced-motion (see the block at the end).
   ============================================================ */

/* --- Staggered reveal: set --d on children to cascade them in --- */
.js .reveal[style*="--d"] { transition-delay: var(--d); }

/* --- Buttons: gentle lift + press feedback + sheen sweep --- */
.btn-anim { position: relative; overflow: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .25s ease; }
.btn-anim:hover { transform: translateY(-2px); }
.btn-anim:active { transform: translateY(0) scale(.98); }
.btn-anim::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-anim:hover::after { left: 130%; }

/* --- Arrow nudge inside a link/button on hover --- */
.arrow-nudge svg { transition: transform .28s cubic-bezier(.22,1,.36,1); }
.group:hover .arrow-nudge svg, .btn-anim:hover .arrow-nudge svg { transform: translateX(4px); }

/* --- Service/feature icon tiles: lift, tilt & glow when the card is hovered --- */
.icon-pop { transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.card-hover:hover .icon-pop {
  transform: translateY(-4px) rotate(-4deg) scale(1.08);
  background-color: rgba(30,144,255,.16);
  box-shadow: 0 10px 24px -8px rgba(30,144,255,.55);
}

/* --- Image zoom for gallery / project tiles (wrap must clip) --- */
.zoom-img { overflow: hidden; }
.zoom-img img { transition: transform .6s cubic-bezier(.22,1,.36,1); will-change: transform; }
.zoom-img:hover img { transform: scale(1.07); }
/* slide the caption chip up a touch on hover */
.zoom-img .chip { transition: transform .35s ease, background-color .35s ease; }
.zoom-img:hover .chip { transform: translateY(-3px); background-color: rgba(30,144,255,.92); }

/* --- Animated underline for text links --- */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* --- Contact rows: icon tile bounces & tints on hover --- */
.contact-row .contact-ic { transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .35s ease; }
.contact-row:hover .contact-ic { transform: translateY(-3px) scale(1.06); background-color: rgba(30,144,255,.2); }

/* --- Floating hero visual accents (drift gently) --- */
.float-slow { animation: floatY 7s ease-in-out infinite; }
.float-slower { animation: floatY 11s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- Hero trust-badge check icons: subtle sequential pop --- */
.tick-pop { animation: tickPop .5s ease both; }
@keyframes tickPop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }

/* --- Form fields: lift focus ring feel --- */
.field-anim { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.field-anim:focus { transform: translateY(-1px); }

/* --- Shop filter buttons: springy press --- */
.shop-filter { transition: transform .2s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease, color .25s ease; }
.shop-filter:hover { transform: translateY(-2px); }
.shop-filter:active { transform: translateY(0) scale(.96); }

/* ============================================================
   Auto-swiping card carousel (mobile / tablet only)
   Used by the Services and Testimonials sections so a visitor
   doesn't have to scroll past a tall grid before reaching the
   main content. On lg+ screens everything reverts to the
   original grid (there's room for it), so these rules are all
   scoped inside a max-width media query.

   Markup contract (added by js/carousel.js):
     .nc-carousel            → viewport (clips + horizontal scroll)
       .nc-carousel-track    → flex row that glides left
         > cards (originals + aria-hidden clones for a seamless loop)
   ============================================================ */
@media (max-width: 1023.98px) {
  .nc-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* momentum swipe on iOS */
    scrollbar-width: none;               /* Firefox */
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;            /* old Edge */
    margin-inline: -1.5rem;              /* bleed past the px-6 gutter */
    padding-inline: 1.5rem;
  }
  .nc-carousel::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

  .nc-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    width: max-content;
    animation: ncCarousel var(--nc-duration, 40s) linear infinite;
    will-change: transform;
  }
  /* Pause the glide while the user is interacting so a swipe/read
     isn't fighting the animation. .is-paused is toggled from JS. */
  .nc-carousel:hover .nc-carousel-track,
  .nc-carousel-track.is-paused { animation-play-state: paused; }

  /* Each card gets a stable, readable width and snaps into place. */
  .nc-carousel-track > * {
    flex: 0 0 auto;
    width: min(78vw, 20rem);
    scroll-snap-align: center;
    margin: 0 !important;   /* neutralise any grid --d stagger offsets */
  }

  @keyframes ncCarousel {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 0.75rem)); } /* half track + half the gap */
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-anim, .btn-anim::after, .icon-pop, .zoom-img img, .zoom-img .chip,
  .arrow-nudge svg, .link-underline::after, .contact-row .contact-ic,
  .float-slow, .float-slower, .tick-pop, .field-anim, .shop-filter {
    animation: none !important; transition: none !important;
  }
  .btn-anim:hover, .card-hover:hover .icon-pop, .zoom-img:hover img { transform: none !important; }
  /* Reduced motion: no auto-glide, but the row stays swipeable by hand. */
  .nc-carousel-track { animation: none !important; }
}