/* ==========================================================================
   AP HOSPITAL — GLOBAL ANIMATION SYSTEM
   Premium healthcare animation library for all non-home pages
   Uses only CSS transforms + opacity for GPU acceleration
   Full prefers-reduced-motion support throughout
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES — ANIMATION TOKENS
   -------------------------------------------------------------------------- */
:root {
  --anim-fast:    0.25s;
  --anim-base:    0.45s;
  --anim-slow:    0.7s;
  --anim-slower:  1.0s;
  --anim-ease:    cubic-bezier(0.25, 0.8, 0.25, 1);
  --anim-spring:  cubic-bezier(0.25, 1.0, 0.5, 1);
  --anim-bounce:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --anim-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   2. REUSABLE REVEAL CLASSES
   Applied by JavaScript IntersectionObserver — state changes on .is-visible
   -------------------------------------------------------------------------- */

/* Base: fade up (default) */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--anim-slow) var(--anim-spring),
    transform var(--anim-slow) var(--anim-spring);
  will-change: opacity, transform;
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity var(--anim-slow) var(--anim-spring),
    transform var(--anim-slow) var(--anim-spring);
  will-change: opacity, transform;
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity var(--anim-slow) var(--anim-spring),
    transform var(--anim-slow) var(--anim-spring);
  will-change: opacity, transform;
}

/* Scale up from slightly smaller */
.reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition:
    opacity var(--anim-slow) var(--anim-spring),
    transform var(--anim-slow) var(--anim-bounce);
  will-change: opacity, transform;
}

/* Fade only — no transform */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--anim-slow) var(--anim-smooth);
  will-change: opacity;
}

/* Clip-path wipe from bottom (image reveals) */
.reveal-clip {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition:
    opacity var(--anim-base) var(--anim-ease),
    clip-path var(--anim-slow) var(--anim-spring);
  will-change: opacity, clip-path;
}

/* Visible state — shared across all reveal variants */
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.reveal-fade.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-clip.is-visible {
  opacity: 1;
  clip-path: inset(0% 0 0 0);
}

/* --------------------------------------------------------------------------
   3. STAGGER SYSTEM
   .stagger-item children receive sequential delays
   -------------------------------------------------------------------------- */
.stagger-item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--anim-base) var(--anim-spring),
    transform var(--anim-base) var(--anim-spring);
  will-change: opacity, transform;
}

.stagger-parent.is-visible .stagger-item {
  opacity: 1;
  transform: none;
}

/* Sequential delay — up to 8 items per row */
.stagger-parent.is-visible .stagger-item:nth-child(1)  { transition-delay: 0.05s; }
.stagger-parent.is-visible .stagger-item:nth-child(2)  { transition-delay: 0.12s; }
.stagger-parent.is-visible .stagger-item:nth-child(3)  { transition-delay: 0.19s; }
.stagger-parent.is-visible .stagger-item:nth-child(4)  { transition-delay: 0.26s; }
.stagger-parent.is-visible .stagger-item:nth-child(5)  { transition-delay: 0.33s; }
.stagger-parent.is-visible .stagger-item:nth-child(6)  { transition-delay: 0.40s; }
.stagger-parent.is-visible .stagger-item:nth-child(7)  { transition-delay: 0.47s; }
.stagger-parent.is-visible .stagger-item:nth-child(8)  { transition-delay: 0.54s; }

/* --------------------------------------------------------------------------
   4. MEDICAL PULSE — ambient breathing glow
   Used on emergency contacts, CTA elements, status indicators
   -------------------------------------------------------------------------- */
.medical-pulse {
  position: relative;
}

.medical-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: medicalPulseRing 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes medicalPulseRing {
  0%   { transform: scale(0.95); opacity: 0.6; }
  60%  { transform: scale(1.06); opacity: 0;   }
  100% { transform: scale(1.06); opacity: 0;   }
}

/* Emergency variant — uses a softer red */
.medical-pulse-urgent::after {
  border-color: #E53E3E;
  animation: medicalPulseUrgent 4s ease-in-out infinite;
}

@keyframes medicalPulseUrgent {
  0%   { transform: scale(0.97); opacity: 0.5; }
  50%  { transform: scale(1.05); opacity: 0;   }
  100% { transform: scale(0.97); opacity: 0;   }
}

/* --------------------------------------------------------------------------
   5. FLOATING MEDICAL — soft vertical float
   Used on hero decorative elements, medical icons in background
   -------------------------------------------------------------------------- */
.floating-medical {
  animation: floatMedical 5s ease-in-out infinite;
}

.floating-medical-slow {
  animation: floatMedical 8s ease-in-out infinite;
}

.floating-medical-delay {
  animation: floatMedical 5s ease-in-out 1.5s infinite;
}

@keyframes floatMedical {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-10px); }
}

