/* =========================================================================
   hero-polish.css — surgical hero shimmer + CTA glow polish
   Scope: .hero section only (hero-title, hero-subtitle, .btn-primary)
   Palette: cyan #00E5FF / blue #00AAFF only
   Constraint: respect prefers-reduced-motion
   ========================================================================= */

/* ---------- 1) H1 shimmer: white → cyan → white gradient sweep ---------- */
.hero .hero-title {
  /* 2026-05-17 UX fix: soften shimmer — was #fff which made tagline below hard to read */
  background: linear-gradient(135deg, #e0f5ff 0%, #00E5FF 50%, #e0f5ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: heroShimmer 8s linear infinite;
}

@keyframes heroShimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ---------- 2) Hero subtitle: subtle fade-in on load ---------- */
.hero .hero-subtitle {
  animation: heroFadeIn 1.2s ease-out 0.3s both;
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 3) Primary CTA: lift + cyan glow on hover ---------- */
.hero .btn-primary {
  position: relative;
  transition: transform 200ms ease, box-shadow 300ms ease;
}

.hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 32px rgba(0, 229, 255, 0.40),
    0 0 0 1px rgba(0, 229, 255, 0.60);
}

/* Animated cyan/blue gradient ring revealed on hover */
.hero .btn-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #00E5FF, #00AAFF, #00E5FF);
  background-size: 200% 200%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  animation: ctaShimmer 3s linear infinite;
}

.hero .btn-primary:hover::after {
  opacity: 0.6;
}

@keyframes ctaShimmer {
  0%, 100% { background-position: 0%   50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 4) Mobile @ 390px: keep effects subtle, no horizontal shift ---------- */
@media (max-width: 480px) {
  .hero .hero-title {
    background-size: 250% auto; /* slightly wider sweep on small text */
  }
  .hero .btn-primary:hover {
    transform: translateY(-1px); /* gentler lift on touch */
  }
  /* 2026-05-17 UX fix: prevent typewriter subtitle from truncating "route mess..." mid-word at 390px */
  .hero .hero-subtitle {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Tight mobile @ 390px: shave subtitle font 1px to absorb long phrases without mid-word breaks */
@media (max-width: 400px) {
  .hero .hero-subtitle {
    font-size: 13px;
    line-height: 1.55;
  }
}

/* ---------- 5) Accessibility: respect prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-title {
    animation: none;
    background-position: 0 center;
  }
  .hero .hero-subtitle {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero .btn-primary,
  .hero .btn-primary::after {
    animation: none;
    transition: none;
  }
  .hero .btn-primary:hover {
    transform: none;
  }
}