/* tisell.org – svart rum, en dörr som långsamt öppnas. Inne i ljuset står länkarna i svart;
   ju mer dörren öppnas, desto mer av dem syns. Bara CSS, ingen JavaScript (CSP utan unsafe-inline).
   Allt är svart tills man klickar på tisell.org (länk till #in → :target). Då sjunker hissen
   ned 13 våningar, stannar, och dörren öppnas.
   Känslan: en övergiven anläggning – filmkorn, lysrör som sviktar ibland, en nött stämpel. */

@font-face {
  font-family: "Saira Stencil One";
  src: url("/fonts/SairaStencilOne-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("/fonts/ShareTechMono-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ljus: #fff6e0;
  --ljus-varm: #ffdc9e;
  --text: #d9d2bf;
  --morker: #15110a;               /* länkarna inne i ljuset */
  --bredd: min(64vw, 270px);       /* hur långt dörren öppnas */
  --hojd: min(54vh, 520px);       /* lägre än förut, så att våningsvisaren får plats ovanför */
  --botten: 12vh;                  /* dörrens avstånd från skärmens nederkant */
  --oppna: 8s;                     /* hur lång tid dörren tar att öppnas */
  --start: .7s;                    /* från klick till att hissen börjar sjunka */
  --fard: 5.13s;                  /* hissens färd ned (tidtabellen i @keyframes vaning) */
  --fordrojning: calc(var(--start) + var(--fard) + 1s);   /* "pling", sedan öppnas dörren */
  --nedrakning: calc(var(--fordrojning) + var(--oppna));  /* när dörren är helt öppen börjar mätaren */
  --vitt: calc(var(--nedrakning) + 10s);                   /* när sidan blir vit */
  --citat: calc(var(--vitt) + 2.5s);                       /* när citatet börjar tona fram */
  --citat-tid: 15s;                                        /* från första skymt till svart */
  --slut: calc(var(--citat) + var(--citat-tid) + 5s);      /* "The End" – sedan "?" 2 s senare */
  --vag: calc(var(--slut) + 6s);                           /* 4 s efter "?" börjar stigen tändas */
  --sista: calc(var(--vag) + 16s);                         /* sista rutan tänds, blir grön och pulserar */
  --exit: calc(var(--sista) + 3.4s);                       /* en stund senare fladdrar EXIT-skylten igång */
  --utgang: calc(var(--exit) + 1.5s);                      /* sedan börjar dörren glida upp */
}

/* Typsnitt: byt klass på <body> mellan "stencil" och "digital". */
body.stencil { --rubrik: "Saira Stencil One", "Stencil", Impact, sans-serif; --lank: "Saira Stencil One", "Stencil", Impact, sans-serif; }
body.digital { --rubrik: "Share Tech Mono", ui-monospace, monospace; --lank: "Share Tech Mono", ui-monospace, monospace; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--text);
  min-height: 100svh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Filmkorn över allt, knappt synligt, som skakar lite. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 5;
  background: url("/grain.svg");
  opacity: .035;
  will-change: transform;
  pointer-events: none;
  animation: korn 1s steps(6) infinite;
}

main {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(2.5rem, 10vh, 6rem) 1rem 0;
  pointer-events: none;
}

h1 {
  margin: 0;
  pointer-events: auto;
  font-family: var(--rubrik);
  font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  letter-spacing: .08em;
  color: var(--text);
  opacity: 0;
  animation:
    tona-in 2.5s ease-out .4s forwards,
    svikt 9s linear 5s infinite;
}
h1 a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: text-shadow .6s;
}
h1 a:hover,
h1 a:focus-visible {
  text-shadow: 0 0 .35em rgba(255, 220, 158, .25);
  outline: none;
}
body:has(#in:target) h1 {
  animation:
    tona-in 2.5s ease-out .4s forwards,
    svikt 9s linear 5s infinite,
    lys-upp var(--oppna) ease-in calc(var(--fordrojning) + 1s) forwards;
}

