One heart, the same everywhere

package com.lewydo.brand

import com.badlogic.gdx.math.Interpolation
import com.badlogic.gdx.scenes.scene2d.Actor
import com.badlogic.gdx.scenes.scene2d.actions.Actions
import com.badlogic.gdx.utils.Align

/**
 * Lewydo™ heartbeat — the studio standard for every Lewydo game — https://lewydo.com/brand/.
 *
 * The heart (BRAND_FRONT) and its green glow (BRAND_BACK) beat SEPARATELY, ONCE,
 * at the moment the brand appears:
 *   • the splash screen shows,
 *   • the «About us» window opens (every time it opens),
 *   • the Lewydo pill appears at the bottom of the menu.
 * Never wrap it in Actions.forever — a looping logo distracts from the game.
 *
 *   heart: 1.13 (0.10 s, sineOut) → 1.00 (0.12, sineIn) → 1.07 (0.10, sineOut) → 1.00 (0.12, sineIn)   = 0.44 s
 *   glow:  wait 0.05 → 1.15 (0.12, sineOut) → 1.05 (0.28, sineIn), then it stays at 1.05               = 0.45 s
 *
 * The splash (BrandScreen) ends with a bigger, juicier version of it — finale() — together with the Lewydo sound.
 *
 * Usage (e.g. in ABrand.addActorsOnGroup, or when the About window is shown):
 *     LewydoHeartbeat.play(front = aFrontImg, back = aBackImg)
 *     LewydoHeartbeat.play(aFrontImg, aBackImg, delay = 0.25f)   // after the window's own open animation
 */
object LewydoHeartbeat {

    fun play(front: Actor, back: Actor, delay: Float = 0f) {
        // start clean: calling it again (the window re-opens) replays the same single beat
        front.clearActions(); front.setScale(1f); front.setOrigin(Align.center)
        back.clearActions();  back.setScale(1f);  back.setOrigin(Align.center)

        front.addAction(
            Actions.sequence(
                Actions.delay(delay),
                Actions.scaleTo(1.13f, 1.13f, 0.10f, Interpolation.sineOut),
                Actions.scaleTo(1.00f, 1.00f, 0.12f, Interpolation.sineIn),
                Actions.scaleTo(1.07f, 1.07f, 0.10f, Interpolation.sineOut),
                Actions.scaleTo(1.00f, 1.00f, 0.12f, Interpolation.sineIn),
            )
        )

        back.addAction(
            Actions.sequence(
                Actions.delay(delay + 0.05f),
                Actions.scaleTo(1.15f, 1.15f, 0.12f, Interpolation.sineOut),
                Actions.scaleTo(1.05f, 1.05f, 0.28f, Interpolation.sineIn),
            )
        )
    }

    /**
     * The splash's heartbeat (BrandScreen v2), when the whole mark is already in place: a breath in, a big «lub», a «dub»;
     * the glow blooms with each beat and stays at 1.05; two waves of light (copies of the glow) leave the heart.
     * Starts at [delay] (2.0 s into the splash); the «lub» peaks 0.17 s later, the «dub» at 0.45 s — the sound's beats land there.
     */
    fun finale(front: Actor, back: Actor, waveA: Actor, waveB: Actor, delay: Float = 0f) {
        listOf(front, back, waveA, waveB).forEach { it.clearActions(); it.setScale(1f); it.setOrigin(Align.center) }
        val snap = Interpolation.pow3Out          // the attack of a beat: fast, then easing
        val soft = Interpolation.sine             // the release

        front.addAction(
            Actions.sequence(
                Actions.delay(delay),
                Actions.scaleTo(0.95f,  0.95f,  0.099f, soft),     // a breath in
                Actions.scaleTo(1.20f,  1.20f,  0.072f, snap),     // LUB
                Actions.scaleTo(0.97f,  0.97f,  0.108f, soft),
                Actions.scaleTo(1.12f,  1.12f,  0.171f, snap),     // DUB
                Actions.scaleTo(0.985f, 0.985f, 0.117f, soft),
                Actions.scaleTo(1.012f, 1.012f, 0.153f, soft),
                Actions.scaleTo(1.00f,  1.00f,  0.180f, soft),
            )
        )
        back.addAction(
            Actions.sequence(
                Actions.delay(delay),
                Actions.scaleTo(0.98f, 0.98f, 0.12f, soft),
                Actions.scaleTo(1.30f, 1.30f, 0.10f, snap),        // the glow blooms on the lub…
                Actions.scaleTo(1.10f, 1.10f, 0.18f, soft),
                Actions.scaleTo(1.20f, 1.20f, 0.12f, snap),        // …and on the dub
                Actions.scaleTo(1.05f, 1.05f, 0.48f, soft),        // then stays at 1.05, like the short beat
            )
        )
        wave(waveA, delay + 0.12f, from = 0.55f, to = 1.90f, duration = 1.0f)
        wave(waveB, delay + 0.40f, from = 0.32f, to = 1.55f, duration = 0.9f)
    }