/* --------------------------------------------------------------------------
   6. PAGE TRANSITION OVERLAY
   Full-page cross-fade between routes
   -------------------------------------------------------------------------- */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-card);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--anim-ease);
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* --------------------------------------------------------------------------
   7. CARD HOVER LIFT SYSTEM
   Reusable hover elevation across all pages
   -------------------------------------------------------------------------- */
.hover-lift {
  transition:
    transform var(--anim-base) var(--anim-ease),
    box-shadow var(--anim-base) var(--anim-ease) !important;
  cursor: default;
}

@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 44px rgba(122, 31, 75, 0.1) !important;
  }
}

/* Subtle version — used on info cards */
.hover-lift-sm {
  transition:
    transform var(--anim-fast) var(--anim-ease),
    box-shadow var(--anim-fast) var(--anim-ease) !important;
}

@media (hover: hover) {
  .hover-lift-sm:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 24px rgba(122, 31, 75, 0.07) !important;
  }
}

/* --------------------------------------------------------------------------
   8. SECTION HEADER REVEAL
   Consistent heading + subtitle + description reveal pattern
   -------------------------------------------------------------------------- */
.section-header-animated .section-subtitle {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--anim-base) var(--anim-ease),
              transform var(--anim-base) var(--anim-ease);
}

.section-header-animated .section-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--anim-slow) var(--anim-spring),
              transform var(--anim-slow) var(--anim-spring);
  transition-delay: 0.08s;
}

.section-header-animated .section-desc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--anim-slow) var(--anim-spring),
              transform var(--anim-slow) var(--anim-spring);
  transition-delay: 0.16s;
}

.section-header-animated.is-visible .section-subtitle,
.section-header-animated.is-visible .section-title,
.section-header-animated.is-visible .section-desc {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   9. SVG DRAW-IN STROKE ANIMATION
   Used for medical cross, heartbeat line, checkmark icons
   -------------------------------------------------------------------------- */
.svg-draw path,
.svg-draw polyline,
.svg-draw circle,
.svg-draw line,
.svg-draw rect {
  stroke-dasharray: var(--path-length, 200);
  stroke-dashoffset: var(--path-length, 200);
  transition: stroke-dashoffset var(--anim-slower) var(--anim-ease);
}

.svg-draw.is-visible path,
.svg-draw.is-visible polyline,
.svg-draw.is-visible circle,
.svg-draw.is-visible line,
.svg-draw.is-visible rect {
  stroke-dashoffset: 0;
}

/* ECG heartbeat line animation */
.ecg-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.4s var(--anim-ease);
}

.ecg-line.is-visible {
  stroke-dashoffset: 0;
}

/* --------------------------------------------------------------------------
   10. PROGRESS / STEP BAR ANIMATION
   Used on booking stepper — ECG-style left-to-right fill
   -------------------------------------------------------------------------- */
.step-progress-track {
  position: relative;
  height: 2px;
  background: rgba(122, 31, 75, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.step-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-orange) 100%);
  border-radius: 2px;
  width: 0%;
  transition: width 0.55s var(--anim-spring);
}

/* --------------------------------------------------------------------------
   11. MEDICAL BACKGROUND PARTICLES
   Lightweight CSS-only ambient depth using pseudo-elements
   Used on hero/banner sections as a soft DNA/cross pattern overlay
   -------------------------------------------------------------------------- */
.medical-bg-decoration {
  position: relative;
  overflow: hidden;
}

.medical-bg-decoration::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 68, 122, 0.07) 0%, transparent 70%);
  pointer-events: none;
  animation: floatMedical 9s ease-in-out infinite;
}

.medical-bg-decoration::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -8%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.06) 0%, transparent 70%);
  pointer-events: none;
  animation: floatMedical 11s ease-in-out 2s infinite;
}

/* --------------------------------------------------------------------------
   12. COUNTER / STAT NUMBER ANIMATION
   Digits visually "tick up" — handled by JS, CSS adds scale entrance
   -------------------------------------------------------------------------- */
.stat-count-wrap {
  display: inline-block;
}

.stat-count-wrap.counting {
  animation: statTick 0.4s var(--anim-bounce) both;
}

@keyframes statTick {
  0%   { transform: scale(0.8) translateY(6px); opacity: 0.4; }
  60%  { transform: scale(1.05); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   13. SCAN LINE EFFECT
   Subtle top-to-bottom scan on card hover — clinical / diagnostic feel
   -------------------------------------------------------------------------- */
.scan-hover {
  position: relative;
  overflow: hidden;
}

.scan-hover::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(122, 31, 75, 0.15) 30%,
    rgba(192, 68, 122, 0.25) 50%,
    rgba(122, 31, 75, 0.15) 70%,
    transparent 100%
  );
  transition: top 0.55s var(--anim-ease);
  pointer-events: none;
  z-index: 2;
}

@media (hover: hover) {
  .scan-hover:hover::before {
    top: 100%;
  }
}

