/* Aram Clinic — custom CSS extensions on top of Tailwind CDN */

:root {
  --brand: #5BA82C;
  --brand-dark: #1F4A4A;
  --brand-light: #8BC53F;
  --brand-cream: #FAF8F1;
  --ink: #1A1A1A;
  --muted: #5B6770;
}

html { scroll-behavior: smooth; }
body { font-family: 'Manrope', 'Noto Sans Tamil', system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
html[lang="ta"] body { font-family: 'Hind Madurai', 'Anek Tamil', 'Manrope', system-ui, sans-serif; }

/* Tamil glyphs include tall vowel marks (ே, ை, ௌ, ெ) and descenders (ு, ூ, ௌ).
   Latin-tight line-heights cause stack overlap — force generous leading.
   Heavier weights (font-extrabold) + larger sizes need even more leading. */
html[lang="ta"] { font-feature-settings: "kern" 1, "liga" 1; }
html[lang="ta"] h1 { line-height: 1.35; }
html[lang="ta"] h2 { line-height: 1.4; }
html[lang="ta"] h3,
html[lang="ta"] h4 { line-height: 1.4; }
html[lang="ta"] p,
html[lang="ta"] li,
html[lang="ta"] address,
html[lang="ta"] blockquote { line-height: 1.7; }
/* Only force-loosen Latin-tight utilities; respect explicit leading-[1.xx] from author */
html[lang="ta"] .leading-tight,
html[lang="ta"] .leading-snug,
html[lang="ta"] .leading-none { line-height: 1.35 !important; }
/* Loosen letter-spacing slightly — Tamil glyphs hug too tight at -tracking */
html[lang="ta"] .tracking-tight { letter-spacing: 0 !important; }

::selection { background: var(--brand-light); color: #fff; }

/* Subtle leaf pattern bg for hero */
.hero-bg {
  background:
    radial-gradient(60% 80% at 10% 10%, rgba(139,197,63,0.18) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 0%, rgba(31,74,74,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #FAF8F1 0%, #fff 100%);
}

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Active nav state (set via JS by reading [data-nav]) */
.nav-active { color: var(--brand) !important; position: relative; }
.nav-active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -22px;
  height: 2px; background: var(--brand);
  border-radius: 2px;
}

/* Lite YouTube facade */
.lite-yt {
  position: relative; cursor: pointer; aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  border-radius: 1rem; overflow: hidden;
  background-color: #000;
}
.lite-yt::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.45) 100%);
}
.lite-yt .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
}
.lite-yt:hover .play { transform: translate(-50%,-50%) scale(1.05); background: #fff; }
.lite-yt .play svg { color: #FF0000; }
.lite-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Card hover lift */
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -16px rgba(31,74,74,0.25); }

/* ============ 3D motion (homepage) ============
   GPU-composited transforms/opacity only — safe on low-end Android.
   Every effect is disabled under prefers-reduced-motion. */

/* Hero mosaic: staggered 3D tilt-in when the .reveal parent enters view */
.tilt-stage { perspective: 1200px; }
.mosaic-3d { transform-style: preserve-3d; }
@media (prefers-reduced-motion: no-preference) {
  .reveal.in .mosaic-3d > * { animation: tileIn .7s cubic-bezier(.22, 1, .36, 1) backwards; }
  .reveal.in .mosaic-3d > *:nth-child(1) { animation-delay: .05s; }
  .reveal.in .mosaic-3d > *:nth-child(2) { animation-delay: .12s; }
  .reveal.in .mosaic-3d > *:nth-child(3) { animation-delay: .19s; }
  .reveal.in .mosaic-3d > *:nth-child(4) { animation-delay: .26s; }
  .reveal.in .mosaic-3d > *:nth-child(5) { animation-delay: .33s; }
}
@keyframes tileIn {
  from { opacity: 0; transform: rotateX(10deg) translateZ(-40px) translateY(14px); }
  to   { opacity: 1; transform: rotateX(0) translateZ(0) translateY(0); }
}

/* Doctor cards: gentle 3D lift (keeps CTAs visible — no flip) */
.tilt-stage .card-3d { transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt-stage .card-3d:hover {
    transform: translateY(-5px) rotateX(1.5deg) rotateY(-1.5deg) translateZ(8px);
    box-shadow: 0 22px 44px -18px rgba(31,74,74,0.32);
  }
}

/* Hero glow blob: scroll-driven drift — progressive enhancement, static elsewhere */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-blob { animation: blobDrift linear; animation-timeline: scroll(root); }
    @keyframes blobDrift {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(80px) scale(1.08); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mosaic-3d > *, .card-3d, .hero-blob { animation: none !important; transform: none !important; transition: none !important; }
}

/* Service icon chip */
.icon-chip { background: linear-gradient(135deg, rgba(91,168,44,0.12), rgba(31,74,74,0.08)); color: var(--brand-dark); }

/* Forms */
.field {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 0.75rem 0.9rem; background: #fff; font-size: 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(91,168,44,0.18); }
.field-error { border-color: #dc2626; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  z-index: 60; padding: 1rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 95vw; max-height: 90vh; border-radius: 0.5rem; }
.lightbox button { position: absolute; top: 1rem; right: 1rem; color: #fff; background: rgba(255,255,255,0.1); border-radius: 9999px; height: 44px; width: 44px; }

/* Marquee strip */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 3rem; animation: marquee 25s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Print-friendly */
@media print {
  header, footer, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
}