/* LNKS Luanda Music Group: Legend poster (Voto Gonçalves page).
   A magazine cover in the brand colours: graphite stage, giant red name behind the artist, white notes around him,
   his signature song stacked over his chest. A spotlight, floating dust and a slow sheen give it the feeling of a stage.
   Everything is placed in percentages of one poster canvas and sized in cqw (1% of the canvas width),
   so the composition is identical at every screen width. All motion is skipped with reduced motion. */
@font-face {
  font-family: "Archivo Poster";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
}

.lgp {
  --lgp-bg: #0A0A0A;          /* brand graphite */
  --lgp-deep: #050505;        /* brand graphite deep */
  --lgp-red: #DE0412;         /* brand red */
  --lgp-red-ink: #C40410;     /* brand red ink */
  --lgp-white: #FFFFFF;       /* brand white */
  position: relative; isolation: isolate; overflow: hidden; color: var(--lgp-white);
  background: radial-gradient(75% 95% at 50% 30%, #171717 0%, var(--lgp-bg) 45%, var(--lgp-deep) 100%);
}
.lgp__canvas {
  position: relative; container-type: inline-size; margin-inline: auto; overflow: hidden;
  width: min(100%, calc((100svh - var(--header-h)) * 1.48)); aspect-ratio: 1.48;
  font-family: "Archivo Poster", var(--font-sans); font-stretch: 100%;
}
.lgp__layer { position: absolute; inset: 0; will-change: transform; }

/* stage light: a soft spotlight behind his head and a faint beam from above */
.lgp__light { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(34% 44% at 52% 30%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    radial-gradient(60% 70% at 52% 120%, rgba(222, 4, 18, .22), rgba(222, 4, 18, 0) 70%); }
.lgp__beam { position: absolute; left: 22%; top: 0; width: 60%; height: 80%; pointer-events: none; opacity: .6;
  background: radial-gradient(38% 100% at 50% 0%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 100%); }
/* the opening fade covers the whole section, edge to edge, so the poster never looks like a darker box */
.lgp__curtain { position: absolute; inset: 0; z-index: 9; pointer-events: none; background: var(--lgp-deep); opacity: 0; }
.lgp__vignette { position: absolute; inset: auto 0 0 0; height: 18%; pointer-events: none; z-index: 6;
  background: linear-gradient(to top, rgba(5, 5, 5, .55), rgba(5, 5, 5, 0)); }
.lgp__grain { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the giant name */
.lgp__word { position: absolute; left: 0; right: 0; top: 1.6%; margin: 0; display: flex; justify-content: center; overflow: hidden; padding-top: .02em;
  font-weight: 900; font-stretch: 125%; font-size: 25.9cqw; line-height: .8; letter-spacing: -0.035em; text-transform: uppercase; }
.lgp__word .lgp__l { display: inline-block; }
.lgp__word .lgp__s { display: inline-block; color: var(--lgp-red);
  background-image: linear-gradient(105deg, rgba(241, 146, 152, 0) 40%, rgba(244, 175, 179, .95) 50%, rgba(241, 146, 152, 0) 60%), linear-gradient(var(--lgp-red), var(--lgp-red));
  background-size: 300% 100%, 100% 100%; background-position: 120% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lgp__seal { position: absolute; top: 2.4%; right: 2.4%; width: 4.4cqw; height: auto; }

/* the artist: a pre framed plate, so no placement maths can drift */
.lgp__figure { position: absolute; inset: 0; margin: 0; }
.lgp__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }   /* rim light and shadow are baked into the image */

/* floating dust in the light (dots are added by lnks-legend.js) */
.lgp__dust { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.lgp__dust i { position: absolute; bottom: -2%; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; }

/* small notes */
.lgp__note { position: absolute; margin: 0; font-weight: 800; font-stretch: 100%; font-size: max(10px, 1.05cqw); line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; color: var(--lgp-white); }
.lgp__note a { color: inherit; text-decoration: none; display: block; }
.lgp__note a:hover, .lgp__note a:focus-visible { color: #EF848B; }
.lgp__note ul { list-style: none; margin: 0; padding: 0; }
.lgp__note .lgp__red { color: #EF848B; }   /* brand red glow: readable at small sizes on graphite */
.lgp__n1 { left: 22%; top: 34.5%; }
.lgp__n2 { left: 22%; top: 41.5%; }
.lgp__n3 { left: 78.5%; top: 34.5%; }
.lgp__n4 { left: 1.6%; top: 74.8%; }
.lgp__n5 { left: 90%; top: 66%; }
.lgp__n6 { left: 1.6%; top: 84.5%; }
.lgp__n6 ul { display: flex; flex-wrap: wrap; gap: .2em .9em; max-width: 18cqw; }

/* the big number */
.lgp__num { position: absolute; left: 1.4%; top: 63.5%; margin: 0; font-weight: 900; font-stretch: 125%; font-size: 7.4cqw; line-height: .8; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--lgp-red); }

/* the stacked song title: clicking it plays the song */
.lgp__title { position: absolute; left: 41%; top: 61%; margin: 0; z-index: 4; font-weight: 900; font-stretch: 112%; font-size: 5.3cqw; line-height: .96; letter-spacing: -0.02em; text-transform: uppercase; }
.lgp__title a { color: var(--lgp-white); text-decoration: none; display: grid; justify-items: start; text-shadow: 0 .3cqw 1.6cqw rgba(5, 5, 5, .45); }
.lgp__title .lgp__line { display: block; overflow: hidden; padding: .34em 0 .06em; margin-top: -.34em; }
.lgp__title .lgp__line > span { display: block; }
.lgp__title a:hover .lgp__line > span { color: var(--lgp-red); }
.lgp__play { display: flex; align-items: center; gap: 1.1cqw; margin-top: 1.4cqw; font-size: max(10px, 1.05cqw); font-weight: 800; font-stretch: 100%; letter-spacing: .03em; text-shadow: none; }
.lgp__play img { width: 4.2cqw; height: auto; }
.lgp__play-tag { display: inline-flex; align-items: center; gap: .7cqw; padding: .5em .85em .45em; background: var(--lgp-red-ink); color: #FFFFFF; }
.lgp__eq { display: inline-flex; align-items: end; gap: .25cqw; height: 1.6cqw; }
.lgp__eq i { display: block; width: .35cqw; height: 100%; background: #FFFFFF; transform-origin: bottom; transform: scaleY(.35); }
.lgp a:focus-visible { outline: 2px solid var(--lgp-white); outline-offset: 3px; }

/* ---------- the opening: the lights come up, the name rises, he steps into the light ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lgp__curtain { animation: lgp-curtain 1.4s ease-out both; }
  .lgp__light { animation: lgp-fade 1.8s ease-out .3s both, lgp-breathe 8s ease-in-out 2.2s infinite; }
  .lgp__beam { animation: lgp-beam 2.4s ease-out .2s both; }
  .lgp__word .lgp__l { animation: lgp-up 1.1s cubic-bezier(.2, .85, .2, 1) both; animation-delay: calc(.25s + var(--i) * 90ms); }
  .lgp__word.is-sheen .lgp__s { animation: lgp-sheen 1.5s ease-in-out both; animation-delay: calc(var(--i) * 110ms); }
  .lgp__seal { animation: lgp-pop .7s cubic-bezier(.2, .9, .3, 1.3) 1s both; } /* the new LNKS symbol is never rotated */
  .lgp__figure img { animation: lgp-step 1.5s cubic-bezier(.2, .8, .2, 1) .4s both; }
  .lgp__note, .lgp__play { animation: lgp-in .7s ease both; animation-delay: calc(1.5s + var(--d, 0) * 110ms); }
  .lgp__num { animation: lgp-in .6s ease 1.35s both; }
  .lgp__title .lgp__line > span { animation: lgp-wipe 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.4s + var(--d, 0) * 150ms); }
  .lgp__eq i { animation: lgp-eq .9s ease-in-out infinite alternate; }
  .lgp__eq i:nth-child(2) { animation-duration: .6s; animation-delay: -.3s; }
  .lgp__eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
  .lgp__eq i:nth-child(4) { animation-duration: .75s; animation-delay: -.2s; }
  .lgp__dust i { animation: lgp-dust var(--t, 16s) linear var(--delay, 0s) infinite; }
}
@keyframes lgp-curtain { from { opacity: .88; } to { opacity: 0; } }
@keyframes lgp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lgp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes lgp-beam { from { opacity: 0; } to { opacity: .6; } }
@keyframes lgp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes lgp-sheen { from { background-position: 120% 0, 0 0; } to { background-position: -20% 0, 0 0; } }
@keyframes lgp-pop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
@keyframes lgp-spin { to { transform: rotate(360deg); } }
@keyframes lgp-step { from { opacity: 0; transform: translateY(5%) scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes lgp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lgp-wipe { from { transform: translateY(140%); } to { transform: none; } }
@keyframes lgp-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes lgp-dust { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 12% { opacity: var(--o, .6); } 85% { opacity: var(--o, .6); } 100% { opacity: 0; transform: translate3d(var(--dx, 20px), -70cqw, 0); } }

/* ---------- phones: the poster stands upright ---------- */
@media (max-width: 699.98px) {
  .lgp__canvas { width: 100%; aspect-ratio: .64; }
  .lgp__word { font-size: 25.9cqw; top: 2%; }
  .lgp__seal { top: 1.2%; right: 2%; width: 8cqw; }
  .lgp__light { background:
    radial-gradient(60% 34% at 50% 22%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 50% at 50% 110%, rgba(222, 4, 18, .22), rgba(222, 4, 18, 0) 70%); }
  .lgp__beam { left: 15%; width: 70%; }
  .lgp__note { font-size: max(10px, 2.9cqw); text-shadow: 0 1px 6px rgba(5, 5, 5, .7); }
  .lgp__n1 { left: 3%; top: 20%; }
  .lgp__n2 { left: 3%; top: 26.5%; }
  .lgp__n3 { left: auto; right: 3%; top: 20%; text-align: right; }
  .lgp__n4 { left: 3%; top: 64.5%; }
  .lgp__n5 { left: auto; right: 3%; top: 30.5%; text-align: right; }
  .lgp__n6 { display: none; }
  .lgp__num { left: 3%; top: 56%; font-size: 15cqw; color: var(--lgp-white); text-shadow: 0 2px 12px rgba(5, 5, 5, .6); }
  .lgp__title { left: 3%; top: 75%; font-size: 10.5cqw; }
  .lgp__play { margin-top: 2.6cqw; font-size: max(10px, 2.9cqw); }
  .lgp__play img { width: 8cqw; }
  .lgp__eq { height: 3.4cqw; gap: .6cqw; }
  .lgp__eq i { width: .8cqw; }
}

/* platform buttons under the poster on phones (the notes carry them on larger screens) */
.lgp-listen { display: none; }
@media (max-width: 699.98px) {
  .lgp-listen { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px var(--gutter); margin: 0; list-style: none; background: var(--brand-graphite-deep); }
  .lgp-listen .btn--secondary, .lgp-listen .btn--ghost { color: var(--brand-white); border-color: rgba(255, 255, 255, .5); }
}

/* ---------- Discography: play a preview of each song ---------- */
.lg-disco__note { margin: 0 0 var(--space-5); padding: 10px 14px; border-left: 3px solid var(--brand-red); background: color-mix(in srgb, var(--brand-red) 8%, transparent); font-size: var(--text-sm-size); }
.lg-disco__note[hidden] { display: none; }
.lg-track__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-red); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .25s linear; pointer-events: none; }
.lg-track.is-loading .lg-track__eq i { animation-duration: .35s; opacity: .7; }
.lg-disco__hint { margin: calc(var(--space-2) * -1) 0 var(--space-5); color: var(--c-text-muted); font-size: var(--text-sm-size); }
.lg-album__tracks--play li { display: block; padding: 0; }
.lg-album__tracks--play li::before { content: none; }
.lg-track { width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; position: relative; display: grid; grid-template-columns: 30px 2.2em 1fr; align-items: center; column-gap: 10px; padding: 8px 4px 8px 0; color: inherit; text-decoration: none; border-radius: 4px; transition: background-color .2s ease; }
.lg-track__num::before { content: counter(tr, decimal-leading-zero); color: var(--c-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-track__btn { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--brand-red); display: grid; place-items: center; transition: background-color .2s ease, transform .2s ease; }
.lg-track__btn::before { content: ""; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--brand-red); transition: border-color .2s ease; }
.lg-track__eq { display: none; gap: 2px; align-items: end; height: 12px; }
.lg-track__eq i { width: 3px; height: 100%; background: #FFFFFF; transform-origin: bottom; animation: lg-eq .9s ease-in-out infinite alternate; }
.lg-track__eq i:nth-child(2) { animation-delay: -.3s; } .lg-track__eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes lg-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.lg-track:hover { background: color-mix(in srgb, var(--brand-red) 7%, transparent); }
.lg-track:hover .lg-track__btn, .lg-track:focus-visible .lg-track__btn { background: var(--brand-red); transform: scale(1.06); }
.lg-track:hover .lg-track__btn::before, .lg-track:focus-visible .lg-track__btn::before { border-left-color: #FFFFFF; }
.lg-track:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.lg-track.is-playing { background: color-mix(in srgb, var(--brand-red) 10%, transparent); }
.lg-track.is-playing .lg-track__name { color: var(--brand-red); font-weight: 600; }
.lg-track.is-playing .lg-track__btn { background: var(--brand-red); }
.lg-track.is-playing .lg-track__btn::before { content: none; }
.lg-track.is-playing .lg-track__eq { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .lg-track__eq i { animation: none; } .lg-track__eq i:nth-child(1) { transform: scaleY(.5); } .lg-track__eq i:nth-child(3) { transform: scaleY(.7); }
  .lg-track, .lg-track__btn { transition: none; }
}