* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: sans-serif;
    background: #0b0e1a;
    color: #fff;
    overflow-x: hidden;
    padding-bottom: 40px; /* clear fixed footer */
}

/* ===== BANNER ANIMATION ===== */
.banner {
    position: relative;
    width: 80vw;
    min-width: 400px;
    height: 50vw;
    max-height: 100px;
    min-height: 400px;
    margin: 2rem auto;
    overflow: hidden;
    background: #0b0e1a;
    border-radius: 12px;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

/*
    Split-axis arc technique:
    .char-x  → translateX only, linear → constant horizontal speed
    .char-y  → translateY only, ease-in-out → smooth rise & fall
    Combined they trace a fluid parabolic (rainbow) arc.
*/

.char-x {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: move-x 3.6s linear infinite;
}

.char-y {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 55%;
    width: auto;
    opacity: 0.6;
    transform: scaleX(-1);
    animation: move-y 3.6s ease-in-out infinite;
}

@keyframes move-x {
    from { transform: translateX(calc(100% + 200px)); }
    to   { transform: translateX(-200px); }
}

@keyframes move-y {
    0%   { transform: scaleX(-1) translateY(0%); }
    50%  { transform: scaleX(-1) translateY(-80%); }
    100% { transform: scaleX(-1) translateY(0%); }
}