/* Sysplex – subtiele animaties (laadt na style.css). Zonder JavaScript of met
   "verminderde beweging" blijft alles gewoon zichtbaar en stil. */

@keyframes sxUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sxZoom { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sxDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-40px, 30px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes sxShine { from { transform: translateX(-120%) skewX(-20deg); } to { transform: translateX(220%) skewX(-20deg); } }
@keyframes sxRing  { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 80%,100% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } }

@media (prefers-reduced-motion: no-preference) {

  /* --- Binnenkomst bovenaan de pagina --- */
  .hero h1, .page-hero h1             { animation: sxUp .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero .hero-badge, .page-hero .section-label { animation: sxFade .6s ease both; }
  .hero-lead, .page-hero p            { animation: sxUp .7s .12s cubic-bezier(.2,.7,.2,1) both; }
  .hero-buttons                       { animation: sxUp .7s .22s cubic-bezier(.2,.7,.2,1) both; }
  .hero-trust                         { animation: sxFade .8s .35s ease both; }
  .hero-card                          { animation: sxZoom .8s .2s cubic-bezier(.2,.7,.2,1) both; }

  /* Langzaam bewegende lichtvlek in de hero */
  .hero::before { animation: sxDrift 16s ease-in-out infinite; }
  .page-hero { position: relative; overflow: hidden; }
  .page-hero::after {
    content: ''; position: absolute; width: 520px; height: 520px; right: -160px; top: -220px;
    background: radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none; animation: sxDrift 18s ease-in-out infinite;
  }
  .page-hero > .container { position: relative; z-index: 1; }

  /* --- Verschijnen tijdens scrollen (klassen worden door motion.js gezet) --- */
  html.sx-motion .sx-r {
    opacity: 0; transform: translateY(24px);
    transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--sx-d, 0s);
  }
  html.sx-motion .sx-r.sx-in { opacity: 1; transform: none; }

  /* --- Hover: kaarten komen iets omhoog --- */
  .service-card, .why-item, .post-card, .why-stat, .sx-lp-stat, .rank-math-faq-item {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .why-item:hover, .sx-lp-stat:hover, .rank-math-faq-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,29,53,.08); }
  .service-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(20,29,53,.12); }
  .post-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(20,29,53,.12); }
  .post-card .post-thumb { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
  .post-card:hover .post-thumb { transform: scale(1.04); }
  .service-card .service-icon { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
  .service-card:hover .service-icon { transform: scale(1.12) rotate(-4deg); }
  .service-link { transition: letter-spacing .2s ease, color .2s ease; }
  .service-card:hover .service-link { letter-spacing: .02em; }

  /* Glans over de oranje knoppen bij hover */
  .btn--primary { position: relative; overflow: hidden; }
  .btn--primary::after {
    content: ''; position: absolute; inset: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-120%) skewX(-20deg); pointer-events: none;
  }
  .btn--primary:hover::after { animation: sxShine .8s ease; }
  .btn { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
  .btn:active { transform: translateY(1px) scale(.98); }

  /* WhatsApp-knop in de mobiele balk: zachte puls */
  .sx-mobiel-balk a[href*="wa.me"] { animation: sxRing 2.6s ease-out 3s 3; }
}

/* Kop krijgt schaduw zodra u scrolt */
.site-header { transition: box-shadow .25s ease; }
.site-header.sx-scrolled { box-shadow: 0 6px 20px rgba(20,29,53,.08) !important; }

/* Leesvoortgang bovenaan blogartikelen */
.sx-voortgang {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 10001;
  background: linear-gradient(90deg, #f0a030, #e8522a); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}