/* facades.css: fasaderna, det som ritas i spritens symboler (f-next, f-roof, f-sol,
   f-adv, f-lex, f-ki, f-gap, f-esa) och används med <use> i tornet och minitornet.
   Laddas efter tower.css, så att .floor::after (stjärnorna) kan skrivas här.

   Symbolinnehåll läser bara krokarna (--lit, --lit-dur, --lit-delay, --play; se
   css/motion.css) och färg- och rörelsetokens på :root, aldrig tornets variabler:
   i minitornet på gatan saknas de.
   Selektorer når inte in i use-instanser: varje regel nedan har en klass på elementet
   självt som hela selektor, utan id, elementtyp eller förfäder.

   Grundstilen är hela bilden: tänd och stilla. Varje oändlig animation står i
   animation-play-state: var(--play, paused), så den rör sig bara när motion.css sätter
   --play till running (html.js utan reducerad rörelse, inte pausad, inte .offscreen), och
   varje nyckelbild 0 % är grundstilen. Utan JS, i reducerad rörelse och pausat ser
   fasaderna därför likadana ut. Inga negativa animation-delay. */

/* ---------------------------------------------------------------- ljuset
   Nyckelfönstrets tända lager. Släckt (--lit: 0) syns glaset under, med poster som i
   de andra fönstren. Tänds en gång i två pixelsteg. */
.fa-lit { opacity: var(--lit, 1); transition: opacity var(--lit-dur, 0s) steps(2, end) var(--lit-delay, 0s); }

/* Nyckelfönstrets läge i symbolens viewBox-enheter (överkant, nederkant), för hissens
   stopp och ankomstljuset (js/tower.js). NU överst (inom --key-h), övriga i våningens nedre halva. */
.floor[data-era="sol"] { --key-y0: 3;   --key-y1: 33; }
.floor[data-era="adv"] { --key-y0: 314; --key-y1: 356; }
.floor[data-era="lex"] { --key-y0: 18;  --key-y1: 33; }
.floor[data-era="ki"]  { --key-y0: 183; --key-y1: 224; }
.floor[data-era="esa"] { --key-y0: 156; --key-y1: 176; }

