/* ================= Prototyp · Modul Abschnitts-Animationen (motion.js) =================
   Aus Studie L8b, Auswahl B1, B8, B10, B11, B14, B15, B18. Aufruf: data-motion="<name>" am Element des
   Abschnitts, für Überschriften data-motion-headings="ink" an <main>. Zustände (setzt motion.js, nur mit Skript):
   .m-pre  wartet auf den Sichtbereich (Startzustand, nur Schmuck und kurz Überschriften versteckt)
   .m-run  läuft einmal (Animationen mit fill both, Weg vom Startzustand ins normale CSS)
   .m-done fertig: normales CSS, Endzustand
   Ohne Skript, bei html.rm und prefers-reduced-motion steht sofort der Endzustand. Animiert werden nur
   transform, opacity und stroke-dashoffset.
   Dunkel („Dunkler Karton“): Linien in Weißdruck (--ink-line), Gold leuchtet (--acc); Farben per light-dark(hell, dunkel),
   der helle Wert ist immer der alte. Was keine Farbe ist, steht im Zweier-Muster am Ende. */

@keyframes m-draw{from{stroke-dashoffset:1}}
@keyframes m-fade{from{opacity:0}}
@keyframes m-up{from{opacity:0;transform:translateY(var(--my,10px))}}
@keyframes m-pop{from{opacity:0;transform:translateY(14px) scale(.94)}}

