/* Prashan Medical Technologies — custom layer on top of Tailwind CDN.
   Only things Tailwind utilities can't express: keyframes, reveal states,
   marquee, nav transitions. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* sticky nav offset for anchor jumps */
}

/* Kill horizontal scroll from off-canvas / transformed elements (mobile drawer,
   reveal transforms). `clip` avoids creating a scroll container, so position:
   sticky keeps working; hidden fallback on html only for older engines. */
html, body {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

::selection {
  background: #4b81e7;
  color: #fff;
}

/* ---------- Navigation ---------- */
#site-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
#site-nav.nav-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(11, 31, 63, 0.06), 0 8px 24px -12px rgba(11, 31, 63, 0.12);
}

/* Mobile menu */
#mobile-menu {
  transform: translateX(100%);
  visibility: hidden; /* unfocusable + contributes no overflow while closed */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.35s;
}
#mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s;
}
#menu-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: none;
}
/* graceful degradation without JS */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* stagger children inside grids */
.reveal.revealed:nth-child(2) { transition-delay: 0.06s; }
.reveal.revealed:nth-child(3) { transition-delay: 0.12s; }
.reveal.revealed:nth-child(4) { transition-delay: 0.18s; }
.reveal.revealed:nth-child(5) { transition-delay: 0.24s; }
.reveal.revealed:nth-child(6) { transition-delay: 0.3s; }

/* ---------- Partner marquee ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* ---------- Achievements ticker ---------- */
/* Same marquee mechanics, slower so the numbers stay readable. */
#stats-track {
  animation-duration: 52s;
  padding: 0.75rem 0;
}

/* ---------- Industries marquee ---------- */
#industries-track { animation-duration: 34s; }
.ind-card {
  flex: 0 0 auto;
  width: 122px;
  padding: 1rem 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(226 232 240 / 0.7);
  background: #fff;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ind-card:hover {
  transform: translateY(-3px);
  border-color: rgb(191 219 254);
  box-shadow: 0 10px 22px rgb(37 99 235 / 0.1);
}
.ind-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  border-radius: 0.5rem;
  background: rgb(239 246 255);
  color: rgb(37 99 235);
}
.ind-label {
  margin-top: 0.625rem;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: rgb(15 32 68);
}

/* ---------- Testimonial portrait crossfade ---------- */
/* Masked (not overlaid) so the photo dissolves into whatever the card
   gradient happens to be at that point — no seam. */
.tst-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.6s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
}
@media (min-width: 1024px) {
  .tst-photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48%);
            mask-image: linear-gradient(to right, transparent 0, #000 48%);
  }
}
.tst-photo.is-active { opacity: 1; }

/* ---------- Horizontal card scroller (featured products) ---------- */
.hscroll {
  display: flex;
  gap: 0.875rem;
  min-width: 0;          /* flex item must be allowed to shrink below content */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * {
  flex: 0 0 calc((100% - 0.875rem) / 2);
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .hscroll > * { flex-basis: calc((100% - 1.75rem) / 3); }
}

.hscroll-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  border-radius: 9999px;
  border: 1px solid rgb(226 232 240);
  background: #fff;
  color: rgb(30 41 59);
  box-shadow: 0 4px 14px rgb(15 23 42 / 0.1);
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.hscroll-arrow:hover {
  color: rgb(37 99 235);
  border-color: rgb(191 219 254);
}
.hscroll-arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}

.hscroll-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgb(203 213 225);
  transition: width 0.3s ease, background-color 0.3s ease;
}
.hscroll-dot.is-active {
  width: 22px;
  background: rgb(37 99 235);
}

/* ---------- Testimonial slider ---------- */
#testimonial-track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Floating WhatsApp ---------- */
@keyframes float-pulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.wa-float {
  animation: float-pulse 2.8s ease-in-out infinite;
}
.wa-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25d366;
  opacity: 0.35;
  z-index: -1;
  animation: wa-ring 2.2s ease-out infinite;
}
@keyframes wa-ring {
  from { transform: scale(1); opacity: 0.35; }
  to   { transform: scale(1.65); opacity: 0; }
}

/* ---------- Hero ---------- */
/* Soft fade instead of a hard clip: the photo dissolves into the page on every
   edge — heavily on the left/bottom, just enough on top/right to kill the hard
   border. Two mask layers intersected; Safari needs the -webkit- pair. */
.hero-media {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 93%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 8%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 93%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 8%, #000 74%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Stacked slides — crossfade only, no zoom, so the frame is never cropped. */
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.hero-slide.is-active {
  opacity: 1;
}
.no-js .hero-slide:first-child,
.hero-slide:only-child {
  opacity: 1;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 9999px;
  background: rgb(203 213 225);
  transition: width 0.35s ease, background-color 0.35s ease;
}
.hero-dot:hover {
  background: rgb(148 163 184);
}
.hero-dot.is-active {
  width: 28px;
  background: rgb(37 99 235);
}

/* Typing caret for the rotating headline */
.hero-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  border-radius: 2px;
  background: currentColor;
  color: rgb(37 99 235);
  animation: caret-blink 1.05s steps(1, end) infinite;
}
@keyframes caret-blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ECG trace — seamless scroll. Track holds two identical tiles; shifting by
   exactly one tile (-50% of the track) loops without a visible seam. */
.ecg-track {
  display: flex;
  width: max-content;
  animation: ecg-scroll 9s linear infinite;
}
@keyframes ecg-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ECG trace — bright segment travelling along the path.
   Paths carry pathLength="1000" so the dash maths is geometry-independent. */
.ecg-pulse {
  stroke-dasharray: 86 914;
  animation: ecg-trace 2.8s linear infinite;
}
@keyframes ecg-trace {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Cardiac double-thump (lub-dub), not a plain scale pulse. */
@keyframes heartbeat {
  0%, 62%, 100% { transform: scale(1); }
  10%           { transform: scale(1.3); }
  22%           { transform: scale(1); }
  34%           { transform: scale(1.16); }
}
.heartbeat {
  animation: heartbeat 1.6s ease-in-out infinite;
  transform-origin: center;
}

/* signature-style text (founder) */
.font-signature {
  font-family: "Segoe Script", "Brush Script MT", cursive;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; flex-wrap: wrap; }
  #stats-track { width: 100%; }
  #stats-track .stat-dup { display: none; }
  #stats-track > div { flex-wrap: wrap; justify-content: center; width: 100%; }
  #industries-track { width: 100%; }
  #industries-track .marquee-dup { display: none; }
  #industries-track > div { flex-wrap: wrap; width: 100%; }
  .hscroll { scroll-behavior: auto; }
  .wa-float, .wa-float::after { animation: none; }
  .ecg-track, .heartbeat { animation: none; }
  .ecg-pulse { animation: none; stroke-dasharray: none; }
  .hero-caret { animation: none; opacity: 0; }
}