/* ================================================================
   TKIVAS — Veterinary Theme Animations & Design Enhancements
   ================================================================ */

/* ── Google Font upgrade ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   FLOATING VET ICONS — background ambient layer
   ================================================================ */
@keyframes vt-float1 { 0%,100%{transform:translateY(0) rotate(0deg);opacity:.07} 50%{transform:translateY(-22px) rotate(8deg);opacity:.13} }
@keyframes vt-float2 { 0%,100%{transform:translateY(0) rotate(0deg);opacity:.06} 50%{transform:translateY(-16px) rotate(-6deg);opacity:.10} }
@keyframes vt-float3 { 0%,100%{transform:translateY(0) scale(1);opacity:.05} 50%{transform:translateY(-28px) scale(1.08);opacity:.09} }
@keyframes vt-pulse-ring { 0%{transform:scale(.9);opacity:.6} 70%{transform:scale(1.3);opacity:0} 100%{transform:scale(.9);opacity:0} }
@keyframes vt-heartbeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.18)} 28%{transform:scale(1)} 42%{transform:scale(1.12)} 70%{transform:scale(1)} }
@keyframes vt-paw-walk  { 0%{transform:translateX(-60px) rotate(-10deg);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateX(60px) rotate(10deg);opacity:0} }
@keyframes vt-dna-spin  { from{transform:rotateY(0deg)} to{transform:rotateY(360deg)} }
@keyframes vt-cross-glow{ 0%,100%{filter:drop-shadow(0 0 4px rgba(212,130,10,.4))} 50%{filter:drop-shadow(0 0 14px rgba(212,130,10,.9))} }
@keyframes vt-steth-swing{ 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
@keyframes vt-particle  { 0%{transform:translateY(0) translateX(0);opacity:1} 100%{transform:translateY(-80px) translateX(var(--px));opacity:0} }
@keyframes vt-shimmer   { 0%{background-position:200% center} 100%{background-position:-200% center} }
@keyframes vt-border-run{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes vt-slide-up  { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes vt-fade-in   { from{opacity:0} to{opacity:1} }
@keyframes vt-scale-in  { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes vt-count-up  { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ================================================================
   VET AMBIENT BACKGROUND ICONS
   ================================================================ */
.vt-ambient {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.vt-ambient-icon {
  position: absolute;
  font-size: 3rem;
  color: rgba(255,255,255,.08);
  user-select: none;
}
.vt-ambient-icon:nth-child(1)  { top:8%;  left:4%;  font-size:2.4rem; animation: none; }
.vt-ambient-icon:nth-child(2)  { top:15%; right:6%; font-size:3.2rem; animation: none; }
.vt-ambient-icon:nth-child(3)  { top:55%; left:2%;  font-size:2rem;   animation: none; }
.vt-ambient-icon:nth-child(4)  { top:70%; right:4%; font-size:2.8rem; animation: none; }
.vt-ambient-icon:nth-child(5)  { top:35%; left:8%;  font-size:1.8rem; animation: none; }
.vt-ambient-icon:nth-child(6)  { top:80%; left:15%; font-size:2.2rem; animation: none; }
.vt-ambient-icon:nth-child(7)  { top:25%; right:12%;font-size:1.6rem; animation: none; }
.vt-ambient-icon:nth-child(8)  { top:60%; right:10%;font-size:2.6rem; animation: none; }

/* ================================================================
   HERO SECTION ENHANCEMENTS
   ================================================================ */
/* Animated paw prints trail across hero */
.vt-paw-trail {
  position: absolute; bottom: 90px; left: 0; right: 0;
  height: 40px; z-index: 4; pointer-events: none; overflow: hidden;
}
.vt-paw {
  position: absolute; bottom: 0;
  font-size: 1.1rem; color: rgba(212,130,10,.35);
  animation: none;
}
.vt-paw:nth-child(1) { animation-delay: 0s;   left: 10%; }
.vt-paw:nth-child(2) { animation-delay: .5s;  left: 20%; font-size:.9rem; }
.vt-paw:nth-child(3) { animation-delay: 1s;   left: 35%; }
.vt-paw:nth-child(4) { animation-delay: 1.5s; left: 50%; font-size:.85rem; }
.vt-paw:nth-child(5) { animation-delay: 2s;   left: 65%; }
.vt-paw:nth-child(6) { animation-delay: 2.5s; left: 80%; font-size:.95rem; }

/* ================================================================
   ANIMATED SECTION DIVIDER — paw prints
   ================================================================ */
.vt-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 8px 0; margin: 0;
}
.vt-divider-line {
  flex: 1; height: 1px; max-width: 120px;
  background: linear-gradient(90deg, transparent, #D4820A, transparent);
}
.vt-divider-paw {
  color: #D4820A; font-size: .9rem;
  animation: none;
}
.vt-divider-paw:nth-child(2) { animation-delay: 0s; }
.vt-divider-paw:nth-child(4) { animation-delay: 0s; }

/* ================================================================
   VET FEATURE CARDS — with pulse ring on icon
   ================================================================ */
.vt-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid #C8DEF5;
  box-shadow: 0 4px 24px rgba(27,79,138,.07);
  transition: all .4s cubic-bezier(.175,.885,.32,1.275);
  position: relative; overflow: hidden;
}
.vt-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1B4F8A, #D4820A, #1B4F8A);
  background-size: 200% auto;
  animation: none;
  opacity: 0; transition: opacity .3s;
}
.vt-card:hover::before { opacity: 1; }
.vt-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 48px rgba(27,79,138,.16);
  border-color: transparent;
}
.vt-icon-wrap {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
}
.vt-icon-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212,130,10,.4);
  animation: none;
}
.vt-icon-ring-2 {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(27,79,138,.2);
  animation: none;
}
.vt-icon-inner {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #1B4F8A, #378ADD);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #FAD97A;
  transition: transform .3s;
  position: relative; z-index: 1;
}
.vt-card:hover .vt-icon-inner { transform: scale(1.1) rotate(-5deg); }
.vt-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: #1B4F8A; margin-bottom: 10px;
}
.vt-card-text {
  font-size: .84rem; color: #6B8CAE;
  line-height: 1.7; margin: 0;
  font-family: 'Inter', sans-serif;
}

