/* =========================================================
   CoverSaathi Wellness — Motion layer
   Everything here only applies when js/motion.js is running
   (it adds .motion to <html>). With reduced motion or no JS,
   the page renders exactly as styles.css defines it.
   ========================================================= */

/* ---------- Hand hero control from CSS keyframes to GSAP ---------- */
.motion .hero-copy > *,
.motion .hero-media,
.motion .hero-route { animation: none !important; }
.motion .hero-media img { transition: none; }
.motion .hero-media:hover img { transform: none; }
.motion .hero-media { transform-style: preserve-3d; will-change: transform; }

/* Word-mask text reveal */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wi { display: inline-block; will-change: transform; }

/* "At Your Doorstep" light-teal highlight */
.hl-mark {
  background-image: linear-gradient(transparent 58%, rgba(23, 179, 166, .2) 58%, rgba(23, 179, 166, .2) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.no-anim .hl-mark { background-size: 100% 100%; }

/* ---------- CTA light sweep ---------- */
.btn-primary, .btn-yellow { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-yellow::after {
  content: ""; position: absolute; inset: -2px auto -2px -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
  transition: transform .75s cubic-bezier(.22, .8, .28, 1), opacity .3s;
}
.btn-primary:hover::after, .btn-yellow:hover::after { transform: skewX(-18deg) translateX(420%); opacity: 1; }
.btn-primary .btn-text, .btn-primary > * { position: relative; }

/* ---------- Shared overlay + pulse primitives ---------- */
.fx-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fx-layer text { font-family: var(--font-body); }

@keyframes fx-ring {
  0%   { box-shadow: 0 0 0 0 rgba(14, 140, 130, .5); }
  100% { box-shadow: 0 0 0 16px rgba(14, 140, 130, 0); }
}
@keyframes fx-ring-yellow {
  0%   { box-shadow: 0 0 0 0 rgba(245, 178, 26, .6); }
  100% { box-shadow: 0 0 0 18px rgba(245, 178, 26, 0); }
}
@keyframes fx-ring-aqua {
  0%   { box-shadow: 0 0 0 0 rgba(127, 224, 214, .55); }
  100% { box-shadow: 0 0 0 16px rgba(127, 224, 214, 0); }
}
.fx-pulse { animation: fx-ring .9s cubic-bezier(.22, .8, .28, 1); }
.fx-pulse-y { animation: fx-ring-yellow 1s cubic-bezier(.22, .8, .28, 1); }
.fx-pulse-a { animation: fx-ring-aqua .9s cubic-bezier(.22, .8, .28, 1); }

/* ---------- Section-to-section thread ---------- */
.motion #services, .motion #where-we-are, .motion #partners,
.motion #coordinators, .motion #apply { position: relative; }
.flow-link {
  position: absolute; z-index: 2; top: 0; pointer-events: none;
  left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  width: 8px; height: calc(var(--section) - 18px);
  transform: translateX(0);
}
.flow-link svg { width: 100%; height: 100%; overflow: visible; }

/* ---------- Hero ---------- */

/* ---------- Services ---------- */

.tag-list li { transition: background-color .35s, color .35s, transform .35s; }
.tag-list li.is-on { background: var(--teal-ink); color: var(--white); transform: translateY(-1px); }
.tag-list .tag-strong.is-on { background: var(--pine); }

.svc-photo { position: relative; }
.path-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 118px; pointer-events: none;
  background: linear-gradient(to top, rgba(11, 59, 58, .78), rgba(11, 59, 58, 0));
}

/* ---------- Where we are ---------- */
.motion .reach { position: relative; overflow: hidden; }
.motion .reach > .container { position: relative; z-index: 1; }

/* ---------- Partners ecosystem ---------- */
.motion .offer-grid { position: relative; }
.offer { position: relative; z-index: 1; }
.offer.is-active { border-color: var(--aqua); background: rgba(14, 140, 130, .28); }
.offer.is-active .icon-tile { animation: fx-ring-aqua .9s cubic-bezier(.22, .8, .28, 1); background: var(--aqua); color: var(--pine); }
.offer .icon-tile { transition: background-color .4s, color .4s; }
.offer-grid > .fx-layer { z-index: 3; }
.offer-grid > .fx-under { z-index: 0; }

/* Cursor spotlight (desktop) */
@media (hover: hover) and (pointer: fine) {
  .motion .offer::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(127, 224, 214, .16), transparent 60%);
    transition: opacity .3s;
  }
  .motion .offer:hover::before { opacity: 1; }
}


/* ---------- Coordinator ---------- */
.check-list .ck { transition: background-color .4s, color .4s; }
.motion .check-list li { transition: opacity .45s; }
.motion .check-list li:not(.is-on) { opacity: .42; }
.motion .check-list li:not(.is-on) .ck { background: var(--desk); color: #A9BAB6; }

.role-steps { position: relative; }
.role-steps li { transition: border-color .45s, background-color .45s, box-shadow .45s; }
.role-steps li::before { transition: background-color .45s, color .45s, box-shadow .45s; }
.role-icon {
  position: absolute; z-index: 3; top: 18px; right: 14px; width: 26px; height: 26px; padding: 2px;
  background: var(--white); border-radius: 50%; box-shadow: 0 0 0 4px var(--white);
  color: #B4C4C0; transition: color .45s, transform .45s cubic-bezier(.22, .8, .28, 1);
}
.role-steps li.is-on { border-color: var(--teal); box-shadow: 0 8px 24px rgba(14, 140, 130, .14); }
.role-steps li.is-on .role-icon { color: var(--teal-ink); transform: scale(1.12); }
.role-steps li.is-done { border-color: rgba(14, 140, 130, .35); }
.role-steps li.is-done .role-icon { color: var(--teal-ink); }
.role-steps li.is-earn { border-color: var(--yellow); background: #FFF9EA; box-shadow: 0 8px 26px rgba(245, 178, 26, .2); }
.role-steps li.is-earn .role-icon { color: #C98A00; background: #FFF9EA; box-shadow: 0 0 0 4px #FFF9EA; }
.role-steps li.is-earn::before { box-shadow: 0 0 0 5px rgba(245, 178, 26, .25); }
.role-steps > .fx-layer { z-index: 2; }
@media (max-width: 640px) {
  .role-icon { top: 50%; right: 16px; transform: translateY(-50%); }
  .role-steps li.is-on .role-icon { transform: translateY(-50%) scale(1.12); }
}

/* ---------- Purpose climax ---------- */
.purpose-net { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.purpose-inner { position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer { position: relative; }
.footer-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; overflow: visible; }
.footer-line i { position: absolute; inset: 0; background: rgba(127, 224, 214, .28); transform-origin: left; transform: scaleX(0); }
.footer-line b {
  position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--aqua-200); box-shadow: 0 0 12px 3px rgba(127, 224, 214, .6); opacity: 0;
}



/* ---------- Where we are: network spotlight ---------- */
.net-card.is-lit { border-color: var(--teal); box-shadow: 0 10px 28px rgba(14, 140, 130, .18); transform: translateY(-4px); }
.net-card.is-lit .net-icon { background: var(--teal-ink); color: var(--white); }
.stat { border-radius: 10px; }