/* ==========================================================================
   Vishwaratna Hospital — home page showcase effects.
   Loaded on index.html only, after css/vh-3d.css. Pairs with js/vh-home-fx.js.
   Every animated piece here is decorative and stops under reduced motion.
   ========================================================================== */

/* --- Scroll progress ---------------------------------------------------- */

.vh-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  transform-origin: 0 50%;
  transform: scaleX(var(--vh-progress, 0));
  background: linear-gradient(90deg, #5FD8D4, var(--accent-color) 50%, #E14B4B);
  box-shadow: 0 0 12px rgba(0, 163, 159, .7);
  pointer-events: none;
}

/* --- Hero: heartbeat monitor line --------------------------------------- */
/* Sits between the photo overlay (::before, z 1) and the copy (z 2). */

.vh-ecg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  height: 110px;
  z-index: 1;
  pointer-events: none;
}
.vh-ecg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vh-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vh-ecg .vh-ecg-base { stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
/* A short bright segment races along the trace, like a monitor sweep. */
.vh-ecg .vh-ecg-pulse {
  stroke: #7FF0EC;
  stroke-width: 3;
  stroke-dasharray: 90 910;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 6px #3FD3CE) drop-shadow(0 0 14px rgba(63, 211, 206, .8));
  animation: vh-ecg-sweep 4.2s linear infinite;
}
.vh-ecg .vh-ecg-pulse.vh-ecg-pulse-2 { animation-delay: -2.1s; opacity: .55; }
@keyframes vh-ecg-sweep { to { stroke-dashoffset: 0; } }

/* --- Hero: drifting medical crosses ------------------------------------- */

.vh-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.vh-particle {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  opacity: 0;
  filter: blur(var(--b, 0px));
  animation: vh-rise var(--d) linear var(--delay) infinite;
}
/* A plus sign drawn from two bars, so it needs no icon font. */
.vh-particle::before,
.vh-particle::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(127, 240, 236, .7));
  box-shadow: 0 0 10px rgba(63, 211, 206, .6);
}
.vh-particle::before { left: 36%; right: 36%; top: 0; bottom: 0; }
.vh-particle::after  { top: 36%; bottom: 36%; left: 0; right: 0; }
@keyframes vh-rise {
  0%   { transform: translateY(0) rotate(0deg);        opacity: 0; }
  12%  { opacity: var(--o, .5); }
  85%  { opacity: var(--o, .5); }
  100% { transform: translateY(-110vh) rotate(180deg); opacity: 0; }
}

/* --- Facilities ribbons ------------------------------------------------- */
/* Two bands crossing at a shallow angle, scrolling in opposite directions.
   The wrapper clips the rotated ends so the page never scrolls sideways. */

.vh-ribbons {
  position: relative;
  z-index: 5;
  overflow: hidden;
  margin-top: -46px;
  padding: 34px 0 30px;
}
.vh-ribbon {
  position: relative;
  width: 110%;
  left: -5%;
  display: flex;
  overflow: hidden;
  padding: 18px 0;
  white-space: nowrap;
}
.vh-ribbon-front {
  transform: rotate(-2deg);
  background: linear-gradient(180deg, #14BDB8 0%, var(--accent-color) 55%, #008E8A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #00625F, 0 22px 40px -14px rgba(0, 98, 95, .7);
}
.vh-ribbon-back {
  position: absolute;
  top: 36px;
  transform: rotate(2deg);
  background: linear-gradient(180deg, #1C5288, var(--primary-color));
  box-shadow: 0 18px 34px -16px rgba(9, 34, 56, .8);
  opacity: .96;
}
.vh-ribbon-track {
  display: flex;
  flex: none;
  gap: 0;
  animation: vh-marquee 38s linear infinite;
}
.vh-ribbon-set { display: flex; flex: none; }
.vh-ribbon-back .vh-ribbon-track { animation-direction: reverse; animation-duration: 46s; }
.vh-ribbon:hover .vh-ribbon-track { animation-play-state: paused; }
.vh-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.vh-ribbon-back .vh-ribbon-item { font-size: 18px; color: rgba(255, 255, 255, .85); }
.vh-ribbon-item::after {
  content: '';
  width: 14px;
  height: 14px;
  flex: none;
  /* The same plus sign as the hero particles, as a separator. */
  background:
    linear-gradient(#fff, #fff) center / 100% 30% no-repeat,
    linear-gradient(#fff, #fff) center / 30% 100% no-repeat;
  opacity: .8;
}
@keyframes vh-marquee { to { transform: translateX(-50%); } }

@media only screen and (max-width: 767px) {
  .vh-ribbons { margin-top: -30px; padding: 22px 0 18px; }
  .vh-ribbon { padding: 12px 0; }
  .vh-ribbon-back { top: 24px; }
  .vh-ribbon-item { font-size: 17px; gap: 16px; padding-right: 16px; }
  .vh-ribbon-back .vh-ribbon-item { font-size: 15px; }
}

/* --- Doctor cards: a light travelling round the border ------------------ */

@property --vh-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.vh-doctors .vh-convenience-item::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 2px;
  background: conic-gradient(from var(--vh-angle),
      transparent 0deg 200deg,
      rgba(63, 211, 206, .2) 250deg,
      #3FD3CE 320deg,
      #123C68 350deg,
      transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: vh-orbit 5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.vh-doctors .col-lg-6:nth-child(2) .vh-convenience-item::before { animation-delay: -2.5s; }
@keyframes vh-orbit { to { --vh-angle: 360deg; } }

/* --- Spotlight on the dark sections ------------------------------------- */

.vh-spot-host { position: relative; overflow: hidden; }
.vh-spot-host > .container { position: relative; z-index: 1; }
.vh-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(520px circle at var(--vh-sx, 50%) var(--vh-sy, 50%),
      rgba(63, 211, 206, .20), rgba(63, 211, 206, .06) 40%, transparent 70%);
}
.vh-spot-host.vh-spot-on .vh-spotlight { opacity: 1; }

/* --- Statistics: numbers glow once they finish counting ----------------- */

.fact-item.vh-counted .fact-item-counter-content h2 { animation: vh-glow 1.4s ease-out 1; }
@keyframes vh-glow {
  0%   { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
  40%  { filter: drop-shadow(0 0 18px rgba(127, 240, 236, .95)) drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
  100% { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
}

/* --- Motion preferences ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vh-particles { display: none; }
  .vh-ecg .vh-ecg-pulse { animation: none; stroke-dasharray: none; opacity: .5; }
  .vh-ecg .vh-ecg-pulse-2 { display: none; }
  .vh-ribbon-track { animation: none; }
  .vh-doctors .vh-convenience-item::before { animation: none; }
}