/* IN DA CLUB — släpp 01. STÄMMAN.
   ============================================================================
   Den här filen bestämmer bara färg och typografi. Strukturen ligger i
   dropp.css och är gemensam för alla släpp. Ett drop byter ton, inte grammatik.

   VÄRLDEN
   Kvällen. Hjälten står utanför dörren — repet, kromstolpen, kylan — och allt
   efter hjälten är innanför. Referensen är Filips: Timbaland, "Give It To Me",
   mitten av 2000-talet. Men sidan är inte en musikvideo. Den lånar ett riktigt
   dokuments grammatik precis som Genesis lånade betongens följesedel, och här
   är dokumentet DÖRREN: listan, kapaciteten, klockslaget.

   VARFÖR ALLT ÄR KALLT
   Pjäsen är silver. En varm ton bakom kall vitmetall lovar guld som pjäsen
   inte har, och det är ett påstående vi inte får göra med färg heller. Genesis
   var kall av positioneringsskäl (varenda konkurrent är guld på svart); det
   här släppet är kallt av materialskäl. Samma resultat, annat skäl.

   TYPOGRAFIN
   Syne, i tre vikter: ExtraBold som skylt, Regular som brödtext, Syne Mono som
   avläsning. Den valdes genom att renderas och tittas på mot droppets faktiska
   ord, inte genom att läsas som namn i en lista — sju kandidater, och de andra
   sex drog antingen åt sci-fi eller åt startup. Syne läser galleri och
   underground, vilket är skillnaden mellan en klubb man vill in på och en
   nattklubbsflyer. Snitten ligger under OFL; licenstexten följer med i
   dropp/in-da-club/fonts/ och får inte städas bort. */

.sida-dropp.dropp-in-da-club{
  --form:#08090C;    /* natten utanför: blåsvart, inte neutralsvart */
  --gjut:#10131A;    /* rummet innanför, en aning lyft */
  --slip:#1C212A;    /* kanter och ytor som fångar ljus */
  --damm:#7E8896;    /* kall grå: all sekundärtext */
  --damm-2:#5A6472;
  --kalk:#E6EBF0;    /* nästan vitt, kalldraget */
  --metall:#C8D6E2;  /* krom: enda accenten, och den är silver */

  /* Ljusmodellen, i klubbens temperatur. Se LJUSMODELLEN i stil.css för
     kurvan och varför den har fyra steg. Här är ljuset kallt hela vägen ner,
     vilket är omvänt mot huset — huset lyser varmt och skuggar kallt. */
  --natt-hi:#242C38; --natt-h2:#161C25;
  --natt-l2:#0A0C11; --natt-lo:#05060A;
  --aura-rgb:176,203,228;

  /* Slöjan över hjältefotot, som kanaler så att dropp.css kan sätta alfa. */
  --slojan:8 9 12;

  --linje:#2A323D; --linje-svag:#1A202A; --natt-linje:#2A323D;

  /* Rampens ljus. En aning ljusare och renare än auran: auran är rummet,
     det här är armaturen. Kanalerna står som kommalista eftersom lagret
     använder rgba() med legacy-syntax, samma som resten av filen. */
  --stral:198,222,244;

  --skylt:'Skylt','Syne',system-ui,sans-serif;
  --data:'Droppdata',ui-monospace,'SFMono-Regular',monospace;
}

/* Syne ExtraBold är BRED, inte kondenserad som Genesis Archivo. Samma mått ger
   därför helt andra radbrytningar: 16ch blev fem rader och läste som skrik.
   Måtten räknas om här och inte i grammatiken, eftersom de hör till snittet. */
.dropp-in-da-club .hjalte h1{max-width:9ch}
.dropp-in-da-club .jatte{font-size:clamp(46px,10.5vw,132px);line-height:.86}
/* SVENSKA VERSALER ÄR HÖGRE ÄN ENGELSKA. Syne har versalhöjd 0,64 em, men Ä
   och Ö går till 0,85 med sina prickar — mätt i skylt.ttf, inte gissat. Vid
   0,98 blev luften mellan raderna 0,12 em, och den åts upp av prickarna:
   "BERÄTTA" och "KVÄLL" satt med sina punkter i raden ovanför på både 390 och
   1440. En rubriksättning som bara håller för ord utan diakriter håller inte
   för svenska. 1,08 ger 0,22 em kvar över prickarna och drygt en halv
   versalhöjd över de raka bokstäverna — fortfarande tätt satt, men satt. */
.dropp-in-da-club .d.stor{font-size:clamp(26px,3.9vw,50px);line-height:1.08}
.dropp-in-da-club .manifest{max-width:22ch}

/* Skylten spärras en aning. Syne sitter tätt i versaler, och ett ord som ska
   läsa som en skylt över en dörr behöver luft mellan bokstäverna. */
.dropp-in-da-club .d,
.dropp-in-da-club .jatte{letter-spacing:.012em}