/* ---------------------------------------------------------------- nästa våning */
.fa-dash {
  fill: none;
  stroke: oklch(40% 0.02 70);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------- småanimationerna
   steps(1, end) mellan nyckelbilderna: värdet byts i hela pixelsteg, aldrig tonat. */

/* Energipartikeln stiger ur panelerna in i den streckade våningen. */
.fa-spark { opacity: 0.9; animation: fa-rise 3.6s linear infinite; animation-play-state: var(--play, paused); }
@keyframes fa-rise { 70%, 100% { transform: translateY(-13px); opacity: 0; } }

/* LED:arna i VDI-racken och på HLDS-servern. */
.fa-led { animation: fa-led 2.3s steps(1, end) infinite; animation-play-state: var(--play, paused); }
.fa-led.fa-led--b { animation-duration: 2.9s; }
@keyframes fa-led { 50% { opacity: 0.25; } }

/* Skrivandet vid NU: raden töms och skrivs i tio steg, markören (sun-orange) följer
   raden och blinkar, handen flyttar sig en pixel på tangentbordet. */
.fa-type {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: fa-type 4.2s linear infinite;
  animation-play-state: var(--play, paused);
}
.fa-cursor {
  fill: var(--sun-orange);
  animation: fa-blink 1s steps(1, end) infinite, fa-caret 4.2s linear infinite;
  animation-play-state: var(--play, paused);
}
.fa-arm { animation: fa-tap 0.5s steps(1, end) infinite; animation-play-state: var(--play, paused); }
@keyframes fa-type {
  0%  { transform: scaleX(1); animation-timing-function: steps(1, end); }
  2%  { transform: scaleX(0); animation-timing-function: steps(10, end); }
  72% { transform: scaleX(1); }
}
@keyframes fa-caret {
  0%  { transform: translateX(0); animation-timing-function: steps(1, end); }
  2%  { transform: translateX(-8.5px); animation-timing-function: steps(10, end); }
  72% { transform: translateX(0); }
}
@keyframes fa-blink { 50% { opacity: 0; } }
@keyframes fa-tap { 50% { transform: translateX(-2px); } }

/* Konsulten på gångbron: Kim med laptopväskan mellan Ramirents gula dörrkarm och
   Advanias dörr. En tur är 18 × --walk-step: sju steg bort, två i vila (vänder mitt i),
   sju tillbaka, två i vila. Benen växlar var halva --walk-step och bara under gång;
   i vila står han med benen ihop. Förflyttningen går i samma steg som benen.
   Längden 24px är i spritens egna enheter (skalad 0,6: 14,4 enheter i våningen). */
.fa-walker,
.fa-face,
.fa-gait,
.fa-stand,
.fa-legs-a,
.fa-legs-b {
  animation-duration: calc(18 * var(--walk-step));
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}
.fa-walker { animation-name: fa-walk; animation-timing-function: linear; animation-play-state: var(--play, paused); }
.fa-face { transform-box: fill-box; transform-origin: 50% 50%; animation-name: fa-turn; animation-play-state: var(--play, paused); }
.fa-gait { animation-name: fa-gait; animation-play-state: var(--play, paused); }
.fa-stand { opacity: 0; animation-name: fa-stand; animation-play-state: var(--play, paused); }
.fa-legs-a { animation-name: fa-step-a; animation-duration: var(--walk-step); animation-play-state: var(--play, paused); }
.fa-legs-b { opacity: 0; animation-name: fa-step-b; animation-duration: var(--walk-step); animation-play-state: var(--play, paused); }
@keyframes fa-walk {
  0%     { transform: translateX(0); animation-timing-function: steps(14, end); }
  38.89% { transform: translateX(24px); animation-timing-function: steps(1, end); }
  50%    { transform: translateX(24px); animation-timing-function: steps(14, end); }
  88.89% { transform: translateX(0); }
}
@keyframes fa-turn { 44.44% { transform: scaleX(-1); } 94.44% { transform: scaleX(1); } }
@keyframes fa-gait { 38.89% { opacity: 0; } 50% { opacity: 1; } 88.89% { opacity: 0; } }
@keyframes fa-stand { 38.89% { opacity: 1; } 50% { opacity: 0; } 88.89% { opacity: 1; } }
@keyframes fa-step-a { 50% { opacity: 0; } }
@keyframes fa-step-b { 50% { opacity: 1; } }

/* ---------------------------------------------------------------- stjärnorna
   Nattvåningarna (pelarvåningen och grunden) får pixelstjärnor över hela himlen, bakom
   fasaden, i samma fullbredda lager som himlen (tower.css, .floor::before). Månen står
   mellan pelarna i f-gap. Stilla; skrivs aldrig ut. */
.floor[data-era="gap"]::after,
.floor[data-era="esa"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='232' height='188' shape-rendering='crispEdges'%3E%3Cg fill='oklch(93%25 0.03 95)'%3E%3Crect x='14' y='22' width='2' height='2'/%3E%3Crect x='71' y='9' width='1' height='1'/%3E%3Crect x='118' y='41' width='2' height='2'/%3E%3Crect x='176' y='17' width='1' height='1'/%3E%3Crect x='203' y='66' width='2' height='2'/%3E%3Crect x='42' y='83' width='1' height='1'/%3E%3Crect x='97' y='118' width='1' height='1'/%3E%3Crect x='150' y='97' width='2' height='2'/%3E%3Crect x='24' y='150' width='1' height='1'/%3E%3Crect x='188' y='139' width='1' height='1'/%3E%3Crect x='131' y='170' width='2' height='2'/%3E%3Crect x='64' y='176' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* På pelarvåningen tätnar stjärnorna nedåt, i takt med att himlen mörknar. */
.floor[data-era="gap"]::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent, oklch(50% 0 0));
  mask-image: linear-gradient(to bottom, transparent, oklch(50% 0 0));
}
@media print {
  .floor[data-era="gap"]::after,
  .floor[data-era="esa"]::after { content: none; }
}