/* ============================================================
   Rankkraft - effects.css
   Additieve "aftereffects" laag. Laad DIT bestand NA style.css:
     <link rel="stylesheet" href="assets/css/style.css">
     <link rel="stylesheet" href="assets/css/effects.css">
   Verandert geen kleuren of layout - voegt alleen beweging,
   diepte en micro-interacties toe. Respecteert reduced-motion.
   ============================================================ */

:root{
  /* valt terug op je bestaande merkkleuren als deze al bestaan */
  --fx-primary: var(--primary, #2563eb);
  --fx-accent:  var(--accent, #059669);
  --fx-ease:    cubic-bezier(.16,1,.3,1);
}

/* Alles met beweging zit hierin, zodat gebruikers die minder
   animatie willen niets missen (toegankelijkheid). */
@media (prefers-reduced-motion: no-preference){

  /* ---- 1. Hero: gespreide entree bij laden ---------------- */
  .hero__content > *,
  .hero__aside{
    opacity:0;
    animation: fxRise .9s var(--fx-ease) forwards;
  }
  .hero__content .hero__badge{ animation-delay:.05s }
  .hero__content h1{           animation-delay:.15s }
  .hero__content .hero__sub{   animation-delay:.28s }
  .hero__content .hero__ctas{  animation-delay:.40s }
  .hero__content .hero__trust{ animation-delay:.52s }
  .hero__aside{                animation-delay:.45s }

  @keyframes fxRise{
    from{ opacity:0; transform:translateY(22px) }
    to{   opacity:1; transform:none }
  }

  /* ---- 2. Hover-lift + zachte merk-glow op kaarten -------- */
  .service-card,
  .usp-card,
  .pricing-card,
  .process-step,
  .founder-card{
    transition: transform .45s var(--fx-ease),
                box-shadow .45s var(--fx-ease),
                border-color .45s var(--fx-ease);
    will-change: transform;
  }
  .service-card:hover,
  .usp-card:hover,
  .pricing-card:hover,
  .process-step:hover,
  .founder-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--fx-primary) 28%, transparent),
                0 6px 14px -8px rgba(15,23,42,.18);
  }

  /* ---- 3. Iconen poppen subtiel bij hover ----------------- */
  .service-card__icon,
  .usp-card__icon{
    transition: transform .45s var(--fx-ease);
    display:inline-block;
  }
  .service-card:hover .service-card__icon,
  .usp-card:hover .usp-card__icon{
    transform: scale(1.12) rotate(-4deg);
  }

  /* ---- 4. Shine-sweep over primaire knoppen --------------- */
  .btn--primary,
  .btn--white,
  .demo-form__submit{
    position: relative;
    overflow: hidden;
    transition: transform .25s var(--fx-ease), box-shadow .25s var(--fx-ease);
  }
  .btn--primary::after,
  .btn--white::after,
  .demo-form__submit::after{
    content:"";
    position:absolute; top:0; left:-130%;
    width:55%; height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
    transform: skewX(-20deg);
    pointer-events:none;
  }
  .btn--primary:hover,
  .btn--white:hover,
  .demo-form__submit:hover{
    transform: translateY(-2px);
  }
  .btn--primary:hover::after,
  .btn--white:hover::after,
  .demo-form__submit:hover::after{
    animation: fxShine .85s var(--fx-ease);
  }
  @keyframes fxShine{ to{ left:140% } }

  /* ---- 5. Pijltjes in knoppen schuiven mee ---------------- */
  .btn{ transition: gap .25s var(--fx-ease); }

  /* ---- 6. Animerende gradient op de hero-highlight -------- */
  .highlight{
    background:linear-gradient(100deg,var(--fx-primary),var(--fx-accent),var(--fx-primary));
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation: fxFlow 6s linear infinite;
  }
  @keyframes fxFlow{ to{ background-position:220% 0 } }

  /* ---- 7. Founder-foto zoomt zacht in --------------------- */
  .founder-card__img{ transition: transform .5s var(--fx-ease); }
  .founder-card:hover .founder-card__img{ transform: scale(1.06); }

  /* ---- 8. Reveal-on-scroll voor losse elementen ----------- */
  /* Zet data-reveal op een element om het te laten opkomen. */
  [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--fx-ease), transform .8s var(--fx-ease); }
  [data-reveal].fx-in{ opacity:1; transform:none; }
}

/* ---- 9. FAQ: de "+" draait naar een "x" bij openen ------- */
details summary span{ transition: transform .3s var(--fx-ease); display:inline-block; }
details[open] summary span{ transform: rotate(45deg); }

/* ---- 10. Nav krijgt diepte zodra je scrollt -------------- */
header{ transition: box-shadow .3s ease, backdrop-filter .3s ease, background-color .3s ease; }
header.fx-nav-scrolled{
  box-shadow: 0 6px 24px -12px rgba(15,23,42,.22);
  backdrop-filter: saturate(140%) blur(8px);
}

/* ---- 11. Tilt-basis (JS voegt de hoek toe) -------------- */
.fx-tilt{ transition: transform .3s var(--fx-ease); transform-style: preserve-3d; }

/* ---- 12. Nette focus-ring (a11y, niet weggeknipt) ------- */
.btn:focus-visible{ outline:2px solid var(--fx-primary); outline-offset:3px; }