/* Raden under ordmärket är kvällens data och sätts i mono, inte i skylten.
   Med skyltsnittet konkurrerade den med rubriken den står under. */
.dropp-in-da-club .dropp-under{font-size:clamp(13px,1.7vw,19px);letter-spacing:.11em}

/* Gjutskarven heter fortfarande så i grammatiken, men här är den dörrposten:
   en enda rak linje som skiljer skylten från det som gäller i kväll. */
.dropp-in-da-club .dropp-skarv{background:var(--slip)}

/* KORNET GÅR UPP I KLUBBEN.
   Husets korn är 96 px och avsiktligt osynligt — man ska känna ytan, inte se
   bruset. Här ska man se det. En klubbild klockan två är tagen på hög känsla
   med en liten kamera, och det syns. Samma bricka som huset använder, men
   uppskalad till 192 så prickarna blir dubbelt så stora, och lagd additivt så
   den bidrar i mörkret där overlay inte gör någonting.
   Det ligger som ett fjärde lager i kroppens bakgrund, alltså under texten och
   över ljuset. Inga extra rutor i märkningen. */
.sida-dropp.dropp-in-da-club{
  background-image:var(--korn-mork),var(--aura-natt),url(/img/rok.webp),var(--ljus-natt);
  background-size:192px 192px,auto,cover,auto;
  background-blend-mode:screen,normal,screen,normal;
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed,fixed;
}

/* Bilens remsa beskärs efter ljusstaven, inte efter mitten. Bilen är
   fotograferad med taket högt i rutan och staven på 38 % av höjden, och en
   remsa som klipper på mitten visar plåt i stället för det enda som ska synas.
   Regeln pekar på just den bilden och inte på alla remsor — de andra plåtarna
   är komponerade för mitten och ska ligga kvar där. */
.dropp-in-da-club .band-bild img[src*="klubb-bil"]{object-position:50% 44%}
/* PÅ TELEFON ÄR DET INTE SAMMA BILD. Remsan är 390 mot 578 px och plåten är
   1792 mot 768: en täckande beskärning visar tjugonio procent av bredden.
   Mitten av den bilden är takplåt. Bakljusen — sidans enda kulör och hela
   skälet att bilden finns — ligger med tyngdpunkt på 78 procent av bredden
   och 67 av höjden, alltså utanför fönstret. Måttet är mätt i filen och inte
   gissat. Detsamma gäller högtalaren, vars kon sitter till höger om mitten. */
@media (max-width:700px){
  .dropp-in-da-club .band-bild img[src*="klubb-bil"]{object-position:78% 62%}
  .dropp-in-da-club .band-bild img[src*="klubb-hogtalare"]{object-position:62% 50%}
}

/* ======================================================== REMSORNA PÅ TELEFON
   Samma beslut som hjälten, av samma skäl, och det syntes så fort bilens
   beskärning rättades: bakljusen kom fram — rakt igenom rubriken. Remsan är
   390 mot 578 px, texten tar 230 av dem, och ljusen ligger på 67 procent av
   höjden. Det finns ingen placering i den rutan där texten inte hamnar på
   bildens enda ljusa parti. En slöja som dämpar tillräckligt för att lösa det
   släcker samtidigt det man beskurit fram.

   Remsan STAPLAS därför: bild i eget mått överst, text under på ren botten.
   Sidan får då EN uppställning på telefon och den gäller hjälten, klubbremsan
   och båda remsorna — bild, sedan ord. Det är också så ett omslag och ett
   uppslag ser ut, alltså är det trycksakens uppställning och inte en
   nödlösning.

   Bilden behåller sitt överhäng på 118 % så parallaxen har kvar sin
   vandringsmån, och rutan klipper det. */
@media (max-width:700px){
  .dropp-in-da-club .band{display:block;min-height:0;background:var(--form)}
  .dropp-in-da-club .band-bild{
    position:relative;inset:auto;width:100%;aspect-ratio:4/3;overflow:clip;
  }
  .dropp-in-da-club .band-in{padding-block:clamp(28px,7vw,44px) clamp(36px,10vw,60px)}
  /* Slöjan tar bara kanterna nu. Den lutande varianten finns för att göra en
     rubrik läsbar över fotot, och det finns ingen rubrik över fotot längre. */
  .dropp-in-da-club .band-bild::after{
    background:
      linear-gradient(180deg,rgb(var(--slojan)/.6) 0,rgb(var(--slojan)/0) 18%),
      linear-gradient(0deg,rgb(var(--slojan)/.86) 0,rgb(var(--slojan)/.24) 12%,
        rgb(var(--slojan)/0) 28%),
      radial-gradient(120% 104% at 50% 46%,rgb(var(--slojan)/0) 54%,rgb(var(--slojan)/.44));
  }
}

