/* 99SEEDS v3 illustration motion (markup: inc/seeds-v3-art.php, controller: js/seeds-v3.js).
   Three layers: 1) the ink draws itself in once the drawing is on screen, then colour settles in;
   2) a quiet idle loop (blink, breathe, twinkle) while visible; 3) one full hover performance with
   anticipation, overshoot and follow-through that always plays to the end (.is-play). */

.h-illo, .h-icon { overflow: visible; }
.h-illo *, .h-icon * { transform-box: view-box; }
.h-illo .i-spark, .h-illo .i-ting, .h-illo .i-seed, .h-illo .i-eye { transform-box: fill-box; transform-origin: center; }
:root { --il-ease: cubic-bezier(.34, 1.4, .5, 1); --il-snap: cubic-bezier(.6, .05, .25, 1); }

/* ---------- 1) Draw in ---------- */
.h-motion [data-illo]:not(.is-drawn) :is(.ln, .ln2) { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.h-motion [data-illo]:not(.is-drawn) :is(path, circle, ellipse, rect, text, use):not(.ln):not(.ln2) { opacity: 0; }
.h-motion [data-illo]:not(.is-drawn) .fx { opacity: 0 !important; }
.h-motion [data-illo].is-drawn :is(.ln, .ln2) { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--il-snap); }
.h-motion [data-illo].is-drawn .ln2 { transition-delay: .18s; }
.h-motion [data-illo].is-drawn :is(path, circle, ellipse, rect, text, use):not(.ln):not(.ln2) { transition: opacity .45s ease .55s; }

/* ---------- Shared keyframes ---------- */
@keyframes il-blink { 0%, 91%, 100% { transform: none; } 94% { transform: scaleY(.08); } }
@keyframes il-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.018, .982); } }
@keyframes il-twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes il-burst { 0% { transform: scale(.4); } 35% { transform: scale(1.7) rotate(90deg); } 100% { transform: scale(1) rotate(180deg); } }
@keyframes il-shadow { 0%, 100% { transform: none; opacity: .14; } 30%, 48% { transform: scaleX(.62); opacity: .07; } 62% { transform: scaleX(1.12); } }

/* Idle runs only while drawn and on screen. */
.is-drawn.is-visible .i-spark { animation: il-twinkle 2.6s ease-in-out infinite; }
.is-drawn.is-visible .i-spark--2 { animation-delay: -.9s; }
.is-drawn.is-visible .i-spark--3 { animation-delay: -1.7s; }
.is-drawn.is-visible .i-spark--4 { animation-delay: -.4s; }
.i-shadow { transform-origin: 80px 147px; }

/* ---------- Original statt Nachbau: the seed jumps, the crown spins off and lands ---------- */
.h-illo--original { --play: 1250; }
.h-illo--original .i-char { transform-origin: 80px 142px; }
.h-illo--original .i-eyes { transform-origin: 80px 96px; }
.h-illo--original .i-crown { transform-origin: 80px 40px; }
.h-illo--original .i-arm--l { transform-origin: 50px 99px; }
.h-illo--original .i-arm--r { transform-origin: 110px 99px; }
.is-drawn.is-visible.h-illo--original .i-char { animation: il-breathe 3.4s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--original .i-eyes { animation: il-blink 4.6s infinite; }
.is-drawn.is-visible.h-illo--original .i-crown { animation: o-crown-idle 3.4s ease-in-out infinite; }
@keyframes o-crown-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px) rotate(-3deg); } }