/* --------------------------------------------------------------------------
   14. GLASS DEPTH CARD
   Subtle frosted glass effect for premium info overlays
   -------------------------------------------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(122, 31, 75, 0.08);
  box-shadow: 0 8px 32px rgba(122, 31, 75, 0.06),
              inset 0 1px 0 rgba(255,255,255,0.6);
}

/* --------------------------------------------------------------------------
   15. SUCCESS ANIMATION SEQUENCE
   Booking confirmation + form submit checkmark
   -------------------------------------------------------------------------- */

/* Circle ring expansion */
@keyframes successRingExpand {
  0%   { transform: scale(0.4); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Soft radial glow pulse after success */
@keyframes successGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.3); }
  50%       { box-shadow: 0 0 0 16px rgba(39, 174, 96, 0); }
}

.success-reveal {
  animation:
    successRingExpand 0.55s var(--anim-bounce) both,
    successGlow 2.4s ease-in-out 0.6s 2;
}

/* Checkmark path draw */
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

.checkmark-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: checkDraw 0.5s var(--anim-ease) 0.35s both;
}

/* --------------------------------------------------------------------------
   16. MEDICAL CROSS / PLUS ICON ANIMATION
   Subtle scale + rotate for medical + icons in hero/cta areas
   -------------------------------------------------------------------------- */
@keyframes medCrossAppear {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.med-cross-anim {
  animation: medCrossAppear 0.5s var(--anim-bounce) both;
}

/* --------------------------------------------------------------------------
   17. FILTER TRANSITION (Services page)
   Cards fade + scale in sequence after category filter applied
   -------------------------------------------------------------------------- */
@keyframes filterReveal {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.filter-entering {
  animation: filterReveal 0.38s var(--anim-spring) both;
}

/* --------------------------------------------------------------------------
   18. TIMELINE STEP — sequential node appearance
   -------------------------------------------------------------------------- */
@keyframes stepNodeAppear {
  0%   { transform: scale(0.2); opacity: 0; }
  65%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1;   }
}

.timeline-node-anim {
  animation: stepNodeAppear 0.45s var(--anim-bounce) both;
}

/* --------------------------------------------------------------------------
   19. ICON BADGE MICRO-INTERACTION
   Scale on parent hover — enhanced version
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .icon-hover-parent:hover .icon-badge {
    transform: scale(1.08) rotate(-4deg);
    transition: transform 0.25s var(--anim-bounce);
  }

  .icon-hover-parent .icon-badge {
    transition: transform 0.25s var(--anim-ease);
  }
}

/* --------------------------------------------------------------------------
   20. TYPEWRITER CURSOR (section subtitles — optional)
   Blinking insertion cursor after badge pills
   -------------------------------------------------------------------------- */
.cursor-blink::after {
  content: '|';
  margin-left: 2px;
  color: var(--accent-orange);
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --------------------------------------------------------------------------
   21. CARD SHIMMER — loading skeleton pulse (for initial load)
   -------------------------------------------------------------------------- */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.card-shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-neutral) 0%,
    rgba(122, 31, 75, 0.04) 40%,
    var(--bg-neutral) 80%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   22. RIPPLE EFFECT — button / slot tap feedback
   -------------------------------------------------------------------------- */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(122, 31, 75, 0.12);
  animation: rippleExpand 0.55s var(--anim-ease) both;
  pointer-events: none;
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   23. BREADCRUMB / STEP LABEL STAGGER
   -------------------------------------------------------------------------- */
.step-labels-stagger .step-label {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s var(--anim-spring);
}

.step-labels-stagger.is-visible .step-label:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.step-labels-stagger.is-visible .step-label:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: none; }
.step-labels-stagger.is-visible .step-label:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: none; }
.step-labels-stagger.is-visible .step-label:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: none; }
.step-labels-stagger.is-visible .step-label:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   24. PREFERS-REDUCED-MOTION — kill all animations safely
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade,
  .reveal-clip,
  .stagger-item,
  .section-header-animated .section-subtitle,
  .section-header-animated .section-title,
  .section-header-animated .section-desc {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .floating-medical,
  .floating-medical-slow,
  .floating-medical-delay,
  .medical-pulse::after,
  .medical-pulse-urgent::after,
  .medical-bg-decoration::before,
  .medical-bg-decoration::after {
    animation: none !important;
  }

  .scan-hover::before {
    display: none !important;
  }

  .success-reveal,
  .checkmark-path,
  .med-cross-anim,
  .filter-entering,
  .timeline-node-anim,
  .card-shimmer,
  .ripple-wave,
  .cursor-blink::after,
  .ecg-line,
  .svg-draw path,
  .svg-draw polyline,
  .svg-draw circle,
  .svg-draw line,
  .svg-draw rect {
    animation: none !important;
    transition: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .step-progress-fill {
    transition: none !important;
  }
}