/* LND Aura loading screen: the LearnNDev mark draws in, a light runs through it, and a ring circles it. */
#lnd-load { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: var(--bg0, #0b0a14); color: var(--ink, #fff); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
#lnd-load.show { opacity: 1; visibility: visible; transition: none; }
#lnd-load.show.out { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
#lnd-load::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px circle at 50% 46%, color-mix(in srgb, var(--accent, #8b7cff) 22%, transparent), transparent 70%); }
.ll-in { position: relative; display: grid; justify-items: center; gap: 22px; }
.ll-stage { position: relative; width: 210px; height: 210px; display: grid; place-items: center; }
.ll-glow { position: absolute; inset: 20px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent, #8b7cff) 38%, transparent), transparent 68%); animation: llPulse 2s ease-in-out infinite; }
.ll-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 55%, var(--accent, #8b7cff) 90%, var(--accent2, #4fd8ff) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); animation: llSpin 1.5s linear infinite; }
.ll-mark { position: relative; width: 132px; height: 82px; background: linear-gradient(105deg, #3f6aa8 0 36%, #cfe7ff 50%, #3f6aa8 64% 100%) 100% 0 / 280% 100%; -webkit-mask: url(/logo/mark.webp) center / contain no-repeat; mask: url(/logo/mark.webp) center / contain no-repeat; filter: brightness(1.25) saturate(1.2); animation: llDraw .9s cubic-bezier(.22, 1, .36, 1) both, llShine 1.8s linear .9s infinite; }
:root[data-theme="paper"] .ll-mark { filter: none; }
.ll-name { margin: 0; font: 700 26px/1 var(--serif, Georgia, serif); letter-spacing: .01em; opacity: 0; animation: llUp .6s ease .45s forwards; } .ll-name b { font-style: normal; font-weight: 800; color: var(--accent, #8b7cff); }
.ll-bar { width: 132px; height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--ink, #fff) 14%, transparent); opacity: 0; animation: llUp .6s ease .6s forwards; }
.ll-bar i { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent, #8b7cff), var(--accent2, #4fd8ff)); animation: llBar 1.2s ease-in-out infinite; }
html.ll-on:has(#lnd-load.show) { overflow: hidden; }
@keyframes llSpin { to { transform: rotate(360deg); } }
@keyframes llPulse { 50% { transform: scale(1.15); opacity: .7; } }
@keyframes llDraw { from { clip-path: inset(0 100% 0 0); transform: scale(.94); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes llShine { to { background-position: -80% 0; } }
@keyframes llUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes llBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .ll-ring, .ll-glow, .ll-bar i { animation: none; } .ll-mark { animation: none; } .ll-name, .ll-bar { animation: none; opacity: 1; } }

/* the flat Professional theme shares the light theme's adjustments */
:root[data-theme="pro"] .ll-mark { filter: none; }

/* the same light-mode adjustments for the amber and teal light themes */
/* the flat Professional theme shares the light theme's adjustments */
:root[data-theme="ember-light"] .ll-mark { filter: none; }
/* the flat Professional theme shares the light theme's adjustments */
:root[data-theme="tide-light"] .ll-mark { filter: none; }

/* the logo, as one object: it fills from the bottom with colour, settles into its own colours, then a light keeps passing over it while the page loads */
.ll-stage { width: 300px; height: 260px; }
.ll-logo { position: relative; width: 240px; height: 178px; animation: llFloat 3.2s ease-in-out infinite; }
.ll-logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ll-ghost { opacity: .12; filter: var(--lgf, none) grayscale(1); }
.ll-real { opacity: 0; filter: var(--lgf, none); animation: llReveal .55s ease 1.05s forwards; }
.ll-fill, .ll-shine { position: absolute; inset: 0; -webkit-mask: url(/logo/aura-full.webp) center / contain no-repeat; mask: url(/logo/aura-full.webp) center / contain no-repeat; pointer-events: none; }
.ll-fill { background: linear-gradient(180deg, var(--accent2, #4fd8ff), var(--accent, #8b7cff)); clip-path: inset(100% 0 0 0); animation: llRise 1.05s cubic-bezier(.3, .7, .2, 1) .1s forwards, llFade .5s ease 1.25s forwards; }
.ll-shine { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) -120% 0 / 260% 100% no-repeat; mix-blend-mode: soft-light; opacity: 0; animation: llSweep 1.7s ease-in-out 1.4s infinite; }
.ll-dot { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent2, #4fd8ff); box-shadow: 0 0 14px var(--accent2, #4fd8ff); opacity: 0; }
.ll-dot.d1 { animation: llOrbit 2.6s linear .2s infinite; } .ll-dot.d2 { animation: llOrbit 2.6s linear 1.07s infinite; background: var(--accent, #8b7cff); box-shadow: 0 0 14px var(--accent, #8b7cff); } .ll-dot.d3 { animation: llOrbit 2.6s linear 1.9s infinite; }
.ll-bar { width: 160px; }
@keyframes llRise { to { clip-path: inset(0 0 0 0); } }
@keyframes llReveal { to { opacity: 1; } }
@keyframes llFade { to { opacity: 0; } }
@keyframes llSweep { 0% { opacity: 1; background-position: 140% 0; } 70%, 100% { opacity: 1; background-position: -40% 0; } }
@keyframes llFloat { 50% { transform: translateY(-6px); } }
@keyframes llOrbit { 0% { opacity: 0; transform: rotate(0deg) translateX(138px) scale(.5); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg) translateX(138px) scale(.5); } }
@media (prefers-reduced-motion: reduce) { .ll-logo, .ll-dot, .ll-shine { animation: none; } .ll-fill { display: none; } .ll-real { opacity: 1; animation: none; } .ll-dot { display: none; } }