/* Bewegende elementen, rustig en ingetogen, in de geest van "Ervaar de rust".
   Alles wordt uitgezet als de bezoeker minder beweging wil. */

/* Scroll-reveal: secties komen zacht omhoog als ze in beeld komen.
   Alleen actief als JS draait (html.has-motion), zodat er nooit
   verborgen content blijft staan zonder JavaScript. */
html.has-motion .hero .wrap > *,
html.has-motion .section .wrap,
html.has-motion .brandthought .wrap {
  opacity: 0;
  transform: translateY(26px);
}
html.has-motion .reveal-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 1s ease, transform 1s ease;
}

/* Hero-tekst komt gestaffeld binnen bij het laden */
html.has-motion .hero .wrap > * { transition-delay: 0s; }
html.has-motion .hero .wrap > *:nth-child(1).reveal-in { transition-delay: .05s; }
html.has-motion .hero .wrap > *:nth-child(2).reveal-in { transition-delay: .20s; }
html.has-motion .hero .wrap > *:nth-child(3).reveal-in { transition-delay: .35s; }
html.has-motion .hero .wrap > *:nth-child(4).reveal-in { transition-delay: .50s; }
html.has-motion .hero .wrap > *:nth-child(5).reveal-in { transition-delay: .62s; }

/* De terracotta lus die zichzelf "sluit", het merksymbool in beweging */
.loop-divider { display: flex; justify-content: center; padding: 8px 0 4px; }
.loop-divider svg { width: 46px; height: 46px; overflow: visible; }
.loop-divider .loop-path {
  stroke: var(--terra); stroke-width: 5; fill: none; stroke-linecap: round;
  stroke-dasharray: 196; stroke-dashoffset: 0;
  transform-origin: center;
  animation: loopDraw 5.5s ease-in-out infinite, loopBreathe 5.5s ease-in-out infinite;
}
@keyframes loopDraw {
  0%   { stroke-dashoffset: 186; }
  45%  { stroke-dashoffset: 18; }
  55%  { stroke-dashoffset: 18; }
  100% { stroke-dashoffset: 186; }
}
@keyframes loopBreathe {
  0%, 100% { transform: scale(0.94); opacity: .55; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* Logo "stampt" in bij het laden, terwijl de terracotta lus zich sluit */
html.has-motion .nav__logo svg {
  transform-origin: left center;
  animation: logoStamp 0.75s cubic-bezier(0.2, 0.85, 0.25, 1) both;
}
@keyframes logoStamp {
  0%   { opacity: 0; transform: scale(1.28) rotate(-3deg); }
  55%  { opacity: 1; transform: scale(0.95) rotate(0.5deg); }
  75%  { transform: scale(1.03) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
html.has-motion .nav__logo svg path[fill="none"] {
  stroke-dasharray: 210;
  animation: navLoopDraw 0.8s ease-out 0.08s both;
}
@keyframes navLoopDraw {
  0%   { stroke-dashoffset: 210; }
  100% { stroke-dashoffset: 0; }
}
html.has-motion .nav__logo svg:hover { animation: logoStampReplay 0.6s cubic-bezier(0.2, 0.85, 0.25, 1); }
@keyframes logoStampReplay {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.93); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Zachte hover-lift op kaarten en knoppen */
html.has-motion .review-card { transition: transform .4s ease, border-color .4s ease; }
html.has-motion .review-card:hover { transform: translateY(-4px); border-color: var(--terra); }
html.has-motion .btn { transition: opacity .25s ease, transform .25s ease, background .25s ease; }
html.has-motion .btn:hover { transform: translateY(-2px); }

/* Het omzetlek-getal telt op bij binnenkomst (klasse gestuurd door motion.js) */
.result__value.counting { color: var(--terra); }

/* Nadruk op het resultaatblok: dit is de winst van de ondernemer.
   Komt apart en nadrukkelijker binnen dan de omringende tekst. */
html.has-motion #scan .result {
  opacity: 0;
  transform: translateY(22px) scale(0.95);
}
html.has-motion #scan .result.result-in {
  animation: resultReveal 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes resultReveal {
  0%   { opacity: 0; transform: translateY(22px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Eenmalige puls op het bedrag zelf zodra het optellen klaar is */
.result__value.pulse { animation: resultPulse 1.2s ease-out; }
@keyframes resultPulse {
  0%   { transform: scale(1); text-shadow: none; }
  35%  { transform: scale(1.09); text-shadow: 0 0 30px rgba(174, 106, 71, 0.55); }
  100% { transform: scale(1); text-shadow: none; }
}

/* Zachte, blijvende terracotta-rand op het blok na binnenkomst */
html.has-motion #scan .result.result-in {
  border-color: rgba(174, 106, 71, 0.45);
  transition: border-color .8s ease;
}

/* Respecteer de wens voor minder beweging: alles stil, niets verborgen */
@media (prefers-reduced-motion: reduce) {
  html.has-motion .hero .wrap > *,
  html.has-motion .section .wrap,
  html.has-motion .brandthought .wrap { opacity: 1; transform: none; }
  html.has-motion #scan .result { opacity: 1; transform: none; animation: none; }
  .result__value.pulse { animation: none; }
  .score-tile { animation: none !important; transform: none !important; }
  html.has-motion .nav__logo svg,
  html.has-motion .nav__logo svg path[fill="none"] { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  .hero::before { animation: none; transform: scale(1.02); }
  .loop-divider .loop-path { animation: none; stroke-dashoffset: 18; opacity: 1; }
  html.has-motion .review-card:hover,
  html.has-motion .btn:hover { transform: none; }
}