/* glid.css — hero där innehållet glider över bilden. Kräver tokens.css, en identitet och glid.js.

   Byggt ur testuppgift 3 i animation-skillen (2026-10-09), bygget som klarade alla golv i
   rorelsekoll.mjs. Samis ord: "när man scrollar så är känslan av att den glider över de
   stora bilderna" och "bilden bakom står inte helt stilla på goodman den har en långsammar
   scroll bara så den får djupet" (2026-08-12). Bilden följer med UPPÅT, långsammare än
   innehållet; åt andra hållet är det felet från 2026-08-18 ("allt går åt FEL HÅLLL").

   --glid-fart (standard .12) är hur stor del av scrollen bilden följer med i. 0,12 är
   testbyggets val [OMÄTT mot referens]; Sami bad om "lite paralaxx minimalt".
   Hero överst på sidan förutsätts.

   Markup:
   <div class="glid-hero">
     <img src="..." alt="" width="2560" height="1440">
     <h1 class="glid-hero__rubrik">Rubrik</h1>
   </div>
   <div class="glid-innehall">
     <section>...</section> <section>...</section>
   </div> */

.glid-hero { --glid-fart: .12; position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--yta-djup); }
/* Bilden är högre än rutan med just så mycket som den hinner flytta sig, så ingen kant syns.
   will-change: annars ritas bilden om när den stannar och rycker till (golv 1). */
.glid-hero > img, .glid-hero > video { position: absolute; left: 0; top: 0; width: 100%;
  height: calc(100% * (1 + var(--glid-fart)) + 2px); object-fit: cover; will-change: transform; }
.glid-hero:has(.glid-hero__rubrik)::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--yta-djup) 70%, transparent), transparent 55%); }
.glid-hero__rubrik { position: absolute; z-index: 1; left: var(--luft-5); right: var(--luft-5); bottom: var(--luft-8);
  margin: 0; max-width: 16ch; color: var(--pa-djup); font-size: var(--steg-hero); line-height: var(--radhojd-tat); letter-spacing: var(--sparr-hero); }

.glid-innehall { position: relative; z-index: 1; }
:where(.glid-innehall) > * { background: var(--yta); }
/* Första ytan lägger sig en bit upp över bilden, med rundade hörn, så kanten syns mot bilden. */
.glid-innehall > :first-child { border-radius: var(--radie-stor) var(--radie-stor) 0 0; margin-top: calc(-1 * var(--luft-7)); }

@media (min-width: 900px) { .glid-hero__rubrik { left: var(--luft-7); } }
@media (prefers-reduced-motion: reduce) { .glid-hero > img, .glid-hero > video { height: 100%; transform: none !important; } }