[data-illo].h-illo--original.is-play .i-char { animation: o-jump 1.25s var(--il-snap) both; }
[data-illo].h-illo--original.is-play .i-crown { animation: o-crown 1.25s var(--il-snap) both; }
[data-illo].h-illo--original.is-play .i-eyes { animation: o-eyes 1.25s ease both; }
[data-illo].h-illo--original.is-play .i-arm--l { animation: o-arm-l 1.25s ease-in-out both; }
[data-illo].h-illo--original.is-play .i-arm--r { animation: o-arm-r 1.25s ease-in-out both; }
[data-illo].h-illo--original.is-play .i-shadow { animation: il-shadow 1.25s var(--il-snap) both; }
[data-illo].h-illo--original.is-play .i-spark { animation: il-burst .9s var(--il-ease) .38s both; }
@keyframes o-jump {
	0% { transform: none; } 14% { transform: scale(1.09, .86); } 32% { transform: translateY(-17px) scale(.93, 1.09); }
	48% { transform: translateY(-19px) scale(1); } 62% { transform: scale(1.07, .9); } 74% { transform: translateY(-3px) scale(.98, 1.03); } 86%, 100% { transform: none; }
}
@keyframes o-crown {
	0% { transform: none; } 14% { transform: translateY(5px); } 34% { transform: translateY(-34px) rotate(160deg); }
	50% { transform: translateY(-40px) rotate(330deg); } 64% { transform: translateY(1px) rotate(372deg); } 74% { transform: translateY(-2px) rotate(352deg); }
	86% { transform: rotate(364deg); } 100% { transform: rotate(360deg); }
}
@keyframes o-eyes { 0%, 10% { transform: none; } 16% { transform: scaleY(.1); } 30% { transform: scale(1.15, 1.2); } 60% { transform: scaleY(.15); } 70%, 100% { transform: none; } }
@keyframes o-arm-l { 0%, 100% { transform: none; } 30% { transform: rotate(18deg); } 50% { transform: rotate(-14deg); } 68% { transform: rotate(10deg); } }
@keyframes o-arm-r { 0%, 100% { transform: none; } 30% { transform: rotate(-18deg); } 50% { transform: rotate(14deg); } 68% { transform: rotate(-10deg); } }

/* ---------- Diskret verpackt: the box peeks over its shades and winks ---------- */
.h-illo--discreet { --play: 1700; }
.h-illo--discreet .i-char { transform-origin: 82px 136px; }
.h-illo--discreet .i-arrows { transform-origin: 114px 84px; }
.h-illo--discreet .i-ting { opacity: 0; }
.h-illo--discreet .i-wink { opacity: 0; }
.is-drawn.is-visible.h-illo--discreet .i-char { animation: il-breathe 3.8s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--discreet .i-glint { animation: d-glint 5s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--discreet .i-arrows { animation: d-arrows 3.8s ease-in-out infinite; }
@keyframes d-glint { 0%, 70% { transform: translateX(-26px); } 86%, 100% { transform: translateX(44px); } }
@keyframes d-arrows { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px); } }

