
.divider-left {
  display: flex;
  align-items: center;
  font-weight: 500;
  color: hsla(171deg, 100%, 91%,1)
}

/* horizontal line using the same Bulma "primary-soft" colour */
.divider-left::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: hsla(171deg, 100%, 91%,1);
  margin-left: 0.75rem;
  margin-top: 0.20rem;
}

/* optional spacing helper */
.divider-left.is-spaced {
  margin: 1.5rem 0;
}


/* Shimmer text effect for English line */
.fx-shimmer {
    position: relative;
    display: inline-block;

    /* Stronger, more obvious gradient */
    background-image: linear-gradient(
        120deg,
        #ffffff,
        #ffe08a,
        #ffdd57,
        #ffffff
    );
    background-size: 300% 100%;
    background-position: 0 0;

    /* Clip background to text */
    -webkit-background-clip: text;
    background-clip: text;

    /* Force the text itself to be transparent,
       overriding Bulma's has-text-light */
    color: transparent !important;
    -webkit-text-fill-color: transparent;

    animation: shimmer 2.5s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: -300% 0;
    }
}

.fx-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    0% {
        text-shadow:
          0 0 4px rgba(255, 255, 255, 0.5),
          0 0 8px rgba(72, 209, 204, 0.5);
    }
    100% {
        text-shadow:
          0 0 6px rgba(255, 255, 255, 1),
          0 0 14px rgba(72, 209, 204, 1),
          0 0 20px rgba(0, 209, 178, 0.9);
    }
}

.fx-ripple {
    display: inline-block;
    animation: ripple 2.5s ease-in-out infinite;
}

@keyframes ripple {
    0% {
        transform: scale(1);
        letter-spacing: normal;
    }
    50% {
        transform: scale(1.03);
        letter-spacing: 0.03em;
    }
    100% {
        transform: scale(1);
        letter-spacing: normal;
    }
}

/* Optional: make sure we don't over-space media text */
.media .media-content p {
    margin-bottom: 0 !important;
}

/* Audio playing pulse effect */
.audio-pulse {
    animation: audio-blinker 1s linear infinite;
    transform-origin: center center;
}

@keyframes audio-blinker {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.4);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}



/* Default walker settings (used as fallback) */
:root {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 84s;            /* base time to cross screen */
    --walker-frame-duration: 1s;       /* time for one leg-cycle */
    --walker-duration-multiplier: 1;   /* new: global speed factor */
}

.pixel-banner {
    position: relative;
    width: 100%;
    height: 0; /* keeps layout unaffected */
}

.pixel-banner-inner {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;         /* no height needed now */
    z-index: 10;
}

@keyframes walker-across {
    0%   { transform: translateX(0); }
    100% { transform: translateX(120vw); }
}

.pixel-walker {
    position: absolute;
    top: calc(-1 * var(--walker-frame-height));
    left: -80px;

    width: var(--walker-frame-width);
    height: var(--walker-frame-height);
    background-repeat: no-repeat;
    background-size: calc(var(--walker-frame-width) * 4)
                     var(--walker-frame-height);
    image-rendering: pixelated;

    /* cross-screen + leg animations */
    animation:
        walker-across calc(var(--walker-duration, 84s) * var(--walker-duration-multiplier, 1)) linear infinite,
        walker-frames var(--walker-frame-duration, 1s) steps(4) infinite;
}

/* Frame animation (leg movement) */
@keyframes walker-frames {
    from { background-position: 0 0; }
    to   { background-position: calc(-4 * var(--walker-frame-width)) 0; }
}

/* ANIMAL-SPECIFIC OVERRIDES */

.pixel-chick {
    --walker-frame-width: 16px;
    --walker-frame-height: 16px;
    --walker-duration: 95s;
    --walker-frame-duration: 0.7s;
    background-image: url('/img/walkers/chick.png');
}

/* Chicken: 24x24, moderate speed */
.pixel-chicken {
    --walker-frame-width: 24px;
    --walker-frame-height: 24px;
    --walker-duration: 85s;         /* faster than elephant */
    --walker-frame-duration: 0.7s;  /* slightly quicker legs */
    background-image: url('/img/walkers/chicken.png');
}

.pixel-cobra {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 130s;
    --walker-frame-duration: 1s;
    background-image: url('/img/walkers/cobra.png');
}

.pixel-cow {
    --walker-frame-width: 32px;
    --walker-frame-height: 32px;
    --walker-duration: 100s;
    --walker-frame-duration: 1s;
    background-image: url('/img/walkers/cow.png');
}

.pixel-dancer {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 115s;
    --walker-frame-duration: 0.9s;
    background-image: url('/img/walkers/dancer.png');
}

/* Elephant: 48x48, fairly slow */
.pixel-elephant {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 130s;         /* slow cross-screen */
    --walker-frame-duration: 1s;    /* normal leg speed */
    background-image: url('/img/walkers/elephant.png');
}

.pixel-lamb {
    --walker-frame-width: 38px;
    --walker-frame-height: 34px;
    --walker-duration: 100s;
    --walker-frame-duration: 0.9s;
    background-image: url('/img/walkers/lamb.png');
}

.pixel-long-necked-lady {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 125s;
    --walker-frame-duration: 1s;
    background-image: url('/img/walkers/long-necked-lady.png');
}

.pixel-motorbike {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 20s;
    --walker-frame-duration: 0.6s;
    background-image: url('/img/walkers/motorbike.png');
}

.pixel-monk {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 125s;
    --walker-frame-duration: 1s;
    background-image: url('/img/walkers/monk.png');
}

/* Monkey: e.g. 24x24, fast walker */
.pixel-monkey {
    --walker-frame-width: 24px;
    --walker-frame-height: 24px;
    --walker-duration: 80s;
    --walker-frame-duration: 0.7s;
    background-image: url('/img/walkers/monkey.png');
}

.pixel-pig {
    --walker-frame-width: 39px;
    --walker-frame-height: 27px;
    --walker-duration: 90s;
    --walker-frame-duration: 1s;
    background-image: url('/img/walkers/pig.png');
}

.pixel-police-officer {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 115s;
    --walker-frame-duration: 0.95s;
    background-image: url('/img/walkers/police-officer.png');
}

.pixel-school-boy {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 95s;
    --walker-frame-duration: 0.9s;
    background-image: url('/img/walkers/school-boy.png');
}

.pixel-school-girl {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 95s;
    --walker-frame-duration: 0.9s;
    background-image: url('/img/walkers/school-girl.png');
}

.pixel-scorpion {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 110s;
    --walker-frame-duration: 0.8s;
    background-image: url('/img/walkers/scorpion.png');
}

.pixel-tiger {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 80s;
    --walker-frame-duration: 0.9s;
    background-image: url('/img/walkers/tiger.png');
}

.pixel-tuk-tuk {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 15s;
    --walker-frame-duration: 0.6s;
    background-image: url('/img/walkers/tuk-tuk.png');
}

.pixel-water-buffalo {
    --walker-frame-width: 48px;
    --walker-frame-height: 48px;
    --walker-duration: 130s;
    --walker-frame-duration: 1.2s;
    background-image: url('/img/walkers/water-buffalo.png');
}
