/* Lightweight SVG/CSS explainers for echtscheidingsprocedure.nl */
.animation-showcase{padding:92px 0;background:linear-gradient(180deg,#f8f2eb 0%,#fffdf9 100%)}
.animation-showcase.alt{background:#eee7dd}
.animation-showcase .section-head{margin-bottom:30px}
.animation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.animation-card{position:relative;overflow:hidden;background:#fffdf9;border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 34px rgba(45,25,47,.08);transition:transform .25s ease,box-shadow .25s ease}
.animation-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(45,25,47,.13)}
.animation-card-copy{padding:22px 24px 25px}
.animation-card-copy span{display:block;color:var(--sage);font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.animation-card-copy h3{margin:8px 0 7px;font-size:25px}
.animation-card-copy p{margin:0;color:var(--muted);font-size:14px}
.legal-animation{position:relative;aspect-ratio:16/10;min-height:220px;overflow:hidden;background:radial-gradient(circle at 20% 10%,rgba(238,138,99,.16),transparent 34%),linear-gradient(145deg,#fffaf5,#f0ece7);border-bottom:1px solid var(--line)}
.legal-animation svg{display:block;width:100%;height:100%}
.legal-animation .anim-line{stroke:#c9bdc8;stroke-width:5;stroke-linecap:round;fill:none}
.legal-animation .anim-line-dash{stroke:#93658f;stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:8 11}
.legal-animation .anim-plum{fill:#674465}
.legal-animation .anim-plum-light{fill:#c8acc3}
.legal-animation .anim-sage{fill:#8da18c}
.legal-animation .anim-sage-light{fill:#d9e2d8}
.legal-animation .anim-apricot{fill:#e98a63}
.legal-animation .anim-apricot-light{fill:#f5c7b4}
.legal-animation .anim-paper{fill:#fffdf9}
.legal-animation .anim-ink{fill:#2f2530}
.legal-animation .anim-muted{fill:#756a75}
.legal-animation .anim-stroke{stroke:#4d334c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.legal-animation text{font-family:Arial,sans-serif}
.legal-animation .anim-label{font-size:13px;font-weight:700;fill:#4d334c}
.legal-animation .anim-small{font-size:11px;font-weight:700;fill:#756a75}
.legal-animation .anim-node{filter:drop-shadow(0 6px 8px rgba(62,42,62,.12))}
.legal-animation .pulse{transform-box:fill-box;transform-origin:center;animation:epPulse 5s ease-in-out infinite}
.legal-animation .pulse-delay{transform-box:fill-box;transform-origin:center;animation:epPulse 5s 1.2s ease-in-out infinite}
.legal-animation .pulse-delay-2{transform-box:fill-box;transform-origin:center;animation:epPulse 5s 2.4s ease-in-out infinite}
.legal-animation .pulse-delay-3{transform-box:fill-box;transform-origin:center;animation:epPulse 5s 3.6s ease-in-out infinite}
.legal-animation .flow-dot{animation:epFlow 5s linear infinite}
.legal-animation .float-a{transform-box:fill-box;transform-origin:center;animation:epFloat 4.4s ease-in-out infinite}
.legal-animation .float-b{transform-box:fill-box;transform-origin:center;animation:epFloat 4.4s 1.1s ease-in-out infinite}
.legal-animation .float-c{transform-box:fill-box;transform-origin:center;animation:epFloat 4.4s 2.2s ease-in-out infinite}
.legal-animation .check-one,.legal-animation .check-two,.legal-animation .check-three,.legal-animation .check-four{stroke-dasharray:30;stroke-dashoffset:30;animation:epCheck 6s ease-in-out infinite}
.legal-animation .check-two{animation-delay:1s}.legal-animation .check-three{animation-delay:2s}.legal-animation .check-four{animation-delay:3s}
.legal-animation .slide-right{animation:epSlideRight 5.5s ease-in-out infinite}
.legal-animation .slide-up{animation:epSlideUp 5.5s ease-in-out infinite}
.legal-animation .fade-one{animation:epFade 5.5s ease-in-out infinite}.legal-animation .fade-two{animation:epFade 5.5s 1.6s ease-in-out infinite}.legal-animation .fade-three{animation:epFade 5.5s 3.2s ease-in-out infinite}
.legal-animation .coin-one{animation:epCoin 4.5s ease-in-out infinite}.legal-animation .coin-two{animation:epCoin 4.5s .45s ease-in-out infinite}.legal-animation .coin-three{animation:epCoin 4.5s .9s ease-in-out infinite}
.legal-animation .rotate-slow{transform-box:fill-box;transform-origin:center;animation:epRotate 12s linear infinite}
.legal-animation .draw-path{stroke-dasharray:240;stroke-dashoffset:240;animation:epDraw 6s ease-in-out infinite}
.legal-animation.is-paused *{animation-play-state:paused!important}
.animation-toolbar{position:absolute;right:12px;bottom:12px;z-index:4}
.animation-toggle{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(72,38,74,.2);border-radius:999px;background:rgba(255,253,249,.92);color:var(--plum);font:700 12px/1 Arial,sans-serif;cursor:pointer;box-shadow:0 4px 15px rgba(45,25,47,.09)}
.animation-toggle:hover{background:#fff}
.animation-feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:50px;align-items:center;padding:34px;background:#fffdf9;border:1px solid var(--line);border-radius:28px;box-shadow:0 14px 42px rgba(45,25,47,.08)}
.animation-feature .legal-animation{border:1px solid var(--line);border-radius:20px;min-height:300px}
.animation-feature-copy h2{margin:9px 0 15px;font-size:clamp(34px,4vw,52px)}
.animation-feature-copy p{color:var(--muted);font-size:17px}
.animation-gallery-page{padding:72px 0 96px}
.animation-gallery-page .animation-grid{margin-top:35px}
.animation-status{margin-top:16px;color:var(--muted);font-size:13px}
@keyframes epPulse{0%,18%,100%{transform:scale(1)}9%{transform:scale(1.08)}}
@keyframes epFlow{0%{transform:translateX(0);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateX(310px);opacity:0}}
@keyframes epFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes epCheck{0%,10%{stroke-dashoffset:30;opacity:.25}25%,78%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:30;opacity:.25}}
@keyframes epSlideRight{0%,10%{transform:translateX(-18px);opacity:0}28%,72%{transform:translateX(0);opacity:1}92%,100%{transform:translateX(18px);opacity:0}}
@keyframes epSlideUp{0%,12%{transform:translateY(16px);opacity:0}30%,78%{transform:translateY(0);opacity:1}96%,100%{transform:translateY(-8px);opacity:0}}
@keyframes epFade{0%,12%,100%{opacity:.18}30%,72%{opacity:1}}
@keyframes epCoin{0%,100%{transform:translateY(0)}45%{transform:translateY(-11px)}60%{transform:translateY(0)}}
@keyframes epRotate{to{transform:rotate(360deg)}}
@keyframes epDraw{0%,12%{stroke-dashoffset:240}48%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}}
@media(max-width:920px){.animation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.animation-feature{grid-template-columns:1fr}.animation-feature .legal-animation{min-height:260px}}
@media(max-width:580px){.animation-showcase{padding:65px 0}.animation-grid{grid-template-columns:1fr}.animation-feature{padding:20px;gap:22px}.animation-feature .legal-animation{min-height:220px}.legal-animation{min-height:205px}.animation-card-copy{padding:19px}.animation-card-copy h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){.legal-animation *{animation:none!important}.animation-card{transition:none}.animation-toggle{display:none}}