/* ================================================================
   HEARTBEAT STAT STRIP
   ================================================================ */
.vt-stats-section {
  background: linear-gradient(135deg, #0A1E35 0%, #1B4F8A 100%);
  padding: 20px 0 60px 0; position: relative; overflow: hidden;
}
.vt-stats-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* ECG / heartbeat line */
.vt-ecg-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 48px; overflow: hidden; opacity: .18;
}
.vt-ecg-svg { width: 200%; height: 100%; animation: none; }

.vt-stat-item {
  text-align: center; padding: 20px;
  position: relative; z-index: 1;
}
.vt-stat-item + .vt-stat-item::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: rgba(255,255,255,.12);
}
.vt-stat-num {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800; color: #FAD97A; line-height: 1;
  display: block;
}
.vt-stat-icon {
  font-size: 1.4rem; color: rgba(255,255,255,.5);
  margin-bottom: 8px; display: block;
  animation: none;
}
.vt-stat-lbl {
  font-size: .72rem; color: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: 6px; font-family: 'Inter', sans-serif;
}

/* ================================================================
   STETHOSCOPE SECTION BADGE
   ================================================================ */
.vt-steth-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(27,79,138,.08), rgba(212,130,10,.08));
  border: 1px solid rgba(212,130,10,.25);
  border-radius: 40px; padding: 8px 20px 8px 10px;
  margin-bottom: 16px;
}
.vt-steth-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #1B4F8A, #378ADD);
  display: flex; align-items: center; justify-content: center;
  color: #FAD97A; font-size: .9rem;
  animation: vt-steth-swing 3s ease-in-out infinite;
  transform-origin: top center;
}
.vt-steth-text {
  font-size: .72rem; font-weight: 700;
  color: #D4820A; text-transform: uppercase;
  letter-spacing: 1.5px; font-family: 'Inter', sans-serif;
}

/* ================================================================
   ANIMATED MEDICAL CROSS — section accent
   ================================================================ */
.vt-cross-accent {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: #D4820A; font-size: 1.4rem;
  animation: vt-cross-glow 2s ease-in-out infinite;
}

/* ================================================================
   PARTICLE BURST on hover (JS-driven, CSS defines particles)
   ================================================================ */
.vt-particle {
  position: absolute; width: 6px; height: 6px;
  border-radius: 50%; background: #D4820A;
  pointer-events: none; z-index: 99;
  animation: vt-particle .8s ease-out forwards;
}

/* ================================================================
   SHIMMER TEXT EFFECT
   ================================================================ */