    private fun wave(wave: Actor, delay: Float, from: Float, to: Float, duration: Float) {
        wave.color.a = 0f
        wave.addAction(
            Actions.sequence(
                Actions.delay(delay),
                Actions.alpha(from),
                Actions.parallel(
                    Actions.scaleTo(to, to, duration, Interpolation.pow3Out),
                    Actions.fadeOut(duration, Interpolation.pow3Out),
                ),
            )
        )
    }
}

// Lewydo™ brand kit — https://lewydo.com/brand/
// The heart in its glow: brand_back (the mint glow, fills 208×208) under brand_front (the heart, 140×140 in the middle).
// beat()   — the short heartbeat (About us, the menu pill): the heart and its glow beat separately, once.
// finale() — the splash's heartbeat (BrandScreen): a breath in, a big «lub», a «dub», the glow blooms, two waves of light leave the heart.
package com.lewydo.yourgame.game.actors.brand

import com.badlogic.gdx.scenes.scene2d.ui.Image
import com.lewydo.brand.LewydoHeartbeat
import com.lewydo.yourgame.game.actors.layout.constraintLayout.AConstraintLayout
import com.lewydo.yourgame.game.utils.SizeScaler
import com.lewydo.yourgame.game.utils.advanced.AdvancedScreen
import com.lewydo.yourgame.game.utils.gdxGame

class ABrandLogo(override val screen: AdvancedScreen): AConstraintLayout(screen) {

    override val sizeScaler = SizeScaler(SizeScaler.Axis.X, 208f)

    // ------------------------------------------------------------------------
    // Actors
    // ------------------------------------------------------------------------
    private val aWaveImgA      = Image(gdxGame.assetsBrand.brand_back)     // the waves of light: two more copies of the glow, hidden
    private val aWaveImgB      = Image(gdxGame.assetsBrand.brand_back)     // until the splash's finale
    private val aBrandBackImg  = Image(gdxGame.assetsBrand.brand_back)
    private val aBrandFrontImg = Image(gdxGame.assetsBrand.brand_front)

    // ------------------------------------------------------------------------
    // Lifecycle
    // ------------------------------------------------------------------------
    override fun addActorsOnGroup() {
        addWaves()
        addBrandBackImg()
        addBrandFrontImg()
    }

    // ------------------------------------------------------------------------
    // Add Actors
    // ------------------------------------------------------------------------
    private fun addWaves() {
        listOf(aWaveImgA, aWaveImgB).forEach { it.color.a = 0f; add(it) { fillParent() } }
    }

    private fun addBrandBackImg() {
        add(aBrandBackImg) { fillParent() }
    }

    private fun addBrandFrontImg() {
        aBrandFrontImg.setSizeScaled(140f, 140f)
        add(aBrandFrontImg) { center() }
    }

    // ------------------------------------------------------------------------
    // Heartbeat — once, when the brand appears (never in a loop)
    // ------------------------------------------------------------------------
    fun beat(delay: Float = 0f) {
        LewydoHeartbeat.play(front = aBrandFrontImg, back = aBrandBackImg, delay = delay)
    }

    fun finale(delay: Float = 0f) {
        LewydoHeartbeat.finale(front = aBrandFrontImg, back = aBrandBackImg, waveA = aWaveImgA, waveB = aWaveImgB, delay = delay)
    }

}