/* Hjältebilden är LIGGANDE och behöver ingen beskärningsförskjutning.
   Den var stående först, och då rymdes inte glaset och armbandet samtidigt:
   fönstret visar 33 % av en stående plåt, glaset ligger på 0,33 av höjden och
   armbandet på 0,60–0,72. Fyrtiofem procents innehåll får inte plats i ett
   fönster på trettiotre. Lösningen var inte ett bättre beskärningsvärde utan
   en bild i rätt format — se REDIGERINGAR i fal.py. */
.dropp-in-da-club .hjalte-bild img{object-position:50% 56%}

/* Rubriken får ett mått så att länken ryms bredvid den. Utan det tar en
   tvåradig rubrik hela satsytan och länken bryter ner under den, vilket läser
   som två block i stället för som en rad. */
.dropp-in-da-club .sek-topp .d.stor{max-width:15ch}
/* Slöjan var satt för repbilden, där motivet låg som en ljus diagonal rakt
   genom texten och måste dämpas hårt. Den här bilden har sitt motiv i mitten
   och mörk duk i nedre vänstra hörnet där skylten står, alltså finns redan den
   yta rubriken behöver. Kvar blir en mycket lättare slöja som bara håller
   nederkanten och menyremsan. En slöja som är satt för fel bild släcker det
   enda som ska synas. */
.dropp-in-da-club .dropp-hjalte .hjalte-bild::after{
  background:
    linear-gradient(96deg,rgb(var(--slojan)/.74) 0%,rgb(var(--slojan)/.46) 32%,
      rgb(var(--slojan)/.12) 62%,rgb(var(--slojan)/0) 100%),
    linear-gradient(0deg,rgb(var(--slojan)/.62) 0%,rgb(var(--slojan)/0) 40%),
    linear-gradient(180deg,rgb(var(--slojan)/.74) 0,rgb(var(--slojan)/.3) 62px,
      rgb(var(--slojan)/0) 130px),
    radial-gradient(124% 104% at 50% 46%,rgb(var(--slojan)/0) 46%,rgb(var(--slojan)/.42));
}
/* Skyltens slöja är en annan slöja. Den lutande ovan är byggd för en rubrik
   som står till VÄNSTER mitt i bilden och dämpar därför hela vänsterhalvan —
   och i den här beskärningen är vänsterhalvan där stenraden går in. Här står
   texten i stället vid FOTEN, alltså mörknar bara foten. Stenraden i övre
   halvan rörs inte alls, och det är den som är hela bilden. */
.dropp-in-da-club .dropp-hjalte-skylt .hjalte-bild::after{
  background:
    linear-gradient(0deg,rgb(var(--slojan)/.94) 0%,rgb(var(--slojan)/.8) 20%,
      rgb(var(--slojan)/.24) 44%,rgb(var(--slojan)/0) 62%),
    linear-gradient(180deg,rgb(var(--slojan)/.78) 0,rgb(var(--slojan)/.32) 70px,
      rgb(var(--slojan)/0) 150px),
    radial-gradient(126% 106% at 50% 38%,rgb(var(--slojan)/0) 42%,rgb(var(--slojan)/.46));
}
/* Beskärningen är komponerad i filen (hjalte.py) och ska inte flyttas här.
   Regeln ovan som skjuter fokus till 56 % är satt för den gamla hela pjäsen. */
.dropp-in-da-club .dropp-hjalte-skylt .hjalte-bild img{object-position:50% 50%}
/* Skylten på telefon. .jatte är satt till 46 px i botten för att dörrvaktens
   centrerade skylt inte ska spränga sin ruta; hjältens skylt står vänsterställd
   i full spaltbredd och blir vid 46 px en rubrik bland andra i stället för en
   skylt. Måttet sätts därför på hjälten, inte på .jatte. */
/* Skylten ska fylla satsytan på EN rad. Namnet är 9,55 em brett i den
   kondenserade grotesken, satsytan är 88 % av fönstret: 9,4vw är det mått som
   håller båda leden hela vägen från 641 px upp till taket på 132. Temats
   10,5vw sprängde spalten strax över 700 och bröt skylten i två rader med en
   tom högerhalva. Måttet på 9ch måste bort av samma skäl. */
.dropp-in-da-club .dropp-hjalte-skylt h1{
  max-width:none;font-size:clamp(56px,9.4vw,132px);
}
@media (max-width:640px){
  .dropp-in-da-club .dropp-hjalte-skylt h1{font-size:clamp(56px,17.5vw,88px)}
  .dropp-in-da-club .dropp-hjalte-skylt .dropp-hjalte-fot .dropp-under{
    font-size:10px;letter-spacing:.06em;
  }
}

