/* ==========================================================================
   Dr. Ninad Mahale – Animations Stylesheet (animations.css)
   Keyframes + helper classes for floating, fade, slide & reveal effects.
   Works alongside GSAP and AOS (which handle scroll-triggered reveals).

   NOTE: This file only ADDS motion & a custom cursor. It never alters any
   page content, layout or text — all new elements are decorative / injected
   at runtime and marked aria-hidden.
   ========================================================================== */

/* Floating pediatric elements (hero shapes & blobs) ----------------------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
}
@keyframes float-y-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
}
@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}

.hero-shapes i:nth-child(1) { animation: float-y 6s ease-in-out infinite; }
.hero-shapes i:nth-child(2) { animation: float-y-slow 7s ease-in-out infinite; }
.hero-shapes i:nth-child(3) { animation: float-x 8s ease-in-out infinite; }
.hero-shapes i:nth-child(4) { animation: float-y 5.5s ease-in-out infinite; }
.hero-shapes i:nth-child(5) { animation: float-y-slow 9s ease-in-out infinite; }

.hero-blob.one { animation: float-y 8s ease-in-out infinite; }
.hero-blob.two { animation: float-x 10s ease-in-out infinite; }

/* Floating info cards on hero image --------------------------------------- */
.fc-1 { animation: float-y 5s ease-in-out infinite; }
.fc-2 { animation: float-y 6s ease-in-out infinite 0.6s; }
.fc-3 { animation: float-y 7s ease-in-out infinite 1.2s; }

/* Subtle hero image breathing --------------------------------------------- */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.hero-img-wrap img { animation: breathe 9s ease-in-out infinite; }

/* Fade In ----------------------------------------------------------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 1s ease forwards; }

/* Slide Up ---------------------------------------------------------------- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp 0.8s ease forwards; }

/* Slide In Left / Right --------------------------------------------------- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
.slide-in-left { animation: slideInLeft 0.9s ease forwards; }
.slide-in-right { animation: slideInRight 0.9s ease forwards; }

/* Zoom In ----------------------------------------------------------------- */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}
.zoom-in { animation: zoomIn 0.8s ease forwards; }

/* Staggered hero entrance (used by GSAP fallback / pure CSS) --------------- */
.hero [data-anim] { opacity: 0; }
.hero.loaded [data-anim] { animation: slideUp 0.9s ease forwards; }
.hero.loaded [data-anim="1"] { animation-delay: 0.1s; }
.hero.loaded [data-anim="2"] { animation-delay: 0.25s; }
.hero.loaded [data-anim="3"] { animation-delay: 0.4s; }
.hero.loaded [data-anim="4"] { animation-delay: 0.55s; }
.hero.loaded [data-anim="5"] { animation-delay: 0.7s; }

/* Gradient text shimmer ---------------------------------------------------- */
@keyframes shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.text-gradient {
  background-size: 200% auto;
  animation: shimmer 5s linear infinite alternate;
}

/* Counter pop on activation ----------------------------------------------- */
@keyframes pop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.stat-number.counting { animation: pop 0.6s ease; }

/* Card hover lift glow ----------------------------------------------------- */
.feature-card, .service-card, .contact-card { will-change: transform; }

/* Underline grow link ------------------------------------------------------ */
@keyframes arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}
.service-link:hover i { animation: arrow-bounce 0.7s ease infinite; }

/* AOS-like manual reveal fallback (in case AOS fails to load) -------------- */
[data-aos]:not(.aos-animate) {
  /* AOS itself controls opacity; this is only a safety net */
}

.native-aos [data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.native-aos [data-aos="fade-left"] { transform: translateX(28px); }
.native-aos [data-aos="fade-right"] { transform: translateX(-28px); }
.native-aos [data-aos="zoom-in"] { transform: scale(0.94); }
.native-aos [data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* Page transition fade overlay -------------------------------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--grad-primary);
  z-index: 9998;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.page-transition.active {
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Reveal on scroll classes toggled by IntersectionObserver in animations.js */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   ✦ PREMIUM ADD-ON LAYER (animation + doctor-themed cursor) ✦
   Everything below is purely additive — injected/decorative only.
   ========================================================================== */

/* --- GSAP scroll-reveal helper (set initial state, JS animates) ---------- */
.gsap-reveal { opacity: 0; }

/* --- Scroll progress indicator (injected bar at very top) ----------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  z-index: 2147483002;
  pointer-events: none;
  will-change: width;
}

/* --- Floating medical-themed decorative icons (injected per section) ------ */
.med-floaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.med-floaters i {
  position: absolute;
  color: rgba(37, 99, 235, 0.06);
  font-size: 2rem;
}
.med-floaters i:nth-child(1) { top: 12%; left: 6%;  animation: float-y 7s ease-in-out infinite; }
.med-floaters i:nth-child(2) { top: 64%; left: 12%; animation: float-y-slow 9s ease-in-out infinite; font-size: 1.5rem; }
.med-floaters i:nth-child(3) { top: 22%; right: 8%; animation: float-x 8s ease-in-out infinite; font-size: 2.4rem; }
.med-floaters i:nth-child(4) { bottom: 14%; right: 14%; animation: float-y 6s ease-in-out infinite; }
/* keep real content above floaters */
section > .container { position: relative; z-index: 1; }

/* --- Heartbeat pulse for healthcare-related elements ---------------------- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  70% { transform: scale(1); }
}
.heartbeat-hover:hover .feature-icon,
.heartbeat-hover:hover .c-icon,
.heartbeat-hover:hover .service-icon { animation: heartbeat 1.3s ease-in-out; }

/* --- Pulse ring on doctor images on hover -------------------------------- */
@keyframes img-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.35); }
  70% { box-shadow: 0 0 0 22px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.about-img-wrap:hover img,
.doctor-intro img:hover { animation: img-pulse-ring 1.4s ease-out; }

/* --- 3D tilt container (JS sets --rx / --ry) ----------------------------- */
.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}

