/* Disco (the Easter egg in js/disco.js). Seven quick clicks on the side menu logo. Classes only: no inline styles. */
.discoveil { position: fixed; inset: 0; z-index: 62; pointer-events: none; overflow: hidden; animation: discoin 0.5s ease-out; }
.discoveil .dwash { position: absolute; inset: 0; opacity: 0.2; background: linear-gradient(115deg, #ff3ea5, #ffb02e, #38e0c0, #4b7bff, #b44bff, #ff3ea5); background-size: 300% 300%; animation: discowash 8s linear infinite; }
.discoveil .dbeams { position: absolute; left: 50%; top: 40px; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; opacity: 0.55; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, transparent 0 4%, rgba(255, 120, 200, 0.28) 5% 7%, transparent 8% 20%, rgba(90, 200, 255, 0.28) 21% 23%, transparent 24% 40%, rgba(255, 220, 90, 0.28) 41% 43%, transparent 44% 58%, rgba(170, 120, 255, 0.28) 59% 61%, transparent 62% 78%, rgba(90, 255, 190, 0.28) 79% 81%, transparent 82% 100%);
  animation: discospin 14s linear infinite; }
.discoveil .dball { position: absolute; left: 50%; top: 0; width: 72px; margin-left: -36px; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; animation: discoswing 1s ease-in-out infinite alternate; }
.discoveil .dstring { display: block; width: 2px; height: 56px; background: #9aa3b2; }
.discoveil .dglobe { display: block; width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 6px 28px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  background: repeating-linear-gradient(0deg, rgba(20, 24, 40, 0.5) 0 2px, transparent 2px 9px), repeating-linear-gradient(90deg, rgba(20, 24, 40, 0.5) 0 2px, transparent 2px 9px), radial-gradient(circle at 34% 30%, #ffffff 0, #cfd6e4 28%, #7d879c 62%, #343b4d 100%); }
.dsp { position: absolute; width: 14px; height: 14px; opacity: 0; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: discotwinkle 1.6s ease-in-out infinite; }
.dsp1 { left: 8%; top: 18%; animation-delay: 0s; } .dsp2 { left: 22%; top: 62%; animation-delay: 0.3s; } .dsp3 { left: 35%; top: 28%; animation-delay: 0.9s; }
.dsp4 { left: 47%; top: 78%; animation-delay: 0.5s; } .dsp5 { left: 58%; top: 20%; animation-delay: 1.2s; } .dsp6 { left: 68%; top: 55%; animation-delay: 0.2s; }
.dsp7 { left: 78%; top: 30%; animation-delay: 0.8s; } .dsp8 { left: 90%; top: 70%; animation-delay: 1.4s; } .dsp9 { left: 14%; top: 42%; animation-delay: 1s; }
.dsp10 { left: 52%; top: 46%; animation-delay: 0.6s; } .dsp11 { left: 84%; top: 12%; animation-delay: 0.1s; } .dsp12 { left: 30%; top: 88%; animation-delay: 1.1s; }
.dsp13 { left: 72%; top: 86%; animation-delay: 0.4s; } .dsp14 { left: 4%; top: 80%; animation-delay: 0.7s; }
/* The page keeps working underneath; the cards bob to the beat (120 beats a minute: half a second a beat). */
html.disco #main .card, html.disco #main .pagehead, html.disco #main .ores:nth-child(-n+12) { animation: discobob 0.5s ease-in-out infinite alternate; }
html.disco #main .card:nth-child(even), html.disco #main .ores:nth-child(even) { animation-name: discobob2; }
html.disco .side .mcplogo { animation: discologo 0.5s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes discoin { from { opacity: 0; } to { opacity: 1; } }
@keyframes discowash { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes discospin { to { transform: rotate(360deg); } }
@keyframes discoswing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes discotwinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 0.95; transform: scale(1.15) rotate(45deg); } }
@keyframes discobob { from { transform: translateY(0) rotate(-0.15deg); } to { transform: translateY(-3px) rotate(0.15deg); } }
@keyframes discobob2 { from { transform: translateY(-3px) rotate(0.15deg); } to { transform: translateY(0) rotate(-0.15deg); } }
@keyframes discologo { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.06); } }
/* Reduce motion: the colours and the ball, standing still */
@media (prefers-reduced-motion: reduce) {
  .discoveil, .discoveil *, html.disco #main .card, html.disco #main .ores, html.disco #main .pagehead, html.disco .side .mcplogo { animation: none !important; }
  .dsp { opacity: 0.6; }
  .discoveil .dbeams { transform: none; }
}
@media (forced-colors: active) { .discoveil { display: none; } }