/* ==========================================================================
   Artistfigurer (09.10.2026, første side: /artister/sienna-spiro/)

   Lastes bare på artistsider med figurer i brødteksten. build-artist-page.js
   legger lenken og figurskriptet (FIGUR_SCRIPT fra scripts/lib/konsert-
   figurer.js) inn når siden har en .konsert-figur, så husets mekanikk gjelder:
   figurer under folden får .js-figur ved lasting og .is-inview når de er i
   bildet. Figurer som alt er i bildet, står ferdige.

   Eget filnavn fordi css/*-filene caches i et år (_headers: immutable).
   En ny fil når alle lesere med en gang; en endring i artist-page.css?v=30
   gjør det ikke uten versjonsbump på alle artistsidene.

   Brødteksten på artistsidene står alltid på papirfarge (--artist-paper),
   også i mørk modus. Figurene bruker derfor artistsidens egne farger, som
   ikke skifter med temaet. Mørk modus for brødtekst og FAQ-faner rettes for
   alle artistsider i artist-page.css (09.10.2026), ikke her.
   ========================================================================== */

/* Figurraden: samme oppsett som på konsertsidene (tegningen 400 px til
   venstre, nøkkel og figurtekst til høyre fra 640 px kolonnebredde). */
.artist-prose:has(> .konsert-figur) { container-type: inline-size; }
.artist-prose > .konsert-figur { margin: 36px 0 44px; }
.artist-prose > h2 + .konsert-figur { margin-top: 8px; }
.artist-prose .konsert-figur figcaption {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--artist-muted);
  text-wrap: pretty;
}
.artist-prose .konsert-figur__tegn {
  font-family: var(--font-body);
  color: var(--artist-ink);
}
@container (min-width: 640px) {
  .artist-prose > .konsert-figur {
    max-width: none;
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 36px;
  }
  .artist-prose > .konsert-figur > .konsert-figur__svg { grid-area: 1 / 1 / 3 / 2; }
  .artist-prose > .konsert-figur > .konsert-figur__tegn { grid-area: 1 / 2; margin: 0; }
  .artist-prose > .konsert-figur > figcaption {
    grid-area: 2 / 2;
    align-self: end;
    margin: 16px 0 0;
    max-width: 36ch;
  }
  .artist-prose > .konsert-figur:not(:has(> .konsert-figur__tegn)) > figcaption { grid-row: 1 / 3; }
}
.artist-figur__prove {
  flex: none;
  width: 22px;
  height: 12px;
  border-radius: 3px;
}
.artist-figur__prove--norge { background: var(--artist-burgundy); }
.artist-figur__prove--turne { background: var(--artist-accent-deep); }

