/* ==========================================================================
   Sfeer: welkepan.nl

   Kleine dingen die alleen bij deze site horen. Niet in merk.css, want dat
   bevat uitsluitend tokenwaarden, en niet in ui/, want daar mag niets staan
   dat naar een merk of niche verwijst.
   ========================================================================== */

/* --- stoom uit de pan ------------------------------------------------------
   Nagemeten in de browser in plaats van geschat: de tekening staat op 1 pixel
   van boven en 0 van links binnen de link, en is 26 bij 26. De kom loopt in het
   beeldvlak van 32 van x=3 tot x=20 en van y=9,6 naar beneden. Omgerekend zit
   de komrand dus op 8,8 pixels van de bovenkant van de link, met het midden op
   x=9,5. De sliertjes staan daar net boven; de link is 29 hoog, vandaar
   bottom: 21px.

   Op de <a> en niet op de <img>, want een img heeft geen pseudo-elementen. Dat
   betekent meteen dat de hele merkregel de aanleiding is, inclusief de naam,
   en dat is makkelijker te raken dan een tekening van 26 bij 26.
   -------------------------------------------------------------------------- */
.balk__merk {
  position: relative;
}

.balk__merk::before,
.balk__merk::after {
  content: "";
  position: absolute;
  bottom: 21px;
  width: 2px;
  height: 8px;
  border-radius: var(--rond-vol);
  background: var(--primair-400);
  /* Zonder vervaging zijn het streepjes en geen stoom. Een halve pixel is
     genoeg: meer en het wordt een vlek op een tekening van 26 bij 26. */
  filter: blur(0.6px);
  opacity: 0;
  /* Mag nooit in de weg zitten van de link eronder. */
  pointer-events: none;
}

/* Weerszijden van het midden van de kom, dat op 9,5 ligt. */
.balk__merk::before { left: 7px; }
.balk__merk::after { left: 11px; height: 6px; }

/* Ook bij toetsenbordfocus, anders is het een grapje dat alleen met een muis
   bestaat. */
.balk__merk:hover::before,
.balk__merk:focus-visible::before {
  animation: stoom 1.5s ease-out infinite;
}
.balk__merk:hover::after,
.balk__merk:focus-visible::after {
  /* Uit de maat, want twee sliertjes die gelijk opgaan lezen als één streep. */
  animation: stoom 1.5s ease-out 0.5s infinite;
}

@keyframes stoom {
  0% { opacity: 0; transform: translateY(2px) scaleY(0.5); }
  30% { opacity: 0.5; }
  70% { opacity: 0.3; transform: translateY(-8px) scaleY(1.2) translateX(2px); }
  100% { opacity: 0; transform: translateY(-14px) scaleY(1.4) translateX(-1px); }
}

/* Versiering, dus weg zodra iemand aangeeft geen beweging te willen. Er blijft
   dan niets staan: een stilstaand streepje boven een logo is geen stoom maar
   een vlek. */
@media (prefers-reduced-motion: reduce) {
  .balk__merk:hover::before,
  .balk__merk:hover::after,
  .balk__merk:focus-visible::before,
  .balk__merk:focus-visible::after {
    animation: none;
  }
}

/* --- een pannetje dat staat te pruttelen -----------------------------------
   Vervangt het glanzende balkje terwijl de prijs wordt opgehaald. Het balkje
   was duidelijk genoeg maar had niets van deze site; dit wel.

   Waarom hier en niet in ProductKaart.astro: dat component staat in ui/ en mag
   niets weten van pannen. Het levert de structuur (een euroteken en een vak dat
   ruimte houdt) en deze site bepaalt hoe dat eruitziet.

   De selector is expres specifiek. sfeer.css wordt vóór de componentstijlen
   geladen, en die zijn door Astro voorzien van een data-attribuut. Met alleen
   .tegel__balk verliest deze regel; met de ouder ervoor wint hij, ongeacht de
   volgorde.

   De kleur staat hier als waarde en niet als token, want een data-URI kan geen
   CSS-variabele lezen. Het is --primair-400 uit merk.css; wijzig je die, wijzig
   dan ook deze.
   -------------------------------------------------------------------------- */
/* Uitlijnen op het midden en niet op de basislijn. Een vak zonder tekst heeft
   als basislijn zijn onderrand, dus met baseline hangt de tekening boven het
   euroteken in plaats van ernaast. */
.tegel__prijs:not([data-klaar]) .tegel__laadt {
  align-items: center;
}

.tegel__prijs:not([data-klaar]) .tegel__balk {
  position: relative;
  /* Precies de verhouding van de tekening hieronder (27,8 bij 13,4), anders
     zit er loze ruimte in het vak en lijkt het pannetje scheef te staan. */
  width: 21px;
  height: 10px;
  border-radius: 0;
  background-color: transparent;
  /* Het beeldvlak sluit strak om de tekening: de kom loopt van x=3 tot 20,4 en
     van y=3,6 tot 17, en de steel steekt met zijn lijndikte uit tot x=30,8.
     Mijn eerste versie gebruikte 0 0 32 26 en had daardoor loze ruimte aan alle
     kanten; het pannetje stond dan hoog en klein in zijn vak. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 3.6 27.8 13.4'%3E%3Cpath d='M20 5.4h9.2' stroke='%23c77c4a' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M3 3.6h17.4v6.9c0 3.6-2.9 6.5-6.5 6.5H9.5C5.9 17 3 14.1 3 10.5z' fill='%23c77c4a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* De glans van het balkje hoort hier niet meer bij; de stoom doet het werk. */
  animation: none;
  filter: none;
}

/* Twee sliertjes boven de kom, die van opzij op ongeveer een derde van links
   ligt. Zelfde idioom als bij het merkteken in de kopbalk. */
.tegel__prijs:not([data-klaar]) .tegel__balk::before,
.tegel__prijs:not([data-klaar]) .tegel__balk::after {
  content: "";
  position: absolute;
  /* De komrand valt nu samen met de bovenkant van het vak, dus daar begint de
     stoom. */
  bottom: 9px;
  width: 2px;
  height: 5px;
  border-radius: var(--rond-vol);
  background: var(--primair-400);
  filter: blur(0.5px);
  opacity: 0;
  animation: pruttel 1.5s ease-out infinite;
}

/* De kom loopt van 0 tot ongeveer 13 pixels, met het midden rond 6,5. */
.tegel__prijs:not([data-klaar]) .tegel__balk::before { left: 4px; }
.tegel__prijs:not([data-klaar]) .tegel__balk::after {
  left: 8px;
  animation-delay: 0.55s;
}

@keyframes pruttel {
  0% { opacity: 0; transform: translateY(2px) scaleY(0.5); }
  35% { opacity: 0.65; }
  100% { opacity: 0; transform: translateY(-9px) scaleY(1.3); }
}

/* Zonder beweging blijft het pannetje staan en verdwijnt de stoom. Het vak
   houdt zijn ruimte, dus er verspringt niets zodra de prijs binnenkomt. */
@media (prefers-reduced-motion: reduce) {
  .tegel__prijs:not([data-klaar]) .tegel__balk::before,
  .tegel__prijs:not([data-klaar]) .tegel__balk::after {
    animation: none;
  }
}