/* --- Magnetic button + ripple ------------------------------------------- */
.btn.magnetic { transition: transform 0.2s ease, box-shadow var(--transition); }
.ripple-ink {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
  z-index: 0;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* --- Floating quote icon in testimonials --------------------------------- */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card .quote-float {
  position: absolute; top: 14px; right: 18px;
  font-size: 2.6rem; color: rgba(37, 99, 235, 0.08);
  animation: float-y 5s ease-in-out infinite; pointer-events: none;
}

/* --- Footer wave (injected) ---------------------------------------------- */
.site-footer { position: relative; }
.footer-wave {
  position: absolute; top: -1px; left: 0; width: 100%;
  line-height: 0; transform: translateY(-99%); pointer-events: none;
}
.footer-wave svg { display: block; width: 100%; height: 64px; }

/* --- Premium preloader heartbeat logo (injected) ------------------------- */
@keyframes logo-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.preloader-inner { display: grid; place-items: center; }
.preloader-logo {
  width: 60px; height: 60px; border-radius: 18px;
  background: var(--grad-primary);
  display: grid; place-items: center; color: #fff; font-size: 1.6rem;
  margin-bottom: 16px; box-shadow: var(--shadow-md);
  animation: logo-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards, heartbeat 1.4s ease-in-out 0.6s infinite;
}

/* ==========================================================================
   ✦ DOCTOR-THEMED CUSTOM CURSOR ✦  (desktop / fine-pointer only)
   A medical-cross core with a smooth trailing glow ring + stethoscope dot.
   ========================================================================== */
.med-cursor, .med-cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 2147483003;
  transform: translate(-50%, -50%);
  will-change: transform, left, top;
}

/* Core medical cross (+) built from two bars */
.med-cursor { width: 22px; height: 22px; }
.med-cursor::before,
.med-cursor::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--primary);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.med-cursor::before { width: 3px; height: 18px; transform: translate(-50%, -50%); }  /* vertical */
.med-cursor::after  { width: 18px; height: 3px; transform: translate(-50%, -50%); }  /* horizontal */

/* Trailing glow ring (stethoscope-inspired) */
.med-cursor-ring {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(37, 99, 235, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(20, 184, 166, 0.25), inset 0 0 10px rgba(37,99,235,0.08);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

/* Hover state on interactive elements — scale up + colour shift */
body.cursor-hover .med-cursor-ring {
  width: 58px; height: 58px;
  border-color: var(--secondary);
  background: rgba(20, 184, 166, 0.08);
}
body.cursor-hover .med-cursor { transform: translate(-50%, -50%) rotate(45deg); }
body.cursor-hover .med-cursor::before,
body.cursor-hover .med-cursor::after { background: var(--secondary); box-shadow: 0 0 12px rgba(20,184,166,0.8); }

/* Click ripple from the cursor */
body.cursor-down .med-cursor-ring { width: 30px; height: 30px; border-color: var(--accent); }

/* Hide the native cursor only when the custom one is active */
body.custom-cursor-on { cursor: none; }
body.custom-cursor-on a,
body.custom-cursor-on button,
body.custom-cursor-on .btn,
body.custom-cursor-on .nav-link,
body.custom-cursor-on .service-card,
body.custom-cursor-on .feature-card { cursor: none; }
/* …but keep a usable caret in form fields */
body.custom-cursor-on input,
body.custom-cursor-on textarea,
body.custom-cursor-on select,
body.custom-cursor-on [contenteditable] { cursor: auto; }

/* ==========================================================================
   Accessibility & device guards
   ========================================================================== */
/* No custom cursor / heavy motion on touch devices */
@media (hover: none), (pointer: coarse) {
  .med-cursor, .med-cursor-ring { display: none !important; }
  body.custom-cursor-on, body.custom-cursor-on * { cursor: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .med-cursor, .med-cursor-ring, .scroll-progress, .med-floaters { display: none !important; }
  body.custom-cursor-on, body.custom-cursor-on * { cursor: auto !important; }
  .gsap-reveal { opacity: 1 !important; }
}