/* ==========================================================================
   Windsack
   --------------------------------------------------------------------------
   Sitzt fest am oberen rechten Rand und richtet sich nach dem gemessenen
   Wind. Drei Zustände, gesteuert über data-wind:

     (leer)   windstill     hängt herab und krümmt sich unter dem Eigengewicht
     frisch   frischer Wind hebt sich, ruhiges Wehen
     stark    starker Wind  fast waagrecht, schnelles Flattern

   Die Bewegung entsteht aus einer Kette: jedes Segment dreht sich um sein
   linkes Ende, die Drehung pflanzt sich auf die folgenden fort. Deshalb
   flattert der Sack, statt bloß zu kippen.

   Gedreht wird über die eigenständige CSS-Eigenschaft "rotate", nicht über
   transform. Grund: die Segmente werden bereits über das transform-Attribut
   im SVG an ihren Platz geschoben. Beides in einer Eigenschaft würde sich
   gegenseitig überschreiben; rotate kommt zusätzlich dazu.

   Zweite Regel, teuer gelernt: eine laufende Animation steht in der Kaskade
   ÜBER der normalen Deklaration. Der Hängewinkel --ws-haeng darf deshalb
   nicht einfach danebengeschrieben werden - er steckt in den Keyframes
   selbst, sonst wäre er wirkungslos, sobald das Flattern läuft.
   ========================================================================== */

/*
 * Der Windsack sitzt in der Kopfleiste, zusammen mit Temperaturanzeige und
 * Menüschalter. Die Leiste ist dafür doppelt so hoch wie früher
 * (--wt-kopf-hoehe in basis.css).
 *
 * Vorher schwebte er frei am Bildrand und blendete sich beim Scrollen aus.
 * In der Leiste ist das weder nötig noch erwünscht: sie bleibt ja stehen.
 */
/*
 * Er steht in der Kopfleiste, links neben der Temperatur. Ausgegeben wird
 * er in header.php, als erstes Element der Werkzeuggruppe.
 *
 * Klein gehalten: die Leiste ist 88 px hoch, der Sack misst 60 - er sitzt
 * darin, ohne sie zu füllen.
 *
 * Zum negativen Rand rechts: im SVG hängt das Tuch bei Windstille vom Mast
 * (x = 20 von 116) nur bis etwa x = 48, rechts bleibt also gut die Hälfte
 * leer. Ohne Ausgleich klaffte sichtbar mehr Lücke zur Temperatur, als die
 * Zahlen vermuten lassen. Bei starkem Wind reicht das Tuch bis x = 93; auch
 * dann bleiben noch rund 16 px Abstand.
 */
.wt-windsack {
  position: relative;
  flex: none;
  width: 60px;
  margin-right: -4px;
  pointer-events: none;
}

.wt-windsack svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Wind aus Osten: der Sack zeigt nach Westen, also nach links. Das Licht im
   Verlauf ist rein senkrecht, die Spiegelung verdreht es deshalb nicht. */
.wt-windsack.wt-ws-links svg { transform: scaleX(-1); }

/* --- Mast und Beschläge -------------------------------------------------- */

/* Gefüllt statt gestrichelt: der Mast verjüngt sich nach oben, ein Strich
   mit fester Breite kann das nicht. basis.css setzt svg{fill:currentColor},
   deshalb steht hier überall eine ausdrückliche Füllung. */
.wt-ws-mast,
.wt-ws-fuss,
.wt-ws-lager {
  fill: var(--wt-leise);
  stroke: none;
  opacity: .62;
}

.wt-ws-ring {
  fill: none;
  stroke: var(--wt-leise);
  stroke-width: 1.6;
  opacity: .8;
}

/* --- Tuch ---------------------------------------------------------------- */

