/* ==========================================================================
   TALENT HUB — animation.css
   Scroll reveals, floating art, ripple, typing caret, skeleton→content swap
   ========================================================================== */

/* ---------------- Scroll reveal (toggled via IntersectionObserver) --------- */
[data-reveal]{
  opacity:0;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:transform,opacity;
}
[data-reveal="up"]{transform:translateY(28px);}
[data-reveal="left"]{transform:translateX(-28px);}
[data-reveal="right"]{transform:translateX(28px);}
[data-reveal="zoom"]{transform:scale(.92);}

[data-reveal].in-view{opacity:1;transform:translate(0,0) scale(1);}

/* stagger children of a group via inline --d custom property */
[data-reveal]{transition-delay:var(--d,0s);}

/* ---------------------------- Floating hero art ---------------------------- */
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.hero-node.main{animation:floatY 6s ease-in-out infinite;}
.hero-node.match{animation:floatY 7s ease-in-out infinite;animation-delay:.6s;}
.hero-node.metric{animation:floatY 5.4s ease-in-out infinite;animation-delay:1.1s;}

.lattice circle{animation:pulseDot 3s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:.4;r:3;}50%{opacity:1;r:4.4;}}

/* ---------------------------------- Typing ---------------------------------- */
.typing-caret{display:inline-block;width:2px;background:currentColor;margin-left:2px;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

/* ----------------------------------- Ripple ---------------------------------- */
.btn{position:relative;overflow:hidden;}
.ripple{
  position:absolute;border-radius:50%;background:rgba(255,255,255,0.5);
  transform:scale(0);animation:rippleAnim .6s var(--ease);pointer-events:none;
}
[data-theme="dark"] .ripple{background:rgba(255,255,255,0.25);}
@keyframes rippleAnim{to{transform:scale(3.2);opacity:0;}}

/* ---------------------------------- Loader ----------------------------------- */
.loader-mark{position:relative;}
.loader-mark::after{
  content:"";position:absolute;inset:-10px;border-radius:22px;border:2px solid transparent;
  border-top-color:var(--accent);animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* --------------------------------- Marquee fade -------------------------------- */
.logo-track span{transition:opacity .3s var(--ease);}

/* --------------------------------- Card hover glow ----------------------------- */
.service-card, .candidate-card, .job-row, .testi-card{
  transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}

/* --------------------------------- Nav underline ------------------------------- */
.main-nav > li > a{position:relative;}
.main-nav > li > a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;border-radius:2px;
  background:var(--grad-primary);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease);
}
.main-nav > li > a:hover::after{transform:scaleX(1);}

/* ------------------------------ Skeleton → content ------------------------------ */
.skeleton-wrap .skeleton{transition:opacity .4s var(--ease);}
.skeleton-wrap.loaded .skeleton{display:none;}
.skeleton-wrap.loaded .real-content{
  animation:fadeIn .5s var(--ease);
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* --------------------------------- Counter tick up -------------------------------- */
[data-counter]{font-variant-numeric:tabular-nums;}

/* ------------------------------ FAQ accordion smoothing --------------------------- */
.faq-item .faq-a{transition:max-height .4s var(--ease);}

/* ------------------------------ Page-load hero sequence --------------------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
.hero-copy > *{animation:riseIn .7s var(--ease) both;}
.hero-copy .eyebrow{animation-delay:.05s;}
.hero-copy h1{animation-delay:.14s;}
.hero-copy .hero-lede{animation-delay:.22s;}
.hero-copy .hero-actions{animation-delay:.3s;}
.hero-copy .hero-search{animation-delay:.38s;}
.hero-copy .hero-stats{animation-delay:.46s;}
.hero-visual{animation:riseIn .9s var(--ease) both;animation-delay:.2s;}