/* =========================================================
   Mondrhythmus und Sonnenrhythmus (Vorschau 03.11.2026)
   Frauen: echter Mond (Baustein aus der App Mondrhythmus, NASA-Foto)
   im gestrichelten Kreis des Kopfes, dazu langsame Wellen.
   Männer: unten im Kopf glimmt Glut, Funken steigen auf.
   Nur transform und opacity werden bewegt.
   ========================================================= */

/* ---------- Frauen: der Mond im mittleren Kreis ---------- */
.hc-ornament--mond .hc-o-flaeche, .hc-ornament--mond .hc-o-mond { display: none; }
.hc-mond-bild { position: relative; }
.hc-mond-bild .va-mond-scheibe { position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; transform: translate(-50%, -50%); }
.va-mond-scheibe svg { display: block; width: 100%; height: 100%; }
/* Das Einblenden des Kreis-Ornaments gilt nicht für den Mond, er wird beim Phasenlauf neu gezeichnet */
.hc-ornament .va-mond-scheibe svg { opacity: 1; transform: none; animation: none; }
/* sanfter Lichthof um den Mond */
.va-mond-scheibe::before { content: ""; position: absolute; inset: -16%; border-radius: 50%;
  background: radial-gradient(circle, rgba(234,223,200,.28) 0%, rgba(234,223,200,0) 65%);
  z-index: -1; opacity: .55; transition: opacity 1.6s ease, transform 1.6s ease; }
/* beim heutigen Mond leuchtet der Lichthof auf */
.va-mond-scheibe.ist-heute::before { opacity: 1; transform: scale(1.1); }
.hc-mond-text { position: relative; z-index: 2; margin-top: 4px; text-align: center; }
.va-mond-datum { font-family: var(--serif); font-size: 1.15rem; color: #F4EDE0; }
.va-mond-heute { margin-top: 4px; font-size: .95rem; line-height: 1.5; color: #EADFC8; }
.va-mond-nachweis { position: absolute; z-index: 3; right: 14px; bottom: 54px; font-size: .7rem; color: #E8D2CB; opacity: .7; }

/* Wellen am unteren Rand des Kopfes, wie Ebbe und Flut */
.va-mond-wellen { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 30%; overflow: hidden; pointer-events: none; }
.va-mond-wellen svg { width: 200%; height: 100%; animation: vaMondWellen 46s linear infinite; }
@keyframes vaMondWellen { to { transform: translateX(-50%); } }
.va-mond-wellen path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.va-mond-wellen .w1 { stroke: #C9AC77; stroke-width: 1.6; opacity: .5; }
.va-mond-wellen .w2 { stroke: #9CAF88; stroke-width: 1.3; opacity: .38; }
.va-mond-wellen .w3 { stroke: #D4B3AB; stroke-width: 1; opacity: .3; }

/* Am Handy steht der Mond gut sichtbar unter dem Text */
@media (max-width: 920px) {
  .hc-ornament.hc-ornament--mond { position: relative; top: auto; right: auto; width: 260px; max-width: 70%; opacity: 1; margin: 8px auto 0; }
  .va-mond-nachweis { bottom: 60px; }
  .va-mond-wellen { height: 150px; }
}

/* ---------- Männer: aus der Glut steigen Funken ---------- */
/* Unten im Kopf glimmt die Glut und atmet langsam */
.bw-glut { position: absolute; left: -10%; right: -10%; bottom: -22%; height: 75%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212,181,101,.55) 0%, rgba(194,154,61,.3) 45%, rgba(194,154,61,0) 100%);
  transform-origin: 50% 100%; animation: bwGlimmen 7s ease-in-out infinite; }
@keyframes bwGlimmen { 0%, 100% { opacity: .55; transform: scaleY(.9); } 50% { opacity: 1; transform: scaleY(1.06); } }
/* Funken steigen auf, schwanken leicht und flackern.
   Die Bahn ist so hoch wie der Kopf, darum steigen sie am Handy genauso weit wie am Computer.
   --k ist der Anteil der Kopfhöhe, den ein Funke schafft. */
.bw-ember { position: absolute; top: 0; bottom: -10px; left: var(--x); width: var(--s); opacity: 0;
  animation: bwFunkenflug var(--t) cubic-bezier(.3,.1,.6,1) var(--d) infinite; }
.bw-ember::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #FFF8E6 0 28%, var(--c, #D4B565) 52%, rgba(212,181,101,0) 76%);
  box-shadow: 0 0 10px 3px rgba(212,181,101,.45);
  animation: bwFlackern 1.3s ease-in-out var(--d) infinite alternate, bwVerglimmen var(--t) linear var(--d) infinite; }
@keyframes bwFunkenflug { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: 1; }
  35% { transform: translate(var(--w), calc(var(--k) * -34%)); }
  65% { opacity: .8; transform: translate(calc(var(--w) * -.6), calc(var(--k) * -67%)); }
  100% { opacity: 0; transform: translate(calc(var(--w) * .4), calc(var(--k) * -100%)); } }
@keyframes bwFlackern { from { opacity: 1; } to { opacity: .35; } }
@keyframes bwVerglimmen { from { transform: scale(1); } to { transform: scale(.3); } }

@media (prefers-reduced-motion: reduce) {
  .va-mond-wellen svg, .bw-glut { animation: none; }
  .bw-ember { display: none; }
}