[data-illo].h-illo--discreet.is-play .i-char { animation: d-squash 1.7s var(--il-snap) both; }
[data-illo].h-illo--discreet.is-play .i-shades { animation: d-shades 1.7s var(--il-snap) both; }
[data-illo].h-illo--discreet.is-play .i-brow { animation: d-brow 1.7s var(--il-snap) both; }
[data-illo].h-illo--discreet.is-play .i-eyes .i-eye { animation: d-eye 1.7s ease both; }
[data-illo].h-illo--discreet.is-play .i-wink { animation: d-wink 1.7s ease both; }
[data-illo].h-illo--discreet.is-play .i-ting { animation: d-ting 1.7s var(--il-ease) both; }
@keyframes d-squash { 0%, 100% { transform: none; } 12% { transform: scale(1.02, .97); } 30% { transform: scale(.98, 1.03); } 40% { transform: none; } }
@keyframes d-shades { 0% { transform: none; } 12% { transform: translateY(-2.5px); } 30%, 70% { transform: translateY(13px) rotate(-2deg); } 84% { transform: translateY(-1.5px); } 92%, 100% { transform: none; } }
@keyframes d-brow { 0%, 12% { transform: none; } 30%, 70% { transform: translateY(-5px); } 86%, 100% { transform: none; } }
@keyframes d-eye { 0%, 40% { transform: none; } 46% { transform: scaleY(.1); } 52%, 100% { transform: none; } }
@keyframes d-wink { 0%, 28% { opacity: 0; } 32%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes d-ting { 0%, 82% { opacity: 0; transform: scale(.2); } 90% { opacity: 1; transform: scale(1.3) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }

/* ---------- Gratis-Samen inklusive: lid pops, three seeds hop out ---------- */
.h-illo--gift { --play: 1650; }
.h-illo--gift .i-char, .h-illo--gift .i-lid { transform-origin: 82px 140px; }
.h-illo--gift .i-bow { transform-origin: 82px 61px; }
.h-illo--gift .i-tail { transform-origin: 82px 62px; }
.h-illo--gift .i-seed { opacity: 0; }
.is-drawn.is-visible.h-illo--gift .i-char { animation: il-breathe 3.2s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--gift .i-bow { animation: g-bow 3.2s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--gift .i-tail--l { animation: g-tail 3.2s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--gift .i-tail--r { animation: g-tail 3.2s ease-in-out infinite reverse; }
@keyframes g-bow { 0%, 100% { transform: none; } 50% { transform: scale(1.05, .96); } }
@keyframes g-tail { 0%, 100% { transform: none; } 50% { transform: rotate(5deg); } }

[data-illo].h-illo--gift.is-play .i-char { animation: g-shake 1.65s var(--il-snap) both; }
[data-illo].h-illo--gift.is-play .i-lid { animation: g-lid 1.65s var(--il-snap) both; }
[data-illo].h-illo--gift.is-play .i-bow { animation: g-bow-pop 1.65s var(--il-ease) both; }
[data-illo].h-illo--gift.is-play .i-seed--1 { animation: g-seed-1 1.65s cubic-bezier(.3, .6, .5, 1) both; }
[data-illo].h-illo--gift.is-play .i-seed--2 { animation: g-seed-2 1.65s cubic-bezier(.3, .6, .5, 1) both; }
[data-illo].h-illo--gift.is-play .i-seed--3 { animation: g-seed-3 1.65s cubic-bezier(.3, .6, .5, 1) both; }
[data-illo].h-illo--gift.is-play .i-spark { animation: il-burst .9s var(--il-ease) .45s both; }
@keyframes g-shake { 0% { transform: none; } 5% { transform: rotate(-3deg); } 10% { transform: rotate(3deg); } 15% { transform: rotate(-2deg); } 20% { transform: scale(1.06, .92); } 30% { transform: scale(.97, 1.04); } 40%, 100% { transform: none; } }
@keyframes g-lid {
	0% { transform: none; } 5% { transform: rotate(-3deg); } 10% { transform: rotate(3deg); } 15% { transform: rotate(-2deg); } 20% { transform: translateY(3px); }
	30% { transform: translateY(-30px) rotate(-9deg); } 50% { transform: translateY(-34px) rotate(-13deg); } 64% { transform: translateY(1px) rotate(1deg); }
	72% { transform: translateY(-6px) rotate(-2deg); } 80%, 100% { transform: none; }
}
@keyframes g-bow-pop { 0%, 22% { transform: none; } 32% { transform: scale(1.25, .8); } 42% { transform: scale(.9, 1.15); } 54%, 100% { transform: none; } }
@keyframes g-seed-1 { 0%, 24% { opacity: 0; transform: none; } 28% { opacity: 1; } 46% { transform: translate(-26px, -44px) rotate(-150deg); } 70% { transform: translate(-50px, 52px) rotate(-320deg); } 78% { transform: translate(-50px, 46px) rotate(-330deg); } 86%, 92% { opacity: 1; transform: translate(-50px, 52px) rotate(-340deg); } 100% { opacity: 0; transform: translate(-50px, 52px) rotate(-340deg); } }
@keyframes g-seed-2 { 0%, 26% { opacity: 0; transform: none; } 30% { opacity: 1; } 50% { transform: translate(6px, -60px) rotate(170deg); } 74% { transform: translate(-16px, 54px) rotate(380deg); } 82% { transform: translate(-16px, 48px) rotate(370deg); } 88%, 92% { opacity: 1; transform: translate(-16px, 54px) rotate(360deg); } 100% { opacity: 0; transform: translate(-16px, 54px) rotate(360deg); } }
@keyframes g-seed-3 { 0%, 25% { opacity: 0; transform: none; } 29% { opacity: 1; } 47% { transform: translate(28px, -40px) rotate(160deg); } 72% { transform: translate(50px, 52px) rotate(330deg); } 80% { transform: translate(50px, 46px) rotate(340deg); } 87%, 92% { opacity: 1; transform: translate(50px, 52px) rotate(350deg); } 100% { opacity: 0; transform: translate(50px, 52px) rotate(350deg); } }

/* ---------- Versand aus Deutschland: the winged letter whooshes, gets its postmark ---------- */
.h-illo--mail { --play: 1500; }
.h-illo--mail .i-char { transform-origin: 84px 82px; }
.h-illo--mail .i-eyes { transform-origin: 76px 96px; }
.h-illo--mail .i-wing--f { transform-origin: 49px 64px; }
.h-illo--mail .i-wing--b { transform-origin: 120px 55px; }
.h-illo--mail .i-speed { transform-origin: 32px 86px; }
.h-illo--mail .i-postmark { opacity: 0; }
.h-illo--mail .i-postmark :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn.is-visible.h-illo--mail .i-char { animation: m-bob 2.8s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--mail .i-eyes { animation: il-blink 5.2s infinite; }
.is-drawn.is-visible.h-illo--mail .i-wing--f { animation: m-flap 1.4s ease-in-out infinite; }
.is-drawn.is-visible.h-illo--mail .i-wing--b { animation: m-flap-b 1.4s ease-in-out infinite; }
.h-motion .is-drawn.is-visible.h-illo--mail .i-speed { stroke-dasharray: .42 .58; animation: m-stream 1.2s linear infinite; transition: none; }
.is-drawn.is-visible.h-illo--mail .i-speed--2 { animation-delay: -.4s; }
.is-drawn.is-visible.h-illo--mail .i-speed--3 { animation-delay: -.8s; }
@keyframes m-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3.5px) rotate(-1deg); } }
@keyframes m-flap { 0%, 100% { transform: none; } 50% { transform: rotate(-16deg) scaleY(.92); } }
@keyframes m-flap-b { 0%, 100% { transform: none; } 50% { transform: rotate(14deg) scaleY(.9); } }
@keyframes m-stream { to { stroke-dashoffset: -1; } }

[data-illo].h-illo--mail.is-play .i-char { animation: m-whoosh 1.5s var(--il-snap) both; }
[data-illo].h-illo--mail.is-play .i-wing--f { animation: m-flap .3s ease-in-out 5 both; }
[data-illo].h-illo--mail.is-play .i-wing--b { animation: m-flap-b .3s ease-in-out 5 both; }
[data-illo].h-illo--mail.is-play .i-postmark { animation: m-postmark 1.5s ease both; }
[data-illo].h-illo--mail.is-play .i-postmark :is(circle, path) { animation: m-ink 1.5s var(--il-snap) both; }

.h-motion [data-illo].h-illo--mail.is-play .i-speed { animation: m-gust 1.5s var(--il-snap) both, m-stream .5s linear infinite; }
[data-illo].h-illo--mail.is-play .i-spark { animation: il-burst .8s var(--il-ease) .5s both; }
@keyframes m-whoosh { 0% { transform: none; } 16% { transform: translateX(-7px) scale(.95, 1.05); } 36% { transform: translateX(13px) scale(1.06, .95) rotate(-3deg); } 56% { transform: translateX(8px); } 76% { transform: translateX(-2px) rotate(1deg); } 100% { transform: none; } }
@keyframes m-postmark { 0%, 30% { opacity: 0; } 34%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-ink { 0%, 32% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }
@keyframes m-gust { 0%, 100% { transform: none; } 36% { transform: scaleX(1.55); } }

/* ---------- Service icons ---------- */
.h-icon { --play: 1300; }
.h-icon .i-wheel--1 { transform-origin: 32px 69px; }
.h-icon .i-wheel--2 { transform-origin: 76px 69px; }
.h-icon--truck .i-char { transform-origin: 54px 70px; }
[data-illo].h-icon--truck.is-play .i-wheel { animation: t-spin .65s linear 2; }
[data-illo].h-icon--truck.is-play .i-char { animation: t-bump .325s ease-in-out 4; }
[data-illo].h-icon--truck.is-play .i-speed { animation: t-wind 1.3s ease both; }
@keyframes t-spin { to { transform: rotate(360deg); } }
@keyframes t-bump { 50% { transform: translateY(-2.5px) rotate(-1deg); } }
@keyframes t-wind { 0%, 100% { transform: none; opacity: 1; } 40% { transform: translateX(-6px); opacity: .4; } 70% { transform: translateX(2px); opacity: 1; } }

.h-icon--chat .i-char { transform-origin: 28px 80px; }
.h-icon--chat .i-dot { transform-box: fill-box; transform-origin: center; }
[data-illo].h-icon--chat.is-play .i-char { animation: c-pop 1.3s var(--il-ease) both; }
[data-illo].h-icon--chat.is-play .i-dot { animation: c-type .44s ease-in-out 3 both; }
[data-illo].h-icon--chat.is-play .i-dot--2 { animation-delay: .1s; }
[data-illo].h-icon--chat.is-play .i-dot--3 { animation-delay: .2s; }
@keyframes c-pop { 0%, 100% { transform: none; } 18% { transform: scale(.94); } 40% { transform: scale(1.05); } 60% { transform: none; } }
@keyframes c-type { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.1); } }

.h-icon--shield .i-char { transform-origin: 48px 48px; }
[data-illo].h-icon--shield.is-play .i-char { animation: s-pulse 1.3s var(--il-ease) both; }
[data-illo].h-icon--shield.is-play .i-check { animation: s-check 1.3s var(--il-snap) both; }
@keyframes s-pulse { 0%, 100% { transform: none; } 20% { transform: scale(.94); } 46% { transform: scale(1.06); } 70% { transform: none; } }
@keyframes s-check { 0%, 18% { stroke-dashoffset: 0; } 30% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }

.h-icon--badge .i-char { transform-origin: 48px 38px; }
.h-icon--badge .i-ribbon--l { transform-origin: 44px 60px; }
.h-icon--badge .i-ribbon--r { transform-origin: 52px 60px; }
[data-illo].h-icon--badge.is-play .i-char { animation: b-turn 1.3s var(--il-ease) both; }
[data-illo].h-icon--badge.is-play .i-ribbon--l { animation: b-sway 1.3s ease-in-out both; }
[data-illo].h-icon--badge.is-play .i-ribbon--r { animation: b-sway 1.3s ease-in-out reverse both; }
@keyframes b-turn { 0% { transform: none; } 22% { transform: rotate(-24deg) scale(.95); } 52% { transform: rotate(14deg) scale(1.06); } 74% { transform: rotate(-5deg); } 100% { transform: none; } }
@keyframes b-sway { 0%, 100% { transform: none; } 30% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }

/* ---------- Hero pouches: drop in on slide change, lift with a foil sheen on hover ---------- */
.h-scene .h-pack, .h-scene .h-pack__lift { transform-box: fill-box; transform-origin: 50% 100%; }
.h-scene .h-pack__lift { transition: transform .5s var(--il-ease); }
.h-scene .h-pack__sheen { transform-box: view-box; transition: none; }
@media (pointer: fine) {
	.h-scene .h-pack:hover .h-pack__lift { transform: translateY(-10px); }
	.h-scene .h-pack:hover .h-pack__sheen { transform: skewX(-16deg) translateX(340px); transition: transform .9s var(--il-snap); }
}
.h-hero.is-changed .h-slide.is-active .h-pack { animation: p-drop .85s var(--il-snap) calc(var(--i) * 90ms) both; }
@keyframes p-drop { 0% { transform: translateY(-46px); opacity: 0; } 55% { transform: translateY(4px) scale(1.03, .96); opacity: 1; } 75% { transform: translateY(-3px) scale(.99, 1.01); } 100% { transform: none; } }
.h-seal { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
	.h-illo *, .h-icon *, .h-scene * { animation: none !important; transition: none !important; }
}