/* ============================================================
   KDRS GROUP — animations.css (v2.0)
   Premium preloader + scroll-reveal + micro-interactions
   ============================================================ */

/* ─── Premium Preloader ──────────────────────────────────── */

#page-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  transition: opacity .6s var(--ease-out), visibility .6s, filter .6s var(--ease-out);
}

#page-preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: blur(8px);
}

.preloader-ring {
  position: relative;
  width: 56px;
  height: 56px;
}

.preloader-ring svg {
  width: 100%;
  height: 100%;
  animation: pl-rotate 1.2s linear infinite;
}

.preloader-ring svg circle {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 120 200;
  animation: pl-dash 1.2s var(--ease-out) infinite;
}

.preloader-logo {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  opacity: 0;
  animation: pl-fade-in .5s .3s ease forwards;
}

@keyframes pl-rotate {
  to { transform: rotate(360deg); }
}

@keyframes pl-dash {
  0%   { stroke-dashoffset: 0;    stroke-dasharray: 1 200; }
  50%  { stroke-dashoffset: -60;  stroke-dasharray: 120 200; }
  100% { stroke-dashoffset: -124; stroke-dasharray: 1 200; }
}

@keyframes pl-fade-in {
  to { opacity: 1; }
}


/* ─── Scroll-Reveal ──────────────────────────────────────── */

/* Reveal = fade + de-blur, driven by a pure-CSS load animation so a card can
   NEVER get stuck hidden if a scroll-observer misses it. No translateY, so it
   never shifts layout out of a row or fights hover transforms. JS may still add
   `.revealed` (harmless — same end state). */
@keyframes kdrs-reveal {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 1; filter: blur(0); }
}

[data-reveal] {
  opacity: 0;
  filter: blur(4px);
  animation: kdrs-reveal .7s var(--ease-out) both;
  will-change: opacity, filter;
}

[data-reveal].revealed { opacity: 1; filter: blur(0); }

[data-reveal-delay="1"] { animation-delay: .08s; }
[data-reveal-delay="2"] { animation-delay: .16s; }
[data-reveal-delay="3"] { animation-delay: .24s; }
[data-reveal-delay="4"] { animation-delay: .32s; }
[data-reveal-delay="5"] { animation-delay: .40s; }
[data-reveal-delay="6"] { animation-delay: .48s; }
[data-reveal-delay="7"] { animation-delay: .56s; }
[data-reveal-delay="8"] { animation-delay: .64s; }


/* ─── Hero Entrance Animations ──────────────────────────── */

.hero-animate {
  animation: hero-in 1s var(--ease-out) 0.1s both;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.97);
    filter: blur(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-animate-delay {
  animation: hero-in 1s var(--ease-out) 0.25s both;
}

.hero-animate-delay-2 {
  animation: hero-in 1s var(--ease-out) 0.4s both;
}

.hero-animate-delay-3 {
  animation: hero-in 1s var(--ease-out) 0.55s both;
}


/* ─── Counter Tick ───────────────────────────────────────── */

.counter-wrap {
  transition: transform .3s var(--ease-spring);
}
.counter-wrap:hover {
  transform: scale(1.04);
}


/* ─── Card Hover Lift (unified) ─────────────────────────── */

.service-card,
.process-card,
.stat-card,
.leader-card,
.info-card,
.job-card-new {
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    border-color .35s var(--ease-out);
}

.service-card:hover,
.process-card:hover,
.stat-card:hover,
.info-card:hover,
.job-card-new:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}


/* ─── Nav Active Underline Slide ────────────────────────── */

.nav a {
  position: relative;
  overflow: hidden;
}

/* Legacy underline bar removed: the redesigned pill navbar uses a
   background/shadow hover, so this ::after line clashed and showed an
   unwanted underline under the dropdown tabs (and the active tab). Disabled. */
.nav a::after {
  content: none;
  display: none;
}


/* ─── Button Shimmer ────────────────────────────────────── */

.btn {
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0.12) 55%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform .6s var(--ease-out);
}

.btn:hover::before {
  transform: translateX(100%);
}


/* ─── Trust Strip Ticker ────────────────────────────────── */

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.trust-ticker {
  animation: ticker 35s linear infinite;
}

.trust-strip:hover .trust-ticker {
  animation-play-state: paused;
}


/* ─── Pulse Dot (live indicator) ────────────────────────── */

@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity: 1; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(.9); opacity: 0; }
}

.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
}

.pulse-dot::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-ring 1.8s ease-out infinite;
}


/* ─── Floating Gradient Blobs (hero background) ─────────── */

@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(30px, -40px) scale(1.05); }
  50%  { transform: translate(-20px, 20px) scale(0.95); }
  75%  { transform: translate(40px, 10px) scale(1.02); }
}

@keyframes float-blob-reverse {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-30px, 30px) scale(0.95); }
  50%  { transform: translate(25px, -25px) scale(1.05); }
  75%  { transform: translate(-15px, -20px) scale(0.98); }
}


/* ─── Smooth Fade-In (generic) ──────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}


/* ─── Icon Float ────────────────────────────────────────── */

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

.partner-quote .icon-box svg.lucide,
.file-upload .file-upload-icon svg.lucide {
  animation: icon-float 3s ease-in-out infinite;
}


/* ─── Animated Icon Interactions ────────────────────────── */

svg.lucide {
  transition: transform .25s var(--ease-out), color .2s ease;
}

/* Card icons pop on hover */
.service-card:hover .icon-box svg.lucide,
.info-card:hover .icon-box svg.lucide,
.process-card:hover .icon-box svg.lucide,
.apply-benefit:hover .icon-box svg.lucide {
  transform: scale(1.12) rotate(-4deg);
}

.icon-box {
  transition: background var(--duration-base) ease, transform var(--duration-base) ease;
}

.service-card:hover .icon-box,
.info-card:hover .icon-box {
  transform: translateY(-2px);
}

/* Arrow nudge */
.leader-more svg.lucide,
.cta a svg.lucide {
  transition: transform .25s var(--ease-out);
}
.leader-more:hover svg.lucide,
a:hover > svg.lucide.lucide-arrow-right {
  transform: translateX(4px);
}

/* Button icon nudge */
.btn:hover svg.lucide {
  transform: translateX(3px);
}
.btn:hover svg.lucide.lucide-search {
  transform: scale(1.1);
}

/* Newsletter arrow */
.newsletter-form button:hover svg.lucide {
  transform: translateX(3px);
}

/* Footer social lift */
.footer-social a svg.lucide {
  transition: transform .25s var(--ease-out);
}
.footer-social a:hover svg.lucide {
  transform: translateY(-3px) scale(1.12);
}

/* Contact card icons */
.contact-info .info-card:hover .icon-box svg.lucide {
  transform: rotate(6deg) scale(1.08);
}