/* ============================================================
   Anika Children's Clinic — design system
   Palette (Color Hunt inspired): #355C7D #6C8BA4 #F8B195 #F67280 #F9F7F3
   ============================================================ */

:root {
  --ink: #355C7D;
  --ink-deep: #274763;
  --mist: #6C8BA4;
  --peach: #F8B195;
  --coral: #F67280;
  --cream: #F9F7F3;
  --white: #ffffff;
  --ink-soft: rgba(53, 92, 125, 0.08);
  --peach-soft: rgba(248, 177, 149, 0.25);
  --coral-soft: rgba(246, 114, 128, 0.14);
  --mist-soft: rgba(108, 139, 164, 0.14);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  background-color: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Fredoka", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

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

/* Focus visibility for accessibility */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--peach), var(--coral));
  border-radius: 999px;
  border: 3px solid var(--cream);
}

/* ---- Page transition ---- */
.page-wrap { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.page-wrap.is-ready { opacity: 1; transform: none; }
body.is-leaving .page-wrap { opacity: 0; transform: translateY(-8px); }

.transition-curtain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(135deg, var(--ink), var(--coral));
  transform: translateY(101%); transition: transform .45s cubic-bezier(.76,0,.24,1);
}
body.is-leaving .transition-curtain { transform: translateY(0); }

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease var(--d, 0s), transform .7s ease var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-zoom { transform: scale(.94); }
.reveal-left.revealed, .reveal-right.revealed, .reveal-zoom.revealed { transform: none; }

/* ---- Organic blobs ---- */
.blob {
  border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%;
  animation: blobMorph 14s ease-in-out infinite;
}
.blob-2 { border-radius: 40% 60% 63% 37% / 55% 42% 58% 45%; animation-duration: 18s; }
.blob-3 { border-radius: 62% 38% 42% 58% / 40% 58% 42% 60%; animation-duration: 16s; }

@keyframes blobMorph {
  0%, 100% { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
  33% { border-radius: 42% 58% 62% 38% / 58% 42% 55% 45%; }
  66% { border-radius: 55% 45% 40% 60% / 45% 60% 40% 55%; }
}

/* ---- Arch (Indian-arch inspired) image frames ---- */
.arch-frame {
  border-radius: 999px 999px 30px 30px;
  border: 8px solid #fff;
  box-shadow: 0 24px 60px -18px rgba(53, 92, 125, 0.35);
  overflow: hidden;
}
.arch-frame-soft { border-radius: 999px 999px 30px 30px; overflow: hidden; }

/* ---- Pill elements ---- */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem 1rem; border-radius: 999px;
  background: var(--peach-soft); color: var(--ink);
  border: 1px solid rgba(246, 114, 128, .25);
  font-weight: 600; font-size: .8rem;
}
.pill-coral { background: var(--coral); color: #fff; border-color: transparent; }
.pill-ink { background: var(--ink); color: #fff; border-color: transparent; }

/* ---- Floating shapes ---- */
.float-shape {
  position: absolute; pointer-events: none; user-select: none;
  animation: floatY 7s ease-in-out infinite;
}
.float-shape-2 { animation-delay: -2.5s; animation-duration: 9s; }
.float-shape-3 { animation-delay: -4s; animation-duration: 8s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(14px, -18px) rotate(10deg); }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(.7); }
  70% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.pop-in { animation: popIn .8s ease both; }

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
.wiggle { animation: wiggle 3s ease-in-out infinite; }

@keyframes pulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 114, 128, .45); }
  50% { box-shadow: 0 0 0 14px rgba(246, 114, 128, 0); }
}
.pulse-soft { animation: pulseSoft 2.6s ease-in-out infinite; }

/* ---- Card hover movement ---- */
.card-lift {
  transition: transform .35s cubic-bezier(.2,.7,.3,1.2), box-shadow .35s ease;
}
.card-lift:hover {
  transform: translateY(-10px) rotate(-.5deg);
  box-shadow: 0 28px 50px -22px rgba(53, 92, 125, .4);
}
.card-lift:active { transform: translateY(-4px); }

/* ---- Announcement bar ---- */
.announcement-bar {
  background: linear-gradient(90deg, var(--ink), #3f6a91 55%, var(--coral));
}
.announcement-ticker {
  animation: ticker 22s linear infinite;
}
@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ---- Sticky nav ---- */
.site-nav {
  transition: box-shadow .3s ease, backdrop-filter .3s ease, background .3s ease;
}
.site-nav.scrolled {
  box-shadow: 0 12px 34px -18px rgba(53, 92, 125, .35);
  background: rgba(249, 247, 243, .92);
  backdrop-filter: blur(10px);
}

.nav-link {
  position: relative;
  transition: color .25s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 3px; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--peach), var(--coral));
  transition: width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---- Buttons ---- */
.btn-coral {
  background: linear-gradient(135deg, var(--coral), #f45d74);
  color: #fff; border-radius: 999px; font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  box-shadow: 0 14px 28px -12px rgba(246, 114, 128, .7);
}
.btn-coral:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 20px 34px -12px rgba(246, 114, 128, .8); }
.btn-coral:active { transform: translateY(-1px); }

.btn-ink {
  background: var(--ink); color: #fff; border-radius: 999px; font-weight: 700;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 14px 28px -14px rgba(53, 92, 125, .6);
}
.btn-ink:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -14px rgba(53, 92, 125, .75); }

.btn-ghost {
  background: #fff; color: var(--ink); border: 2px solid rgba(53, 92, 125, .18);
  border-radius: 999px; font-weight: 700;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--coral); background: var(--cream); }

/* ---- FAQ accordion ---- */
.faq-item {
  transition: box-shadow .3s ease;
}
.faq-answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-answer > div { overflow: hidden; min-height: 0; }
.faq-toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq-toggle span { transition: transform .35s ease; }
.faq-item.open .faq-toggle span { transform: rotate(45deg); }

/* ---- Back to top ---- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 14px 30px -10px rgba(53, 92, 125, .6);
}
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---- Marquee of badges ---- */
.marquee-track {
  animation: marquee 30s linear infinite;
  width: max-content;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Testimonial quote marks ---- */
.quote-mark::before {
  content: "\201C";
  font-family: "Fredoka", sans-serif;
}

/* ---- Map iframe polish ---- */
.map-frame { filter: saturate(.92) contrast(1.02); }

/* ---- Progress bars for growth ---- */
.progress-fill {
  transition: width 1.4s cubic-bezier(.4,0,.2,1);
  width: 0;
}

/* ---- Text gradient ---- */
.text-grad {
  background: linear-gradient(90deg, var(--ink), var(--coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Grain / soft background pattern ---- */
.dot-grid {
  background-image: radial-gradient(rgba(108,139,164,.22) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .blob, .float-shape, .marquee-track { animation: none !important; }
}

/* ---- Floating WhatsApp button ---- */
.whatsapp-float {
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 999px;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .65);
  transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 18px 38px -10px rgba(37, 211, 102, .75); }
.whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 640px) {
  .whatsapp-float { width: 52px; height: 52px; left: 16px; bottom: 16px; }
}