/**
 * Sfeer op de kaarten (zie js/sfeer.js). Alles beweegt met transform en opacity, zodat de grafische kaart het afspeelt.
 * Maten staan in kaartpixels maal --k (breedte van de laag gedeeld door 2400); --s is de grootte van een punt.
 * --licht zegt hoe fel ramen en vuren branden: zacht overdag, vol in de nacht.
 * Geen mengmodi (multiply, screen): in de geschaalde kaartlaag doen die de grafische kaart haperen en stukken overslaan.
 *
 * @author Ferhat Remory
 * @link   https://steirk.be
 */

.sf { --k: 1; --licht: .35; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sf > div { position: absolute; inset: 0; }
.sf[data-dagdeel="ochtend"] { --licht: .55; }
.sf[data-dagdeel="avond"] { --licht: .85; }
.sf[data-dagdeel="nacht"] { --licht: 1; }
.sf-rook-bron, .sf-vuur, .sf-raam, .sf-gloed, .sf-rimpel, .sf-regen { position: absolute; width: 0; height: 0; }
.sf i, .sf b { position: absolute; display: block; }

/* Dag en nacht: een zachte kleurlaag die het beeld 's avonds paars kleurt en 's nachts blauw en donker maakt. */
.sf-nacht { background: transparent; transition: background 4s; }
.sf[data-dagdeel="ochtend"] .sf-nacht { background: linear-gradient(170deg, rgba(255, 190, 160, .1), rgba(120, 130, 190, .08)); }
.sf[data-dagdeel="avond"] .sf-nacht { background: linear-gradient(170deg, rgba(48, 30, 92, .3), rgba(90, 36, 30, .24)); }
.sf[data-dagdeel="nacht"] .sf-nacht { background: radial-gradient(ellipse at 50% 55%, rgba(14, 22, 58, .42), rgba(6, 10, 30, .62)); }

/* Licht: gloed in warme kleuren boven de nachtlaag. */
.sf-vuur { transition: transform .4s ease-out; }
.sf-vuur.is-fel { transform: scale(1.7); }
.sf-halo, .sf-kern, .sf-raam i, .sf-gloed i { border-radius: 50%; translate: -50% -50%; }
.sf-halo {
  width: calc(90px * var(--s) * var(--k)); height: calc(90px * var(--s) * var(--k));
  background: radial-gradient(circle, rgba(255, 168, 64, .7) 0, rgba(255, 112, 28, .32) 34%, transparent 68%);
  opacity: calc(.55 + var(--licht) * .45);
}
.sf-kern {
  width: calc(22px * var(--s) * var(--k)); height: calc(22px * var(--s) * var(--k));
  background: radial-gradient(circle, rgba(255, 248, 210, 1) 0, rgba(255, 196, 90, .75) 40%, transparent 72%);
}
.sf-vonk {
  left: 0; top: 0; width: calc(4px * var(--k)); height: calc(4px * var(--k)); border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 calc(4px * var(--k)) #ff9a2e; opacity: 0;
}
.sf-raam { opacity: var(--licht); transition: opacity 4s; }
.sf-raam i {
  width: calc(30px * var(--s) * var(--k)); height: calc(24px * var(--s) * var(--k));
  background: radial-gradient(ellipse, rgba(255, 196, 96, .95) 0, rgba(255, 150, 50, .4) 38%, transparent 70%);
}
.sf-raam.is-fel { opacity: 1; }
.sf-gloed { opacity: calc(.45 + var(--licht) * .55); transition: opacity 4s; }
.sf-gloed i {
  width: calc(110px * var(--s) * var(--k)); height: calc(90px * var(--s) * var(--k));
  background: radial-gradient(ellipse, color-mix(in srgb, var(--c) 70%, transparent) 0, color-mix(in srgb, var(--c) 22%, transparent) 40%, transparent 70%);
}
.sf-gloed.is-fel { opacity: 1; }

/* Rook: wolkjes die opstijgen, uitzetten en met de wind naar rechts drijven. */
.sf-rook-bron i {
  left: 0; top: 0; width: calc(34px * var(--s) * var(--k)); height: calc(34px * var(--s) * var(--k)); border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 232, 224, .62) 0, rgba(214, 208, 198, .3) 42%, transparent 70%); opacity: 0;
}

/* Water: een trage deining en glinsteringen die in twee richtingen drijven, binnen het watermasker. */
.sf-water > span { position: absolute; overflow: hidden; -webkit-mask: var(--masker) var(--masker-plek) / var(--masker-maat) no-repeat; mask: var(--masker) var(--masker-plek) / var(--masker-maat) no-repeat; }
.sf-water > span::before, .sf-water > span::after { content: ""; position: absolute; }
.sf-glans { opacity: .5; }
.sf-glans::before { inset: 0 0 0 calc(-512px * var(--k)); background: url('../img/kaart/water-rimpel.webp') 0 0 / calc(512px * var(--k)) calc(512px * var(--k)); }
.sf-glans::after { inset: 0 calc(-380px * var(--k)) 0 0; background: url('../img/kaart/water-rimpel.webp') 200px 120px / calc(380px * var(--k)) calc(380px * var(--k)); }
.sf[data-dagdeel="nacht"] .sf-glans { opacity: .25; }

/* Mist over de grafheuvels: grote zachte vlekken die heen en weer drijven. */
.sf-mist-veld { position: absolute; }
.sf-mist-veld i {
  width: 70%; height: 55%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(246, 240, 226, .5) 0, rgba(240, 234, 220, .2) 45%, transparent 70%);
}

