/* ==========================================================================
   Animation System — Van der Veen VP
   Purposeful, subtle, brand-aligned micro-interactions.
   Only animates transform + opacity (GPU). Respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.45, 0, 0.55, 1);
}

/* ==========================================================================
   1. NAV — scroll-aware shadow + link underline draw
   ========================================================================== */

.s-nav {
  transition: box-shadow 0.4s var(--ease-out-quart),
              border-color 0.4s var(--ease-out-quart);
}
.s-nav.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(14, 30, 43, 0.04),
              0 4px 16px -4px rgba(14, 30, 43, 0.06);
}

/* Brand mark dot: breathes once on load */
@keyframes brand-breathe {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.35); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.s-nav .brand-mark::after {
  animation: brand-breathe 2.4s var(--ease-in-out) 1.2s 1 both;
}

/* Nav links: underline draws in from center on hover */
.s-nav .nav-links a:not(.nav-cta) {
  position: relative;
}
.s-nav .nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 0; height: 1.5px;
  background: var(--sky-deep);
  transition: width 0.3s var(--ease-out-quart), left 0.3s var(--ease-out-quart);
}
.s-nav .nav-links a:not(.nav-cta):hover::after {
  width: 100%; left: 0;
}

/* Nav CTA: same glow ring as all buttons */
.s-nav .nav-cta {
  transition: background 0.3s var(--ease-out-quart),
              box-shadow 0.3s var(--ease-out-quart) !important;
}
.s-nav .nav-cta:hover {
  transform: none !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--moss) 30%, transparent);
}

/* ==========================================================================
   2. HERO — staggered entrance + blurred visual reveal
   ========================================================================== */