/* ======================================================= HJÄLTEN PÅ TELEFON
   PJÄSEN LÄSER SOM PJÄS ÄVEN HÄR, och det kräver en annan konstruktion.

   Problemet är geometriskt och går att räkna. Hjälten är 390 mot 840 px på en
   telefon, alltså 0,46. Plåten är 1000 mot 1500, alltså 0,67. En täckande
   beskärning visar då 75 procent av bredden — och armbandet ligger kant till
   kant i plåten, så en fjärdedel av det klipps bort i sidled. Kvar blir en
   båge som går ut ur bild i båda ändar, alltså exakt den läsning Filip fällde:
   glittrig rand i stället för tennisarmband.

   Ingen beskärningsförskjutning löser det. Bilden måste få sitt eget format,
   och då kan den inte samtidigt vara textens bakgrund.

   Hjälten STAPLAS därför på telefon: plåten i sitt eget mått överst, skylten
   under den på ren botten. Det är inte en nödlösning — en full skärm med ett
   föremål och en skylt under är hur ett omslag ser ut, och det är dessutom
   den enda uppställningen där både pjäsen och namnet får sin fulla storlek på
   en handflata. Slöjan blir en ren uttoning nedåt i stället för en läsbarhets-
   slöja, för det finns inte längre någon text att göra läsbar. */
@media (max-width:700px){
  .dropp-in-da-club .dropp-hjalte-skylt{
    display:block;min-height:0;background:var(--form);
  }
  /* Rutans mått är plåtens mått. Ingenting beskärs, alltså finns hela
     armbandet i bild — bågen, låset och stenraden hela vägen runt. */
  .dropp-in-da-club .dropp-hjalte-skylt .hjalte-bild{
    position:relative;inset:auto;width:100%;aspect-ratio:1000/1250;
    max-height:64svh;
  }
  .dropp-in-da-club .dropp-hjalte-skylt .hjalte-bild img{object-position:50% 50%}
  /* Bara menyremsan och foten. Motivet i mitten rörs inte alls. */
  .dropp-in-da-club .dropp-hjalte-skylt .hjalte-bild::after{
    background:
      linear-gradient(180deg,rgb(var(--slojan)/.72) 0,rgb(var(--slojan)/0) 15%),
      linear-gradient(0deg,rgb(var(--slojan)/.92) 0,rgb(var(--slojan)/.3) 9%,
        rgb(var(--slojan)/0) 22%),
      radial-gradient(120% 100% at 50% 46%,rgb(var(--slojan)/0) 58%,rgb(var(--slojan)/.4));
  }
  /* Skylten står på egen botten och behöver inte längre pressas ner mot
     bildens fot. Luften över den är kortare än under: namnet ska hänga i
     bilden, inte sväva mitt i ett fält. */
  .dropp-in-da-club .dropp-hjalte-skylt .hjalte-in{
    padding-block:clamp(22px,5vw,34px) clamp(30px,8vw,52px);
  }
}

/* ============================================================ KLUBBELEMENTEN
   Fyra plåtar ur ComfyUI, alla renderade som MATERIAL med en ljushändelse på
   och inga motiv. De ligger som pseudo-element i screen på ytor sidan redan
   har: ingen av dem har en egen ram och ingen föreställer någonting.

   VARFÖR screen OCH INTE opacity PÅ EN BILD
   Plåtarna är svarta med ljusa partier. I screen bidrar svart exakt noll, så
   en plåt som tonar till svart i kanterna HAR ingen kant — den upphör. Det är
   det som gör att elementen smälter in i stället för att bli bilder man ser.
   Uttoningen sitter i pixlarna (in-bilder/klubb/skript/finish.py: tona_kanter)
   och följer alltså med filen i stället för att vara en mask i stilmallen.

   VARFÖR NIVÅN LIGGER I CSS OCH INTE I FILEN
   En webp med ett tiotal ljusnivåer kollapsar i lossy-steget till block med
   lila färgstök, alltså mer artefakt än textur. Filerna har därför max 190
   och opaciteten står här. Riktmärket är img/rok.webp, sidans befintliga
   additiva lager: max 37.

   Z-INDEX
   Ett absolut positionerat pseudo-element med z-index:auto målas EFTER
   förälderns inline-innehåll, alltså över texten. z-index:-1 ger ingenting
   alls på skärmen — elementet hamnar under förälderns egen opaka bakgrund.
   Därför lyfts sidans egna block i stället: .wrap får position:relative. */

/* ------------------------------------------------------- den lyfta ytan */
/* .dropp-plat är sidans största plana färgruta — 1440×460 av ren --gjut på
   dator. Plåten svep.webp är mörkt slipat material med en enda mjuk
   ljusvandring på diagonalen, så ytan får en ljus och en mörk ände i stället
   för att vara jämn hela vägen. */
.dropp-in-da-club .dropp-plat::after{
  content:"";position:absolute;inset:0;
  background:url(/img/klubb/svep.webp) 50% 50%/cover no-repeat;
  mix-blend-mode:screen;opacity:.13;pointer-events:none;
}
/* Ljuskanten. Sektionens överkant är annars ett hårstreck i --linje-svag;
   här är den ljus som vandrar längs borstad metall, med kornet synligt i
   kanten av strimman. Plåten är beskuren så att ljuslinjen ligger på 15 % av
   remsans höjd — med 0,40 hamnade den fyrtio pixlar ner i sektionen och läste
   som ett ljusband INNE i den, alltså som ett eget motiv. */
