/* ============================================================
   SMVP ANIMATIES · Studio MVP · alle sectie-animaties in één
   cachebaar bestand. Code modules bevatten alleen nog HTML.
   Onderdelen: wiel-carousel (horizontaal + verticaal), chat,
   floating hearts, logo Weidevlees.
   ============================================================ */

/* ---- Divi 5 flex-kolom fix: elke animatie-module vult zijn
        kolom en centreert zijn inhoud. Alle animatie-roots
        dragen de class smvp-anim. ---- */
.et_pb_code:has(.smvp-anim) {
  width: 100%;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
}
.et_pb_code:has(.smvp-anim) .et_pb_code_inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   1 · WIEL-CAROUSEL · basis = horizontaal, .smvp-wheel--v
       maakt hem verticaal (rotatiecentrum rechts).
   ============================================================ */
.smvp-wheel {
  --sw-slide-w: 73%;
  --sw-gap: 0.035;
  --sw-radius: 2.2;
  --sw-radius-px: 2000px;      /* wordt door JS gezet */
  --sw-duration: 1.1s;
  --sw-ease: cubic-bezier(0.34, 1.45, 0.5, 1);
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
}

.smvp-wheel__slide {
  position: absolute;
  top: 5%;
  left: 50%;
  width: var(--sw-slide-w);
  aspect-ratio: 16 / 9;
  margin-left: calc(var(--sw-slide-w) / -2);
  transform-origin: 50% var(--sw-radius-px);
  transform: rotate(var(--sw-angle, 0deg)) translate3d(0, 0, 0);
  transition: transform var(--sw-duration) var(--sw-ease);
  will-change: transform;
  visibility: hidden;
  pointer-events: none;
}
.smvp-wheel__slide.is-visible { visibility: visible; pointer-events: auto; }
.smvp-wheel__slide.is-wrapping { transition: none; }

.smvp-wheel__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(15, 20, 30, 0.28);
  background: #e8eaee;
}

/* verticale variant: --sw-max-h stuurt de maat, breedte volgt uit de
   verhouding · geen afhankelijkheid van de kolomhoogte (die is in een
   kolom met alleen deze module circulair en resolvet niet) */
.smvp-wheel--v {
  --sw-slide-w: 78%;
  --sw-gap: 0.05;
  --sw-max-h: 240px;
  height: auto;
  width: calc(var(--sw-max-h) * 1.4545);   /* 16/11 als factor · geen deling die minifiers kan breken */
  max-width: 100%;
  aspect-ratio: 16 / 11;
}
.smvp-wheel--v .smvp-wheel__slide {
  top: 50%;
  transform-origin: calc(100% + var(--sw-radius-px)) 50%;
  transform: translateY(-50%) rotate(var(--sw-angle, 0deg)) translate3d(0, 0, 0);
}
.smvp-wheel--v .smvp-wheel__img { box-shadow: 0 10px 26px rgba(15, 20, 30, 0.24); }

@media (max-width: 767px) {
  .smvp-wheel { --sw-slide-w: 76%; --sw-gap: 0.04; }
  .smvp-wheel--v { --sw-slide-w: 82%; --sw-gap: 0.055; }
  .smvp-wheel__img { border-radius: 6px; box-shadow: 0 8px 20px rgba(15, 20, 30, 0.24); }
}

@media (prefers-reduced-motion: reduce) {
  .smvp-wheel__slide { transition: none; }
}

/* ============================================================
   2 · CHAT · Hosting & Support tegel
   ============================================================ */
.smvp-chat {
  --chat-loop: 10s;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: transparent;
}

.smvp-chat__vraag {
  width: 82%;
  align-self: flex-start;
  transform-origin: 8% 100%;
  opacity: 0;
  animation: smvp-chat-vraag var(--chat-loop) infinite;
  will-change: transform, opacity;
}
.smvp-chat__vraag img { display: block; width: 100%; height: auto; }

.smvp-chat__reply {
  align-self: flex-end;
  width: 50.5%;               /* 82% x (2506/4068) -> fonts even groot */
  display: grid;
}
.smvp-chat__reply > * { grid-area: 1 / 1; }

