/* Lewydo™ brand kit for the web — https://lewydo.com/brand/
   The mark is built from the same pictures as in the games (../../png/*.png, @3x), in the same composition as the LibGDX code
   (ABrandGroup / ABrandLogo): nothing is redrawn, no font is needed.
     Lockup 208×322:  .lw-logo 208×208 (brand_back fills it, brand_front 140×140 in the middle)
                      .lw-name 208×74 · .lw-slogan 208×19 · .lw-line 146×1, 20 below the slogan
     Signature: the logo 24×24 + 1 + the name 46×16.4; the menu pill puts it in a 28 px capsule with a › .
   Pictures: ../../png/*.png are the originals for apps (and the LibGDX atlas); ../../webp/*.webp — the same, lighter, for websites.
   Sound: ../../sound/lewydo-heartbeat.wav — the one file for games, web prototypes and sites (lossless; no .ogg / .mp3 copies).
   Scale the whole Lockup with --lw-s (1 = 208×322 CSS px). Colours: #0E1024 #6DF593 #3DDC84 #9DF5C2 #FFFFFF. */

.lw-lockup{display:flex;flex-direction:column;align-items:center;width:calc(208px * var(--lw-s, 1));height:calc(322px * var(--lw-s, 1));}
.lw-logo{position:relative;display:block;flex:none;width:calc(208px * var(--lw-s, 1));height:calc(208px * var(--lw-s, 1));}
.lw-back,.lw-front{position:absolute;display:block;transform-origin:50% 50%;}
.lw-back{left:0;top:0;width:100%;height:100%;}
.lw-front{left:16.346%;top:16.346%;width:67.308%;height:67.308%;}                 /* 140 of 208, in the middle */
.lw-name{display:block;flex:none;width:calc(208px * var(--lw-s, 1));height:calc(74px * var(--lw-s, 1));}
.lw-slogan{display:block;flex:none;width:calc(208px * var(--lw-s, 1));height:calc(19px * var(--lw-s, 1));}
.lw-line{display:block;flex:none;width:calc(146px * var(--lw-s, 1));height:calc(1px * var(--lw-s, 1));min-height:1px;margin-top:calc(20px * var(--lw-s, 1));}

/* the Signature: the logo 24×24 + 1 + the name 46×16.4 (the Lockup's heart ×0.115, «Lewydo» at 12 px) */
.lw-sig{display:inline-flex;align-items:center;gap:1px;}
.lw-sig .lw-logo{width:24px;height:24px;}
.lw-sig .lw-name{width:46.1px;height:16.4px;}
/* the Signature pill — at the bottom of every game menu, 34 px from the bottom; tap → About us */
.lw-pill{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 3px;border-radius:999px;border:1px solid rgba(61,220,132,.24);
  background:rgba(61,220,132,.04);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .12s ease;}
.lw-pill:active{transform:scale(.96);}
.lw-pill .lw-go{width:5px;height:8px;opacity:.65;}

/* the heartbeat — once, when the brand appears (never loop it): add .lw-beating to the .lw-logo */
.lw-beating .lw-front{animation:lwHeart 440ms linear var(--d,0s) 1;}
.lw-beating .lw-back{animation:lwGlow 450ms linear var(--d,0s) 1 forwards;}
@keyframes lwHeart{0%{transform:scale(1);animation-timing-function:cubic-bezier(.61,1,.88,1)}22.727%{transform:scale(1.13);animation-timing-function:cubic-bezier(.12,0,.39,0)}
  50%{transform:scale(1);animation-timing-function:cubic-bezier(.61,1,.88,1)}72.727%{transform:scale(1.07);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:scale(1)}}
@keyframes lwGlow{0%,11.111%{transform:scale(1);animation-timing-function:cubic-bezier(.61,1,.88,1)}37.778%{transform:scale(1.15);animation-timing-function:cubic-bezier(.12,0,.39,0)}100%{transform:scale(1.05)}}

/* the splash (BrandScreen) — add .lw-splash to the .lw-lockup. Everything arrives first, top to bottom; then the heart beats as the
   finale, with the Lewydo sound (../../sound/lewydo-heartbeat.*; start it at 2.09 s — its first beat is 0.03 s in):
     0.15→0.85 the heart and its glow arrive · 0.55→1.10 «Lewydo» · 0.85→1.40 the slogan · 1.15→1.85 the line opens from the middle
     2.00 a breath in · 2.17 LUB · 2.45 DUB — the glow blooms with each, two waves of light leave the heart; the sound is the heart only
     3.80 → the game.
   The waves are two more copies of the glow inside the logo, before .lw-back: <img class="lw-aura" src="…/brand_back…" alt=""> ×2.
   The short beat (.lw-beating) stays for About us and the menu pill. */
.lw-aura{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;transform-origin:50% 50%;}
.lw-splash .lw-logo{opacity:0;transform:scale(.94);animation:lwArrive .7s cubic-bezier(.22,1,.36,1) .15s forwards;}
.lw-splash .lw-front{animation:lwBeat 900ms linear 2s 1;}
.lw-splash .lw-back{animation:lwBloom 1000ms linear 2s 1 forwards;}
.lw-splash .lw-aura{animation:lwWave 1s cubic-bezier(.2,.7,.3,1) 2.12s 1;}
.lw-splash .lw-aura+.lw-aura{animation:lwWave2 .9s cubic-bezier(.2,.7,.3,1) 2.4s 1;}
.lw-splash .lw-name{opacity:0;transform:scale(1.06);animation:lwFocus .55s cubic-bezier(.5,0,.5,1) .55s forwards;}
.lw-splash .lw-slogan{opacity:0;transform:scale(1.06);animation:lwFocus .55s cubic-bezier(.5,0,.5,1) .85s forwards;}
.lw-splash .lw-line{opacity:0;transform:scaleX(0);animation:lwFadeIn .3s linear 1.15s forwards,lwOpen .7s cubic-bezier(.16,1,.3,1) 1.15s forwards;}
@keyframes lwArrive{to{opacity:1;transform:scale(1)}}
@keyframes lwFadeIn{to{opacity:1}}
@keyframes lwFocus{to{opacity:1;transform:scale(1)}}
@keyframes lwOpen{to{transform:scaleX(1)}}
@keyframes lwBeat{
  0%{transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  11%{transform:scale(.95);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  19%{transform:scale(1.2);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  31%{transform:scale(.97);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  50%{transform:scale(1.12);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  63%{transform:scale(.985);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  80%{transform:scale(1.012)}
  100%{transform:scale(1)}}
@keyframes lwBloom{
  0%{transform:scale(1);filter:brightness(1)}
  12%{transform:scale(.98);filter:brightness(1);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  22%{transform:scale(1.3);filter:brightness(1.4);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  40%{transform:scale(1.1);filter:brightness(1.1);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  52%{transform:scale(1.2);filter:brightness(1.25);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{transform:scale(1.05);filter:brightness(1)}}
@keyframes lwWave{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes lwWave2{0%{opacity:.32;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

@media (prefers-reduced-motion:reduce){
  .lw-beating .lw-front,.lw-beating .lw-back,.lw-splash .lw-front,.lw-splash .lw-back,.lw-splash .lw-aura{animation:none;}
  .lw-splash .lw-logo,.lw-splash .lw-name,.lw-splash .lw-slogan,.lw-splash .lw-line{animation:none;opacity:1;transform:none;}
}