// Lewydo™ brand kit — https://lewydo.com/brand/
// The Lockup (208×322): the heart in its glow, «Lewydo», «Love What You Do», the line — and its intro (the splash).
// Everything arrives first, top to bottom; then the heart beats as the finale, with the Lewydo sound:
//   0.15 → 0.85 s  the heart and its glow arrive (fade in, scale 0.94 → 1)
//   0.55 → 1.10 s  «Lewydo» comes into focus (fade in, scale 1.06 → 1)
//   0.85 → 1.40 s  the slogan comes into focus
//   1.15 → 1.85 s  the line opens from the middle
//   2.00 s         the finale (LewydoHeartbeat.finale): a breath in, LUB at 2.17, DUB at 2.45, two waves of light
//   2.09 s         onSound() — play kit/sound/lewydo-heartbeat.wav (the heart only; its first beat is 0.03 s in, on the lub)
//   3.80 s         onComplete
package com.lewydo.yourgame.game.actors.brand

import com.badlogic.gdx.math.Interpolation
import com.badlogic.gdx.scenes.scene2d.Actor
import com.badlogic.gdx.scenes.scene2d.actions.Actions
import com.badlogic.gdx.scenes.scene2d.ui.Image
import com.badlogic.gdx.utils.Align
import com.lewydo.brand.LewydoHeartbeat
import com.lewydo.yourgame.game.actors.layout.autoLayout.AAutoLayout
import com.lewydo.yourgame.game.actors.layout.constraintLayout.AConstraintLayout
import com.lewydo.yourgame.game.screens.BrandScreen
import com.lewydo.yourgame.game.utils.gdxGame

class ABrandGroup(override val screen: BrandScreen): AConstraintLayout(screen) {

    // ------------------------------------------------------------------------
    // Actors
    // ------------------------------------------------------------------------
    private val aVerticalGroup = AAutoLayout(screen,
        direction  = AAutoLayout.Direction.VERTICAL,
        alignMain  = AAutoLayout.AlignMain.CENTER,
        alignCross = AAutoLayout.AlignCross.CENTER
    )

    private val aBrandLogo = ABrandLogo(screen)
    private val aLewydoImg = Image(gdxGame.assetsBrand.lewydo)
    private val aSloganImg = Image(gdxGame.assetsBrand.slogan)
    private val aBrandLine = Image(gdxGame.assetsBrand.brand_line)

    private val listActor = listOf<Actor>(aBrandLogo, aLewydoImg, aSloganImg)

    // ------------------------------------------------------------------------
    // Lifecycle
    // ------------------------------------------------------------------------
    override fun addActorsOnGroup() {
        addVerticalGroup()
        addBrandLine()

        setUpActors()
    }

    // ------------------------------------------------------------------------
    // Add Actors
    // ------------------------------------------------------------------------
    private fun addVerticalGroup() {
        add(aVerticalGroup) { fillParent() }

        aBrandLogo.setSize(208f, 208f)
        aLewydoImg.setSize(208f, 74f)
        aSloganImg.setSize(208f, 19f)

        listActor.forEach { aVerticalGroup.add(it) }
    }

    private fun addBrandLine() {
        aBrandLine.setSize(146f, 1f)
        add(aBrandLine) { centerX(aVerticalGroup); topToBottom(aVerticalGroup, 20f) }
    }

    // ------------------------------------------------------------------------
    // Set Up Actors
    // ------------------------------------------------------------------------
    private fun setUpActors() {
        // everything starts invisible
        aBrandLogo.color.a = 0f
        aLewydoImg.color.a = 0f
        aSloganImg.color.a = 0f
        aBrandLine.color.a = 0f

        aLewydoImg.setOrigin(Align.center)
        aSloganImg.setOrigin(Align.center)
        aBrandLine.setOrigin(Align.center)

        aLewydoImg.setScale(1.06f)
        aSloganImg.setScale(1.06f)
        aBrandLine.setScale(0f, 1f)
    }

