/* Custom Styles for Dr. Janki Choudhary Medical Oncology Website */
/* Refined Specialist Practice Aesthetic */

:root {
  --color-primary: #0B4D53;
  --color-primary-dark: #073539;
  --color-primary-light: #12636B;
  --color-primary-soft: #E8F4F5;
  --color-accent-rose: #BA6B7C;
  --color-accent-rose-dark: #9A4C5D;
  --color-accent-rose-light: #FBF0F2;
  --color-neutral-bg: #F8FAFC;
  --color-card-bg: #FFFFFF;
  --color-text-main: #0F172A;
  --color-text-muted: #475569;
  --color-border: #E2E8F0;
  --font-heading: 'Playfair Display', 'Newsreader', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Card Top Shimmer Gradient on Hover (inspired by skinbysonali.com) */
.card-shimmer {
  position: relative;
  overflow: hidden;
}

.card-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0B4D53, #14B8A6, #BA6B7C, #0B4D53);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.card-shimmer:hover::before {
  opacity: 1;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Wave Divider */
.wave-divider {
  display: block;
  width: 100%;
  line-height: 0;
  position: relative;
  z-index: 2;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 28px;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  color: #1E293B;
  background-color: #FFFFFF;
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.65;
}

.font-serif-heading {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

/* Headings Crisp Hierarchy */
h1, h2, h3, h4, h5, h6 {
  color: #0F172A;
  letter-spacing: -0.015em;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Subtle Medical Grid Pattern */
.bg-grid-pattern {
  background-image: radial-gradient(rgba(11, 77, 83, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ========================================================= */
/* Smart Medical Color Palettes & Atmospheric Gradients      */
/* ========================================================= */

/* Multi-hue Luminous Mesh Background: Eliminates flat stark white */
.bg-luminous-mesh {
  background-color: #F8FBFC;
  background-image: 
    radial-gradient(circle at 8% 18%, rgba(20, 184, 166, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 92% 78%, rgba(186, 107, 124, 0.075) 0%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(240, 253, 250, 0.55) 0%, transparent 100%),
    linear-gradient(180deg, #EFF8F8 0%, #FAFDFD 50%, #FBF6F7 100%);
}

/* Soothing Sea-Mist Tint: Warm calming clinical foundation */
.bg-sea-mist {
  background-color: #F2F8F9;
  background-image: radial-gradient(circle at 85% 15%, rgba(11, 77, 83, 0.045) 0%, transparent 50%),
                    radial-gradient(circle at 15% 85%, rgba(20, 184, 166, 0.04) 0%, transparent 50%);
}

/* Warm Compassionate Blush Tint: Emotional empathy & breast oncology warmth */
.bg-warm-compassion {
  background: linear-gradient(135deg, #FBF5F6 0%, #F8FAFC 45%, #F0F8F8 100%);
}

/* Refined Pearl Slate */
.bg-pearl-tint {
  background-color: #F8FAFB;
}

/* Ambient Floating Color Glow Orbs */
.ambient-orb-teal {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.14) 0%, rgba(20, 184, 166, 0) 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.ambient-orb-rose {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186, 107, 124, 0.12) 0%, rgba(186, 107, 124, 0) 70%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

/* High-Impact Jewel Tone Banner for CTAs & Second Opinions */
.jewel-banner {
  background: linear-gradient(135deg, #062F33 0%, #0B4D53 50%, #0E5C64 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -15px rgba(6, 47, 51, 0.35);
}

.jewel-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.22) 0%, transparent 65%);
  pointer-events: none;
}

.jewel-banner::after {
  content: '';
  position: absolute;
  bottom: -35%;
  left: -10%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.14) 0%, transparent 65%);
  pointer-events: none;
}

/* Distinctive Top Accent Highlight Bands on Cards */
.card-accent-teal { border-top: 3.5px solid #0B4D53 !important; }
.card-accent-rose { border-top: 3.5px solid #BA6B7C !important; }
.card-accent-emerald { border-top: 3.5px solid #059669 !important; }
.card-accent-sky { border-top: 3.5px solid #0284C7 !important; }
.card-accent-amber { border-top: 3.5px solid #D97706 !important; }
.card-accent-indigo { border-top: 3.5px solid #6366F1 !important; }

/* Vibrant Harmonious Icon Pods */
.icon-pod-teal {
  background: linear-gradient(135deg, #E6F4F5 0%, #D0EDF0 100%);
  color: #0B4D53;
  border: 1px solid rgba(11, 77, 83, 0.18);
  box-shadow: 0 2px 8px rgba(11, 77, 83, 0.07);
}

.icon-pod-rose {
  background: linear-gradient(135deg, #FDF0F3 0%, #FCE0E5 100%);
  color: #9A4C5D;
  border: 1px solid rgba(186, 107, 124, 0.22);
  box-shadow: 0 2px 8px rgba(186, 107, 124, 0.08);
}

.icon-pod-emerald {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #065F46;
  border: 1px solid rgba(5, 150, 105, 0.22);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08);
}

.icon-pod-sky {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  color: #0369A1;
  border: 1px solid rgba(2, 132, 199, 0.22);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}

.icon-pod-amber {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  color: #92400E;
  border: 1px solid rgba(217, 119, 6, 0.22);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
}

.icon-pod-indigo {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  color: #4338CA;
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

/* Card Subtle Gradient Background on Hover */
.card-shimmer:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F9FBFB 100%);
}

/* Glassmorphism Header */
.header-glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.header-scrolled {
  box-shadow: 0 4px 20px -2px rgba(11, 77, 83, 0.08);
}

/* Floating Trust Badges with Gentle Ambient Hover/Float */
.floating-badge {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 20px -3px rgba(11, 77, 83, 0.1);
  transition: all 0.3s ease;
  animation: floatGentle 5s ease-in-out infinite;
}

.floating-badge:nth-child(2) {
  animation-delay: 1.2s;
}

.floating-badge:nth-child(4) {
  animation-delay: 2.4s;
}

.floating-badge:nth-child(5) {
  animation-delay: 3.6s;
}

.floating-badge:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 28px -4px rgba(11, 77, 83, 0.18);
  border-color: #B9DCDD;
}

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

/* ========================================================= */
/* Smart Clinical Impact Console (Bespoke Medical Aesthetic) */
/* ========================================================= */

.smart-console {
  background: radial-gradient(120% 120% at 50% 0%, #083D43 0%, #062E33 55%, #042125 100%);
  border: 1px solid rgba(45, 212, 191, 0.28);
  box-shadow: 0 24px 48px -12px rgba(4, 33, 37, 0.45), 
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  backdrop-filter: blur(12px);
}

.smart-metric-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.smart-metric-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(45, 212, 191, 0.45);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35),
              0 0 16px rgba(45, 212, 191, 0.15);
}

.stat-counter-number {
  font-family: var(--font-heading);
  background: linear-gradient(135deg, #FFFFFF 0%, #CCFBF1 35%, #5EEAD4 70%, #2DD4BF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.stat-counter-plus {
  font-family: var(--font-heading);
  color: #5EEAD4;
  display: inline-block;
  line-height: 1.05;
}

/* Card Elevation & Hovers */
.medical-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #E2E8F0;
}

.medical-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(11, 77, 83, 0.09);
  border-color: #B9DCDD;
}

.specialty-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid #EAEFF2;
}

.specialty-card:hover {
  transform: translateY(-3px);
  border-color: #0B4D53;
  box-shadow: 0 10px 24px -5px rgba(11, 77, 83, 0.09);
}

/* Journey Timeline Connector (Horizontal on Desktop) */
@media (min-width: 1024px) {
  .journey-connector {
    position: relative;
  }
  .journey-connector::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -16px;
    width: 32px;
    height: 2px;
    background: #CBD5E1;
    z-index: 10;
  }
  .journey-connector:last-child::after {
    display: none;
  }
}

/* Flow Step Connectors (Precision Oncology) */
@media (min-width: 768px) {
  .flow-step-connector {
    position: relative;
  }
  .flow-step-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -14px;
    width: 14px;
    height: 2px;
    background: #CBD5E1;
    transform: translateY(-50%);
  }
  .flow-step-connector:last-child::after {
    display: none;
  }
}

/* Timeline Vertical Line */
.timeline-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 19px;
  width: 2px;
  background: #E2E8F0;
}

/* Photo Placeholder */
.photo-placeholder {
  background: linear-gradient(135deg, #F1F6F7 0%, #E2EEF0 100%);
  border: 2px dashed #99C5CA;
  position: relative;
  overflow: hidden;
}

/* Language Switcher */
.lang-btn.active {
  background-color: #0B4D53;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(11, 77, 83, 0.25);
}

.lang-btn {
  transition: all 0.2s ease-in-out;
}

/* FAQ Accordion Transitions */
.faq-answer {
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

/* Modal Backdrop */
.modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Mobile Action Bar */
.mobile-action-bar {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: #F8FAFC;
}

::-webkit-scrollbar-thumb {
  background: #99C5CA;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0B4D53;
}

/* Accessibility Focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #0B4D53;
  outline-offset: 2px;
}

/* ========================================================= */
/* Scroll Reveal & Smooth Transition Animations              */
/* ========================================================= */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle staggered delay utility classes */
.delay-100 { transition-delay: 0.1s; }
.delay-150 { transition-delay: 0.15s; }
.delay-200 { transition-delay: 0.2s; }
.delay-250 { transition-delay: 0.25s; }
.delay-300 { transition-delay: 0.3s; }

/* Pulse animation for high priority CTAs */
@keyframes softPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(11, 77, 83, 0.2);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(11, 77, 83, 0);
  }
}

.pulse-soft {
  animation: softPulse 3s infinite;
}

/* Smooth Accordion Body Transition */
.accordion-content-smooth {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal scale-up animation */
.modal-container:not(.hidden) > div {
  animation: modalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPop {
  0% {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Smart Cancer Care & Treatments Interactive Elements */
.tumor-filter-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tumor-filter-btn:hover:not(.active) {
  background-color: #E6F4F5;
  color: #0B4D53;
  border-color: #99D1D9;
}

.tumor-filter-btn.active {
  background-color: #0B4D53 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px -2px rgba(11, 77, 83, 0.3);
}

.modality-tab-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.modality-tab-btn.active {
  background-color: #0B4D53 !important;
  color: #FFFFFF !important;
  border-color: #0B4D53 !important;
  box-shadow: 0 10px 25px -5px rgba(11, 77, 83, 0.25);
}

.modality-tab-btn:hover:not(.active) {
  border-color: #99D1D9;
  background-color: #F8FAFC;
  transform: translateX(3px);
}

/* Gentle Floating Badges */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes floatGentleReverse {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(6px);
  }
}

.float-gentle {
  animation: floatGentle 4.5s ease-in-out infinite;
}

.float-gentle-delayed {
  animation: floatGentleReverse 5s ease-in-out infinite 1s;
}

/* Philosophy Tabs */
.philosophy-tab-btn {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.philosophy-tab-btn.active {
  background-color: #0B4D53 !important;
  color: #FFFFFF !important;
  border-color: #0B4D53 !important;
  box-shadow: 0 4px 14px -2px rgba(11, 77, 83, 0.25);
}

.philosophy-tab-btn:hover:not(.active) {
  background-color: #F0F8F8;
  color: #0B4D53;
  border-color: #99D1D9;
}

/* Doctor Quote Box */
.doctor-quote-box {
  background: linear-gradient(135deg, rgba(240, 248, 248, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-left: 4px solid #0B4D53;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.doctor-quote-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(11, 77, 83, 0.08);
}

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}