.smvp-chat__antwoord {
  transform-origin: 92% 100%;
  opacity: 0;
  animation: smvp-chat-antwoord var(--chat-loop) infinite;
  will-change: transform, opacity;
}
.smvp-chat__antwoord img { display: block; width: 100%; height: auto; }

.smvp-chat__typing {
  justify-self: end;
  align-self: end;
  display: flex;
  gap: 7px;
  padding: 14px 18px;
  border-radius: 18px 18px 4px 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 20, 30, 0.14);
  transform-origin: 90% 100%;
  opacity: 0;
  animation: smvp-chat-typing var(--chat-loop) infinite;
  will-change: transform, opacity;
}
.smvp-chat__typing span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #b9c2cc;
  animation: smvp-chat-dot 1s infinite ease-in-out;
}
.smvp-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.smvp-chat__typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes smvp-chat-vraag {
  0%, 3% { opacity: 0; transform: scale(0.55) translateY(14px); }
  6.2%   { opacity: 1; transform: scale(1.05) translateY(-2px); }
  8%     { opacity: 1; transform: scale(1) translateY(0); }
  88%    { opacity: 1; transform: scale(1) translateY(0); }
  94%, 100% { opacity: 0; transform: scale(1) translateY(-8px); }
}
@keyframes smvp-chat-typing {
  0%, 20% { opacity: 0; transform: scale(0.55) translateY(10px); }
  22.5%   { opacity: 1; transform: scale(1.06) translateY(-2px); }
  24%     { opacity: 1; transform: scale(1) translateY(0); }
  42%     { opacity: 1; transform: scale(1) translateY(0); }
  45%, 100% { opacity: 0; transform: scale(0.7) translateY(4px); }
}
@keyframes smvp-chat-antwoord {
  0%, 45% { opacity: 0; transform: scale(0.55) translateY(14px); }
  48.5%   { opacity: 1; transform: scale(1.05) translateY(-2px); }
  51%     { opacity: 1; transform: scale(1) translateY(0); }
  88%     { opacity: 1; transform: scale(1) translateY(0); }
  94%, 100% { opacity: 0; transform: scale(1) translateY(-8px); }
}
@keyframes smvp-chat-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.55; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

.smvp-chat.is-paused .smvp-chat__vraag,
.smvp-chat.is-paused .smvp-chat__typing,
.smvp-chat.is-paused .smvp-chat__typing span,
.smvp-chat.is-paused .smvp-chat__antwoord { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .smvp-chat__vraag, .smvp-chat__antwoord { animation: none; opacity: 1; transform: none; }
  .smvp-chat__typing { display: none; }
}

@media (max-width: 767px) {
  .smvp-chat { gap: 10px; }
  .smvp-chat__vraag { width: 92%; }
  .smvp-chat__reply { width: 56.7%; }
}

/* ============================================================
   3 · FLOATING HEARTS · Social media tegel
   ============================================================ */
.smvp-hearts {
  --zone-w: 45%;
  position: relative;
  width: var(--zone-w);
  margin-left: auto;           /* rechts uitgelijnd, ook binnen flex-center */
  height: 100%;
  min-height: 240px;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
}

