/* Football Maths — stadium hero + sliding player (shared hub / data / quiz) */
.football-maths-hero {
    position: relative;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 1;
    overflow-x: hidden;
    overflow-y: visible;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.football-maths-hero--header {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}
.football-maths-hero--quiz {
    margin: 0 auto 24px;
    width: 100%;
    max-width: 100%;
}
.football-maths-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.football-maths-hero__player {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 125%;
    width: auto;
    max-width: min(44vw, 420px);
    object-fit: contain;
    object-position: left bottom;
    pointer-events: none;
    z-index: 2;
    animation: football-maths-player-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes football-maths-player-in {
    from {
        transform: translateX(-110%);
        opacity: 0.9;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@media (prefers-reduced-motion: reduce) {
    .football-maths-hero__player {
        animation: none;
        transform: none;
    }
}
.football-maths-hero__title {
    position: absolute;
    left: 33%;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1rem;
    z-index: 3;
    container-type: inline-size;
    container-name: hero-title;
}
.football-maths-hero__title h1 {
    margin: 0;
    font-family: "DIN Condensed", "DINCondensedBold", sans-serif;
    font-size: 12cqi;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}