/* LNKS Luanda Music Group: the RISE intro (see assets/js/lnks-rise-intro.js).
   A full screen dark stage in both themes, in the colours of the new logo. 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.rise-intro { overflow: hidden; background: #0A0A0A; }
html.rise-intro body { background: #0A0A0A; overflow: hidden; }
html.rise-intro body > :not(.ri) { visibility: hidden; animation: ri-failsafe 0s linear 5s forwards; }
@keyframes ri-failsafe { to { visibility: visible; } }

.ri {
  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;
}
.ri__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: ri-grain .5s steps(4) infinite;
}
@keyframes ri-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); } }
.ri__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 */
.ri__mark { display: block; height: min(74vh, calc(86vw * 560 / 500)); width: auto; aspect-ratio: 500 / 560; overflow: visible; }
.ri__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;
}
.ri__skip:hover, .ri__skip:focus-visible { opacity: 1; background: #FFFFFF; color: #0A0A0A; }
.ri__skip:focus-visible { outline: 3px solid #DE0412; outline-offset: 3px; }

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

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