/* Ledtråden: dyker upp svagt om ingen klickat efter några sekunder, försvinner vid klick. */
.ledtrad {
  margin: 1.4em 0 0;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(.6rem, 1.6vw, .72rem);
  letter-spacing: .45em;
  padding-left: .45em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  animation:
    ledtrad 3s ease-out 4.5s forwards,
    svikt 6s linear 7s infinite;
}
body:has(#in:target) .ledtrad { animation: none; opacity: 0; transition: opacity .4s; }
body:has(#in:target) h1 a { cursor: default; }

/* ── Dörren ─────────────────────────────────────────── */

.scen {
  position: fixed;
  inset: 0;
  z-index: 1;
  visibility: hidden;              /* allt svart tills man klickat på tisell.org */
}
#in:target { visibility: visible; }

/* Dörröppningen: en ljus rand som blir bredare. Den klipper rummet bakom, så länkarna
   syns mer och mer ju mer dörren öppnas. */
.dorr {
  position: absolute;
  left: 50%;
  bottom: var(--botten);
  height: var(--hojd);
  width: 0;
  transform: translateX(-50%);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, #fffdf6, var(--ljus) 55%, var(--ljus-varm));
  border-radius: 1px;
  box-shadow:
    0 0 6px 1px rgba(255, 246, 224, .9),
    0 0 50px 10px rgba(255, 220, 158, .35),
    0 0 200px 60px rgba(255, 200, 120, .12);
}
#in:target .dorr {
  animation:
    oppna var(--oppna) cubic-bezier(.55, 0, .25, 1) var(--fordrojning) both,
    andas 6s ease-in-out calc(var(--fordrojning) + var(--oppna)) infinite;
}

/* Rummet bakom dörren. Har dörrens slutliga bredd hela tiden, så texten står stilla medan
   öppningen växer – den avslöjas i stället för att flytta sig. */
.rum {
  flex-direction: column;
  gap: 1.6rem;
  counter-reset: rum;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--bredd);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.2rem;
}

.rum ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}

.rum a {
  font-family: var(--lank);
  font-size: clamp(.95rem, 2.6vw, 1.15rem);
  letter-spacing: .22em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
  color: var(--morker);
  text-decoration: none;
  display: inline-block;
  /* Bokstavsavståndet läggs efter sista bokstaven också; dra tillbaka det så att texten hamnar mitt i dörren. */
  padding: .35rem 0 .35rem .22em;
  border-bottom: 2px solid transparent;
  transition: border-color .3s ease, letter-spacing .3s ease;
}
.rum li a::before {
  counter-increment: rum;
  content: counter(rum, decimal-leading-zero);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .72em;
  letter-spacing: .1em;
  opacity: .45;
  display: block;                  /* numret på egen rad ovanför namnet, som i ett register */
  margin-bottom: .2em;
}
.post { margin: 0; }
.post a {
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(.72rem, 2vw, .85rem);
  letter-spacing: .14em;
  text-transform: none;
  opacity: .7;
}

.rum a:hover,
.rum a:focus-visible {
  border-bottom-color: var(--morker);
  letter-spacing: .3em;
  outline: none;
}

/* Ljuset som faller ut på golvet framför dörren, bredare ju mer dörren öppnas. */
.golv {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(140vw, 1500px);
  height: 12vh;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 0;
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 236, 196, .5), rgba(255, 220, 158, .12) 60%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 45% 140% at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 45% 140% at 50% 0%, #000 30%, transparent 80%);
  filter: blur(1.5px);
  pointer-events: none;
}
#in:target .golv {
  animation: golv var(--oppna) cubic-bezier(.55, 0, .25, 1) var(--fordrojning) both;
}


/* ── Före klick: en hisskorg passerar bakom springan ── */
/* En hårfin springa där dörrarna möts; var 3:e sekund glider en svag ljusstrimma förbi,
   växelvis nedåt och uppåt. Försvinner när man klickat. */
