/* ==========================================================================
   blade.css - scenen "The blade" på startsidan. Skapad 2026-09-29.

   Tekniken och alla värden är hämtade oförändrade ur Forge-demon på
   b.devkit.se (sektion 03, css/forge.css): samma bild i två lager, ett mörkt
   och ett ljust, där det ljusa syns genom en mjuk mask vars kant vandrar över
   bladet medan sidan scrollas. Ramen står still (sticky) under tiden.

   Ingenting här ritar toning, spot eller vinjett. På b.devkit.se ligger
   belysningen inbakad i fotot, inte i koden.

   blade.js skriver bara två variabler, --lf (ljuskantens läge) och --fl
   (slutradens synlighet). CSS gör resten.

   Utan JavaScript, med reducerad rörelse eller utan stöd för mask visas
   bladet färdigbelyst: standardvärdena nedan är det färdiga läget.
   ========================================================================== */

.blade {
  position: relative;
  height: 255vh;
  height: 255svh;

  --lf: 145%;             /* ljuskant, % av bladbredden: -22% = allt mörkt ... 145% = allt ljust */
  --fl: 1;                /* slutradens opacitet */
  --blade-dir: 270deg;    /* 270deg = ljuset går från skaftet mot udden (Forge: direction "rtl") */
  --blade-base-b: 0.33;   /* bottenlagrets ljushet (bladet syns knappt) */
  --blade-light-b: 1.15;  /* ljuslagrets ljushet vid kantens topp */
  --blade-settled: 0.62;  /* ljuslagrets alfa bakom kanten = slutbelysningen */
  --blade-trail: 45%;     /* sträckan bakom kanten där toppen lugnar sig */
  --blade-peak: 6%;       /* toppen ligger så här långt bakom kantens framkant */
  --blade-lead: 22%;      /* bred mjukning framför toppen */
}

/* JS lägger på .blade--live när det tar över. Då börjar scenen mörk. */
.blade--live { --lf: -22%; --fl: 0; }

@media (max-width: 767px) {
  .blade {
    height: 240vh;
    height: 240svh;
    /* Mobilbilden är ett annat foto (se index.php) med kniven på snedden, udden uppe till
       vänster och skaftet nere till höger, ca 31 grader från lodrätt. Ljuset följer knivens
       axel, från skaftet mot udden: 360 - 31 = 329. */
    --blade-dir: 329deg;
  }
  /* Bilden får aldrig bli så hög att den går in i rubriken eller i slutraden och stationsordet
     nere i ramen. Mätt 2026-09-29 (puppeteer, 320-412 px bredd): rubrikblocket slutar 86 px
     ned i ramen och slutraden börjar 124 px från botten. Med 16 px luft åt båda håll blir den
     fria höjden ramen minus 242 px (15,25rem) och bilden mitt i den ligger 19 px (1,2rem)
     ovanför ramens mitt. På låga telefoner beskärs bilden lodrätt (object-fit: cover) i
     stället för att texten hamnar ovanpå den. Uttrycklig bredd behövs, annars krymper
     aspect-ratio bredden när höjden kapas. .blade före klassen behövs för att slå grundregeln
     längre ned, som annars vinner på ordning. */
  .blade .blade__media {
    width: 100%;
    top: calc(50% - 1.2rem);
    max-height: calc(100% - 15.25rem);
  }
}

/* Sidhuvudet är sticky och upptar plats överst. Ramen fäster under det. */
.blade__sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--border-w));
  height: calc(100vh - var(--header-h) - var(--border-w));
  height: calc(100svh - var(--header-h) - var(--border-w));
  overflow: hidden;
  background: var(--scene-black);
  color: var(--fg-inverse);
}
@media (min-width: 900px) {
  .blade__sticky {
    top: calc(var(--header-h-lg) + var(--border-w));
    height: calc(100vh - var(--header-h-lg) - var(--border-w));
    height: calc(100svh - var(--header-h-lg) - var(--border-w));
  }
}

