/* ==========================================================================
   Doctors Branding: Animation Library
   Keyframes + reveal utility classes (paired with GSAP/AOS triggers)
   ========================================================================== */

/* ---------------------------------- */
/* Keyframes                           */
/* ---------------------------------- */
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@keyframes ripple-anim{
  to{ transform: scale(3); opacity:0; }
}

@keyframes float-y{
  0%,100%{ transform: translateY(0) rotate(var(--r,0deg)); }
  50%{ transform: translateY(-18px) rotate(var(--r,0deg)); }
}

@keyframes float-slow{
  0%,100%{ transform: translate(0,0); }
  33%{ transform: translate(20px,-24px); }
  66%{ transform: translate(-16px,14px); }
}

@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(57,139,239,.45); }
  50%{ box-shadow: 0 0 0 14px rgba(57,139,239,0); }
}

@keyframes spin-slow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

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

@keyframes shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(200%); }
}

@keyframes blink-caret{
  0%,100%{ opacity:1; } 50%{ opacity:0; }
}

@keyframes fade-in-up{
  from{ opacity:0; transform: translateY(28px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------------------------------- */
/* Reveal utility classes (used by JS  */
/* to toggle .is-visible on intersect) */
/* ---------------------------------- */
[data-reveal]{
  opacity:0;
  transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium), filter .8s var(--ease-premium);
}
[data-reveal="up"]{ transform: translateY(48px); }
[data-reveal="down"]{ transform: translateY(-48px); }
[data-reveal="left"]{ transform: translateX(20px); }
[data-reveal="right"]{ transform: translateX(-20px); }
[data-reveal="scale"]{ transform: scale(.88); }
[data-reveal="blur"]{ filter: blur(14px); transform: translateY(20px); }

[data-reveal].is-visible{
  opacity:1;
  transform: translate(0,0) scale(1);
  filter: blur(0);
}

/* Stagger helper: JS sets --d dynamically, or use nth-child fallback */
[data-reveal]{ transition-delay: var(--d, 0s); }

/* ---------------------------------- */
/* Floating decorative elements        */
/* ---------------------------------- */
.floaty{ animation: float-y 6s ease-in-out infinite; }
.floaty-slow{ animation: float-slow 14s ease-in-out infinite; }
.spin-slow{ animation: spin-slow 30s linear infinite; }

.blob{ animation: float-slow 18s ease-in-out infinite; }

/* Gradient animated backgrounds */
.gradient-anim{
  background-size:200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Glass shimmer sweep on hover */
.shimmer-hover{ position:relative; overflow:hidden; }
.shimmer-hover::before{
  content:''; position:absolute; top:0; left:-30%; width:20%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-20deg);
  opacity:0;
}
.shimmer-hover:hover::before{ opacity:1; animation: shimmer 1s ease; }

/* Pulse ring (badges / live status) */
.pulse-ring{ animation: pulse-glow 2.2s ease-out infinite; }

/* Icon subtle rotate on card hover */
.icon-rotate{ transition: transform var(--dur-fast) var(--ease-out-soft); }
.lift-hover:hover .icon-rotate{ transform: rotate(-8deg) scale(1.08); }

/* Text reveal (letters/words wrapped in spans by JS) */
.split-line{ overflow:hidden; display:block; }
.split-word, .split-char{
  display:inline-block;
  transform: translateY(110%);
  opacity:0;
}
.split-ready .split-word,
.split-ready .split-char{
  animation: fade-in-up .9s var(--ease-premium) forwards;
}

/* Typing caret for hero micro-copy (optional use) */
.caret{ display:inline-block; width:2px; background: var(--c-primary); animation: blink-caret .9s step-end infinite; margin-left:2px; }

/* Counter number ticking uses plain text update via JS; add glow pulse when finished */
.stat-num.counted{ text-shadow: 0 0 24px rgba(57,139,239,.35); }

/* FAQ accordion animation */
.faq-item .faq-answer{
  max-height:0; overflow:hidden;
  transition: max-height .5s var(--ease-premium), opacity .4s ease, padding .4s ease;
  opacity:0;
}
.faq-item.open .faq-answer{ opacity:1; }
.faq-item .faq-icon{ transition: transform .4s var(--ease-premium); }
.faq-item.open .faq-icon{ transform: rotate(45deg); }
.faq-item .faq-q{ transition: color var(--dur-fast); }
.faq-item.open .faq-q{ color: var(--c-primary); }

/* Timeline progress line draw-in */
.timeline-line{
  position:absolute; top:0; left:26px; width:2px; height:0%;
  background: linear-gradient(var(--c-primary), var(--c-navy-deep));
  transition: height 1.2s var(--ease-premium);
}
.timeline.in-view .timeline-line{ height:100%; }

/* Mouse parallax layers (JS sets transform via inline style using these as base transition) */
.parallax-layer{ transition: transform .2s ease-out; will-change: transform; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; }

  /*
   * Squashing animation-duration above is not enough for the split-word/char
   * hero text reveal: each span's *start* state is opacity:0 (see .split-word,
   * .split-char above), and .split-ready only queues a per-word
   * animation-delay of up to ~1s (0.35s + 0.06s per word) before that
   * shortened animation plays. animation-delay is untouched by the reset
   * above, so late words — on this homepage, the highlighted "Doctors" in
   * the H1 — sit invisible for the full original delay. Skip straight to the
   * end state instead of racing the delay.
   */
  .split-word, .split-char{
    animation-delay: 0s !important;
    opacity:1 !important;
    transform:none !important;
  }
}