.s-hero .hero-text.is-revealed .eyebrow,
.s-hero .hero-text.is-revealed h1,
.s-hero .hero-text.is-revealed .hero-lead,
.s-hero .hero-text.is-revealed .hero-actions,
.s-hero .hero-text.is-revealed > p:last-child {
  opacity: 1; transform: none;
}
.s-hero .hero-text .eyebrow,
.s-hero .hero-text h1,
.s-hero .hero-text .hero-lead,
.s-hero .hero-text .hero-actions,
.s-hero .hero-text > p:last-child {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.s-hero .hero-text.is-revealed .eyebrow       { transition-delay: 0s; }
.s-hero .hero-text.is-revealed h1             { transition-delay: 0.1s; }
.s-hero .hero-text.is-revealed .hero-lead     { transition-delay: 0.2s; }
.s-hero .hero-text.is-revealed .hero-actions  { transition-delay: 0.3s; }
.s-hero .hero-text.is-revealed > p:last-child { transition-delay: 0.4s; }

/* Visual stack: blur-to-sharp */
.s-hero .hero-visual-stack {
  filter: blur(4px);
  transition: opacity 0.8s var(--ease-out-expo) 0.15s,
              transform 0.8s var(--ease-out-expo) 0.15s,
              filter 0.8s var(--ease-out-expo) 0.15s;
}
.s-hero .hero-visual-stack.is-revealed {
  filter: blur(0);
}

/* Info card: separate late entrance */
.s-hero .hero-info-card {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.6s var(--ease-out-expo) 0.5s,
              transform 0.6s var(--ease-out-expo) 0.5s;
}
.s-hero .hero-visual-stack.is-revealed .hero-info-card {
  opacity: 1; transform: none;
}

/* ==========================================================================
   3. USPs — horizontal slide-in + icon scale
   ========================================================================== */

.s-usps .usp.reveal {
  transform: translateX(-10px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.s-usps .usp.reveal.is-revealed { transform: none; }
.s-usps .usp.reveal:nth-child(1) { transition-delay: 0s; }
.s-usps .usp.reveal:nth-child(2) { transition-delay: 0.1s; }
.s-usps .usp.reveal:nth-child(3) { transition-delay: 0.2s; }

.s-usps .usp-ico {
  transform: scale(0.85); opacity: 0;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.4s var(--ease-out-expo);
}
.s-usps .usp.reveal.is-revealed .usp-ico { transform: scale(1); opacity: 1; }
.s-usps .usp.reveal:nth-child(1) .usp-ico { transition-delay: 0.15s; }
.s-usps .usp.reveal:nth-child(2) .usp-ico { transition-delay: 0.25s; }
.s-usps .usp.reveal:nth-child(3) .usp-ico { transition-delay: 0.35s; }

/* ==========================================================================
   4. WHEN CARDS — colored border glow + icon tilt (replace generic lift)
   ========================================================================== */

.s-when .when-card {
  transition: border-color 0.35s var(--ease-out-quart),
              box-shadow 0.35s var(--ease-out-quart),
              transform 0.35s var(--ease-out-quart) !important;
}
.s-when .when-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.s-when .when-card:nth-child(1):hover {
  border-color: var(--sky);
  box-shadow: 0 0 0 1px var(--sky-soft), 0 4px 12px -4px color-mix(in oklab, var(--sky) 15%, transparent) !important;
}
.s-when .when-card:nth-child(2):hover {
  border-color: var(--moss);
  box-shadow: 0 0 0 1px var(--moss-soft), 0 4px 12px -4px color-mix(in oklab, var(--moss) 15%, transparent) !important;
}
.s-when .when-card:nth-child(3):hover {
  border-color: #E2724A;
  box-shadow: 0 0 0 1px #FFE9DD, 0 4px 12px -4px rgba(226, 114, 74, 0.15) !important;
}

.s-when .when-icon {
  transition: transform 0.35s var(--ease-out-quart);
}
.s-when .when-card:hover .when-icon {
  transform: rotate(-6deg) scale(1.05);
}

/* Staggered reveals with blur */
.s-when .when-card.reveal {
  filter: blur(2px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo), filter 0.7s var(--ease-out-expo);
}
.s-when .when-card.reveal.is-revealed { filter: blur(0); }
.s-when .when-card.reveal:nth-child(1) { transition-delay: 0s; }
.s-when .when-card.reveal:nth-child(2) { transition-delay: 0.12s; }
.s-when .when-card.reveal:nth-child(3) { transition-delay: 0.24s; }

/* ==========================================================================
   5. PROCESS STEPS — arrow fix + border-accent hover
   ========================================================================== */

/* Process steps: no hover (cards are not interactive) */

/* Staggered step reveals */
.s-process .step.reveal:nth-child(1) { transition-delay: 0s; }
.s-process .step.reveal:nth-child(2) { transition-delay: 0.1s; }
.s-process .step.reveal:nth-child(3) { transition-delay: 0.2s; }
.s-process .step.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ==========================================================================
   6. REVIEWS — quotation reveal + side-slide
   ========================================================================== */

.s-reviews .review-feature .review-mark {
  opacity: 0 !important;
  transform: scale(0.8) translateY(10px);
  transition: opacity 0.8s var(--ease-out-expo) 0.1s, transform 0.8s var(--ease-out-expo) 0.1s;
}
.s-reviews .review-feature.is-revealed .review-mark {
  opacity: 0.18 !important;
  transform: none;
}

.s-reviews .review-feature .review-quote {
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out-expo) 0.25s, transform 0.7s var(--ease-out-expo) 0.25s;
}
.s-reviews .review-feature.is-revealed .review-quote { opacity: 1; transform: none; }

.s-reviews .review-feature .review-author {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo) 0.45s;
}
.s-reviews .review-feature.is-revealed .review-author { opacity: 1; }

/* Secondary: slide in from right */
.s-reviews .reviews-stack .review.reveal {
  transform: translateX(16px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.s-reviews .reviews-stack .review.reveal.is-revealed { transform: none; }
.s-reviews .reviews-stack .review.reveal:nth-child(1) { transition-delay: 0.15s; }
.s-reviews .reviews-stack .review.reveal:nth-child(2) { transition-delay: 0.3s; }

/* Review hover: border color shift */
.s-reviews .reviews-stack .review {
  transition: border-left-color 0.3s var(--ease-out-quart);
}
.s-reviews .reviews-stack .review:hover {
  border-left-color: var(--moss);
}

/* ==========================================================================
   7. EMPLOYER — line pulse + glass glow
   ========================================================================== */

@keyframes employer-line-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.3; }
}
.s-employer::after {
  animation: employer-line-pulse 4s var(--ease-in-out) infinite;
}

.s-employer .office-card {
  transition: border-color 0.4s var(--ease-out-quart),
              box-shadow 0.4s var(--ease-out-quart);
}
.s-employer .office-card:hover {
  border-color: color-mix(in oklab, var(--bg-card) 30%, transparent);
  box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.2),
              inset 0 1px 0 color-mix(in oklab, var(--bg-card) 12%, transparent);
}

