/* ============================================================
   Nageeye Hospital Shared Design System Stylesheet
   Ported 1:1 from the source design (colors, type, motion, spacing)
   Loaded on every page after the Tailwind CDN script + tailwind-config.js
   ============================================================ */

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  background: #FAFBFC;
  color: #1F2937;
  font-family: 'Inter', sans-serif;
}
::selection { background: #1DBF73; color: #fff; }

.eyebrow {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal-left.in { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1); }
.reveal-right.in { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* stagger children */
.stagger.in > * { }

/* ---------- glass ---------- */
.glass {
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.5);
}
.glass-dark {
  background: rgba(11,31,26,0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---------- soft card shadow ---------- */
.card-shadow { box-shadow: 0 2px 8px rgba(15,40,30,0.04), 0 20px 40px -18px rgba(15,40,30,0.14); }
.card-shadow-lg { box-shadow: 0 8px 24px rgba(15,40,30,0.06), 0 40px 80px -30px rgba(15,40,30,0.22); }
.card-hover { transition: transform .5s cubic-bezier(.16,.84,.44,1), box-shadow .5s cubic-bezier(.16,.84,.44,1); }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 8px 30px rgba(15,40,30,0.08), 0 50px 90px -30px rgba(29,191,115,0.28); }

/* ---------- scan line signature motif ---------- */
.scan-wrap { position: relative; overflow: hidden; }
.scan-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(29,191,115,0.9), transparent);
  filter: drop-shadow(0 0 6px rgba(29,191,115,0.6));
  animation: scanmove 5.5s ease-in-out infinite;
}
@keyframes scanmove {
  0% { top: 6%; opacity: 0; }
  10% { opacity: 1; }
  50% { top: 92%; opacity: 1;}
  60% { opacity: 0; }
  100% { top: 92%; opacity: 0; }
}

/* ---------- blobs ---------- */
.blob {
  border-radius: 44% 56% 62% 38% / 45% 40% 60% 55%;
}
@keyframes blobmorph {
  0%,100% { border-radius: 44% 56% 62% 38% / 45% 40% 60% 55%; }
  50% { border-radius: 56% 44% 40% 60% / 55% 62% 38% 45%; }
}
.blob-anim { animation: blobmorph 10s ease-in-out infinite; }

@keyframes floaty { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } }
.float-1 { animation: floaty 5s ease-in-out infinite; }
.float-2 { animation: floaty 6.5s ease-in-out infinite .8s; }
.float-3 { animation: floaty 5.8s ease-in-out infinite 1.6s; }

/* ---------- gradient text ---------- */
.grad-text {
  background: linear-gradient(100deg, #0F766E 0%, #1DBF73 60%, #4ED393 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: #1DBF73; transition: width .35s cubic-bezier(.16,.84,.44,1);
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* buttons */
.btn-primary {
  background: linear-gradient(135deg, #1DBF73, #149a5c);
  box-shadow: 0 10px 24px -8px rgba(29,191,115,0.55);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s;
}
.btn-primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 16px 32px -10px rgba(29,191,115,0.65); }
.btn-ghost { transition: all .35s cubic-bezier(.16,.84,.44,1); }
.btn-ghost:hover { background: #0B1F1A; color: #fff; }

/* skeleton loading */
.skel { position: relative; overflow: hidden; background: #EAF6EF; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* counter */
.counter { font-variant-numeric: tabular-nums; }

/* feathered edges for marquees */
.marquee-fade {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* auto-swiping doctor marquee */
.doctor-track { animation: doctorScroll linear infinite; }
.doctor-track:hover { animation-play-state: paused; }
@keyframes doctorScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* before/after slider */
.ba-frame { position: relative; overflow: hidden; touch-action: pan-y; cursor: ew-resize; }
.ba-after { position: absolute; inset: 0; overflow: hidden; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; width: 2px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.25);
}
.ba-handle .knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 999px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(15,40,30,0.25);
}

/* testimonial slider */
.t-track { transition: transform .6s cubic-bezier(.16,.84,.44,1); }

/* accordion */
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.16,.84,.44,1); }
.acc-chevron { transition: transform .4s cubic-bezier(.16,.84,.44,1); }

/* mobile menu */
.mobile-menu { transition: max-height .5s cubic-bezier(.16,.84,.44,1), opacity .4s; }

/* focus states for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #0F766E; outline-offset: 3px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.container-xl { max-width: 1440px; }

.dot-grid {
  background-image: radial-gradient(rgba(15,118,110,0.18) 1.4px, transparent 1.4px);
  background-size: 18px 18px;
}

/* ---------- service detail page additions ---------- */
.breadcrumb a { transition: color .3s; }
.breadcrumb a:hover { color: #1DBF73; }

.step-num {
  font-weight: 700;
}

.hero-blob-shape {
  border-radius: 42% 58% 65% 35% / 40% 45% 55% 60%;
}

/* ---------- hide scrollbar on horizontal scroll strips (timeline, marquees) ---------- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- before/after gallery lightbox ---------- */
#ba-lightbox { transition: opacity .3s ease; }
.ba-gallery-card { -webkit-tap-highlight-color: transparent; }