/* LNKS Luanda Music Group: the red record panel ("Work in music" on the homepage, "Ready to rise?" on the RISE page).
   lnks-home-scroll.js sets --gp as the panel scrolls past. Base layout: .groove-panel in lnks-pages.css. */
/* ======================================================================
   The record panel: a record on the red. Two sets of black grooves move at
   different speeds as you scroll, a light sweeps round like a spinning
   record, and the two words slide in from either side to meet.
   lnks-home-scroll.js sets --gp (0 when the panel enters, 1 when it leaves).
   ====================================================================== */
.gp { --gp: .5; isolation: isolate; background-image: none;
  background: radial-gradient(80% 90% at 50% 50%, #E0141F 0%, #C20A16 55%, #8A040E 100%); }
.gp__rings { position: absolute; left: 50%; top: 50%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; z-index: -1; pointer-events: none; will-change: transform; }
.gp__rings--a { /* the main grooves: solid black bands, clearly visible */
  background: repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 clamp(24px, 2.4vw, 44px), rgba(0, 0, 0, .34) clamp(24px, 2.4vw, 44px) clamp(48px, 4.8vw, 88px));
  transform: scale(calc(.62 + var(--gp) * .7)); }
.gp__rings--b { /* fine grooves in between, moving the other way, for depth */
  background: repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 9px, rgba(0, 0, 0, .14) 9px 11px);
  transform: scale(calc(1.25 - var(--gp) * .45)); opacity: .9; }
.gp__sheen { position: absolute; left: 50%; top: 50%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .13) 18deg, rgba(255, 255, 255, 0) 40deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .09) 198deg, rgba(255, 255, 255, 0) 222deg);
  -webkit-mask: radial-gradient(circle, #000 0 38%, transparent 60%); mask: radial-gradient(circle, #000 0 38%, transparent 60%); }
.gp::after { /* the label in the middle of the record, and a dark edge */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 46%, rgba(0, 0, 0, .38) 100%); }
.gp__link { position: relative; z-index: 1; transform: translateY(calc((.5 - var(--gp)) * 90px)); }
.gp__kicker { font-size: 13px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
.gp__w { display: block; transition: none; }
.gp__w--l { transform: translateX(calc((1 - min(1, var(--gp) * 2.2)) * -14vw)); }
.gp__w--r { transform: translateX(calc((1 - min(1, var(--gp) * 2.2)) * 14vw)); }
.gp__title { text-shadow: 0 10px 40px rgba(60, 0, 4, .35); }
.gp__sub { display: block; }
.gp__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(8px, 1vw, 16px); padding: 14px 22px 14px 26px; border-radius: 999px;
  background: #0A0A0A; color: #FFFFFF; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 14px 34px rgba(40, 0, 3, .35); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background-color .3s ease; }
.gp__cta svg { width: 18px; height: 18px; transition: transform .3s ease; }
.gp__link:hover .gp__cta, .gp__link:focus-visible .gp__cta { transform: translateY(-3px); background: #FFFFFF; color: #0A0A0A; }
.gp__link:hover .gp__cta svg { transform: translateX(4px); }
.gp__link:hover .groove-panel__sub { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .gp__sheen { animation: gp-spin 12s linear infinite; }
  .gp.is-away .gp__sheen { animation-play-state: paused; }
}
@keyframes gp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gp__rings--a, .gp__rings--b, .gp__link, .gp__w--l, .gp__w--r { transform: none; }
}

.groove-panel.gp--short { min-height: clamp(380px, 62svh, 640px); }