/* Footeren: «Når arbeidsdagen er over»
 *
 * Siste kapittel i sida er verkstedet fra tegningen hans om kvelden. Budskapet står i det bare papiret oppe til
 * venstre, som en tittel på arket; menyen og bunnlinja står under, på papir.
 *
 * Arket (.bunn-ark) er lag på lag i samme koordinater som tegningen (1960 × 1280, verktoy/lag_bunn.py):
 *   lag-dag    tegningen hans uendret
 *   lag-kveld  samme tegning med skumringen og natthimmelen bakt inn; tones inn over dag-laget (ingen
 *              mix-blend-mode: Safari mistet blandingen av og til, og da ble tegningen nesten hvit)
 *   sky        tre tørre penselstrøk som alfamasker, i papirets farge; driver sakte én vei over himmelen
 *   stjerne    små prikker av papir i vasken
 *   port       porten ned, ruller med clip-path
 *   lys        lyset i dørvinduet, flimrer av og til
 *   eier       eieren som går hjem og tones bort
 *
 * Standarden er kvelden, ferdig. bunn.js setter .skumring (dagen før porten går ned) og tar den bort én gang når
 * footeren kommer inn på skjermen. Det er alltid kveld her (Phillip 28.10: ingen dag-bryter). Ingenting følger rullingen.
 */

.bunn { padding: 0; color: var(--natt); font-size: 16px; overflow: clip; }
/* nordicops.css hadde den gamle bunnlinja: «.bunn .wrap» som flex-rad med sentrerte ting. Den nulles her, og hver
   del sier selv hvordan den legges ut (med .bunn foran, så de slår den gamle regelen uten !important). */
.bunn .wrap { display: block; gap: 0; flex-wrap: nowrap; align-items: normal; }
.bunn a { text-decoration: none; }

/* ── Budskapet, menyen og arket ─────────────────────────────────────────
   På PC står budskapet og menyen i det bare papiret til venstre, og arket nede til høyre, i samme rute. */