/* Tags stagger in */
.s-employer .employer-tags span {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}
.s-employer .reveal.is-revealed .employer-tags span { opacity: 1; transform: none; }
.s-employer .reveal.is-revealed .employer-tags span:nth-child(1) { transition-delay: 0.35s; }
.s-employer .reveal.is-revealed .employer-tags span:nth-child(2) { transition-delay: 0.40s; }
.s-employer .reveal.is-revealed .employer-tags span:nth-child(3) { transition-delay: 0.45s; }
.s-employer .reveal.is-revealed .employer-tags span:nth-child(4) { transition-delay: 0.50s; }

/* ==========================================================================
   8. CONTACT — moss focus glow
   ========================================================================== */

.s-contact .fluentform input:focus,
.s-contact .fluentform textarea:focus {
  border-color: var(--moss) !important;
  box-shadow: 0 0 0 3px var(--moss-soft) !important;
}

/* ==========================================================================
   9. FOOTER — line draw + column stagger + link slide
   ========================================================================== */

@keyframes footer-line-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.s-footer::before {
  transform-origin: center;
  transform: scaleX(0);
}
.s-footer.is-revealed::before {
  animation: footer-line-draw 0.8s var(--ease-out-expo) 0.1s forwards;
}

.s-footer .footer-grid > div {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.s-footer.is-revealed .footer-grid > div { opacity: 1; transform: none; }
.s-footer.is-revealed .footer-grid > div:nth-child(1) { transition-delay: 0s; }
.s-footer.is-revealed .footer-grid > div:nth-child(2) { transition-delay: 0.08s; }
.s-footer.is-revealed .footer-grid > div:nth-child(3) { transition-delay: 0.16s; }
.s-footer.is-revealed .footer-grid > div:nth-child(4) { transition-delay: 0.24s; }

.s-footer ul a {
  display: inline-block;
  transition: color 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
}
.s-footer ul a:hover {
  transform: translateX(3px);
}

/* ==========================================================================
   10. BUTTONS — glow ring hover + tactile press
   ========================================================================== */

.btn {
  transition: background 0.25s var(--ease-out-quart),
              color 0.25s var(--ease-out-quart),
              border-color 0.25s var(--ease-out-quart),
              box-shadow 0.3s var(--ease-out-quart),
              transform 0.15s var(--ease-out-quart) !important;
}
.btn:active {
  transform: scale(0.975) !important;
}

/* Primary: visible green glow ring */
.btn-primary:hover {
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--moss) 30%, transparent) !important;
}

/* Ghost: soft neutral glow */
.btn-ghost:hover {
  border-color: var(--line) !important;
  box-shadow: 0 0 0 3px rgba(226, 232, 238, 0.5) !important;
}

/* Employer section: white buttons get white glow */
.s-employer .btn-primary:hover {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}

/* CTA arrow: draw-back-then-release, like pulling a bowstring */
.btn-primary svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:hover svg {
  transform: translateX(4px);
}
.btn-primary:active svg {
  transform: translateX(1px);
  transition-duration: 0.1s;
}

/* Phone icon: subtle ring-pulse on hover, NOT a translateX */
@keyframes phone-ring {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(8deg); }
  40%  { transform: rotate(-6deg); }
  60%  { transform: rotate(3deg); }
  80%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
.btn-ghost svg {
  transition: none;
  transform: none;
}
.btn-ghost:hover svg {
  animation: phone-ring 0.5s var(--ease-out-quart);
  transform: none;
}

/* ==========================================================================
   11. REVEAL — varied per element type
   ========================================================================== */

/* Section headings: blur-to-sharp */
.section-head.reveal {
  filter: blur(3px);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.7s var(--ease-out-expo),
              filter 0.7s var(--ease-out-expo);
}
.section-head.reveal.is-revealed { filter: blur(0); }

/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal,
  .s-hero .hero-text .eyebrow,
  .s-hero .hero-text h1,
  .s-hero .hero-text .hero-lead,
  .s-hero .hero-text .hero-actions,
  .s-hero .hero-info-card,
  .s-usps .usp-ico,
  .s-employer .employer-tags span,
  .s-footer .footer-grid > div,
  .s-reviews .review-feature .review-mark,
  .s-reviews .review-feature .review-quote,
  .s-reviews .review-feature .review-author {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}