.dropp-in-da-club .dropp-plat{border-top-color:transparent}
.dropp-in-da-club .dropp-plat::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(66px,8vw,118px);
  background:url(/img/klubb/kant.webp) 50% 0/100% 100% no-repeat;
  mix-blend-mode:screen;opacity:.34;pointer-events:none;
}
.dropp-in-da-club .dropp-plat > .wrap{position:relative;z-index:1}

/* ----------------------------------------------------------- villkoren */
/* Registret låg på ren --form och var sidans plattaste yta efter dörrplåten.
   svep-2 är samma slags material som ovan men utan riktning, så sektionen får
   djup utan att få en ände.

   Dörrplåten är UNDANTAGEN. Den bär redan sin egen ljuskant i ::before och sin
   slipade yta i ::after, och en tredje materialplåt på samma element hade dels
   skrivit över kanten, dels lagt tre lager ljus på den yta som ska vara sidans
   lugnaste — den där man skriver in sin e-post. */
.dropp-in-da-club .sek:not(.tat):not(.dropp-plat){position:relative}
.dropp-in-da-club .sek:not(.tat):not(.dropp-plat)::before{
  content:"";position:absolute;inset:0;
  background:url(/img/klubb/svep-2.webp) 50% 50%/cover no-repeat;
  mix-blend-mode:screen;opacity:.13;pointer-events:none;
}
.dropp-in-da-club .sek:not(.tat):not(.dropp-plat) > .wrap{position:relative;z-index:1}

/* ----------------------------------------------------------- sidfoten */
/* yta.webp är det jämna mikrokornet utan riktning — sidfoten ska kännas som
   en yta, inte som ännu en händelse. Lägst opacitet av alla, för under den
   här texten finns ingenting som ska tävla. */
.sida-dropp.dropp-in-da-club footer{position:relative;border-top-color:transparent}
.sida-dropp.dropp-in-da-club footer::before{
  content:"";position:absolute;inset:0;
  background:url(/img/klubb/yta.webp) 50% 50%/cover no-repeat;
  mix-blend-mode:screen;opacity:.10;pointer-events:none;
}
/* Sidfotens överkant får samma ljuskant som den lyfta ytan, en aning svagare.
   Här låg först kant-frans, plåten där ljuset fransar sig ner i borstningen.
   Den föll: fransarna syns i full storlek som en LUDEN kant och läser som att
   något gått sönder i renderingen, inte som ljus. */
.sida-dropp.dropp-in-da-club footer::after{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(56px,6.5vw,96px);
  background:url(/img/klubb/kant-2.webp) 50% 0/100% 100% no-repeat;
  mix-blend-mode:screen;opacity:.26;pointer-events:none;
}
.sida-dropp.dropp-in-da-club footer > *{position:relative;z-index:1}

/* HJÄLTENS UNDERKANT ÄR PROVAD OCH BORTVALD.
   En spegelvänd ljuskant där hjältebilden slutar syntes knappt alls mot
   fotots mörka underkant, och det den gjorde var att konkurrera med pjäsen.
   Grammatiken säger att droppets hjälte bär varan ensam; då ska den inte ha
   en ljuslist heller. */


/* ================================================================ KLUBBLJUSET
   Sidans signatur, och svaret på den enda dom som fällts över den: mörk är
   inte samma sak som klubb. Ett galleri är också mörkt. Det som skiljer är
   att en klubb har HÅRDA LJUSKÄLLOR SOM RÖR SIG, och att man ser dem i luften
   och inte bara på ytorna de träffar.

   Riggen är EN idé och inte utsmyckning per sektion: två strålar och ett dis,
   fast mot skärmen, som hela sidan rullar förbi. Det är därför den ligger i
   ett enda element högst upp i dokumentet i stället för som effekter på var
   och en av sektionerna. En sida med ett ljus läser som ett rum; en sida med
   sju effekter läser som en mall.

   TRE BESLUT SOM GÖR ATT DEN INTE LÄSER SOM DISCO

   1. ADDITIVT, INTE OPACITET. Lagret blandas med screen. Svart bidrar då
      exakt noll, så strålarna HAR ingen ruta — de upphör där ljuset tar slut.
      Ett halvgenomskinligt lager över hela sidan hade i stället grådaskat
      texten. Samma skäl som klubbplåtarna ligger i screen.
   2. INGEN FÄRG. Ljuset är samma kalla vita som pjäsen. Ett drop i lila och
      magenta är en nattklubbsflyer; ett i vitt är en klubb med dörrvakt.
      Sidans enda kulör är fortfarande bilens bakljus, och den ligger i ett
      foto och inte i en gradient.
   3. LÅNGSAMT. Grunddriften går på 34 och 41 sekunder. Ett ljus som rör sig
      så sakta att man inte ser det röra sig, men märker att rummet inte står
      still, är skillnaden mellan en klubb och en skärmsläckare.

   RULLNINGEN VRIDER RIGGEN. --rull går från 0 till 1 över hela sidan och
   sätts i sajt.js. Yttre .stral bär vridningen ur rullningen, inre <i> bär
   grunddriften: två animerade rotationer på samma element går inte att
   lägga ihop, alltså ligger de i var sitt lager. Går skriptet inte igång är
   --rull noll och riggen står i sitt grundläge, vilket är ett fullt
   komponerat läge och inte ett tomt.

   PRESTANDA. Inga filter, ingen blur, inga bilder: bara gradienter och
   transform. Riggen kostar ett lager i sammansättningen och ingenting per
   bildruta utom vridningen. */