.bunn-hav { position: relative; display: grid; padding-top: clamp(40px, 5vw, 72px); }
.bunn-hav > * { grid-area: 1 / 1; }
.bunn .bunn-venstre { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.bunn-venstre > * { pointer-events: auto; }
.bunn-melding { max-width: 720px; }
.bunn-tittel { margin: 0; font: 800 clamp(40px, 4.2vw, 66px)/.96 var(--sans); letter-spacing: -.045em; }
.bunn-tittel > span { display: block; }
@media (min-width: 1100px) { .bunn-tittel > span { white-space: nowrap; } }   /* alltid to linjer på PC, også i Safari */
.bunn-tittel .k { margin-top: .06em; font-size: 1.08em; letter-spacing: -.015em; }
.bunn-ingress { margin: 22px 0 0; max-width: 31ch; font: 500 clamp(18px, 1.35vw, 21px)/1.5 var(--sans); letter-spacing: -.01em; }
.bunn-ingress .k { font-size: 1.22em; line-height: 1; }
.bunn-knapp { margin-top: 30px; }   /* løkkeskrift med pil som resten av sida (.lokke-lenke, Phillip 29.10) */

/* Arket står nede til høyre og går ut i høyre kant. Bredden er regnet så hele footeren får plass på én skjerm
   når man har rullet helt ned. */
.bunn-ark { --b: min(78vw, calc((100svh - 250px) * 1.531), 1320px);
  position: relative; justify-self: end; align-self: end; width: var(--b); aspect-ratio: 1960 / 1280;
  contain: layout paint; }
.bunn-ark > * { position: absolute; display: block; }
.bunn-ark img { max-width: none; }
.lag-dag, .lag-kveld { inset: 0; width: 100%; height: 100%; }

/* Skyene: tørre strøk som alfamasker i papirets farge. Mot vasken blir de lysere strøk (tynnere maling); mot bart
   papir forsvinner de. Derfor kan de seile inn fra høyre kant og ut over papiret til venstre uten at man ser
   at de starter på nytt. Uten bevegelse står de på hvileplassen sin. */
.sky { background: #CCD0CF; opacity: .24; -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.sky-1 { --m: url("/assets/bilder/bunn/sky-1.webp"); left: 60.2%; top: 3.6%; width: 36.73%; aspect-ratio: 720 / 138; }
.sky-2 { --m: url("/assets/bilder/bunn/sky-2.webp"); left: 35.7%; top: 10%; width: 29.59%; aspect-ratio: 580 / 124; }
.sky-3 { --m: url("/assets/bilder/bunn/sky-3.webp"); left: 75%; top: 18.4%; width: 25%; aspect-ratio: 490 / 116; }

/* Stjernene: papir som slipper gjennom vasken. Selve prikken blinker svakt; elementet tones inn når kvelden kommer. */
.stjerne { left: calc(var(--x) / 19.6 * 1%); top: calc(var(--y) / 12.8 * 1%); width: calc(var(--d) / 19.6 * 1%); min-width: 2px;
  aspect-ratio: 1; transform: translate(-50%, -50%); }
.stjerne::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #DDE0DE; }

/* Porten: åpningen fra kveld-tegningen. Toppkanten følger fris-kanten, bunnkanten glir ned i perspektiv. */
.port { left: 50.816%; top: 39.844%; width: 33.571%; height: 47.578%; clip-path: polygon(0 .33%, 100% 25.6%, 100% 94.6%, 0 100%); }
.port img { width: 100%; height: 100%; }
/* Eieren: en skrittsløyfe på 60 rammer (6 × 10, 24 i sekundet) fra verktoy/lag_gang.py. Laget ligger over lyset i
   vinduet, siden han går forbi døra. bunn.js tegner ham på et lerret (se der); uten JS viser bildet første ramme.
   --inn og --ut er hvor turen starter og slutter i rammens bredde, og --tid er veien delt på farten. Farten er
   satt etter foten som står i bakken, ikke etter kroppen (i videoen sklir foten rundt 20 % bakover, og det så glitchy
   ut): 0,20 figurhøyder i sekundet ved 24 bilder, 0,167 ved de 20 bunn.js spiller. --ut-fade er hvor stor del av
   turen han tones ut over; han er helt borte før kanten av arket, ellers kappes han av den. */
.eier { left: 9.551%; top: 56.876%; width: 18.249%; height: 38.628%; overflow: hidden;
  --inn: 127.6%; --ut: -52.3%; --tid: 8.67s; --ut-fade: .5; }
.eier img { width: 600%; height: auto; max-width: none; }
.eier canvas { width: 100%; height: 100%; }
.eier.lerret img { display: none; }

/* Lyset i dørvinduet: varmt papir i de to rutene, posten mellom dem står igjen mørk */
.lys { left: 38.01%; top: 60.234%; width: 3.265%; height: 8.438%; opacity: .94;
  clip-path: polygon(1.9% 10.2%, 98.4% .9%, 98.4% 91.7%, 1.6% 98.6%);
  background: linear-gradient(#EFE8D6, #DCD2B9);
  -webkit-mask: linear-gradient(90deg, #000 0 46.5%, transparent 46.5% 52%, #000 52%);
  mask: linear-gradient(90deg, #000 0 46.5%, transparent 46.5% 52%, #000 52%); }
/* Flimmeret (Phillip 28.10): som et gammelt lysrør, stort sett rolig, så noen raske blink i ny og ne (tre ujevne
   klynger på 17,3 s). Et mørkt slør over ruta som blinker. */
.lys::before { content: ""; position: absolute; inset: 0; background: #2C343C; opacity: 0; }

/* ── Kvelden kommer ────────────────────────────────────────────────────────
   Fra skumring til kveld (standarden): himmelen og skumringen legger seg, porten går ned, så lyset, så stjernene.
   .skumring settes uten overgang (.stille); ellers ville porten vært på vei opp når man kommer ned, og nettleseren
   forkorter en overgang som snus, så porten gikk ned fortere enn de 9 sekundene. */
.lag-kveld { opacity: 1; transition: opacity 3s var(--ease) .2s; }
/* Porten går ned i jevnt motortempo, sakte (Phillip 28.10: «drit sagte»): 9 s, nesten lik fart hele veien */
.port { transition: clip-path 9s cubic-bezier(.4, .12, .6, .9) .9s; }
.port img { transition: transform 9s cubic-bezier(.4, .12, .6, .9) .9s; }
.lys { transition: opacity 1.2s var(--ease) 3.6s; }
.stjerne { opacity: 1; transition: opacity 1.6s var(--ease) calc(3.2s + var(--t) * .12); }

.bunn-ark.stille, .bunn-ark.stille * { transition: none !important; }
.bunn-ark.skumring .lag-kveld { opacity: 0; }
.bunn-ark.skumring .port { clip-path: polygon(0 .33%, 100% 25.6%, 100% 25.6%, 0 .33%); }
.bunn-ark.skumring .port img { transform: translateY(-30%); }
.bunn-ark.skumring .lys { opacity: 0; }
.bunn-ark.skumring .stjerne { opacity: 0; }

/* Det levende: skyene seiler sakte fra høyre mot venstre, samme vei som eieren går (Phillip 28.10: «sakte én
   retning»). Hver sky starter rett utenfor høyre kant og ender over bart papir til venstre, og --til er den veien
   i skyens egen bredde. Fart 4–5 px i sekundet på PC. Stjernene puster svakt. Bare med bevegelse på, og stoppet
   når footeren ikke er på skjermen (.rolig). */
@keyframes bunn-vind { from { translate: 0 0; } to { translate: var(--til) 0; } }
@keyframes bunn-puste { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }
html.bev .sky { left: 100%; animation: bunn-vind var(--tid) linear var(--start) infinite; }
html.bev .sky-1 { --til: -305%; --tid: 260s; --start: -150s; }
html.bev .sky-2 { --til: -358%; --tid: 230s; --start: -40s; }
html.bev .sky-3 { --til: -400%; --tid: 300s; --start: -230s; }
html.bev .stjerne::before { animation: bunn-puste var(--t) ease-in-out calc(var(--t) * -.37) infinite; }
@keyframes bunn-flimmer {
  0%, 23% { opacity: 0; } 23.3% { opacity: .5; } 23.6% { opacity: .06; } 24.1% { opacity: .58; } 24.4% { opacity: 0; }
  57% { opacity: 0; } 57.3% { opacity: .32; } 57.7% { opacity: 0; } 58.6% { opacity: .45; } 58.9% { opacity: 0; }
  86% { opacity: 0; } 86.4% { opacity: .38; } 86.8% { opacity: 0; } 100% { opacity: 0; }
}
html.bev .lys::before { animation: bunn-flimmer 17.3s linear -3s infinite; }
.bunn-ark.rolig .sky, .bunn-ark.rolig .stjerne::before, .bunn-ark.rolig .lys::before { animation-play-state: paused; }
/* «Stopp bevegelse» i bunnlinja (WCAG 2.2.2): skyene blir stående der de er, stjernene og vinduet lyser jevnt */
html.stoppet .bunn-ark .sky { animation-play-state: paused; }
html.stoppet .bunn-ark .stjerne::before, html.stoppet .bunn-ark .lys::before { animation: none; }

/* ── Menyen og bunnlinja ────────────────────────────────────────────────── */
.bunn-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 30px 28px; max-width: 470px;
  margin-top: auto; padding: 52px 0 40px; }
.bunn-gruppe h3 { margin: 0 0 12px; font: 600 14px/1.2 var(--sans); letter-spacing: .02em; color: var(--staal); }
.bunn-gruppe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bunn .bunn-gruppe a { display: inline-block; padding: 6px 0; font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; color: var(--natt);
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 3px) / 0 1.5px no-repeat;
  transition: background-size .35s var(--ease-ut); }
.bunn .bunn-gruppe a:hover, .bunn .bunn-gruppe a:focus-visible { color: var(--natt); background-size: 100% 1.5px; }

.bunn .bunn-juss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  position: relative; padding-top: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--staal); }
.bunn-juss p { margin: 0; }
.bunn-stopp { margin: -6px 0; padding: 6px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline 1.5px rgba(6, 20, 27, .22); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.bunn-stopp:hover { text-decoration-color: currentColor; }
.bunn-stopp:focus-visible { outline: 2px solid var(--natt); outline-offset: 4px; border-radius: 2px; }
.bunn-juss::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1.5px; background: rgba(6, 20, 27, .12); }

/* ── Nettbrett og telefon: budskapet, så arket i full bredde, så menyen ─────── */
@media (max-width: 1099px) {
  .bunn-hav { display: flex; flex-direction: column; padding-top: clamp(48px, 8vw, 80px); }
  .bunn .bunn-venstre { display: contents; }
  .bunn-melding { order: 1; max-width: calc(640px + var(--gutter) * 2); padding: 0 var(--gutter); }
  .bunn-ark { order: 2; --b: 112vw; margin: 8px 0 0 -10vw; }
  .eier { --ut: -.6%; --tid: 6.18s; --ut-fade: .42; }   /* utsnittet starter ved x 175: han er borte før kanten */
  .bunn-nav { order: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; padding: 20px var(--gutter) 36px; }
}
@media (max-width: 759px) {
  /* Utsnittet starter rett før eieren, og han går et par skritt nærmere bygget, så verkstedet blir så stort
     som skjermen tåler med både ham og hele porten med */
  .bunn-ark { --b: 120vw; margin: 24px 0 0 -13.5vw; }
  .eier { translate: 19.6% 0; --ut: 12%; --tid: 5.57s; --ut-fade: .38; }   /* borte før venstre kant, forbi dekkene først */
  .bunn-tittel .k { margin-top: .1em; }
  .bunn-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-top: 12px; }
  .bunn .bunn-gruppe a { font-size: 16px; padding: 8px 0; }
  .bunn .bunn-juss { flex-direction: column; align-items: flex-start; }
  /* «Du tar kvelden.» er 6,94 ganger skriftstørrelsen bred: på 320 krymper den litt i stedet for å brekke (VQ-08) */
  .bunn-tittel { font-size: min(40px, calc((100vw - var(--gutter) * 2) * .142)); }
}
/* E-postadressene er 156 px brede: høyre spalte får mer plass, og på de minste skjermene én spalte (VQ-06) */
@media (max-width: 389px) { .bunn-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
@media (max-width: 359px) { .bunn-nav { grid-template-columns: minmax(0, 1fr); } }
/* Fingre: lenkene og «Stopp bevegelse» blir 44 px høye uten at teksten flytter seg (VQ-18) */
@media (pointer: coarse) {
  .bunn .bunn-gruppe a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0;
    background-position: 0 calc(100% - 7px); }
  .bunn-stopp { min-height: 44px; margin-block: -11px; }
}

/* Redusert bevegelse: kvelden står ferdig */
@media (prefers-reduced-motion: reduce) {
  .bunn-ark *, .bunn-ark *::before, .bunn-ark *::after { transition-delay: 0s !important; animation: none !important; }
}