/* --- Figur A: avstand fra Oslo ---------------------------------------- */
.af-svg text { font-family: var(--font-body); }
.af-rute {
  stroke: var(--artist-rule);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.af-null {
  stroke: var(--artist-ink);
  stroke-width: 1.5;
}
.af-skala {
  fill: var(--artist-muted);
  font-size: 14.5px;
  font-weight: 500;
}
.af-skala--oslo { fill: var(--artist-ink); font-weight: 700; }
.af-by {
  fill: var(--artist-ink);
  font-size: 14px;
  font-weight: 500;
}
.af-verdi {
  fill: var(--artist-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.af-verdi--naermest { fill: var(--artist-ink); font-weight: 700; }
.af-stolpe--norge { fill: var(--artist-burgundy); }
.af-stolpe--turne { fill: var(--artist-accent-deep); }

/* --- Figur B: uker på Topplista -------------------------------------- */
.ab-svg text { font-family: var(--font-body); }
.ab-tittel-tekst {
  fill: var(--artist-ink);
  font-size: 14px;
  font-weight: 600;
}
.ab-best {
  fill: var(--artist-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ab-rad--hoved .ab-best { fill: var(--artist-ink); font-weight: 700; }
.ab-plate { fill: var(--artist-ink); }
.ab-rad--hoved .ab-plate { fill: var(--artist-accent-deep); }
.ab-hull { fill: var(--artist-paper); }

/* --- Figur C: My House-scenen ------------------------------------------ */
.ac-svg { border-radius: 8px; }
.ac-vegg { fill: #241815; }
.ac-gulv { fill: #4b3122; }
.ac-planke { stroke: #3a2519; stroke-width: 1; }
.ac-gardin { fill: #6e1528; }
.ac-fold { fill: #4a0e1f; }
.ac-kappe { fill: #5a1121; }
.ac-teppe { fill: #b5482a; }
.ac-teppe-ring { fill: none; stroke: #e9b98a; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ac-teppe-midt { fill: #8f3420; }
.ac-lampefot { fill: #1a1a1a; }
.ac-lampestang { stroke: #c9a36a; stroke-width: 2.5; stroke-linecap: round; }
.ac-skjerm { fill: #f3c98f; }
.ac-stol { fill: #a33d24; }
.ac-stol-mork { fill: #7d2c19; }
.ac-bein { stroke: #2a1a14; stroke-width: 2; stroke-linecap: round; }
.ac-stativ { stroke: #d9d4cc; stroke-width: 2; stroke-linecap: round; fill: none; }
.ac-mikrofon { fill: #ece7df; }
.ac-mikrofon-gitter { stroke: #9a948b; stroke-width: 1; }
.ac-skap { fill: #6b4a33; }
.ac-skap-topp { fill: #8a6243; }
.ac-spiller { fill: #2a2a2a; }
.ac-plate { fill: #111; }
.ac-rille { fill: none; stroke: #3a3a3a; stroke-width: 1.2; }
.ac-etikett { fill: #e0a63a; }
.ac-merke { fill: #f7f3ec; }
.ac-arm { stroke: #bdbdbd; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.ac-hoyttaler { fill: #3a2a20; }
.ac-kjegle { fill: #1a1310; stroke: #6b5444; stroke-width: 1.5; }
.ac-cover--1 { fill: #e0a63a; }
.ac-cover--2 { fill: #f7f3ec; }
.ac-cover--3 { fill: #1d1d1d; }

/* --- Tabellen: beste plassering i Norge og Storbritannia -------------- */
.artist-prose .af-tabell-ramme {
  margin: 8px 0 20px;
  max-width: 34em;
  overflow-x: auto;
}
.af-tabell {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--artist-ink);
}
.af-tabell caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  padding: 0 0 10px;
  color: var(--artist-ink);
}
.af-tabell th,
.af-tabell td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--artist-rule);
  text-align: left;
  vertical-align: baseline;
}
.af-tabell thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--artist-muted);
  border-bottom-color: var(--artist-ink);
}
.af-tabell tbody th { font-weight: 600; }
.af-tabell td,
.af-tabell thead th + th {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
  padding-left: 12px;
  white-space: nowrap;
}
.af-tabell .af-tabell__hoved th,
.af-tabell .af-tabell__hoved td { font-weight: 700; }
.af-tabell .af-tabell__hoved th {
  padding-left: 12px;
  box-shadow: inset 3px 0 0 var(--artist-accent-deep);
}

/* ==========================================================================
   Bevegelse. Kulissen står fra start; bare aktørene venter (samme regel som
   konsertfigurene, docs/ANIMASJONSPASS-KONSERTSIDE-FIGURER-2026-09-25.md).
   ========================================================================== */
.af-stolpe,
.ab-plater,
.ac-gardin-v,
.ac-gardin-h,
.ac-plate-spinn,
.ac-glod,
.ac-kjegle--bass { transform-box: fill-box; }

@media screen and (prefers-reduced-motion: no-preference) {
  /* A: stolpene vokser ut fra Oslo. Norge først, så et opphold, så turneen
     sortert på avstand. Pausen er poenget: avstanden hopper fra 310 til 840. */
  .af-stolpe { transform-origin: 0 50%; }
  .js-figur.is-inview .af-stolpe { animation: afVoks 560ms var(--ease-out-quart) backwards; }
  .js-figur.is-inview .af-verdi { animation: afInn 260ms var(--ease-out-quart) backwards; }
  .js-figur:not(.is-inview) .af-stolpe { transform: scaleX(0); }
  .js-figur:not(.is-inview) .af-verdi { opacity: 0; }
  .af-rad--0 .af-stolpe { animation-delay: 0ms; }
  .af-rad--1 .af-stolpe { animation-delay: 90ms; }
  .af-rad--2 .af-stolpe { animation-delay: 560ms; }
  .af-rad--3 .af-stolpe { animation-delay: 650ms; }
  .af-rad--4 .af-stolpe { animation-delay: 740ms; }
  .af-rad--5 .af-stolpe { animation-delay: 830ms; }
  .af-rad--6 .af-stolpe { animation-delay: 920ms; }
  .af-rad--7 .af-stolpe { animation-delay: 1010ms; }
  .af-rad--8 .af-stolpe { animation-delay: 1100ms; }
  .af-rad--0 .af-verdi { animation-delay: 380ms; }
  .af-rad--1 .af-verdi { animation-delay: 470ms; }
  .af-rad--2 .af-verdi { animation-delay: 940ms; }
  .af-rad--3 .af-verdi { animation-delay: 1030ms; }
  .af-rad--4 .af-verdi { animation-delay: 1120ms; }
  .af-rad--5 .af-verdi { animation-delay: 1210ms; }
  .af-rad--6 .af-verdi { animation-delay: 1300ms; }
  .af-rad--7 .af-verdi { animation-delay: 1390ms; }
  .af-rad--8 .af-verdi { animation-delay: 1480ms; }

  /* B: én plate per uke, telt fram med steps(), så hver plate lander for seg.
     Antall steg er antall uker i raden. */
  .js-figur.is-inview .ab-plater { animation: abTell 900ms steps(10, end) backwards; }
  .js-figur:not(.is-inview) .ab-plater { clip-path: inset(0 100% 0 0); }
  .js-figur.is-inview .ab-plater--6 { animation-timing-function: steps(6, end); animation-duration: 540ms; }
  .js-figur.is-inview .ab-plater--11 { animation-timing-function: steps(11, end); animation-duration: 990ms; }
  .js-figur.is-inview .ab-plater--13 { animation-timing-function: steps(13, end); animation-duration: 1170ms; }
  .js-figur.is-inview .ab-plater--30 { animation-timing-function: steps(30, end); animation-duration: 1500ms; }
  .ab-rad--0 .ab-plater { animation-delay: 0ms; }
  .ab-rad--1 .ab-plater { animation-delay: 220ms; }
  .ab-rad--2 .ab-plater { animation-delay: 440ms; }
  .ab-rad--3 .ab-plater { animation-delay: 660ms; }
  .ab-rad--4 .ab-plater { animation-delay: 880ms; }
  .js-figur.is-inview .ab-rad--hoved .ab-best {
    transform-box: fill-box;
    transform-origin: 100% 50%;
    animation: abSvar 380ms var(--ease-bounce) 1900ms backwards;
  }

  /* C: gardinene glir til side når scenen kommer i bildet. Lampa, platen og
     bassen lever hele tiden, så tegningen aldri står helt stille. */
  .ac-gardin-v { transform-origin: 0 50%; }
  .ac-gardin-h { transform-origin: 100% 50%; }
  .js-figur.is-inview .ac-gardin-v { animation: acApneV 1100ms var(--ease-in-out-quart) backwards; }
  .js-figur.is-inview .ac-gardin-h { animation: acApneH 1100ms var(--ease-in-out-quart) backwards; }
  .ac-plate-spinn { transform-origin: 50% 50%; animation: acSpinn 1.8s linear infinite; }
  .ac-glod { animation: acPust 3.6s ease-in-out infinite alternate; }
  .ac-kjegle--bass { transform-origin: 50% 50%; animation: acBass 0.48s ease-in-out infinite alternate; }

  /* Heroen: pressefotoet driver sakte, så folden aldri står helt stille.
     scale-egenskapen kolliderer ikke med parallaksen, som skriver transform. */
  .artist-page:has(.artist-figur) .artist-hero-image { animation: artistHeroDrift 18s ease-in-out infinite alternate; }
}

@keyframes afVoks { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes afInn { from { opacity: 0; } to { opacity: 1; } }
@keyframes abTell { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes abSvar { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes acApneV { from { transform: scaleX(2.2); } to { transform: scaleX(1); } }
@keyframes acApneH { from { transform: scaleX(2.2); } to { transform: scaleX(1); } }
@keyframes acSpinn { to { transform: rotate(360deg); } }
@keyframes acPust { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes acBass { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes artistHeroDrift { from { scale: 1; } to { scale: 1.07; } }

@media print {
  .js-figur:not(.is-inview) .af-stolpe { transform: none; }
  .js-figur:not(.is-inview) .af-verdi { opacity: 1; }
  .js-figur:not(.is-inview) .ab-plater { clip-path: none; }
}