.m-svg{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;z-index:2}
.m-svg path{fill:none;stroke:var(--ink-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-pre .m-svg path{stroke-dashoffset:1}

/* ---------- B1 · Ein Link, drei Wege (Gäste-Handys) ---------- */
/* Die Pill steht im Markup und ist auch ohne Skript sichtbar; ihr Platz und der Abstand zu den Handys sind fest */
.g-link{display:table;margin:36px auto 0;padding:9px 16px;border-radius:99px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 8px 18px -12px light-dark(rgba(42,34,28,.5),rgba(0,0,0,.8));font:500 14px/1 var(--sans);color:var(--ink);white-space:nowrap}
.g-link i{font-style:normal;color:var(--muted)}
.g-link+.guests{margin-top:80px}
@media (max-width:699px){.g-link{margin-top:28px;padding:8px 14px;font-size:13px}.g-link+.guests{margin-top:52px}}
.m-link{position:relative}
.m-pre.m-link :is(.g-link,.gphone){opacity:0}
.m-run.m-link .g-link{animation:m-fade .45s ease both}
.m-run.m-link .m-svg path{animation:m-draw .9s var(--ease) .3s both}
.m-run.m-link .m-svg .m{animation-duration:.8s}
.m-run.m-link .gphone{animation:m-pop .6s var(--spring) var(--md) both}

/* ---------- B8 · Blindprägung (Anlass-Kacheln, Das Besondere) ---------- */
.m-emboss>*{position:relative;isolation:isolate}
.m-srf,.m-deb{display:none;position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none}
.m-srf{background:var(--m-bg,var(--surface));border:1px solid var(--m-bd,var(--line))}
.m-deb{box-shadow:inset 0 1px 3px rgba(42,34,28,.34),inset 0 0 0 1px rgba(42,34,28,.05),inset 0 -1px 0 rgba(255,255,255,.75);opacity:0}
:is(.m-pre,.m-run).m-emboss>*{background:transparent;border-color:transparent;overflow:visible}
:is(.m-pre,.m-run).m-emboss :is(.m-srf,.m-deb){display:block}
.m-pre.m-emboss .m-srf,.m-pre.m-emboss>*>:not(.m-srf):not(.m-deb),.m-pre.m-emboss>*::after{opacity:0}
@keyframes m-deb{0%{opacity:0}20%,55%{opacity:1}100%{opacity:0}}
.m-run.m-emboss .m-deb{animation:m-deb 1.2s ease var(--md) both}
.m-run.m-emboss .m-srf{animation:m-fade .5s ease calc(var(--md) + .5s) both}
.m-run.m-emboss>*>:not(.m-srf):not(.m-deb){animation:m-fade .45s ease calc(var(--md) + .6s) both}
.m-run.m-emboss>*::after{animation:m-fade .35s ease calc(var(--md) + .75s) both}

/* ---------- B10 · Tinte rahmt die Spalte und hakt ab (Warum, Vergleich) ---------- */
.m-frame{position:relative}
.m-frame .m-svg path{stroke:var(--acc);stroke-width:2.2}
.m-frame td.us{position:relative;padding-right:44px}
.m-chk{position:absolute;right:14px;top:16px;width:20px;height:20px;max-width:none}
.m-chk path{stroke:light-dark(#E9C98A,var(--acc))}
.m-ck{position:relative;display:inline-block}
.m-ck>span{opacity:0}
.m-ck svg{position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;translate:-50% -55%;max-width:none;overflow:visible}
.m-ck path{stroke:var(--acc)}
:is(.m-chk,.m-ck) path{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-pre :is(.m-chk,.m-ck) path{stroke-dashoffset:1}
.m-run.m-frame .m-svg path{animation:m-draw 1s cubic-bezier(.45,.05,.3,1) var(--md,.15s) both}
.m-run.m-frame :is(.m-chk,.m-ck) path{animation:m-draw .3s var(--ease) var(--md) both}
@media (max-width:899px){.m-chk{top:auto;bottom:12px}}

/* ---------- B11 · Goldfolie (Preise) ---------- */
.m-host{position:relative;overflow:hidden}
.m-foil{position:absolute;top:-40%;left:0;width:90px;height:180%;background:linear-gradient(90deg,transparent,rgba(232,206,150,0) 10%,light-dark(rgba(232,206,150,.5),rgba(232,206,150,.24)) 45%,light-dark(rgba(255,248,230,.8),rgba(255,238,200,.36)) 52%,light-dark(rgba(217,184,119,.4),rgba(217,184,119,.18)) 60%,transparent);opacity:0;pointer-events:none;z-index:1}
@keyframes m-sweep{from{opacity:1;transform:translateX(-140px) rotate(22deg)}to{opacity:1;transform:translateX(var(--fw,500px)) rotate(22deg)}}
.m-pre.m-foil-set>*{opacity:0}
.m-run.m-foil-set>*{animation:m-pop .6s var(--spring) var(--md) both}
.m-run .m-foil{animation:m-sweep 1.2s cubic-bezier(.45,.05,.3,1) .45s both}

/* ---------- B14 · Federstrich (Fragen) ---------- */
.m-pen details{position:relative;border-bottom-color:transparent!important}
.m-line{position:absolute;left:0;bottom:-3px;width:100%;height:6px;max-width:none;overflow:visible;pointer-events:none}
.m-line path{fill:none;stroke:var(--ink-line);stroke-width:1.3;opacity:.55;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-pre .m-line path{stroke-dashoffset:1}
@keyframes m-spin{from{opacity:0;transform:rotate(-90deg)}}
.m-run.m-pen .m-line path{animation:m-draw .55s var(--ease) var(--md) both}
/* Gold-Kopie des Strichs: nur im Dunkeln (Weißdruck → Gold), hell ausgeblendet */
.m-line .g{display:none;stroke:var(--acc);opacity:.65}
.m-run.m-pen .m-line .g{animation:m-draw .55s var(--ease) var(--md) both,m-fade .45s ease calc(var(--md) + .5s) both}
.m-run.m-pen summary::after{animation:m-spin .5s var(--spring) calc(var(--md) + .2s) both}

/* ---------- B15 · Schleife (Schluss) ---------- */
.m-knot{position:relative;width:min(520px,100%);margin:0 auto -6px}
.m-knot svg{display:block;width:100%;height:auto;overflow:visible;max-width:none}
.m-knot path{fill:none;stroke:var(--ink-line);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-knot circle{fill:var(--acc);transform-box:fill-box;transform-origin:center}
.m-pre .m-knot path{stroke-dashoffset:1}
.m-pre .m-knot circle{opacity:0}
.m-pre.m-knot-host>.h2{opacity:0}
.m-run .m-knot path{animation:m-draw 1.2s cubic-bezier(.45,.05,.3,1) .1s both}
.m-run .m-knot circle{animation:m-pop .4s var(--spring) 1.25s both}
/* Gold-Kopie der Schleife: nur im Dunkeln, zieht sich mit und wird nach dem Zeichnen sichtbar (Weißdruck → Gold) */
.m-knot .g{display:none}
.m-knot .g path{stroke:var(--acc)}
.m-run .m-knot .g{animation:m-fade .5s ease 1.2s both}
.m-run.m-knot-host>.h2{animation:m-up .55s var(--ease) .4s both}

/* ---------- B18 · Akzentwort schreibt sich in Tinte, dann Schwung, dann Gold (Überschriften) ---------- */
/* --st: Abstand je Buchstabe, --wd: Schreibdauer (setzt motion.js). Nur das Akzentwort ist anfangs leer. */
.m-aw{position:relative;display:inline-block;white-space:nowrap}
.m-aw .m-ink{position:absolute;left:0;top:0;color:var(--ink-line);opacity:0;white-space:nowrap}
.m-aw .m-ink .l{display:inline-block}
/* Die Feder (Punkt) wandert nur über die Breite des Worts (--ww, setzt motion.js): Die Bahn selbst bewegt sich nicht,
   sonst ragte sie am Handy über den rechten Rand und das Layout-Fenster würde breiter */
.m-aw .m-nib{position:absolute;left:0;bottom:.16em;width:100%;height:0;pointer-events:none}
.m-aw .m-nib::before{content:"";position:absolute;left:-.06em;top:-.07em;width:.14em;height:.14em;border-radius:50%;background:var(--ink-line);opacity:0}
.m-aw svg{position:absolute;left:-2%;bottom:-.1em;width:104%;height:.3em;max-width:none;overflow:visible}
.m-aw svg path{fill:none;stroke:var(--acc);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.m-pre .m-aw .m-gold{opacity:0}
.m-pre .m-aw svg path{stroke-dashoffset:1}
@keyframes m-out{from{opacity:1}to{opacity:0}}
@keyframes m-nib{0%{opacity:1;transform:translateX(0)}92%{opacity:1}100%{opacity:0;transform:translateX(var(--ww,0px))}}
.m-run .m-aw .m-ink{animation:m-out .4s ease calc(var(--wd) + .45s) both}
.m-run .m-aw .m-ink .l{animation:m-fade .16s ease calc(var(--i) * var(--st)) both}
.m-run .m-aw .m-nib::before{animation:m-nib var(--wd) linear both}
.m-run .m-aw svg path{animation:m-draw .5s var(--ease) calc(var(--wd) + .05s) both}
.m-run .m-aw .m-gold{animation:m-fade .4s ease calc(var(--wd) + .45s) both}

/* ---------- Dunkel: was keine Farbe ist (Zweier-Muster, ohne Skript) ---------- */
/* B8: Lichtkante oben links, Schatten unten rechts. B11: Goldschimmer leuchtet (screen), bleibt aber gedämpft.
   B14/B15: Gold-Kopien einblenden. */
@media (prefers-color-scheme:dark){
 :root:not([data-theme=light]) .m-deb{box-shadow:inset 1px 1px 0 rgba(255,240,220,.16),inset -1px -2px 5px rgba(0,0,0,.6)}
 :root:not([data-theme=light]) .m-foil{mix-blend-mode:screen}
 :root:not([data-theme=light]) :is(.m-line .g,.m-knot .g){display:inline}
}
:root[data-theme=dark] .m-deb{box-shadow:inset 1px 1px 0 rgba(255,240,220,.16),inset -1px -2px 5px rgba(0,0,0,.6)}
:root[data-theme=dark] .m-foil{mix-blend-mode:screen}
:root[data-theme=dark] :is(.m-line .g,.m-knot .g){display:inline}