/* ============================================================================= vonwesternhagen.com – Wappen „Konstruktion → Prägung“ (nur Startseiten, nach style.css) Ablauf in Sekunden ab dem ersten Bild (Zeitplan: ZEIT in scripts/wappen-bau.mjs, der Block „WAPPEN:TIMING“ unten wird daraus erzeugt): 0 – 1,05 Planachsen ziehen sich; sie kreuzen sich in der Siegelmitte 0,4 – 0,85 ein Zirkel sticht im Achsenkreuz ein … 0,6 – 1,55 … und schlägt den Konstruktionskreis, mit Bogenmarken an den fünf Teilungen des Passes 0,7 – 2,7 die Konturen zeichnen sich als feine Goldlinien: Rahmen im Uhrzeigersinn, Helm, Helmzier und Schild, das Gitter von innen nach außen, der Löwe zuletzt 2,2 – 2,8 Hilfslinien verblassen 2,4 – 4,8 Prägung (wappen.js): ein Streiflicht kommt flach von links und prägt die Linien zum Gold-Relief, die Lampe steigt in ihre Ruhelage oben; 3,0 – 3,8 die Konstruktionslinien verblassen 3,6 – 4,6 Maßkette danach keine selbstständige Bewegung; mit Maus folgt das Licht gedämpft dem Zeiger (wappen.js) Die Konstruktion ist reines CSS und läuft nur bei @media (scripting: enabled) und ohne Wunsch nach reduzierter Bewegung: Ihr Startzustand gilt ab dem ersten Bild und hängt nicht am Laden von wappen.js. Kommt wappen.js zu spät oder gar nicht, blendet statt der Prägung das flache Gold aus style.css ein (Rückfall). Ohne JavaScript, bei reduzierter Bewegung, bei erzwungenen Farben und im Druck gibt es keinen Aufbau (style.css). ============================================================================= */ /* ---------- Prägung (wappen.js) ---------- Lage und Maske der Lichtebenen (.siegel__form, .praegung, .praegung__ebene) stehen in style.css: Fehlt diese Datei, steht das Relief trotzdem richtig. */ .wappen.praegung-aktiv::before { will-change: transform; } /* die Lichtpfütze folgt der Lampe ein wenig */ /* ---------- Konstruktion ---------- */ @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .siegel { --w-strich: 1.35; } /* Linienstärke der Planebene in Siegel-Einheiten (Breite 603) */ /* Mit Prägung bleibt das flache Gold verborgen (wappen.js setzt die Klasse, bevor es zu sehen wäre) */ .siegel--licht .siegel__gold { animation: none; opacity: 0; } .siegel__plan { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--gold); stroke-width: var(--w-strich); pointer-events: none; will-change: opacity; /* eigene Ebene: das Neuzeichnen der Linien betrifft nur sie */ } .plan__rest { display: none; } /* Staubkörner: nur Teil der Form, keine Linie */ /* Hilfslinien: fein und gedämpft */ .plan__hilfe { stroke: rgb(198 166 106 / 0.55); stroke-width: calc(var(--w-strich) * 0.8); } .plan__mitte { transform-box: fill-box; transform-origin: center; } .plan__kreis { stroke: rgb(228 205 152 / 0.85); } .plan__zirkel { stroke: var(--gold-hell); transform-box: view-box; } .plan__zirkel circle { fill: var(--gold-hell); stroke: none; } .plan__strahl { stroke: rgb(198 166 106 / 0.42); } .plan__ansatz { stroke: rgb(228 205 152 / 0.8); } /* Linien zeichnen: pathLength = 1, Strich 1 und Lücke 2 – der Versatz läuft von 1 (unsichtbar) nach 0 */ .plan__kreis, .plan__strahl, .plan__ansatz, .plan__linien path { stroke-dasharray: 1 2; stroke-dashoffset: 1; } .plan__linien .r { stroke: var(--gold); } /* Rahmen */ .plan__linien .g { stroke: rgb(198 166 106 / 0.6); stroke-width: calc(var(--w-strich) * 0.8); } /* Gitter */ .plan__linien .h, .plan__linien .l { stroke: var(--gold-hell); } /* Helm, Helmzier, Schild, Löwe */ .plan__linien .l { stroke-width: calc(var(--w-strich) * 0.85); } /* Zeitplan: Verzögerung und Dauer je Gruppe (--w-v, --w-l) */ /* WAPPEN:TIMING:START */ /* erzeugt von scripts/wappen-bau.mjs – nicht von Hand ändern (Zeitplan: ZEIT im Skript) */ .achse--h::before{animation:ziehen-h .95s var(--zug) 0s both} .achse--v::before{animation:ziehen-v 1s var(--zug) .05s both} .achse__blase{animation:einblenden .6s ease-out .45s both} .plan__mitte{animation:w-einstich .45s var(--sanft) .4s both} .plan__kreis{animation:w-ziehen .95s cubic-bezier(.5,0,.3,1) .6s both} .plan__zirkel{animation:w-drehen .95s cubic-bezier(.5,0,.3,1) .6s both,w-zirkel 1.15s linear .5s both;transform-origin:301px 299.4px} .plan__strahl{animation:w-ziehen .4s cubic-bezier(.4,.05,.3,1) var(--w-v) both} .plan__ansatz{animation:w-ziehen .3s cubic-bezier(.4,.05,.3,1) var(--w-v) both} .plan__linien path{animation:w-ziehen var(--w-l) cubic-bezier(.4,.05,.3,1) var(--w-v) both} .plan__hilfe{animation:w-aus .6s ease-in 2.2s both} .siegel__gold{animation:einblenden 1s ease-out 2.6s both} .siegel__plan{animation:w-aus .8s ease-in 3s both} .masskette{animation:einblenden 1s ease-out 3.6s both} .t0{--w-v:.81s}.t1{--w-v:.93s}.t2{--w-v:1s}.t3{--w-v:1.09s}.t4{--w-v:1.25s}.z0{--w-v:.68s;--w-l:.95s}.z1{--w-v:.84s;--w-l:.4s}.z2{--w-v:.88s;--w-l:.4s}.z3{--w-v:.88s;--w-l:.65s}.z4{--w-v:1s;--w-l:.4s}.z5{--w-v:1.08s;--w-l:.75s}.z6{--w-v:1.08s;--w-l:.4s}.z7{--w-v:1.16s;--w-l:.4s}.z8{--w-v:1.16s;--w-l:.75s}.z9{--w-v:1.28s;--w-l:.4s}.z10{--w-v:1.28s;--w-l:.4s}.z11{--w-v:1.32s;--w-l:.4s}.z12{--w-v:1.36s;--w-l:.4s}.z13{--w-v:1.4s;--w-l:.4s}.z14{--w-v:1.4s;--w-l:.4s}.z15{--w-v:1.4s;--w-l:.45s}.z16{--w-v:1.4s;--w-l:.4s}.z17{--w-v:1.44s;--w-l:.4s}.z18{--w-v:1.44s;--w-l:.4s}.z19{--w-v:1.48s;--w-l:.4s}.z20{--w-v:1.48s;--w-l:.45s}.z21{--w-v:1.52s;--w-l:.4s}.z22{--w-v:1.56s;--w-l:.4s}.z23{--w-v:1.56s;--w-l:.8s}.z24{--w-v:1.6s;--w-l:.4s}.z25{--w-v:1.64s;--w-l:.4s}.z26{--w-v:1.68s;--w-l:.4s}.z27{--w-v:1.72s;--w-l:.4s}.z28{--w-v:1.76s;--w-l:.4s}.z29{--w-v:1.76s;--w-l:.35s}.z30{--w-v:1.8s;--w-l:.4s}.z31{--w-v:1.8s;--w-l:.35s}.z32{--w-v:1.84s;--w-l:.4s}.z33{--w-v:1.84s;--w-l:.35s}.z34{--w-v:1.88s;--w-l:.4s}.z35{--w-v:1.88s;--w-l:.35s}.z36{--w-v:1.92s;--w-l:.35s}.z37{--w-v:1.96s;--w-l:.35s}.z38{--w-v:2s;--w-l:.35s}.z39{--w-v:2.04s;--w-l:.35s}.z40{--w-v:2.08s;--w-l:.35s}.z41{--w-v:2.12s;--w-l:.35s}.z42{--w-v:2.16s;--w-l:.35s}.z43{--w-v:2.2s;--w-l:.35s}.z44{--w-v:2.24s;--w-l:.35s}.z45{--w-v:2.28s;--w-l:.35s}.z46{--w-v:2.32s;--w-l:.35s}.z47{--w-v:2.36s;--w-l:.35s} /* WAPPEN:TIMING:END */ } /* Kleine Bildschirme: Linien in Siegel-Einheiten etwas kräftiger, damit sie bei ≈ 300 px Breite nicht zerfallen */ @media (max-width: 39.99em) { .siegel { --w-strich: 1.75; } } @keyframes w-ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes w-drehen { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes w-zirkel { /* Zirkelschenkel: kurz da, solange er schlägt */ 0% { opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } } @keyframes w-einstich { from { opacity: 0; transform: scale(2.4); } to { opacity: 1; transform: none; } } @keyframes w-aus { to { opacity: 0; visibility: hidden; } } /* ---------- Erzwungene Farben: Wappen in Textfarbe (style.css), ohne Aufbau und ohne Lichtebenen ---------- */ @media (forced-colors: active) { .siegel__gold { animation: none !important; opacity: 1 !important; visibility: visible !important; } .siegel__plan, .praegung { display: none !important; } }