/* Dator: 2,4:1 över hela bredden, centrerad lodrätt i ramen. Mobil: 3:4, ett annat foto med
   kniven på snedden (se index.php), också centrerat. Tidigare prövade mobilvarianter (en stående,
   vriden bild och en tät 3:2-beskärning av dator-fotot) togs bort 2026-09-29 på Peters begäran. */
.blade__media {
  position: absolute;
  inset: auto 0;
  top: 50%;
  transform: translateY(-50%);
  aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
  .blade__media { aspect-ratio: 2.4 / 1; }
}

/* En bildkälla, två renderade lager. Bas: mörk, något avfärgad, mer kontrast.
   Ljus: ljusare kopia av samma pixlar, sedd genom en bred mjuk mask. Bakom kanten
   lugnar sig masken till --blade-settled, så bladet slutar fullt läsbart. */
.blade__layer { position: absolute; inset: 0; }
.blade__layer picture,
.blade__layer img { display: block; width: 100%; height: 100%; }
.blade__layer img { object-fit: cover; }

.blade__layer--base {
  filter: brightness(var(--blade-base-b)) contrast(1.18) saturate(0.8);
}
.blade__layer--light {
  filter: brightness(var(--blade-light-b)) contrast(1.08) saturate(0.95);
  -webkit-mask-image: linear-gradient(var(--blade-dir),
    rgb(0 0 0 / var(--blade-settled)) 0,
    rgb(0 0 0 / var(--blade-settled)) calc(var(--lf) - var(--blade-trail)),
    rgb(0 0 0) calc(var(--lf) - var(--blade-peak)),
    transparent calc(var(--lf) + var(--blade-lead)));
  mask-image: linear-gradient(var(--blade-dir),
    rgb(0 0 0 / var(--blade-settled)) 0,
    rgb(0 0 0 / var(--blade-settled)) calc(var(--lf) - var(--blade-trail)),
    rgb(0 0 0) calc(var(--lf) - var(--blade-peak)),
    transparent calc(var(--lf) + var(--blade-lead)));
}

.blade__head {
  position: absolute;
  left: var(--gutter);
  top: var(--space-5);
}
.blade__head .eyebrow { color: var(--fg-inverse); opacity: 0.7; margin-bottom: var(--space-1); }
.blade__title {
  margin: 0;
  font-size: var(--text-5);
  line-height: 1.02;
  color: var(--fg-inverse);
}

/* Stationsorden: staplade på samma ställe, exakt ett synligt åt gången. Det sista
   (FINISHED) är standard, så läget utan JS och med reducerad rörelse är färdigt. */
.blade__notes {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(var(--space-6), 6vh, var(--space-8));
  min-width: 12ch;
  height: calc(var(--text-2xs) * 1.7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.blade__note {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 220ms var(--ease);
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-inverse);
}
.blade__note:last-child { opacity: 1; }
.blade--live .blade__note:last-child { opacity: 0; }
.blade--live .blade__note.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .blade__note { transition: none; }
}

.blade__final {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(var(--space-6), 6vh, var(--space-8));
  max-width: 34ch;
  margin: 0;
  opacity: var(--fl);
  text-align: right;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
  color: var(--fg-inverse);
}
@media (max-width: 767px) {
  .blade__final {
    left: var(--gutter);
    right: var(--gutter);
    max-width: none;
    text-align: left;
    bottom: calc(var(--space-8) + var(--space-3));
  }
  .blade__notes { bottom: var(--space-6); }
}

/* Utan stöd för mask: hoppa över ljuset som vandrar och visa bladet färdigbelyst. */
@supports not ((mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0))) or (-webkit-mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0)))) {
  .blade__layer--light { display: none; }
  .blade__layer--base { filter: brightness(0.9) contrast(1.08) saturate(0.95); }
}