/* Galavo · Prototyp · wreath.css (Agent A): Blumenkränze als Trenner (Katalog L8a, A4–A8).
   Seiten mit Kränzen binden es per <link> vor base.css ein (sonst bindet wreath.js es selbst ein).
   Endzustand ist das normale CSS. .arm (wreath.js, nur mit Bewegung) setzt die Animationen schon beim Start, aber
   angehalten: so steht der Ausgangszustand (ungezeichnet), bevor der Kranz die 70-%-Linie erreicht; .go lässt sie
   laufen. Ohne .arm (ohne Skript, „Bewegung reduzieren“, oberhalb des Bildes) steht sofort das Endbild.
   Blüten fallen mit wr-pop an ihren Platz: gebackene Bounce-Keyframes aus kurven.mjs (zwei leise Nachfederungen,
   kurze Stauchung beim Aufsetzen), Drehpunkt unten. Die Girlande wiegt sich nicht mehr dauernd (wr-sway malte das SVG
   in jedem Frame neu), sondern gelegentlich per WAAPI auf dem ganzen <svg> (wreath-hochzeit.js).
   Animiert werden nur transform, opacity und stroke-dashoffset. */
:root{--g-wreath:1}
[data-wreath]{
 /* hell: Tinte und Aquarell; dunkel: Weißdruck (--ink-line), Goldfolie (--acc), Salbei */
 --w-p1:light-dark(#F6D6DE,#D9AEB9);--w-p2:light-dark(#FFF4F2,#E7D6D4);--w-p3:light-dark(#EBB3C2,#C995A5);--w-core:light-dark(#C25775,#D9B877);--w-leaf:light-dark(#93A27A,#8E9C7A);--w-bud:light-dark(#E99AAE,#C98E9E);--w-stem:light-dark(#5B4033,#B8A792);
 display:grid;place-items:center;margin:0 auto;padding:8px 0;color:var(--ink)
}
[data-wreath][data-m=rose]{--w-p1:light-dark(#E6A1A6,#C98A90);--w-p2:light-dark(#D8808A,#B9707A);--w-p3:light-dark(#C2505D,#A65561);--w-core:light-dark(#8E3A44,#D9B877);--w-leaf:light-dark(#8A9C74,#8A9878);--w-bud:light-dark(#CF6F7B,#B9747E);--w-stem:light-dark(#5E6B48,#A9B293)}
/* Platz schon vor dem Skript reservieren (kein Nachrutschen) */
[data-wreath=tinte],[data-wreath=knospen],[data-wreath=blaetter]{min-height:186px}
[data-wreath=girlande]{width:min(100%,560px);aspect-ratio:560/124;padding:0;margin-top:-1px}
[data-wreath=blatt]{width:min(100%,320px);aspect-ratio:320/72;padding:0}
@media (max-width:699px){[data-wreath=tinte],[data-wreath=knospen],[data-wreath=blaetter]{min-height:152px}}

.wr-svg{width:170px;height:170px;overflow:visible}
@media (max-width:699px){.wr-svg{width:136px;height:136px}}
.wr-wide{width:100%;height:auto;overflow:visible}
.wr-gold{stroke:light-dark(var(--ink-line),var(--acc))!important}
/* Phulkari-Stiche (Look „Gulab“, look.css setzt die Seidenfarben) */
.wr-ink.wr-st{stroke:var(--c,var(--acc));stroke-width:1.25}
.wr-ink.wr-gota{stroke:var(--ph-gold,var(--acc))}
.wr-gota-s{fill:none;stroke:var(--ph-gold,var(--acc));stroke-width:1}
.wr-gota-d{fill:var(--ph-gold,var(--acc))}
.wr-ink{fill:none;stroke:var(--ink-line);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.wr-lf{fill:var(--w-leaf);opacity:.8}
.wr-p1{fill:var(--w-p1)}.wr-p2{fill:var(--w-p2)}.wr-p3{fill:var(--w-p3)}.wr-cr{fill:var(--w-core)}.wr-bd{fill:var(--w-bud)}
.wr-mono{font:italic 500 30px/1 var(--serif);fill:light-dark(var(--ink),var(--acc));text-anchor:middle}
.wr-pop{transform-box:fill-box;transform-origin:50% 100%}
.wr-budout{opacity:0}
.wr-budin{transform-box:fill-box;transform-origin:50% 100%}
[data-wreath=girlande] .wr-wide{transform-origin:50% 0}

@keyframes wr-draw{from{stroke-dashoffset:1}}
@keyframes wr-in{from{opacity:0}}
@keyframes wr-out{from{opacity:1}to{opacity:0}}
/* kurven:bounce:begin (kurven.mjs) */
@keyframes wr-pop{0%{transform:translateY(-14px) rotate(-10deg) scale(1,1);opacity:0;animation-timing-function:cubic-bezier(.55,.085,.68,.53)}10.82%{opacity:1}30.92%{transform:translateY(0px) rotate(0deg) scale(1.07,0.93);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}47.85%{transform:translateY(-4.2px) rotate(2.5deg) scale(1,1);animation-timing-function:cubic-bezier(.55,.085,.68,.53)}64.78%{transform:translateY(0px) rotate(0deg) scale(1.038,0.962);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}74.06%{transform:translateY(-1.26px) rotate(0deg) scale(1,1);animation-timing-function:cubic-bezier(.55,.085,.68,.53)}83.33%{transform:translateY(0px) rotate(0deg) scale(1.021,0.979);animation-timing-function:cubic-bezier(.25,.46,.45,.94)}100%{transform:translateY(0px) rotate(0deg) scale(1,1)}}
/* kurven:bounce:end */
@keyframes wr-bud{from{transform:scale(0);opacity:0}}
@keyframes wr-fly{from{transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:0}12%{opacity:1}}
@keyframes wr-drop{0%{transform:translate(-40px,-150px) rotate(-120deg);opacity:0}10%{opacity:1}35%{transform:translate(18px,-95px) rotate(-40deg)}60%{transform:translate(-14px,-40px) rotate(30deg)}84%{transform:translate(2px,2px) rotate(-8deg)}92%{transform:translate(0,-2px) rotate(-4deg)}100%{transform:none}}
[data-wreath]:is(.arm,.go) .wr-ink{animation:wr-draw var(--t,1.4s) cubic-bezier(.45,.05,.3,1) var(--d,0s) both}
[data-wreath]:is(.arm,.go) .wr-fadein{animation:wr-in .9s ease var(--d,0s) both}
[data-wreath]:is(.arm,.go) .wr-pop{animation:wr-pop 1.15s linear var(--d,0s) both}
[data-wreath]:is(.arm,.go) .wr-budin{animation:wr-bud .5s cubic-bezier(.2,.9,.25,1.2) var(--d,0s) both}
[data-wreath]:is(.arm,.go) .wr-budout{animation:wr-out .4s ease var(--d2,0s) both}
[data-wreath]:is(.arm,.go) .wr-fly{animation:wr-fly 1.5s cubic-bezier(.2,.7,.25,1) var(--d,0s) both}
[data-wreath]:is(.arm,.go) .wr-drop{animation:wr-drop 2.4s cubic-bezier(.4,.1,.4,1) var(--d,0s) both}
[data-wreath].arm:not(.go) *{animation-play-state:paused}