/* =========================================================================
   Valiant Lifecare — Homepage polish layer (cr2026)
   Loads AFTER vlms-home2.css. Adds subtle, premium micro-interactions —
   never changes layout, structure, or copy.
   ========================================================================= */

/* ── 1. Service cards: brand-line sweep on hover ─────────────────────────
   A thin lime → blue accent line slides in from the left under the card
   title on hover. Adds intent + brand colour without altering the layout. */
.service-card { overflow: hidden; }
.service-card::after {
  content: '';
  position: absolute;
  left: 28px; bottom: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--lime, #C8F8A9) 0%, var(--blue, #0045AA) 100%);
  border-radius: 3px 3px 0 0;
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.service-card:hover::after { width: calc(100% - 56px); }

/* ── 2. Service card "Optimize / Enhance / Streamline / Adopt" buttons ─
   Soft underline sweep on the chevron for a tactile feel. */
.btn-service {
  position: relative;
  transition: color .25s ease, transform .25s ease, letter-spacing .25s ease;
}
.btn-service:hover {
  transform: translateX(4px);
  letter-spacing: .01em;
}

/* ── 3. Hero stats: subtle pulse loop on the lime suffix once counters
       finish counting. Reads as "live data". ─────────────────────────── */
.hero-stat-suffix {
  display: inline-block;
  animation: vlcStatPulse 3.6s ease-in-out infinite;
}
.hero-stat-item:nth-child(2) .hero-stat-suffix { animation-delay: .9s; }
.hero-stat-item:nth-child(3) .hero-stat-suffix { animation-delay: 1.8s; }
@keyframes vlcStatPulse {
  0%, 100% { transform: translateY(0);     opacity: 1; }
  50%      { transform: translateY(-2px);  opacity: .85; }
}

/* ── 4. Hero certification badges: stagger + soft glow on hover ─────── */
.hero-badge {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.hero-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(200, 248, 169, 0.25);
  background: rgba(255, 255, 255, 0.16);
}

/* ── 5. Glass card "live" reflection pulse ───────────────────────────── */
.hero-glass-card { position: relative; overflow: hidden; }
.hero-glass-card::after { animation: vlcGlassShimmer 9s ease-in-out infinite; }
@keyframes vlcGlassShimmer {
  0%, 100% { opacity: .35; transform: translate(0, 0); }
  50%      { opacity: .65; transform: translate(8px, -4px); }
}

/* ── 6. Hero primary button — soft sheen sweep on hover ─────────────── */
.btn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-hero::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg,
              transparent 0%,
              rgba(255,255,255,0.55) 50%,
              transparent 100%);
  transform: skewX(-20deg);
  transition: left .65s cubic-bezier(.22,.61,.36,1);
  z-index: -1;
}
.btn-hero:hover::before { left: 130%; }

/* ── 7. Marquee: smooth easing + pause-on-hover (existing class) ────── */
.marquee-track {
  animation-timing-function: linear !important;
}
#marquee-track:hover { animation-play-state: paused; }
.marquee-item { transition: color .25s ease, transform .25s ease; }
.marquee-item:hover { color: var(--blue, #0045AA); transform: scale(1.04); }

/* ── 8. About section image — subtle scale + float ──────────────────── */
.about-img-wrap {
  overflow: hidden;
  border-radius: inherit;
}
.about-img-wrap img {
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.about-img-wrap:hover img {
  transform: scale(1.04);
  filter: saturate(1.05);
}
.about-stat-float {
  transition: transform .4s ease, box-shadow .4s ease;
}
.about-stat-float:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 18px 40px rgba(0,69,170,0.18);
}

/* ── 9. Accordion: smoother body easing. Icon styling is fully owned by
       vlms-home2.css (two-stroke +/− icon). */
.accordion-trigger { transition: color .3s ease, padding .3s ease; }
.accordion-trigger:hover { padding-left: 4px; }
.accordion-body { transition: max-height .5s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }

/* ── 10. Section reveals: handled by vlms-home2.js (GSAP). No CSS override
       here — adding opacity:0 would fight GSAP's gated reveal logic and
       leave content invisible if GSAP fails to load. */

/* ── 11. Section labels: tiny brand dot, sits INSIDE the rounded pill.
       The dot is positioned with left:10px (relative to the pill, which
       has padding-left bumped to 22px to clear the dot). The pulse ring
       is sized so it never escapes the pill bounds. */
.section-label {
  position: relative;
  padding-left: 22px;
  display: inline-flex;
  align-items: center;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 10px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue, #0045AA);
  transform: translateY(-50%);
  box-shadow: 0 0 0 0 rgba(0,69,170,0.45);
  animation: vlcDotPulse 2.4s ease-in-out infinite;
}
.section-label--light::before {
  background: var(--lime, #C8F8A9);
  box-shadow: 0 0 0 0 rgba(200,248,169,0.5);
  animation-name: vlcDotPulseLime;
}
@keyframes vlcDotPulse {
  0%, 100% { box-shadow: 0 0 0 0    rgba(0,69,170,0.45); }
  70%      { box-shadow: 0 0 0 6px  rgba(0,69,170,0); }
}
@keyframes vlcDotPulseLime {
  0%, 100% { box-shadow: 0 0 0 0    rgba(200,248,169,0.5); }
  70%      { box-shadow: 0 0 0 6px  rgba(200,248,169,0); }
}

/* ── 12. Nav: subtle underline grow on links ────────────────────────── */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--lime, #C8F8A9);
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}
.nav-links a:hover::after { width: 100%; }

/* ── 13. Respect reduced-motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .service-card::after,
  .btn-service,
  .hero-stat-suffix,
  .hero-badge,
  .hero-glass-card::after,
  .btn-hero::before,
  .marquee-item,
  .about-img-wrap img,
  .about-stat-float,
  .accordion-icon,
  .reveal,
  .section-label::before,
  .nav-links a::after {
    animation: none !important;
    transition: none !important;
  }
}