.dropp-in-da-club .klubbljus{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  overflow:hidden;mix-blend-mode:screen;
  contain:layout paint style;
}
.dropp-in-da-club .stral{
  position:absolute;left:50%;top:-30vh;
  width:74vmax;height:190vh;margin-left:-37vmax;
  transform-origin:50% 0;
  display:block;
}
/* INGA KLIPPBANOR. Konen var först en polygon, och den syntes: en klippbana
   har ingen fjäder, så strålens kant blev en rak linje tvärs över hjältefotot
   och läste som ett fel i renderingen, inte som ljus. Formen ligger i stället
   i två gradienter — en tvärs strålen och en mask längs den — och då finns
   ingen kant att se, bara ljus som tar slut. */
.dropp-in-da-club .stral > i{
  position:absolute;inset:0;display:block;
  transform-origin:50% 0;
  background:linear-gradient(90deg,
    rgba(var(--stral),0) 26%,
    rgba(var(--stral),.05) 40%,
    rgba(var(--stral),.14) 50%,
    rgba(var(--stral),.05) 60%,
    rgba(var(--stral),0) 74%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,
    rgba(0,0,0,.62) 34%,rgba(0,0,0,.2) 64%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,
    rgba(0,0,0,.62) 34%,rgba(0,0,0,.2) 64%,transparent 88%);
}
/* Två strålar, olika vinkel, olika takt och olika styrka. Lika starka och
   symmetriska hade lästs som en ram. */
.dropp-in-da-club .stral-a{transform:rotate(calc(-24deg + var(--rull,0) * 17deg))}
.dropp-in-da-club .stral-b{transform:rotate(calc(27deg - var(--rull,0) * 21deg))}
.dropp-in-da-club .stral-b > i{opacity:.62}

/* Diset. Utan det syns strålarna bara där de träffar en yta, och ett ljus man
   inte ser i luften är en ljuskägla på ett golv. Det andas långsammare än
   strålarna rör sig, så rummet aldrig pulserar i takt med någonting. */
.dropp-in-da-club .dis{
  position:absolute;inset:-20%;display:block;
  background:
    radial-gradient(44% 38% at 24% 12%,rgba(var(--stral),.075) 0%,rgba(var(--stral),0) 70%),
    radial-gradient(52% 44% at 82% 74%,rgba(var(--stral),.05) 0%,rgba(var(--stral),0) 72%);
}

@media (prefers-reduced-motion:no-preference){
  .dropp-in-da-club .stral-a > i{animation:klubbdrift 34s ease-in-out infinite}
  .dropp-in-da-club .stral-b > i{animation:klubbdrift 41s ease-in-out -13s infinite reverse}
  .dropp-in-da-club .dis{animation:klubbdis 23s ease-in-out infinite}
}
@keyframes klubbdrift{
  0%,100%{transform:rotate(-5.5deg)}
  50%{transform:rotate(5.5deg)}
}
@keyframes klubbdis{
  0%,100%{opacity:.72;transform:translate3d(0,0,0)}
  50%{opacity:1;transform:translate3d(2.5%,-1.6%,0)}
}
/* Riggen är rummets ljus och rummet är stort. På telefon är skärmen en
   handflata: två strålar som korsar den läser som ett filter över texten och
   inte som ett rum. Kvar blir EN stråle och diset. */
@media (max-width:700px){
  .dropp-in-da-club .stral-b{display:none}
  .dropp-in-da-club .stral-a{transform:rotate(calc(-15deg + var(--rull,0) * 12deg))}
  .dropp-in-da-club .stral-a > i{opacity:.8}
}
@media (prefers-reduced-motion:reduce){
  /* Ett ljus som inte rör sig är ingen ljusrigg, det är en gradient över
     texten. Då är släckt bättre än stilla. */
  .dropp-in-da-club .klubbljus{display:none}
}