.smvp-hearts__item {
  position: absolute;
  top: 100%;
  left: var(--x, 50%);
  width: var(--s, 44px);
  opacity: 0;
  animation: smvp-heart-rise var(--d, 6s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.smvp-hearts__item img {
  display: block;
  width: 100%;
  height: auto;
  animation: smvp-heart-sway var(--sd, 2.4s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}

@keyframes smvp-heart-rise {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  8%   { opacity: var(--o, 0.95); transform: translateY(-42px) scale(1); }
  55%  { opacity: var(--o, 0.95); }
  100% { opacity: 0; transform: translateY(-520px) scale(1.05); }
}
@keyframes smvp-heart-sway {
  from { transform: translateX(calc(-1 * var(--sw, 12px))) rotate(-4deg); }
  to   { transform: translateX(var(--sw, 12px)) rotate(4deg); }
}

.smvp-hearts.is-paused .smvp-hearts__item,
.smvp-hearts.is-paused .smvp-hearts__item img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .smvp-hearts__item, .smvp-hearts__item img { animation: none; }
  .smvp-hearts__item { top: auto; bottom: calc(var(--rmb, 20) * 1%); opacity: var(--o, 0.9); }
}

/* ============================================================
   4 · LOGO WEIDEVLEES · doorlopende opbouw-cyclus
   ============================================================ */
.smvp-logo {
  --lg-loop: 6s;
  width: 100%;
  max-width: 60%;
  background: transparent;
}
.smvp-logo svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: lg-cyclus var(--lg-loop) linear infinite;
}

.smvp-logo .lg-cirkel,
.smvp-logo .lg-stralen,
.smvp-logo .lg-banner,
.smvp-logo .lg-graslijn,
.smvp-logo .lg-koeien,
.smvp-logo .lg-waaier,
.smvp-logo .lg-rodenburg path {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: var(--lg-loop);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.smvp-logo .lg-cirkel { transform-box: view-box; transform-origin: 0 0; }

.smvp-logo .lg-cirkel   { animation-name: lg-cirkel; }
.smvp-logo .lg-stralen  { animation-name: lg-stralen; }
.smvp-logo .lg-banner   { animation-name: lg-banner; }
.smvp-logo .lg-graslijn { animation-name: lg-graslijn; }
.smvp-logo .lg-koeien   { animation-name: lg-koeien; }
.smvp-logo .lg-waaier   { animation-name: lg-waaier; }

@keyframes lg-cyclus {
  0%, 84% { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes lg-cirkel {
  0%   { opacity: 1; stroke-dasharray: 100; stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  14%  { opacity: 1; stroke-dasharray: 100; stroke-dashoffset: 0; }
  18%  { opacity: 1; stroke-dashoffset: 0; }
  26%, 100% { opacity: 0; stroke-dasharray: 100; stroke-dashoffset: 0; }
}
@keyframes lg-stralen {
  0%, 4% { opacity: 0; transform: scale(0.55) rotate(-10deg); animation-timing-function: cubic-bezier(0.34, 1.3, 0.5, 1); }
  20%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes lg-banner {
  0%, 10% { opacity: 0; transform: translateY(16px); animation-timing-function: cubic-bezier(0.34, 1.4, 0.5, 1); }
  23%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes lg-graslijn {
  0%, 16% { opacity: 1; clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  29%, 100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes lg-koeien {
  0%, 21% { opacity: 0; transform: scale(0.6); animation-timing-function: cubic-bezier(0.34, 1.45, 0.5, 1); }
  36%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes lg-waaier {
  0%, 27% { opacity: 0; transform: scaleY(0.3); transform-origin: center top; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  40%, 100% { opacity: 1; transform: scaleY(1); transform-origin: center top; }
}

.smvp-logo .lg-rodenburg path:nth-of-type(1) { animation-name: lg-let1; }
@keyframes lg-let1 {
  0%, 34.0% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  40.5%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(2) { animation-name: lg-let2; }
@keyframes lg-let2 {
  0%, 35.3% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  41.8%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(3) { animation-name: lg-let3; }
@keyframes lg-let3 {
  0%, 36.6% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  43.1%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(4) { animation-name: lg-let4; }
@keyframes lg-let4 {
  0%, 37.9% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  44.4%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(5) { animation-name: lg-let5; }
@keyframes lg-let5 {
  0%, 39.2% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  45.7%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(6) { animation-name: lg-let6; }
@keyframes lg-let6 {
  0%, 40.5% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  47.0%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(7) { animation-name: lg-let7; }
@keyframes lg-let7 {
  0%, 41.8% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  48.3%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(8) { animation-name: lg-let8; }
@keyframes lg-let8 {
  0%, 43.1% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  49.6%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.smvp-logo .lg-rodenburg path:nth-of-type(9) { animation-name: lg-let9; }
@keyframes lg-let9 {
  0%, 44.4% { opacity: 0; transform: translateY(9px) scale(0.5); animation-timing-function: cubic-bezier(0.34, 1.5, 0.5, 1); }
  50.9%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

.smvp-logo.is-paused svg,
.smvp-logo.is-paused svg * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .smvp-logo svg, .smvp-logo svg * {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
    transform: none !important;
  }
  .smvp-logo .lg-cirkel { opacity: 0 !important; }
}