/* ==========================================================================
   Burna Boy (/artister/burna-boy/), sidenivå. Lastes bare av denne siden via
   meta.sideCss i data/artist-content/burna-boy.md, så artistmalen for de andre
   sidene er uendret. Laget 13.10.2026.

   1. Figurene: Grammy-nominasjonene år for år og Topplista-plasseringene.
      Felles bredde 400 px som Lyng-figurene, så ingen tekst i figurene blir
      mindre enn 13,5 px på 390 px.
   2. Låtlista: rader med feltlinje, ikke kort.
   3. Bevegelse: main har data-motion="hub", og js/main.js melder figurene inn
      (.js-reveal, .is-inview). Uten JS eller med redusert bevegelse står alt
      ferdig tegnet. Rekkefølgen i animasjonen er tidsrekkefølgen i dataene.
   ========================================================================== */

/* ---------- 0. Heroen ---------- */
/* Lenken til Norge-siden i taglinen (hurtigsvaret for «Kommer han til Norge?»,
   revisjonen 13.10.2026). Teksten står på heltebakgrunnen, så den arver fargen. */
.artist-hero-tagline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid var(--artist-accent);
  white-space: nowrap;
}
/* «nummer 1-låt» skal ikke brytes ved bindestreken på 390 px. */
.artist-hero-tagline strong { white-space: nowrap; }
.artist-hero-tagline a:hover,
.artist-hero-tagline a:focus-visible { color: var(--artist-accent); }

/* ---------- 1. Figurene ---------- */
.artist-prose { container-type: inline-size; }

.bb-figur {
  margin: 2.4em 0;
  max-width: 400px;
}
.bb-figur__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.bb-figur figcaption {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #4a4a4a;
  text-wrap: pretty;
}
@container (min-width: 640px) {
  .bb-figur {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 28px;
    align-items: end;
    max-width: none;
  }
  .bb-figur figcaption { margin-top: 0; }
}