    // ------------------------------------------------------------------------
    // Animations
    // ------------------------------------------------------------------------
    /** [onSound] plays the Lewydo sound through the game's own sounds (respect its volume; sounds off = silence). */
    fun playIntroAnimation(onSound: () -> Unit = {}, onComplete: () -> Unit) {
        aBrandLogo.setOrigin(Align.center)
        aBrandLogo.setScale(0.94f)

        // 1. The heart and its glow arrive (0.15 → 0.85)
        aBrandLogo.addAction(
            Actions.sequence(
                Actions.delay(0.15f),
                Actions.parallel(
                    Actions.fadeIn(0.7f, Interpolation.pow3Out),
                    Actions.scaleTo(1f, 1f, 0.7f, Interpolation.pow3Out)
                )
            )
        )

        // 2. «Lewydo» (0.55 → 1.10) and 3. the slogan (0.85 → 1.40) — out of focus → in focus
        focusIn(aLewydoImg, 0.55f)
        focusIn(aSloganImg, 0.85f)

        // 4. The line — opens from the middle (1.15 → 1.85)
        aBrandLine.addAction(
            Actions.sequence(
                Actions.delay(1.15f),
                Actions.parallel(
                    Actions.fadeIn(0.3f),
                    Actions.scaleTo(1f, 1f, 0.7f, Interpolation.exp5Out)
                )
            )
        )

        // 5. The finale: the heartbeat (from 2.0) with its sound (2.09) — only the heart beats, the words stay still
        aBrandLogo.finale(delay = 2.0f)
        addAction(Actions.sequence(Actions.delay(2.09f), Actions.run { onSound() }))

        // 6. A moment to take it in → onComplete (3.8)
        addAction(Actions.sequence(Actions.delay(3.8f), Actions.run { onComplete() }))
    }

    private fun focusIn(actor: Actor, delay: Float) {
        actor.addAction(
            Actions.sequence(
                Actions.delay(delay),
                Actions.parallel(
                    Actions.fadeIn(0.55f, Interpolation.fade),
                    Actions.scaleTo(1f, 1f, 0.55f, Interpolation.fade)
                )
            )
        )
    }

}

// Lewydo™ brand kit — https://lewydo.com/brand/
// The first screen of every Lewydo game: the Lewydo Lockup appears, the heart beats with the Lewydo sound (≈ 4 s), then the game's LoaderScreen.
// The sound: kit/sound/lewydo-heartbeat.wav → assets/sound/ as is — the one file for every Lewydo game, web prototype and site, byte for byte
// (lossless 16-bit PCM, so every platform plays the very same samples; never convert it to .ogg or .mp3). Load it with
// your game's sounds: full volume at their usual level, quieter only when the player turns the sounds down.
// Put it in your game and replace «yourgame» with your game's package. Built on the Lewydo LibGDX base
// (AdvancedScreen, AConstraintLayout, AAutoLayout, SizeScaler, animShow / animHide) and the BRAND atlas of this kit.
package com.lewydo.yourgame.game.screens

import com.lewydo.yourgame.game.actors.brand.ABrandGroup
import com.lewydo.yourgame.game.actors.layout.constraintLayout.AConstraintLayout
import com.lewydo.yourgame.game.manager.SpriteManager
import com.lewydo.yourgame.game.utils.Block
import com.lewydo.yourgame.game.utils.TIME_ANIM_SCREEN
import com.lewydo.yourgame.game.utils.actor.animHide
import com.lewydo.yourgame.game.utils.actor.animShow
import com.lewydo.yourgame.game.utils.advanced.AdvancedScreen
import com.badlogic.gdx.Gdx
import com.badlogic.gdx.audio.Sound
import com.lewydo.yourgame.game.utils.gdxGame

class BrandScreen : AdvancedScreen() {

    // ------------------------------------------------------------------------
    // Actors
    // ------------------------------------------------------------------------
    private val aBrandGroup by lazy { ABrandGroup(this) }
    private val brandSound: Sound by lazy { Gdx.audio.newSound(Gdx.files.internal("sound/lewydo-heartbeat.wav")) }

    /**
     * The Lewydo sound's volume, 0..1: 1.0 when your game's sounds are at their usual (default) level — the file is already
     * levelled for phone speakers; quieter only if the player turned the sounds down; 0 when they are off. Wire it to your settings
     * (CubePix: `AudioMixer.brandAt` — 1.0 at the default step 8, 2.5 dB less per step below).
     */
    private fun soundVolume(): Float = 1f

