/* LNKS Luanda Music Group: the NEWS intro (see assets/js/lnks-news-intro.js), in the colours of the new logo.
   A full screen dark stage in both themes. While it plays the page under it is hidden, and it can never stay
   hidden: if the script stops for any reason the page shows itself after 5 seconds. */

html.news-intro { overflow: hidden; background: #0A0A0A; }
html.news-intro body { background: #0A0A0A; overflow: hidden; }
html.news-intro body > :not(.ni) { visibility: hidden; animation: ni-failsafe 0s linear 5s forwards; }
@keyframes ni-failsafe { to { visibility: visible; } }

.ni {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 45%, #1A1A1A 0%, #0A0A0A 50%, #050505 100%);
  color: #FFFFFF;
}
.ni__grain { /* film grain over the whole stage */
  position: absolute; inset: -50%; pointer-events: none; opacity: .09;
  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");
  animation: ni-grain .5s steps(4) infinite;
}
@keyframes ni-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(0, 0); } }
.ni__stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
/* landscape screens: the mark takes 74% of the height; portrait phones: 86% of the width */
.ni__mark { display: block; height: min(74vh, calc(86vw * 560 / 500)); width: auto; aspect-ratio: 500 / 560; overflow: visible; }
.ni__skip {
  position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px);
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  background: transparent; color: #FFFFFF; cursor: pointer;
  font: 600 13px/1 "Figtree Variable", Figtree, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  opacity: .75; transition: opacity .2s, background-color .2s, color .2s;
}
.ni__skip:hover, .ni__skip:focus-visible { opacity: 1; background: #FFFFFF; color: #0A0A0A; }
.ni__skip:focus-visible { outline: 3px solid #DE0412; outline-offset: 3px; }

/* the end: the intro rises away and the page comes up into place */
.ni.ni--out { pointer-events: none; animation: ni-rise .65s cubic-bezier(.7, 0, .2, 1) forwards; }
.ni.ni--out .ni__skip { opacity: 0; }
@keyframes ni-rise { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
html.news-intro-out main { animation: ni-page-in .8s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
@keyframes ni-page-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .ni { display: none; } }