.bb-tekst {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  fill: var(--artist-ink);
}
.bb-tekst--sterk {
  font-family: var(--font-display);
  font-weight: 700;
}
.bb-tekst--demp { fill: #555049; }
.bb-tall { font-variant-numeric: tabular-nums; }
.bb-akse { stroke: var(--artist-ink); stroke-width: 2; stroke-linecap: round; }
.bb-rute { stroke: #d6cfc2; stroke-width: 1.5; }

/* Grammy: plate = album, note = låt, gull = seier */
.bbg-plate { fill: var(--artist-ink); }
.bbg-etikett { fill: #a39b8e; }
.bbg-hull { fill: var(--artist-paper); }
.bbg-m--vant .bbg-plate { fill: var(--artist-accent); stroke: var(--artist-ink); stroke-width: 2; }
.bbg-m--vant .bbg-etikett { fill: var(--artist-ink); }
.bbg-ring,
.bbg-puls { fill: none; stroke: var(--artist-accent-deep); stroke-width: 2.5; }
.bbg-note { fill: var(--artist-ink); }
.bbg-note-strek { stroke: var(--artist-ink); stroke-width: 2.6; stroke-linecap: round; fill: none; }

/* Topplista: singel i blekk, album i dempet, «Dai Dai» i gull */
.bbt-stolpe { fill: var(--artist-ink); }
.bbt-stolpe--album { fill: #a39b8e; }
.bbt-stolpe--topp { fill: var(--artist-accent); stroke: var(--artist-ink); stroke-width: 1.5; }
.bbt-puls { fill: none; stroke: var(--artist-accent-deep); stroke-width: 2.5; }
/* Forklaringen over stolpene: samme farger, men utenfor animasjonen. */
.bbt-tegn { fill: var(--artist-ink); }
.bbt-tegn--album { fill: #a39b8e; }
.bbt-tegn--topp { fill: var(--artist-accent); stroke: var(--artist-ink); stroke-width: 1.5; }

/* ---------- 2. Låtlista ---------- */
.bb-latliste {
  list-style: none;
  margin: 1.6em 0 2em;
  padding: 0;
  border-top: 1.5px solid var(--artist-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
}
.bb-latliste li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 2px 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--artist-rule);
}
.bb-latliste__lat {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
}
.bb-latliste__aar {
  font-variant-numeric: tabular-nums;
  color: #555049;
}
.bb-latliste__klasse {
  color: #3a3a3a;
  text-wrap: pretty;
}
@container (min-width: 560px) {
  .bb-latliste li {
    grid-template-columns: minmax(0, 15rem) 4.5rem minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
  .bb-latliste__lat { grid-column: auto; }
}

/* ---------- 3. Bevegelse ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bbg-m,
  .bbg-puls,
  .bbt-puls {
    transform-box: fill-box;
    transform-origin: center;
  }
  .bbt-stolpe { transform-box: fill-box; transform-origin: left center; }

  /* Grammy: én nominasjon om gangen, fra 2020 til 2026, nedenfra og opp i
     hver kolonne (data-k er rekkefølgen, 1 til 13). */
  .bb-figur--grammy.js-reveal .bbg-m,
  .bb-figur--grammy.js-reveal .bbg-puls { opacity: 0; }
  .bb-figur--grammy.is-inview .bbg-m { animation: bbLand 380ms var(--ease-out-quart, cubic-bezier(.25,1,.5,1)) both; }
  .bb-figur--grammy.is-inview .bbg-puls { animation: bbPuls 1400ms ease-out 1700ms 2 both; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="1"] { animation-delay: 110ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="2"] { animation-delay: 220ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="3"] { animation-delay: 330ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="4"] { animation-delay: 440ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="5"] { animation-delay: 550ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="6"] { animation-delay: 660ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="7"] { animation-delay: 770ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="8"] { animation-delay: 880ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="9"] { animation-delay: 990ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="10"] { animation-delay: 1100ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="11"] { animation-delay: 1210ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="12"] { animation-delay: 1320ms; }
  .bb-figur--grammy.is-inview .bbg-m[data-k="13"] { animation-delay: 1430ms; }

  /* Topplista: stolpene vokser i den rekkefølgen utgivelsene kom. */
  .bb-figur--lista.js-reveal .bbt-stolpe { transform: scaleX(0); }
  .bb-figur--lista.js-reveal .bbt-plass,
  .bb-figur--lista.js-reveal .bbt-puls { opacity: 0; }
  .bb-figur--lista.is-inview .bbt-stolpe { animation: bbVoks 700ms var(--ease-out-quart, cubic-bezier(.25,1,.5,1)) both; }
  .bb-figur--lista.is-inview .bbt-plass { animation: bbInn 300ms ease-out both; }
  .bb-figur--lista.is-inview .bbt-puls { animation: bbPuls 1400ms ease-out 1900ms 2 both; }
  .bb-figur--lista.is-inview [data-k="1"] { animation-delay: 100ms; }
  .bb-figur--lista.is-inview [data-k="2"] { animation-delay: 380ms; }
  .bb-figur--lista.is-inview [data-k="3"] { animation-delay: 660ms; }
  .bb-figur--lista.is-inview [data-k="4"] { animation-delay: 940ms; }
  .bb-figur--lista.is-inview [data-k="5"] { animation-delay: 1220ms; }
  .bb-figur--lista.is-inview .bbt-plass[data-k="1"] { animation-delay: 650ms; }
  .bb-figur--lista.is-inview .bbt-plass[data-k="2"] { animation-delay: 930ms; }
  .bb-figur--lista.is-inview .bbt-plass[data-k="3"] { animation-delay: 1210ms; }
  .bb-figur--lista.is-inview .bbt-plass[data-k="4"] { animation-delay: 1490ms; }
  .bb-figur--lista.is-inview .bbt-plass[data-k="5"] { animation-delay: 1770ms; }
}

@keyframes bbLand {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bbVoks {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes bbInn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bbPuls {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}