.vt-shimmer-text {
  background: linear-gradient(90deg, #1B4F8A 0%, #D4820A 30%, #FAD97A 50%, #D4820A 70%, #1B4F8A 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: vt-shimmer 4s linear infinite;
}

/* ================================================================
   SECTION ENTRANCE ANIMATIONS
   ================================================================ */
.vt-slide-up  { animation: vt-slide-up  .7s cubic-bezier(.4,0,.2,1) both; }
.vt-fade-in   { animation: vt-fade-in   .6s ease both; }
.vt-scale-in  { animation: vt-scale-in  .6s cubic-bezier(.175,.885,.32,1.275) both; }
.vt-delay-1   { animation-delay: .1s; }
.vt-delay-2   { animation-delay: .2s; }
.vt-delay-3   { animation-delay: .3s; }
.vt-delay-4   { animation-delay: .4s; }
.vt-delay-5   { animation-delay: .5s; }
.vt-delay-6   { animation-delay: .6s; }

/* ================================================================
   ANIMAL SILHOUETTE BANNER — decorative strip
   ================================================================ */
.vt-animal-strip {
  background: linear-gradient(135deg, #EEF4FB 0%, #fff 100%);
  padding: 28px 0; border-top: 1px solid #C8DEF5; border-bottom: 1px solid #C8DEF5;
  overflow: hidden; position: relative;
}
.vt-animal-scroll {
  display: flex; gap: 48px; align-items: center;
  animation: vt-border-run 20s linear infinite;
  white-space: nowrap;
}
.vt-animal-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.vt-animal-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #1B4F8A, #378ADD);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #FAD97A;
  box-shadow: 0 4px 16px rgba(27,79,138,.18);
  transition: transform .3s;
}
.vt-animal-item:hover .vt-animal-icon { transform: scale(1.15) rotate(-8deg); }
.vt-animal-label {
  font-size: .68rem; font-weight: 600; color: #6B8CAE;
  text-transform: uppercase; letter-spacing: .8px;
  font-family: 'Inter', sans-serif;
}

/* ================================================================
   MEDICAL TIMELINE — vertical with pulse dots
   ================================================================ */
.vt-timeline { position: relative; padding-left: 32px; }
.vt-timeline::before {
  content: '';
  position: absolute; left: 10px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #1B4F8A, #D4820A, #1B4F8A);
}
.vt-tl-item { position: relative; margin-bottom: 28px; }
.vt-tl-dot {
  position: absolute; left: -26px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #D4820A; border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgba(212,130,10,.3);
  animation: vt-pulse-ring 2s ease-out infinite;
}
.vt-tl-title { font-size: .92rem; font-weight: 700; color: #1B4F8A; margin-bottom: 4px; }
.vt-tl-text  { font-size: .82rem; color: #6B8CAE; line-height: 1.6; margin: 0; font-family: 'Inter', sans-serif; }

/* ================================================================
   HERO SLIDE — vet-specific content box style
   ================================================================ */
.vt-hero-badge {
  position: absolute; top: 24px; right: 24px; z-index: 5;
  background: rgba(212,130,10,.15);
  border: 1px solid rgba(212,130,10,.4);
  backdrop-filter: blur(8px);
  border-radius: 16px; padding: 14px 18px;
  text-align: center; min-width: 90px;
}
.vt-hero-badge-icon {
  font-size: 1.6rem; color: #FAD97A;
  animation: vt-heartbeat 1.8s ease-in-out infinite;
  display: block; margin-bottom: 4px;
}
.vt-hero-badge-text {
  font-size: .62rem; color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: 1px;
  font-family: 'Inter', sans-serif; font-weight: 600;
}

/* ================================================================
   FLOATING PARTICLES — hero background
   ================================================================ */
.vt-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.vt-p {
  position: absolute; border-radius: 50%;
  background: rgba(212,130,10,.15);
  animation: vt-float3 var(--dur, 6s) ease-in-out infinite var(--del, 0s);
}
.vt-p:nth-child(1)  { width:8px;  height:8px;  top:20%; left:15%; --dur:7s; --del:0s; }
.vt-p:nth-child(2)  { width:5px;  height:5px;  top:40%; left:80%; --dur:5s; --del:1s; }
.vt-p:nth-child(3)  { width:10px; height:10px; top:70%; left:25%; --dur:8s; --del:2s; }
.vt-p:nth-child(4)  { width:6px;  height:6px;  top:55%; left:60%; --dur:6s; --del:.5s; }
.vt-p:nth-child(5)  { width:4px;  height:4px;  top:85%; left:45%; --dur:9s; --del:1.5s; }
.vt-p:nth-child(6)  { width:7px;  height:7px;  top:30%; left:90%; --dur:7s; --del:3s; }
.vt-p:nth-child(7)  { width:9px;  height:9px;  top:10%; left:55%; --dur:6s; --del:2.5s; }
.vt-p:nth-child(8)  { width:5px;  height:5px;  top:65%; left:5%;  --dur:8s; --del:.8s; }

/* ================================================================
   SECTION LABEL — vet themed
   ================================================================ */
.vt-section-label {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(27,79,138,.07), rgba(212,130,10,.07));
  border: 1px solid rgba(212,130,10,.2);
  border-radius: 30px; padding: 6px 16px;
  font-size: .7rem; font-weight: 700;
  color: #D4820A; text-transform: uppercase;
  letter-spacing: 1.5px; font-family: 'Inter', sans-serif;
  margin-bottom: 12px;
}
.vt-section-label i { font-size: .75rem; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 767px) {
  .vt-hero-badge { display: none; }
  .vt-stats-section { padding: 15px 0 40px 0; }
  .vt-stat-item + .vt-stat-item::before { display: none; }
  .vt-card { padding: 24px 18px; }
  .vt-animal-strip { padding: 18px 0; }
}