.forbi {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: var(--botten);
  height: var(--hojd);
  width: 2px;
  transform: translateX(-50%);
  /* Hisskorgen är lika hög som dörren, med mjuka kanter: när den är i nivå lyser hela springan.
     Bilden är 4 dörrhöjder hög; korgen ligger i dess mitt och syns bara inom springan. */
  background: linear-gradient(to bottom,
      transparent 0 26%, rgba(255, 236, 196, .55) 36%, rgba(255, 236, 196, .55) 64%, transparent 74% 100%) no-repeat;
  background-size: 100% 400%;
  background-position: 0 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  animation:
    tona-in 2s ease-out 3s forwards,
    forbi 14s ease-in-out 3s infinite;
}
body:has(#in:target) .forbi { display: none; }
/* En 14 s cykel: korgen åker ned förbi springan (2 s), 5 s mörkt, upp igen (2 s), 5 s mörkt. */
@keyframes forbi {
  0%          { background-position: 0 100%; }   /* ovanför springan */
  14.3%, 50%  { background-position: 0 0; }      /* nedanför */
  64.3%, 100% { background-position: 0 100%; }   /* tillbaka upp */
}
/* Skenet på golvet: utgår från springans fot och breder ut sig framåt som en solfjäder, likt ljuset
   framför stora dörren. Starkast när korgen är i nivå, och bara på väg nedåt. */
.forbi-golv {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: calc(100% - var(--botten));   /* överkanten exakt vid dörrens tröskel */
  width: min(36vw, 340px);
  height: var(--botten);
  transform: translateX(-50%);
  clip-path: polygon(49.6% 0, 50.4% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 226, 170, .38), rgba(255, 226, 170, .1) 55%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 40% 120% at 50% 0%, #000 25%, transparent 80%);
  mask-image: radial-gradient(ellipse 40% 120% at 50% 0%, #000 25%, transparent 80%);
  filter: blur(1.5px);
  opacity: 0;
  pointer-events: none;
  animation: forbi-golv 14s ease-in-out 3s infinite;
}
body:has(#in:target) .forbi-golv { display: none; }
@keyframes forbi-golv {
  0%          { opacity: 0; }
  7.1%        { opacity: .8; }  /* korgen i nivå med springan, på väg ned */
  15%, 100%   { opacity: 0; }
}

/* ── Hissen ─────────────────────────────────────────── */

/* Våningsvisaren ovanför dörren. Siffrorna står i en kolumn som skjuts uppåt en rad i taget. */
.hiss {
  --rad: 1.2em;
  position: absolute;
  left: 50%;
  bottom: calc(var(--botten) + var(--hojd) + clamp(.6rem, 2.5vh, 1.4rem));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .45em;
  padding: .2em .55em;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  color: #ffa040;
  text-shadow: 0 0 .35em rgba(255, 140, 40, .85), 0 0 1.2em rgba(255, 120, 30, .35);
  background: #060402;
  border: 1px solid #241a10;
  border-radius: 3px;
  box-shadow: inset 0 0 .6em #000;
  opacity: 0;
}
.hiss::after {                       /* scanlines som på en gammal skärm */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .38) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.pil { font-size: .6em; opacity: 0; }
.display {
  display: block;
  height: var(--rad);
  line-height: var(--rad);
  overflow: hidden;
  min-width: 2.4ch;
  text-align: right;
}
.rulle { display: flex; flex-direction: column; }
.rulle span { height: var(--rad); }

#in:target .hiss {
  animation:
    tona-in .5s ease-out forwards,
    pling 1s ease-out calc(var(--start) + var(--fard)) forwards;
}
#in:target .display { animation: svikt 5s linear calc(var(--start) + var(--fard) + 3s) infinite; }

/* Mätaren: en ruta tänds varannan sekund, den sista är röd. Sedan blir allt vitt. */
.matare {
  display: flex;
  gap: .28em;
  margin-left: .25em;
  padding-left: .55em;
  border-left: 1px solid #241a10;
}
.matare i {
  width: .48em;
  height: .48em;
  border: 1px solid rgba(255, 160, 64, .3);
}
.matare .sista { border-color: rgba(230, 50, 35, .45); }
#in:target .matare i { animation: ruta 1ms linear forwards; }
#in:target .matare i:nth-child(1) { animation-delay: var(--nedrakning); }
#in:target .matare i:nth-child(2) { animation-delay: calc(var(--nedrakning) + 2s); }
#in:target .matare i:nth-child(3) { animation-delay: calc(var(--nedrakning) + 4s); }
#in:target .matare i:nth-child(4) { animation-delay: calc(var(--nedrakning) + 6s); }
#in:target .matare .sista {
  animation: sista 1s ease-in-out calc(var(--nedrakning) + 8s) 2 forwards;
}
.vitt {
  position: fixed;
  inset: 0;
  z-index: 10;                     /* över allt, även rubriken och kornet */
  background: #fff;
  opacity: 0;
  visibility: hidden;
}
body:has(#in:target) .vitt {
  animation:
    vitt 1ms linear var(--vitt) forwards,
    till-svart 3s ease-in calc(var(--citat) + var(--citat-tid) - 3s) forwards;
}

/* Slutet: "The End" mitt på den svarta skärmen, sedan ett frågetecken. */
.slut {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.slut p {
  position: relative;               /* frågetecknet hänger utanför, så "The End" står kvar i mitten */
  margin: 0;
  font-family: var(--rubrik);
  font-size: clamp(1.6rem, 5vw, 3rem);
  letter-spacing: .14em;
  padding-left: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 .5em rgba(255, 220, 158, .15);
  opacity: 0;
}
.slut span { position: absolute; left: 100%; opacity: 0; }
body:has(#in:target) .slut p {
  animation:
    tona-in 2s ease-out var(--slut) forwards,
    svikt 9s linear calc(var(--slut) + 4s) infinite;
}
body:has(#in:target) .slut span { animation: tona-in .9s ease-out calc(var(--slut) + 2s) forwards; }


/* ── Utgången ───────────────────────────────────────── */
/* 4 s efter frågetecknet tänds en ruta i sekunden: 10 rakt ned från "The End", sedan 7 åt höger
   fram till en dörr som glider upp på glänt under en grön EXIT-skylt. Dörren leder ut på internet. */
.vitt {
  --dorr-b: 11vh;                   /* utgångsdörrens bredd */
  --dorr-h: 22vh;                   /* och höjd */
  --dorr-hoger: 6vw;                /* avstånd från högerkanten */
  --dorr-golv: 10vh;                /* avstånd från nederkanten */
  /* stegen åt höger: från mitten fram till dörrens vänsterkant, i 8 lika långa steg */
  --steg: calc((50vw - var(--dorr-hoger) - var(--dorr-b)) / 8);
}
.vag i {
  position: absolute;
  width: .5rem;
  height: .5rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 160, 64, .22);
  opacity: 0;
}
.vag i:nth-child(1) { left: calc(50vw); top: calc(56vh + 0 * 32vh / 9); }
.vag i:nth-child(2) { left: calc(50vw); top: calc(56vh + 1 * 32vh / 9); }
.vag i:nth-child(3) { left: calc(50vw); top: calc(56vh + 2 * 32vh / 9); }
.vag i:nth-child(4) { left: calc(50vw); top: calc(56vh + 3 * 32vh / 9); }
.vag i:nth-child(5) { left: calc(50vw); top: calc(56vh + 4 * 32vh / 9); }
.vag i:nth-child(6) { left: calc(50vw); top: calc(56vh + 5 * 32vh / 9); }
.vag i:nth-child(7) { left: calc(50vw); top: calc(56vh + 6 * 32vh / 9); }
.vag i:nth-child(8) { left: calc(50vw); top: calc(56vh + 7 * 32vh / 9); }
.vag i:nth-child(9) { left: calc(50vw); top: calc(56vh + 8 * 32vh / 9); }
.vag i:nth-child(10) { left: calc(50vw); top: calc(56vh + 9 * 32vh / 9); }
.vag i:nth-child(11) { left: calc(50vw + 1 * var(--steg)); top: 88vh; }
.vag i:nth-child(12) { left: calc(50vw + 2 * var(--steg)); top: 88vh; }
.vag i:nth-child(13) { left: calc(50vw + 3 * var(--steg)); top: 88vh; }
.vag i:nth-child(14) { left: calc(50vw + 4 * var(--steg)); top: 88vh; }
.vag i:nth-child(15) { left: calc(50vw + 5 * var(--steg)); top: 88vh; }
.vag i:nth-child(16) { left: calc(50vw + 6 * var(--steg)); top: 88vh; }
.vag i:nth-child(17) { left: calc(50vw + 7 * var(--steg)); top: 88vh; }
body:has(#in:target) .vag i { animation: vag-ruta .25s ease-out forwards; }
body:has(#in:target) .vag i:nth-child(1) { animation-delay: calc(var(--vag) + 0s); }
body:has(#in:target) .vag i:nth-child(2) { animation-delay: calc(var(--vag) + 1s); }
body:has(#in:target) .vag i:nth-child(3) { animation-delay: calc(var(--vag) + 2s); }
body:has(#in:target) .vag i:nth-child(4) { animation-delay: calc(var(--vag) + 3s); }
body:has(#in:target) .vag i:nth-child(5) { animation-delay: calc(var(--vag) + 4s); }
body:has(#in:target) .vag i:nth-child(6) { animation-delay: calc(var(--vag) + 5s); }
body:has(#in:target) .vag i:nth-child(7) { animation-delay: calc(var(--vag) + 6s); }
body:has(#in:target) .vag i:nth-child(8) { animation-delay: calc(var(--vag) + 7s); }
body:has(#in:target) .vag i:nth-child(9) { animation-delay: calc(var(--vag) + 8s); }
body:has(#in:target) .vag i:nth-child(10) { animation-delay: calc(var(--vag) + 9s); }
body:has(#in:target) .vag i:nth-child(11) { animation-delay: calc(var(--vag) + 10s); }
body:has(#in:target) .vag i:nth-child(12) { animation-delay: calc(var(--vag) + 11s); }
body:has(#in:target) .vag i:nth-child(13) { animation-delay: calc(var(--vag) + 12s); }
body:has(#in:target) .vag i:nth-child(14) { animation-delay: calc(var(--vag) + 13s); }
body:has(#in:target) .vag i:nth-child(15) { animation-delay: calc(var(--vag) + 14s); }
body:has(#in:target) .vag i:nth-child(16) { animation-delay: calc(var(--vag) + 15s); }
body:has(#in:target) .vag i:nth-child(17) { animation-delay: calc(var(--vag) + 16s); }

.utgang {
  position: absolute;
  right: var(--dorr-hoger);
  bottom: var(--dorr-golv);
  width: var(--dorr-b);
  height: var(--dorr-h);
  visibility: hidden;
  cursor: pointer;
}
/* Ljuset bakom dörren – syns bara genom springorna, och som sken runt om. */
.utgang .ljus {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #d8e2ea, #ece6da);
  opacity: 0;
}
/* Dörrbladet: täcker ljuset, glider sedan sakta upp på glänt. Gångjärn till vänster,
   så glipan och ljuset kommer på högra sidan (och en strimma upptill och nedtill). */
.utgang .blad {
  position: absolute;
  inset: 0;
  background: #000;                /* lika svart som bakgrunden: en lönndörr, bara glipan avslöjar den */
  transform-origin: 0 50%;
}
/* Skenet som läcker ut genom glipan åt höger. */
.utgang::before {
  content: "";
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 85%;
  width: 260%;
  background: radial-gradient(ellipse 45% 50% at 0% 50%, rgba(225, 236, 245, .22), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
/* Ljuset som faller ut på golvet, snett åt höger. */
.utgang::after {
  content: "";
  position: absolute;
  left: 40%;
  width: 220%;
  top: 100%;
  height: 7vh;
  clip-path: polygon(22% 0, 30% 0, 100% 100%, 8% 100%);
  background: linear-gradient(to bottom, rgba(225, 236, 245, .3), transparent);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}
.exit {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.4vh);
  transform: translateX(-50%);
  padding: .15em .5em .1em;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: clamp(.7rem, 2.2vh, 1rem);
  letter-spacing: .25em;
  padding-left: .75em;
  text-transform: uppercase;
  color: #3dff74;
  text-shadow: 0 0 .4em rgba(60, 255, 120, .7), 0 0 1.2em rgba(40, 220, 100, .3);
  background: #020a04;
  border: 1px solid #0e3a1c;
  opacity: 0;
}
body:has(#in:target) .utgang { animation: synas 1ms linear var(--exit) forwards; }
body:has(#in:target) .utgang .blad { animation: glipa 10s cubic-bezier(.45, 0, .25, 1) var(--utgang) forwards; }
body:has(#in:target) .utgang .ljus { animation: utljus 10s ease-in var(--utgang) forwards; }
body:has(#in:target) .utgang::before { animation: sken 12s ease-in calc(var(--utgang) + 2s) forwards; }
body:has(#in:target) .utgang::after { animation: sken 12s ease-in calc(var(--utgang) + 3s) forwards; }
body:has(#in:target) .exit {
  animation:
    exit-tands 3s linear var(--exit) forwards,
    svikt 7s linear calc(var(--exit) + 5s) infinite;
}
/* Sista rutan: blir grön och pulserar tre gånger – en signal om att något är på väg. */
body:has(#in:target) .vag i:last-child {
  animation:
    vag-ruta .25s ease-out var(--sista) forwards,
    signal .8s ease-in-out calc(var(--sista) + .7s) 3 forwards;
}
.utgang:hover .ljus, .utgang:focus-visible .ljus { filter: brightness(1.15); }
/* Smal, hög skärm (mobil på höjden): mindre dörr och rutor, så att stigen åt höger inte flyter ihop. */
@media (max-aspect-ratio: 3/4) {
  .vitt { --dorr-b: 8.5vh; --dorr-h: 17vh; --dorr-hoger: 4vw; }
  .vag i { width: .38rem; height: .38rem; }
}
.utgang:focus-visible { outline: none; }

/* När sidan är vit syns inget bakom: göm det, så att webbläsaren slipper rita flimmer och korn. */
body:has(#in:target) main,
#in:target { animation: dolj 1ms linear var(--vitt) forwards; }
body:has(#in:target)::after { animation: korn 1s steps(6) infinite, dolj 1ms linear var(--vitt) forwards; }

/* Citatet på den vita sidan: svagt och litet, växer, sveper förbi – kvar blir svart. */
.vitt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.citat {
  margin: 0;
  max-width: 32ch;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  color: #111;
  opacity: 0;
  transform: scale(.5);
  will-change: transform, opacity;  /* eget lager: skalas, ritas inte om varje bildruta */
  backface-visibility: hidden;
}
.citat q { quotes: "\201C" "\201D"; }
.citat cite {
  display: block;
  margin-top: 1em;
  font-size: .62em;
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #666;
}
.citat cite:empty { display: none; }
body:has(#in:target) .citat.har-citat {
  animation: citat var(--citat-tid) linear var(--citat) forwards;   /* kurvan ligger i nyckelbilderna */
}

/* Stämpeln: nött, sned, tonar fram när dörren stått öppen en stund. */
.stampel {
  position: absolute;
  right: clamp(1rem, 7vw, 6rem);
  bottom: clamp(1rem, 8vh, 5rem);
  transform: rotate(-11deg);
  padding: .35em .7em .3em;
  border: 3px double currentColor;
  font-family: var(--rubrik);
  font-size: clamp(.9rem, 2.4vw, 1.4rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  color: #9a2a22;
  opacity: 0;
  -webkit-mask-image: url("/grain.svg");
  mask-image: url("/grain.svg");
  -webkit-mask-size: 180px;
  mask-size: 180px;
  pointer-events: none;
}
.stampel span {
  display: block;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .55em;
  letter-spacing: .35em;
}
#in:target .stampel { animation: stampel 6s ease-out calc(var(--fordrojning) + var(--oppna) * .7) forwards; }
#in:target .pil  { animation: pil var(--fard) linear var(--start) both; }
#in:target .rulle { animation: vaning var(--fard) steps(1, end) var(--start) both; }

/* Tidtabellen: när varje våning passeras (genererad: långsam start, fort i mitten, inbromsning). */
@keyframes vaning {
  0.00% { transform: translateY(calc(-0 * var(--rad))); }
  14.62% { transform: translateY(calc(-1 * var(--rad))); }
  25.34% { transform: translateY(calc(-2 * var(--rad))); }
  33.53% { transform: translateY(calc(-3 * var(--rad))); }
  39.96% { transform: translateY(calc(-4 * var(--rad))); }
  45.22% { transform: translateY(calc(-5 * var(--rad))); }
  49.90% { transform: translateY(calc(-6 * var(--rad))); }
  54.19% { transform: translateY(calc(-7 * var(--rad))); }
  58.48% { transform: translateY(calc(-8 * var(--rad))); }
  63.16% { transform: translateY(calc(-9 * var(--rad))); }
  68.62% { transform: translateY(calc(-10 * var(--rad))); }
  75.63% { transform: translateY(calc(-11 * var(--rad))); }
  85.38% { transform: translateY(calc(-12 * var(--rad))); }
  100.00% { transform: translateY(calc(-13 * var(--rad))); }
}
@keyframes pil {
  0.00% { opacity: 1; }
  9.75% { opacity: 0.15; }
  19.49% { opacity: 1; }
  29.24% { opacity: 0.15; }
  38.99% { opacity: 1; }
  48.73% { opacity: 0.15; }
  58.48% { opacity: 1; }
  68.23% { opacity: 0.15; }
  77.97% { opacity: 1; }
  87.72% { opacity: 0.15; }
  97.47% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ledtrad { to { opacity: .3; } }
@keyframes ruta {
  to { background: #ffa040; border-color: #ffa040; box-shadow: 0 0 .35em rgba(255, 140, 40, .85); }
}
@keyframes sista {
  0%   { background: rgba(190, 30, 20, .45); border-color: rgba(230, 50, 35, .7); box-shadow: 0 0 .3em rgba(255, 40, 30, .4); }
  50%  { background: rgba(240, 45, 35, .8);  border-color: rgba(255, 70, 50, .9); box-shadow: 0 0 .8em rgba(255, 40, 30, .7); }
  100% { background: rgba(200, 35, 25, .55); border-color: rgba(230, 50, 35, .75); box-shadow: 0 0 .4em rgba(255, 40, 30, .5); }
}
@keyframes vitt { to { opacity: 1; visibility: visible; } }
@keyframes till-svart { to { background: #000; } }
@keyframes dolj { to { visibility: hidden; } }
@keyframes synas { to { visibility: visible; } }
@keyframes vag-ruta {
  to { opacity: 1; background: #ffa040; border-color: #ffa040; box-shadow: 0 0 .35em rgba(255, 140, 40, .85); }
}
@keyframes glipa {
  0%   { inset: 0;               transform: perspective(40vh) rotateY(0); }
  20%  { inset: 0 1px 0 0;       transform: perspective(40vh) rotateY(1deg); }    /* en hårfin strimma */
  100% { inset: 2px 0 3px 0;     transform: perspective(40vh) rotateY(16deg); }   /* på glänt åt höger */
}
@keyframes utljus {
  0%   { opacity: 0; }
  15%  { opacity: .55; }
  100% { opacity: .85; }
}
@keyframes sken { to { opacity: 1; } }
@keyframes signal {
  0%, 100% { background: #3dff74; border-color: #3dff74; box-shadow: 0 0 .35em rgba(60, 255, 120, .7); }
  50%      { background: #1b8a3c; border-color: #1b8a3c; box-shadow: 0 0 .9em rgba(60, 255, 120, .9); }
}
@keyframes exit-tands {
  0%   { opacity: 0; }
  10%  { opacity: .5; }
  14%  { opacity: 0; }
  30%  { opacity: .65; }
  34%  { opacity: .1; }
  55%  { opacity: .7; }
  60%  { opacity: .3; }
  80%, 100% { opacity: .8; }
}
@keyframes citat {
  0.0% { opacity: 0.000; transform: scale(0.5000); }
  4.2% { opacity: 0.190; transform: scale(0.5009); }
  8.3% { opacity: 0.380; transform: scale(0.5050); }
  12.5% { opacity: 0.569; transform: scale(0.5133); }
  16.7% { opacity: 0.759; transform: scale(0.5270); }
  20.8% { opacity: 0.823; transform: scale(0.5469); }
  25.0% { opacity: 0.828; transform: scale(0.5745); }
  29.2% { opacity: 0.832; transform: scale(0.6114); }
  33.3% { opacity: 0.837; transform: scale(0.6597); }
  37.5% { opacity: 0.842; transform: scale(0.7222); }
  41.7% { opacity: 0.846; transform: scale(0.8028); }
  45.8% { opacity: 0.851; transform: scale(0.9067); }
  50.0% { opacity: 0.856; transform: scale(1.0411); }
  54.2% { opacity: 0.860; transform: scale(1.2161); }
  58.3% { opacity: 0.865; transform: scale(1.4458); }
  62.5% { opacity: 0.869; transform: scale(1.7504); }
  66.7% { opacity: 0.874; transform: scale(2.1593); }
  70.8% { opacity: 0.879; transform: scale(2.7153); }
  75.0% { opacity: 0.883; transform: scale(3.4823); }
  79.2% { opacity: 0.888; transform: scale(4.5568); }
  83.3% { opacity: 0.893; transform: scale(6.0867); }
  87.5% { opacity: 0.897; transform: scale(8.3027); }
  91.7% { opacity: 0.750; transform: scale(11.5706); }
  95.8% { opacity: 0.375; transform: scale(16.4802); }
  100.0% { opacity: 0.000; transform: scale(24.0000); }
}
@keyframes stampel { to { opacity: .5; } }
@keyframes korn {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
/* Ett lysrör som sviktar: nästan alltid på, ibland ett kort flimmer. */
@keyframes svikt {
  0%, 34%, 69%, 100% { filter: brightness(1); }
  35%   { filter: brightness(.3); }
  35.5% { filter: brightness(1); }
  36.2% { filter: brightness(.5); }
  36.8% { filter: brightness(1); }
  70%   { filter: brightness(.25); }
  70.8% { filter: brightness(.9); }
  71.3% { filter: brightness(.4); }
  72%   { filter: brightness(1); }
}
/* Hissen är framme: visaren blinkar till. */
@keyframes pling {
  0%   { opacity: 1; filter: brightness(1); }
  15%  { filter: brightness(2.2); }
  30%  { filter: brightness(1); }
  45%  { filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes oppna {
  0%   { width: 0; opacity: 0; }   /* mörkt medan hissen åker */
  3%   { opacity: 1; }
  8%   { width: 2px; }       /* låset släpper */
  25%  { width: 14px; }      /* på glänt */
  100% { width: var(--bredd); }
}
@keyframes golv {
  0%   { transform: translateX(-50%) scaleX(0); opacity: 0; }
  10%  { transform: translateX(-50%) scaleX(.02); opacity: .6; }
  100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
}
@keyframes andas {
  0%, 100% { filter: brightness(1); }
  22%      { filter: brightness(1.03); }
  22.6%    { filter: brightness(.68); }   /* lysröret sviktar */
  23.2%    { filter: brightness(1.02); }
  50%      { filter: brightness(1.05); }
  71%      { filter: brightness(1.03); }
  71.6%    { filter: brightness(.66); }
  72.2%    { filter: brightness(1.02); }
  72.8%    { filter: brightness(.82); }
  73.4%    { filter: brightness(1.03); }
}
@keyframes tona-in {
  to { opacity: 1; }
}
/* Rubriken får mer ljus på sig när dörren öppnas. */
@keyframes lys-upp {
  to { text-shadow: 0 0 .5em rgba(255, 220, 158, .35); color: #ece4cf; }
}

/* Den som har valt bort rörelse ser direkt den öppna dörren. */
@media (prefers-reduced-motion: reduce) {
  h1, body:has(#in:target) h1 { animation: none; opacity: 1; }
  #in:target .dorr { filter: none; }
  #in:target .dorr { animation: none; width: var(--bredd); }
  #in:target .golv { animation: none; transform: translateX(-50%) scaleX(1); }
  #in:target .hiss { animation: none; opacity: 1; }
  body::after { animation: none; }
  #in:target .matare i, #in:target .matare .sista { animation: none; }
  body:has(#in:target) .vitt { animation: none; }
  .forbi, .forbi-golv { display: none; }
  #in:target, body:has(#in:target) main, body:has(#in:target)::after { animation: none; }
  .ledtrad { animation: none; opacity: .3; }
  #in:target .display { animation: none; }
  #in:target .stampel { animation: none; opacity: .5; }
  #in:target .pil { animation: none; opacity: 0; }
  #in:target .rulle { animation: none; transform: translateY(calc(-13 * var(--rad))); }
}

/* Låga skärmar (mobil liggande): dörren tar mindre plats. */
@media (max-height: 520px) {
  :root { --hojd: 46vh; --botten: 6vh; --bredd: min(56vw, 440px); }
  h1 { font-size: clamp(2rem, 13vh, 4rem); }
  .rum { gap: .5rem; }
  .rum ul { gap: .35rem; }
  .rum li a::before { display: inline; margin: 0 .8em 0 0; }   /* bred dörr: numret på samma rad */
  .stampel { right: 2vw; bottom: 3vh; font-size: .8rem; }
  .rum a { font-size: clamp(.75rem, 3.6vh, .95rem); line-height: 1.25; padding-block: .15rem; }
  .golv { height: 6vh; }
}