/* Wolkenschaduw: overdag schuift er af en toe een schaduw over het land. */
.sf-wolk {
  left: 0; width: calc(1000px * var(--k)); height: calc(560px * var(--k)); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(18, 24, 40, .2) 0, rgba(18, 24, 40, .1) 40%, transparent 68%);
  translate: calc(-1100px * var(--k)) 0;
}
.sf[data-dagdeel="nacht"] .sf-wolk, .sf[data-dagdeel="avond"] .sf-wolk { display: none; }

/* Vogels: een kleine vlucht met klapperende vleugels. */
.sf-vlucht { position: absolute; left: 0; width: calc(120px * var(--k)); height: calc(60px * var(--k)); translate: calc(-200px * var(--k)) 0; }
.sf-vlucht i {
  width: calc(18px * var(--k)); height: calc(8px * var(--k)); scale: calc(var(--k) * 1.4 + .4);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 3 Q5 -1 10 6 Q15 -1 20 3' fill='none' stroke='%23231c18' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sf-vlucht.is-terug { scale: -1 1; }

/* Een tik: een rimpeling op het water, of een regen vonken uit een vuur. */
.sf-rimpel::before, .sf-rimpel::after {
  content: ""; position: absolute; left: 0; top: 0; width: calc(60px * var(--k)); height: calc(26px * var(--k));
  border: calc(2px * var(--k)) solid rgba(240, 250, 255, .75); border-radius: 50%; translate: -50% -50%; scale: .1; opacity: 0;
}
.sf-regen b {
  left: 0; top: 0; width: calc(4px * var(--k)); height: calc(4px * var(--k)); border-radius: 50%;
  background: #ffe2a0; box-shadow: 0 0 calc(5px * var(--k)) #ff9a2e; opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .sf-halo { animation: sf-flakker var(--d) var(--w) ease-in-out infinite; }
  .sf-kern { animation: sf-kern calc(var(--d) * .7) var(--w) ease-in-out infinite; }
  .sf-vonk { animation: sf-vonk 2s ease-out infinite; }
  .sf-raam i { animation: sf-adem 6s ease-in-out infinite alternate; }
  .sf-gloed i { animation: sf-adem 4.5s ease-in-out infinite alternate; }
  .sf-rook-bron i { animation: sf-rook 7s linear infinite; }
  .sf-glans::before { animation: sf-glans-heen 26s linear infinite; }
  .sf-glans::after { animation: sf-glans-terug 26s linear infinite; }
  .sf-mist-veld i { animation: sf-mist 50s ease-in-out infinite alternate; }
  .sf-wolk { animation: sf-wolk 150s linear infinite; }
  .sf-vlucht { animation: sf-vlucht 24s linear forwards; }
  .sf-vlucht.is-terug { animation-name: sf-vlucht-terug; }
  .sf-vlucht i { animation: sf-vleugel .42s ease-in-out infinite alternate; }
  .sf-rimpel::before { animation: sf-rimpel 1.6s ease-out forwards; }
  .sf-rimpel::after { animation: sf-rimpel 1.6s .35s ease-out forwards; }
  .sf-regen b { animation: sf-regen 1.3s ease-out forwards; }
}
/* Stil: het licht blijft, de beweging niet. Pauze: alles bevriest. */
.sf.is-stil *, .sf.is-stil *::before, .sf.is-stil *::after { animation: none !important; }
.sf.is-stil .sf-rook, .sf.is-stil .sf-vogels, .sf.is-stil .sf-wolken, .sf.is-stil .sf-vonk, .sf.is-stil .sf-fx { display: none; }
.sf.is-pauze *, .sf.is-pauze *::before, .sf.is-pauze *::after { animation-play-state: paused !important; }

@keyframes sf-flakker {
  0%, 100% { opacity: .78; scale: 1; }
  18% { opacity: 1; scale: 1.07; }
  33% { opacity: .7; scale: .96; }
  52% { opacity: .96; scale: 1.1; }
  70% { opacity: .82; scale: 1; }
  86% { opacity: 1; scale: 1.05; }
}
@keyframes sf-kern {
  0%, 100% { opacity: .85; scale: 1; }
  40% { opacity: 1; scale: 1.18; }
  65% { opacity: .75; scale: .9; }
}
@keyframes sf-vonk {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * var(--k) * var(--s)), calc(-80px * var(--k) * var(--s))); }
}
@keyframes sf-adem { from { opacity: .72; } to { opacity: 1; } }
@keyframes sf-rook {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + 46px * var(--k) * var(--s)), calc(-50% - 130px * var(--k) * var(--s))) scale(2.6); }
}
@keyframes sf-glans-heen { to { transform: translate3d(calc(512px * var(--k)), 0, 0); } }
@keyframes sf-glans-terug { to { transform: translate3d(calc(-380px * var(--k)), 0, 0); } }
@keyframes sf-mist { from { transform: translate(-12%, 0); } to { transform: translate(14%, 6%); } }
@keyframes sf-wolk { to { translate: calc(2500px * var(--k)) calc(180px * var(--k)); } }
@keyframes sf-vlucht { to { translate: calc(2500px * var(--k)) calc(-120px * var(--k)); } }
@keyframes sf-vlucht-terug { from { translate: calc(2500px * var(--k)) 0; } to { translate: calc(-200px * var(--k)) calc(-120px * var(--k)); } }
@keyframes sf-vleugel { from { transform: scaleY(1); } to { transform: scaleY(-.4); } }
@keyframes sf-rimpel { 0% { opacity: .9; scale: .1; } 100% { opacity: 0; scale: 2.4; } }
@keyframes sf-regen {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * var(--k)), calc(var(--dy) * var(--k) + 30px * var(--k))); }
}