/* ================================================================ KLUBBREMSAN
   Sidans enda helskärm med EN sak i, och den saken rör sig. Här ligger
   pausen: hjälten visar vad pjäsen är, remsan visar hur kvällen känns, och
   först därefter börjar sidan prata.

   Klippet är kamera. Skärpan glider ut och stenraden blir till lysande
   skivor med dispersionen synlig i kanten — en strobe fångad i objektivet.
   Se gnistret.py för graderingen och för varför det inte finns någon
   efterbehandling att skryta med.

   FILMEN LIGGER I SCREEN, precis som klubbplåtarna. Klippet är svart med
   ljusa partier, och additivt betyder att det svarta lämnar remsan
   oförändrad: ljuset ligger i rummet i stället för i en rektangel. Det är
   också därför remsan har en egen mörk botten under filmen och inte bara
   filmen. */
/* REMSAN ÄR ETT FÖNSTER, INTE EN RUTA MED FILM I.
   ==========================================================================
   Klippet låg som ett vanligt block och rullade med sidan: en suddig klump i
   en rektangel, och eftersom den rörde sig i takt med allt annat fanns inget
   som skilde den från en bild som råkade darra.

   Nu STÅR FILMEN STILLA och rummet glider över den. Sektionen får clip-path,
   filmen position:fixed i fönstrets mått — då är remsan ett hål i sidan som
   man ser kvällen genom, och det är precis vad ett drop är.

   VARFÖR clip-path OCH INTE background-attachment:fixed. Den senare är
   avstängd på iOS sedan länge och faller tillbaka till scroll, alltså hade
   effekten funnits på dator och saknats på telefon — och telefonen är där de
   flesta ser sidan. clip-path klipper fönstret utan att flytta det fasta
   lagret. Uppmätt i webbläsaren: vid rullning 1200→1800 står lagrets överkant
   kvar på 0 medan sektionens går 0→-600.

   OCH DEN GÅR INTE SÖNDER OM DEN INTE HÅLLER. Skulle en webbläsare ändå fånga
   det fasta lagret i sektionen får det sektionens övre vänstra hörn och
   fönstrets mått, alltså täcker det remsan precis som förut. Sämsta fallet är
   gårdagens utseende, inte ett hål. */
.dropp-in-da-club .klubbremsa{
  position:relative;overflow:clip;clip-path:inset(0);
  /* FÖNSTRETS HÖJD. En hel skärm gjorde remsan till ett hål i sidan snarare
     än ett fönster i den: man rullade genom nio hundra pixlar där bara två
     rader text hände. Tre fjärdedelar av skärmen räcker för att filmen ska
     äga rutan, och effekten sitter i kanterna som sveper förbi — inte i
     höjden. */
  min-height:clamp(340px,60svh,630px);
  display:flex;align-items:flex-end;
  background:var(--form);
  border-block:1px solid var(--linje-svag);
}
/* Vinjetten flyttar från filmlagret till FÖNSTRET. Låg den kvar på det fasta
   lagret skulle den ligga mot skärmens kanter i stället för mot remsans, och
   remsans egen överkant hade då mött en oskuggad film. Kanterna hör till
   hålet, inte till det man ser genom det. */
.dropp-in-da-club .klubbremsa::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgb(var(--slojan)/.72) 0,rgb(var(--slojan)/0) 22%),
    linear-gradient(0deg,rgb(var(--slojan)/.86) 0,rgb(var(--slojan)/.34) 16%,
      rgb(var(--slojan)/0) 34%),
    radial-gradient(122% 108% at 50% 46%,rgb(var(--slojan)/0) 52%,rgb(var(--slojan)/.5));
}
/* Planschen ligger som BAKGRUND på rutan och inte bara som poster på filmen.
   Två skäl, och båda är samma regel: remsan ska vara komplett utan rörelse.
   Den bär bilden under den halvsekund det tar att hämta klippet, och den bär
   hela remsan för den som stängt av rörelse — där släcks filmen helt längre
   ner i filen, och utan bakgrunden hade sektionen då varit en tom svart ruta
   med två rader text i hörnet. */
.dropp-in-da-club .klubbremsa-bild{
  position:fixed;top:0;left:0;width:100vw;height:100svh;z-index:0;
  background:url(/img/gnistret.webp) 36% 40%/cover no-repeat;
}
/* Beskärningen siktar på LJUSET och inte på rutan. Ljusets tyngdpunkt ligger
   på 36 procent av bredden och 38 av höjden genom hela loopen, mätt bildruta
   för bildruta i den färdiga filen. På telefon visas fyrtiosju procent av
   bredden, och med mitten som utgångspunkt hamnade diagonalen halvt utanför
   bild: remsan blev en svart skärm med ett ljus i hörnet. */
.dropp-in-da-club .klubbremsa-bild video{
  width:100%;height:100%;object-fit:cover;object-position:36% 40%;
  display:block;mix-blend-mode:screen;
}
/* Texten står till HÖGER, mot diagonalen. Ljuset går genom vänstra halvan
   hela loopen igenom, och en etikett i vänsterkanten hamnar därför i det enda
   som lyser. Två rader i motsatt hörn balanserar dessutom bilden i stället för
   att stapla sig på den. */