    // ------------------------------------------------------------------------
    // Lifecycle
    // ------------------------------------------------------------------------
    override fun show() {
        gdxGame.spriteManager.loadAtlasNow(SpriteManager.EnumAtlas.BRAND)
        brandSound                                       // load the sound now, so it plays exactly on the beat
        super.show()

        animShowScreen {
            aBrandGroup.playIntroAnimation(
                onSound = { soundVolume().takeIf { it > 0f }?.let { brandSound.play(it) } },
                onComplete = { animHideScreen { gdxGame.navigationManager.navigate(LoaderScreen::class.java.name) } }
            )
        }
    }

    override fun AConstraintLayout.addActorsOnRootConstraintLayout() {
        aBrandGroup.setSize(208f, 322f)
        add(aBrandGroup) { center() }
    }

    // ------------------------------------------------------------------------
    // Screen Animations
    // ------------------------------------------------------------------------
    override fun animHideScreen(blockEnd: Block) {
        rootConstraintLayout.animHide(TIME_ANIM_SCREEN) { blockEnd() }
    }

    override fun animShowScreen(blockEnd: Block) {
        rootConstraintLayout.animShow { blockEnd() }
    }

    override fun dispose() {
        brandSound.dispose()
        super.dispose()
    }

}

/* 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;}
}

<!doctype html>
<!-- Lewydo™ brand kit for the web — a working example: the splash with its sound, the menu pill, one heartbeat. https://lewydo.com/brand/ -->
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lewydo brand — web example</title>
<link rel="stylesheet" href="lewydo-brand.css">
<style>
  body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:48px;background:#0E1024;font-family:system-ui,sans-serif;color:#fff;}
  button{font:inherit;font-weight:800;color:#04120A;background:#3DDC84;border:0;border-radius:16px;min-height:52px;padding:0 24px;cursor:pointer;}
</style>
</head>
<body>
  <!-- the Lockup; .lw-splash plays the BrandScreen intro (the two .lw-aura are the waves of light of the final heartbeat) -->
  <span class="lw-lockup" id="splash" role="img" aria-label="Lewydo — Love What You Do">
    <span class="lw-logo"><img class="lw-aura" src="../../webp/brand_back.webp" alt=""><img class="lw-aura" src="../../webp/brand_back.webp" alt=""><img class="lw-back" src="../../webp/brand_back.webp" alt=""><img class="lw-front" src="../../webp/brand_front.webp" alt=""></span>
    <img class="lw-name" src="../../webp/lewydo.webp" alt="">
    <img class="lw-slogan" src="../../webp/slogan.webp" alt="">
    <img class="lw-line" src="../../webp/brand_line.webp" alt="">
  </span>
  <button type="button" id="again">▶ Play the splash with its sound</button>
  <!-- the Signature pill (bottom of a menu) — it beats once when it appears; tap → your About us -->
  <a class="lw-pill" href="#about" aria-label="About us">
    <span class="lw-sig"><span class="lw-logo" id="pillLogo"><img class="lw-back" src="../../webp/brand_back.webp" alt=""><img class="lw-front" src="../../webp/brand_front.webp" alt=""></span><img class="lw-name" src="../../webp/lewydo.webp" alt=""></span>
    <svg class="lw-go" viewBox="0 0 5 8" aria-hidden="true"><path d="M1 1l3 3-3 3" fill="none" stroke="#9DF5C2" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </a>
  <script>
    // replay: remove the class, force a reflow, add it back (the same way you replay one heartbeat: .lw-beating)
    const replay = (el, cls) => { el.classList.remove(cls); void el.offsetWidth; el.classList.add(cls); };
    // the Lewydo sound starts 2.09 s into the splash (its first beat lands on the heart's «lub» at 2.12 s). Browsers allow sound
    // only after a tap, so a web splash that opens by itself stays silent; respect your game's sound setting (off = silence).
    const sound = new Audio('../../sound/lewydo-heartbeat.wav'); sound.preload = 'auto'; sound.volume = 1;
    let t = 0;
    document.getElementById('again').onclick = () => {
      replay(document.getElementById('splash'), 'lw-splash');
      clearTimeout(t); sound.pause(); sound.currentTime = 0;
      t = setTimeout(() => sound.play().catch(() => {}), 2090);
    };
    replay(document.getElementById('splash'), 'lw-splash');                              // on load it plays silently
    setTimeout(() => replay(document.getElementById('pillLogo'), 'lw-beating'), 800);   // the pill appeared → one beat
  </script>
</body>
</html>