/* =========================================================
   Nasha Mukti Kendra — custom styles (dark + light mix)
   ========================================================= */

/* ---------- Horizontal overflow guard ----------
   Stops any decorative / animated element from creating a side scroll.
   `clip` is preferred because `hidden` on body can break position: sticky. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
img, svg, video, iframe { max-width: 100%; }

/* Any absolutely positioned decoration should stay inside its section */
.section, .section-dark, section { position: relative; overflow-x: clip; }

/* ---------- Reveal on scroll ----------
   Uses the independent `translate` property so hover transforms still work.
   Vertical-only movement — no sideways offsets that could cause x-overflow. */
.js .reveal { opacity: 0; translate: 0 16px; transition: opacity .6s ease-out, translate .6s ease-out; }
.js .reveal.is-visible { opacity: 1; translate: none; }
.js .reveal.card,
.js .reveal.card-dark {
  transition: opacity .6s ease-out, translate .6s ease-out, transform .3s ease,
              box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

/* ---------- Dark sections ---------- */
.section-dark { position: relative; overflow: hidden; background: #082f2d; color: #d5f1ec; }
.section-dark.deep { background: #061f1e; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .lead { color: rgba(213, 241, 236, .88); }
.section-dark .eyebrow { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #aee3da; }
.section-dark .icon-wrap { background: rgba(255,255,255,.07); color: #7fcfc3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
/* white cards placed inside dark sections keep dark text */
.section-dark .card { color: #1e2d33; }
.section-dark .card h3 { color: #14212a; }

.card-dark {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem;
  padding: 1.75rem;
  backdrop-filter: blur(4px);
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.card-dark:hover {
  transform: translateY(-6px);
  border-color: rgba(127,207,195,.55);
  background: rgba(255,255,255,.09);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
}

/* subtle dotted textures */
.dotgrid { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 22px 22px; }
.dotgrid-light { background-image: radial-gradient(rgba(15,98,93,.11) 1px, transparent 1px); background-size: 22px 22px; }

/* ---------- Dark header ---------- */
.site-header .nav-link { color: #d5f1ec; }
.site-header .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-header .nav-link[aria-current="page"] { color: #fff; background: rgba(255,255,255,.14); }

/* ---------- Parallax backgrounds ---------- */
.parallax {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Fixed backgrounds are unreliable on touch devices — fall back to normal scrolling */
@media (max-width: 1023px), (hover: none) {
  .parallax { background-attachment: scroll; }
}

/* ---------- Floating decorative elements ---------- */
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-14px) rotate(6deg); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.float-slow { animation: floaty 7s ease-in-out infinite alternate; }
.float-med  { animation: floaty 5s ease-in-out infinite alternate; }
.float-fast { animation: floaty 3.6s ease-in-out infinite alternate; }
.spin-slow  { animation: spin-slow 40s linear infinite; }
.float-slow, .float-med, .float-fast, .spin-slow { pointer-events: none; }

/* ---------- Recovery timeline connector (desktop) ---------- */
@media (min-width: 1024px) {
  .journey-line::before {
    content: "";
    position: absolute;
    top: 2.1rem;
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(to right, #7fcfc3 0 8px, transparent 8px 16px);
  }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; translate: none; transition: none; }
  .parallax { background-attachment: scroll; }
  .float-slow, .float-med, .float-fast, .spin-slow { animation: none; }
  * { transition-duration: .01ms !important; }
}