/* Faste animasjoner i artistmalen. Bare transform, opacity og stroke-dashoffset.
   js/artist-anim.js setter data-anim="pre" (starttilstand) og så "in" når gruppen kommer i bildet,
   og fjerner attributtet igjen etter at den er ferdig. Uten JS eller ved redusert bevegelse settes
   det aldri, og siden vises som før. Hero (foto, H1, knapp) er ikke med. */
:root { --anim-ut: cubic-bezier(0.23, 1, 0.32, 1); --anim-inn-ut: cubic-bezier(0.77, 0, 0.175, 1); }

/* 1. Festivalkartet: kystlinja tegnes, prikkene kommer i listas rekkefølge, og raden med samme nummer trer fram samtidig */
/* Streken stiplet bare mens animasjonen går, så sluttbildet er den vanlige heltrukne kystlinja. */
[data-anim] .dd-land[data-anim-sti] { stroke-dasharray: 1; stroke-dashoffset: 0; }
[data-anim="pre"] .dd-land[data-anim-sti] { stroke-dashoffset: 1; }
[data-anim="in"] .dd-land[data-anim-sti] { animation: anim-tegn 420ms var(--anim-inn-ut) backwards; }
.dd-prikk { transform-box: fill-box; transform-origin: center; }
[data-anim="pre"] .dd-g, [data-anim="pre"] .dd-rader li { opacity: 0; }
[data-anim="pre"] .dd-prikk { transform: scale(0.4); }
[data-anim="in"] .dd-g, [data-anim="in"] .dd-rader li {
  animation: anim-fram 200ms ease-out backwards;
  animation-delay: calc(120ms + var(--i, 0) * 40ms);
}
[data-anim="in"] .dd-prikk {
  animation: anim-pop 240ms var(--anim-ut) backwards;
  animation-delay: calc(120ms + var(--i, 0) * 40ms);
}

/* 2. Tidslinja: linja trekkes fra venstre, prikkene lyser opp årsvis */
[data-anim="pre"] .artist-timeline-item::before { opacity: 0; transform: scale(0.5); }
[data-anim="in"] .artist-timeline-item::before {
  animation: anim-pop 240ms var(--anim-ut) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
[data-anim="pre"] .artist-timeline-track::after { transform: scaleX(0); }
[data-anim="in"] .artist-timeline-track::after { animation: anim-linje 480ms var(--anim-inn-ut) backwards; }
/* 7+ ledd: hvert linjestykke trekkes etter hverandre */
.artist-timeline-item::after { transform-origin: left; }
[data-anim="pre"] .artist-timeline-item::after { transform: scaleX(0); }
[data-anim="in"] .artist-timeline-item::after {
  animation: anim-linje 280ms var(--anim-ut) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* 3. Tallene: streken over hvert tall trekkes. Den ekte border-top gjemmes bare mens animasjonen går
   (samme tykkelse og farge, så ingenting flytter seg), og kommer tilbake når attributtet fjernes. */
[data-anim] .artist-stat-big { position: relative; border-top-color: transparent; }
[data-anim] .artist-stat-big::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--artist-ink); transform-origin: left; pointer-events: none;
}
[data-anim] .artist-stat-big.featured::before { top: -4px; height: 4px; background: var(--artist-accent-deep); }
[data-anim="pre"] .artist-stat-big::before { transform: scaleX(0); }
[data-anim="in"] .artist-stat-big::before {
  animation: anim-linje 420ms var(--anim-ut) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* 4. Diskografien: omslagene kommer inn i utgivelsesrekkefølge (translate, så hover-løftet ikke berøres) */
[data-anim="pre"] .artist-album-card { opacity: 0; translate: 0 6px; }
[data-anim="in"] .artist-album-card {
  animation: anim-rad 360ms var(--anim-ut) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

/* 5. Kommende konserter (der de finnes): radene trer fram ovenfra og ned */
[data-anim="pre"] .artist-upcoming-item { opacity: 0; translate: 0 6px; }
[data-anim="in"] .artist-upcoming-item {
  animation: anim-rad 320ms var(--anim-ut) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes anim-pop { from { opacity: 0; transform: scale(0.5); } }
@keyframes anim-fram { from { opacity: 0; } }
@keyframes anim-linje { from { transform: scaleX(0); } }
@keyframes anim-tegn { from { stroke-dashoffset: 1; } }
@keyframes anim-rad { from { opacity: 0; translate: 0 6px; } }