/* Lyfe.fy loading screen: the real logo, and a ball that rolls in from the
   right and drops into the cup at the foot of the logo's own flag.
   Markup (dashboard.html, host-academy.html):
   <div id="loading-screen" class="lyfe-loader" role="status" aria-label="Loading Lyfe.fy">
     <div class="ll-stage">
       <div class="ll-mark"><img src="logowhite.png" alt="Lyfe.fy"><span class="ll-ripple"></span><span class="ll-roll"><span class="ll-ball"></span></span></div>
       <p class="ll-words"><span>Connect</span><span>Grow</span><span>Remember</span></p>
     </div>
   </div>
   The logo image is 500×500; its cup (where the flag meets the green) sits at
   (283, 336), so at 300px it is at (170, 202). */
.lyfe-loader{--ll-pine:#14261c;--ll-deep:#0c1812;--ll-cream:#faf7ef;--ll-sage:#9fc7ab;--ll-ease:cubic-bezier(.16,1,.3,1);
  position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 38%,#1f3a2b 0%,var(--ll-pine) 46%,var(--ll-deep) 100%);
  clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1) .12s}
/* film grain, so the dark field reads as turf rather than flat colour */
.lyfe-loader::before{content:'';position:absolute;inset:-50%;opacity:.07;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:ll-grain 1s steps(4) infinite}
.lyfe-loader.hide{clip-path:inset(0 0 100% 0);pointer-events:none}
.lyfe-loader.hide .ll-stage{opacity:0;transform:translateY(-24px) scale(.98);transition:opacity .35s ease,transform .6s var(--ll-ease)}
.ll-stage{position:relative;display:flex;flex-direction:column;align-items:center}

.ll-mark{position:relative;width:300px;height:300px;margin:-70px 0 -64px}   /* the PNG has empty margins */
.ll-mark img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;
  clip-path:inset(0 0 100% 0);animation:ll-reveal 1.1s var(--ll-ease) .1s forwards}

/* the putt: a 2.8s loop that starts once the logo has drawn in */
.ll-roll{position:absolute;left:170px;top:202px;width:0;height:0;animation:ll-roll 2.8s 1s infinite}
.ll-ball{position:absolute;left:-4.5px;top:-8px;width:9px;height:9px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 34% 30%,#fff 0 22%,#ece9df 48%,#b8b5a9 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.45);animation:ll-drop 2.8s 1s infinite}
/* dimples, turning as it rolls */
.ll-ball::after{content:'';position:absolute;inset:0;border-radius:50%;opacity:.35;
  background:radial-gradient(circle,rgba(0,0,0,.5) .6px,transparent 1px) 0 0/3px 3px;animation:ll-spin 2.8s 1s infinite}
.ll-ripple{position:absolute;left:170px;top:202px;width:34px;height:12px;margin:-6px 0 0 -17px;border-radius:50%;
  border:1px solid var(--ll-sage);opacity:0;animation:ll-ripple 2.8s 1s infinite}

.ll-words{display:flex;gap:18px;margin:0;font:500 10px/1 'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.32em;text-transform:uppercase;color:rgba(250,247,239,.28)}
.ll-words span{animation:ll-word 2.8s 1s infinite both}
.ll-words span:nth-child(2){animation-delay:1.25s}
.ll-words span:nth-child(3){animation-delay:1.5s}

@keyframes ll-reveal{to{clip-path:inset(0 0 0 0)}}
/* rolls in from off the green, slows like a lag putt, then holds at the lip */
@keyframes ll-roll{
  0%{transform:translateX(130px);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  52%{transform:translateX(3px);animation-timing-function:ease-in-out}
  60%{transform:translateX(0)}
  100%{transform:translateX(0)}}
@keyframes ll-drop{
  0%{opacity:0;transform:none}
  8%{opacity:1}
  60%{opacity:1;transform:none;animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  70%{opacity:0;transform:translateY(5px) scale(.35)}
  100%{opacity:0;transform:translateY(5px) scale(.35)}}
@keyframes ll-spin{0%{transform:rotate(0)}60%,100%{transform:rotate(-620deg)}}
@keyframes ll-ripple{0%,64%{opacity:0;transform:scale(.4)}68%{opacity:.9}88%,100%{opacity:0;transform:scale(1.6)}}
@keyframes ll-word{0%,8%{color:rgba(250,247,239,.28)}20%,46%{color:var(--ll-cream)}64%,100%{color:rgba(250,247,239,.28)}}
@keyframes ll-grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}

@media (max-width:360px){.ll-mark{transform:scale(.86)}}
@media (prefers-reduced-motion:reduce){
  .lyfe-loader::before,.ll-roll,.ll-ball::after,.ll-ripple,.ll-words span{animation:none}
  .ll-mark img{animation:none;clip-path:none}
  .ll-ball{animation:ll-pulse 1.6s ease-in-out infinite alternate;opacity:1}
  .lyfe-loader,.lyfe-loader.hide .ll-stage{transition:opacity .3s ease}
  .lyfe-loader.hide{clip-path:none;opacity:0}
  @keyframes ll-pulse{from{opacity:.45}to{opacity:1}}
}