.wt-ws-tuch { stroke: none; }
.wt-ws-a { fill: var(--ws-a, #c9612c); }   /* gedämpftes Ziegelorange */
.wt-ws-b { fill: var(--ws-b, #e9dfcd); }   /* warmes Gebrochenweiß */

/* Die Wölbung. Liegt als zweite Lage deckungsgleich über jedem Band, damit
   die Bandfarben selbst einfarbig bleiben können. */
.wt-ws-rund {
  fill: url(#tws-rund);
  stroke: none;
}

/* Kehle und hintere Öffnung: man sieht in die Röhre hinein. */
.wt-ws-tief { fill: var(--ws-tief, #4a2011); stroke: none; }

/* --- Bewegung ------------------------------------------------------------ */

/* Grundwinkel der ganzen Kette. 0° wäre waagrecht, 90° senkrecht nach unten. */
.wt-ws-arm {
  transform-origin: 0 0;
  rotate: var(--ws-basis, 72deg);
  transition: rotate 1.6s var(--wt-kurve);
}

/* Die Gelenke. Jedes schwingt um sein linkes Ende, versetzt in der Zeit -
   dadurch läuft eine Welle durch den Sack statt eines Gleichschritts.
   --ws-haeng ist der ruhende Hängewinkel je Gelenk: bei Windstille krümmt
   sich der Sack dadurch nach unten, statt als Stab herabzustehen. */
.wt-ws-g2,
.wt-ws-g3,
.wt-ws-g4,
.wt-ws-g5 {
  transform-origin: 0 0;
  rotate: var(--ws-haeng, 0deg);      /* gilt bei abgeschalteter Bewegung */
  animation-name: wt-ws-welle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: var(--ws-takt, 4.2s);
}

.wt-ws-g3 { animation-delay: calc(var(--ws-takt, 4.2s) * -.18); }
.wt-ws-g4 { animation-delay: calc(var(--ws-takt, 4.2s) * -.36); }
.wt-ws-g5 { animation-delay: calc(var(--ws-takt, 4.2s) * -.54); }

/* Je weiter hinten, desto größer der Ausschlag - wie bei echtem Stoff. */
.wt-ws-g2 { --ws-faktor: 1; }
.wt-ws-g3 { --ws-faktor: 1.35; }
.wt-ws-g4 { --ws-faktor: 1.75; }
.wt-ws-g5 { --ws-faktor: 2.2; }

@keyframes wt-ws-welle {
  from { rotate: calc(var(--ws-haeng, 0deg) - var(--ws-weite, 2deg) * var(--ws-faktor, 1)); }
  to   { rotate: calc(var(--ws-haeng, 0deg) + var(--ws-weite, 2deg) * var(--ws-faktor, 1)); }
}

/* --- Die drei Zustände --------------------------------------------------- */

/* Die Stufe wird an zwei Stellen gelesen: am Element selbst, wo
   inc/windsack.php sie beim Seitenaufbau hinschreibt, und am <body>, wo die
   Testleiste sie im laufenden Betrieb umschaltet. Ohne den zweiten Selektor
   blieben die Wind-Schaltflächen wirkungslos - der Sack hing dann immer
   schlaff, egal was man drückte. */

/* Windstill: hängt herab und krümmt sich dabei. 72° Grundwinkel plus 5° je
   Gelenk ergibt 92° an der Spitze - sie zeigt also leicht zurück, wie bei
   einem Sack, den nichts mehr trägt. */
.wt-windsack {
  --ws-basis: 68deg;
  --ws-haeng: 4.5deg;
  --ws-weite: 1.1deg;
  --ws-takt: 5.6s;
}

.wt-windsack[data-wind="frisch"],
body[data-wind="frisch"] .wt-windsack {
  --ws-basis: 34deg;
  --ws-haeng: 2.5deg;
  --ws-weite: 2.8deg;
  --ws-takt: 2.6s;
}

.wt-windsack[data-wind="stark"],
body[data-wind="stark"] .wt-windsack {
  --ws-basis: 8deg;
  --ws-haeng: .5deg;
  --ws-weite: 4.6deg;
  --ws-takt: 1.1s;
}

/* --- Heller Modus -------------------------------------------------------- */

/* Auf nahezu weißem Grund verschwände das gebrochene Weiß. Der feine Rand
   gibt dem Sack eine Kante und zeichnet zugleich die Nähte zwischen den
   Bändern nach - echte Windsäcke sind dort ja auch zusammengesetzt. */
:root[data-modus="hell"] .wt-ws-tuch,
:root:not([data-modus="dunkel"]) .wt-ws-tuch {
  stroke: rgba(84, 54, 30, .3);
  stroke-width: .6;
}

:root[data-modus="hell"] .wt-windsack,
:root:not([data-modus="dunkel"]) .wt-windsack {
  --ws-tief: #7a3a1e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) .wt-ws-tuch { stroke: none; }
  :root:not([data-modus="hell"]) .wt-windsack { --ws-tief: #4a2011; }
}

/* --- Rücksichten --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wt-ws-g2,
  .wt-ws-g3,
  .wt-ws-g4,
  .wt-ws-g5 { animation: none; }   /* rotate fällt auf --ws-haeng zurück */
  .wt-ws-arm { transition: none; }
  .wt-windsack { transition: none; }
}

/* --- Schmale Geräte ------------------------------------------------------ */

/* In der Leiste teilt er sich den Platz mit Logo, Temperatur und
   Menüschalter - am Telefon muss er deshalb weiter zurückstecken. */
@media (max-width: 900px) {
  .wt-windsack { width: 52px; }
}

@media (max-width: 560px) {
  .wt-windsack { width: 44px; }
}

/* Erst bei wirklich schmalen Geräten weicht er ganz. 380 px wäre zu früh:
   ein iPhone misst 375 bis 393 px. */
@media (max-width: 330px) {
  .wt-windsack { display: none; }
}