/* RecoveryMate homepage — Stage 1 scoped styles. Loaded only on the homepage (is_page('home')). */

/* Ring / gauge mockups (Hero + Recovery Score sections) — CSS-only conic-gradient rings, no images/SVG uploads required */
.s-hero-score-ring,
.s-score-ring-big {
  position: relative;
  background: conic-gradient(#0E7C66 0% 82%, #E7F2EE 82% 100%);
}
.s-hero-score-ring::before,
.s-score-ring-big::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #FFFFFF;
}
.s-score-ring-big::before { inset: 18px; }

/* Entrance / scroll reveal. Default state is visible-on-no-JS (progressive enhancement only). */
.rm-reveal {
  opacity: 1;
  transform: none;
}
html.rm-js .rm-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
html.rm-js .rm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero staggered entrance */
html.rm-js .s-hero-copy .rm-reveal,
html.rm-js .s-hero-eyebrow,
html.rm-js .s-hero-heading,
html.rm-js .s-hero-subcopy,
html.rm-js .s-hero-ctas {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
html.rm-js.rm-hero-in .s-hero-eyebrow { transition-delay: .05s; }
html.rm-js.rm-hero-in .s-hero-heading { transition-delay: .15s; }
html.rm-js.rm-hero-in .s-hero-subcopy { transition-delay: .28s; }
html.rm-js.rm-hero-in .s-hero-ctas { transition-delay: .4s; }
html.rm-js.rm-hero-in .s-hero-visual.rm-reveal { transition-delay: .3s; }
html.rm-js.rm-hero-in .s-hero-eyebrow,
html.rm-js.rm-hero-in .s-hero-heading,
html.rm-js.rm-hero-in .s-hero-subcopy,
html.rm-js.rm-hero-in .s-hero-ctas,
html.rm-js.rm-hero-in .rm-reveal {
  opacity: 1;
  transform: none;
}

/* Gentle floating UI cards in the hero — subtle, slow, paused under reduced motion */
.rm-float {
  animation: rm-float-anim 6s ease-in-out infinite;
}
.rm-float-delay {
  animation-delay: 1.4s;
}
@keyframes rm-float-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Recovery journey: sticky phone + state swapping */
.s-journey-state {
  transition: opacity .5s ease;
}
.s-journey-state.state-active {
  opacity: 1 !important;
}

/* Recovery journey: stage text hierarchy (active vs quiet) */
.journey-stage {
  opacity: .45;
  transition: opacity .4s ease, transform .4s ease;
  border-inline-start: 3px solid transparent;
  padding-inline-start: 18px;
}
.journey-stage.stage-active {
  opacity: 1;
  border-inline-start-color: #0E7C66;
  transform: translateX(2px);
}

/* Product/pillar card hover lift */
.s-pillar-guide:hover,
.s-pillar-track:hover,
.s-pillar-connect:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -26px rgba(17,24,26,0.22) !important;
}
.s-pillar-guide,
.s-pillar-track,
.s-pillar-connect {
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Programme cards: parallax-ready + hover elevation */
.programme-card {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.programme-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(17,24,26,0.22);
  border-color: rgba(14,124,102,0.35);
}

/* Sticky header scrolled state */
.s-site-header {
  transition: box-shadow .25s ease, background-color .25s ease;
}
.s-site-header.rm-scrolled {
  box-shadow: 0 8px 24px -18px rgba(17,24,26,0.35);
}

/* Reduced motion: kill all non-essential animation/transition, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .rm-reveal,
  html.rm-js .rm-reveal,
  html.rm-js .s-hero-eyebrow,
  html.rm-js .s-hero-heading,
  html.rm-js .s-hero-subcopy,
  html.rm-js .s-hero-ctas {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .rm-float,
  .rm-float-delay {
    animation: none !important;
  }
  .programme-card {
    transition: none !important;
  }
  .s-journey-state {
    transition: none !important;
  }
}

/* Mobile: recovery journey sticky pin disabled below tablet (mirrors the Elementor breakpoint variant, belt-and-braces) */
@media (max-width: 991px) {
  .s-journey-phone-wrap {
    position: static !important;
  }
}