.dropp-in-da-club .klubbremsa-in{
  position:relative;z-index:1;
  padding-block:clamp(28px,4vw,56px);
  text-align:right;
}
/* Remsan sa tidigare "GNISTRET / STENRADEN UR FOKUS" i två mono-rader, alltså
   en bildtext om fotograferingen på sidans största yta. Nu står kapitelmärket
   där och under det EN mening om pjäsen. Meningen ligger i högerkanten mot
   diagonalen och får ett mått: en rad som går tvärs hela remsan konkurrerar
   med bilden i stället för att sitta i den. */
.dropp-in-da-club .klubbremsa-in .lede{
  margin:0 0 0 auto;max-width:36ch;color:var(--kalk);
}
@media (max-width:700px){
  /* Klippet är taget stående och remsan får vara stående på telefon. En
     diagonal i en låg remsa blir ett streck; i en hög ruta är den en pjäs.
     Fönstret är en hel skärm här också — det är samma effekt och den ska vara
     lika stark i handen som på skrivbordet. */
  .dropp-in-da-club .klubbremsa{min-height:64svh}
  /* På 390 px är 36ch bredare än satsytan och meningen bryter ändå mot
     vänsterkanten. Då är vänsterställt ärligare än en högerkant som inte
     håller: kapitelmärket och meningen delar samma kant som allt annat. */
  .dropp-in-da-club .klubbremsa-in{text-align:left}
  .dropp-in-da-club .klubbremsa-in .lede{max-width:none;margin:0}
}
/* En film som spelar ÄR rörelse, och regeln gäller den lika mycket som en
   animation. Klippet släcks och planschen på rutan bär remsan i stället —
   samma bild, stillastående. Det är också vad en skärmbild av sidan fångar.
   DEN FASTA FÖRANKRINGEN SLÄPPER OCKSÅ. Ett lager som står stilla medan sidan
   rör sig under det är rullningsbunden rörelse, alltså precis det den som
   stängt av rörelse har bett att slippa. Lagret läggs tillbaka i sektionen och
   remsan blir en stilla bild i en ruta. */
@media (prefers-reduced-motion:reduce){
  .dropp-in-da-club .klubbremsa-bild video{display:none}
  .dropp-in-da-club .klubbremsa-bild{position:absolute;inset:0;width:auto;height:auto}
}


/* ============================================================== SKYLTEN LYSER
   Ett neonrör som aldrig blinkar är en tryckt skylt, och ett som blinkar
   hela tiden är trasigt. Här är cykeln tretton sekunder och flimret tar tre
   tiondelar av dem: man ser det en gång, tror sig ha inbillat sig det, och
   ser det igen en halv minut senare. Det är den detaljen som gör att skylten
   läser som en skylt över en dörr i stället för som en rubrik.

   Glöden är kall och mycket svag. En skylt som lyser starkt av sig själv är
   en logotyp i en spelapp; en som bara har lite ljus kvar i röret är en
   klubb. */
.dropp-in-da-club .dropp-skylt{
  text-shadow:0 0 26px rgba(var(--aura-rgb),.16);
}
@media (prefers-reduced-motion:no-preference){
  .dropp-in-da-club .dropp-hjalte-skylt .dropp-skylt{animation:neon 13s linear infinite}
}
@keyframes neon{
  0%,90.4%,100%{opacity:1;text-shadow:0 0 26px rgba(var(--aura-rgb),.16)}
  90.8%{opacity:.62;text-shadow:none}
  91.2%{opacity:1;text-shadow:0 0 26px rgba(var(--aura-rgb),.16)}
  91.8%{opacity:.46;text-shadow:none}
  92.1%{opacity:1;text-shadow:0 0 40px rgba(var(--aura-rgb),.3)}
  92.6%{opacity:.8;text-shadow:0 0 18px rgba(var(--aura-rgb),.1)}
  93.1%{opacity:1;text-shadow:0 0 34px rgba(var(--aura-rgb),.24)}
}

/* RUMMET ANDAS NÄR DET LEVER.
   Märket före lägesordet är en avläsning och inte en prydnad: det pulsar
   bara i de två lägen där något faktiskt pågår. Stängt och slutsålt står
   still, för då gör rummet det också. Fyrkantigt och inte runt — en rund
   prick bredvid ett ord är ett driftläge i en molntjänst. */
.dropp-in-da-club .dropp-lage b::before{
  content:"";display:inline-block;vertical-align:.06em;
  width:7px;height:7px;margin-right:12px;
  background:var(--metall);opacity:.5;
}
@media (prefers-reduced-motion:no-preference){
  .dropp-in-da-club [data-lage="oppnar"] .dropp-lage b::before,
  .dropp-in-da-club [data-lage="oppen"] .dropp-lage b::before{
    animation:klubbpuls 3.4s ease-in-out infinite;
  }
}
@keyframes klubbpuls{
  0%,100%{opacity:.32}
  50%{opacity:1}
}