* {
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

:root {
    --tank-size: 100px;
    --tank-bottom: 100px;
    --hero-height: 600px;
    /* Anchos calculados para loops perfectos (AnchoNatural / AltoNatural * AltoRenderizado) */
    --w1: 2171px;
    --w2: 2198px;
    --w3: 2102px;
    --w4: 2605px;
    --w5: 2607px;
    --w6: 1564px;
    --layer7-h: 500px;
    /* Altura/Escala de los monumentos */
    --w7: calc(var(--layer7-h) * 2315 / 666);

    /* CONTROLES DE POSICIÓN */
    --layer7-y: 130px;
    /* Ajuste vertical de los monumentos */
    --horse-y: 00px;
    /* Altura sobre la base de los tanques */
    --horse-x-start: -400px;
    /* Punto de inicio (izquierda) */
    --horse-x-end: 100%;
    /* Punto final (derecha) */
    --horse-speed: 12s;
    /* Duración de la carrera */
}

@media (max-width: 700px) {
    :root {
        --tank-size: 90px;
        --tank-bottom: 60px;
        --hero-height: 520px;
        /* Anchos móviles (AnchoNatural / AltoNatural * AltoMóvil) */
        --w1: 1277px;
        --w2: 1318px;
        --w3: 1236px;
        --w4: 1488px;
        --w5: 1564px;
        --w6: 938px;
        --layer7-h: 350px;
        /* Altura/Escala de los monumentos — debe coincidir con background-size */
        --layer7-y: 70px;
        --w7: calc(var(--layer7-h) * 2315 / 666);
    }
}

.hero {
    width: 100%;
    min-height: var(--hero-height);
    position: relative;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #e3f2fd 600px, #ffffff 600px);
    overflow: hidden;
}

/* Base style for all parallax elements */
.parallax-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: 0 100%;
}

@keyframes horse_run {
    0% {
        left: 100%;
    }

    100% {
        left: -400px;
    }
}

.bike-1,
.bike-2,
.bike-3,
.bike-4 {
    z-index: 9;
    position: absolute;
    bottom: var(--tank-bottom);
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto var(--tank-size);
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
}

.bike-1 {
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/amx_vci.png');
    background-size: auto calc(var(--tank-size) * 1.10);
}

.bike-2 {
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/tanqueSD.png');
}

.bike-3 {
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/amx_155.png');
}

.bike-4 {
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/howo.png');
    background-size: auto calc(var(--tank-size) * 1.20);
}


.bike-1 {
    animation: parallax_bike linear 40s infinite both 10s;
}

.bike-2 {
    animation: parallax_bike linear 40s infinite both 0s;
}

.bike-3 {
    animation: parallax_bike linear 40s infinite both 20s;
}

.bike-4 {
    animation: parallax_bike linear 40s infinite both 30s;
}




.layer-1 {
    animation: loop_l1 linear 20s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/2.png');
    z-index: 10;
    background-size: auto 136px;
}

.layer-2 {
    animation: loop_l2 linear 30s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/3.png');
    z-index: 9;
    background-size: auto 150px;
}

.layer-3 {
    animation: loop_l3 linear 55s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/4.png');
    z-index: 8;
    background-size: auto 425px;
}

.layer-4 {
    animation: loop_l4 linear 75s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/5.png');
    z-index: 7;
    background-size: auto 350px;
}

.layer-5 {
    animation: loop_l5 linear 95s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/6.png');
    z-index: 6;
    background-size: auto 250px;
}

.layer-6 {
    animation: loop_l6 linear 120s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/6.png');
    z-index: 5;
    background-size: auto 150px;
}

.layer-7 {
    animation: loop_l7 linear 140s infinite;
    background-image: url('../2.1.4_Recursos/2.1.4.1_Paralax/7.png');
    z-index: 4;
    background-size: auto var(--layer7-h);
    bottom: var(--layer7-y);
}


@media (max-width: 700px) {
    .hero {
        background: linear-gradient(to bottom, #e3f2fd 520px, #ffffff 520px);
        min-height: 520px;
    }

    .layer-1 {
        background-size: auto 80px;
    }

    .layer-2 {
        background-size: auto 90px;
    }

    .layer-3 {
        background-size: auto 250px;
    }

    .layer-4 {
        background-size: auto 200px;
    }

    .layer-5 {
        background-size: auto 150px;
    }

    .layer-6 {
        background-size: auto 90px;
    }

    .layer-7 {
        /* background-size se hereda de var(--layer7-h) = 350px — sin override */
        animation-duration: 100s;
        /* Más frecuente en móvil */
    }
}


@keyframes loop_l1 {
    from {
        background-position: var(--w1) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes loop_l2 {
    from {
        background-position: var(--w2) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes loop_l3 {
    from {
        background-position: var(--w3) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes loop_l4 {
    from {
        background-position: var(--w4) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes loop_l5 {
    from {
        background-position: var(--w5) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes loop_l6 {
    from {
        background-position: var(--w6) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes loop_l7 {
    from {
        background-position: var(--w7) 100%;
    }

    to {
        background-position: 0 100%;
    }
}

@keyframes parallax_bike {
    0% {
        background-position: -300px 100%;
    }

    100% {
        background-position: 2000px 100%;
    }
}

/* HORSE RUNNING (Controlled by :root variables) */
.horse-run-container {
    position: absolute;
    bottom: calc(var(--tank-bottom) + var(--horse-y));
    left: var(--horse-x-start);
    width: 400px;
    height: 300px;
    z-index: 100;
    pointer-events: none;
    animation: horse_run linear var(--horse-speed) infinite;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
}

@keyframes horse_run {
    0% {
        left: var(--horse-x-start);
    }

    100% {
        left: var(--horse-x-end);
    }
}

.horse-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

.logo {
    position: absolute;
    top: 20px;
    z-index: 3;
    width: 100%;
    pointer-events: none;
}

/* Championship Golden Logo Style */
.championship-logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: 'Cinzel', Georgia, serif;
}

.championship-sub {
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(90deg,
            #cfac62 0%,
            #edd693 25%,
            #fff3d1 45%,
            #ffffff 50%,
            #fff3d1 55%,
            #edd693 75%,
            #cfac62 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.98)) drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.85)) drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.65));
    margin-bottom: 2px;
    letter-spacing: 0.5px;
    line-height: 1.2;
    animation: gold-shine 7s linear infinite;
}

.championship-line {
    width: 70%;
    height: 2px;
    background: linear-gradient(to right, transparent, #b78622 20%, #f7dc9b 50%, #b78622 80%, transparent);
    margin: 4px auto 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.championship-main {
    font-size: 3.5rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(90deg,
            #cfac62 0%,
            #edd693 25%,
            #fff3d1 45%,
            #ffffff 50%,
            #fff3d1 55%,
            #edd693 75%,
            #cfac62 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.98)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0px 12px 24px rgba(0, 0, 0, 0.7));
    letter-spacing: 3px;
    line-height: 1.1;
    animation: gold-shine 7s linear infinite;
}

@keyframes gold-shine {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

@media (max-width: 700px) {
    .championship-sub {
        font-size: 0.85rem;
        letter-spacing: 0.2px;
        margin-bottom: 1px;
    }

    .championship-line {
        width: 85%;
        height: 1px;
        margin: 2px auto 4px;
    }

    .championship-main {
        font-size: 1.7rem;
        letter-spacing: 1.5px;
    }

    /* CABALLO - Reducido en móvil sin deformar proporciones */
    /* El contenedor se mantiene igual para que el iframe tenga el viewport correcto */
    /* Se escala visualmente el iframe desde la base (patas) hacia arriba */
    .horse-iframe {
        transform: scale(0.5);
        transform-origin: bottom center;
    }
}

/* Animated Birds */
.bird {
    position: absolute;
    top: 0;
    left: -100px;
    width: 18px;
    height: 2px;
    z-index: 0;
    opacity: 0.7;
}

.bird-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.bird-wing {
    position: absolute;
    top: 0;
    width: 55%;
    height: 1.5px;
    background: #1a1a1a;
    border-radius: 1px;
}

.wing-left {
    left: 0;
    transform-origin: right center;
    animation: flap-left 0.3s infinite alternate ease-in-out;
}

.wing-right {
    right: 0;
    transform-origin: left center;
    animation: flap-right 0.3s infinite alternate ease-in-out;
}

@keyframes flap-left {
    from {
        transform: rotate(35deg);
    }

    to {
        transform: rotate(-35deg);
    }
}

@keyframes flap-right {
    from {
        transform: rotate(-35deg);
    }

    to {
        transform: rotate(35deg);
    }
}

@keyframes fly-across {
    from {
        transform: translate(-100px, 0) scale(1.2);
    }

    to {
        transform: translate(2200px, -80px) scale(0.8);
    }
}

.animate-fly {
    animation: fly-across linear infinite;
}

/* Clouds (Extra for a better sky) */
.cloud {
    position: absolute;
    width: 220px;
    height: 70px;
    background: #fff;
    border-radius: 200px;
    opacity: 0.5;
    filter: blur(18px);
    z-index: 0;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: #fff;
    width: 110px;
    height: 110px;
    top: -55px;
    left: 15px;
    border-radius: 100%;
}

.cloud::after {
    width: 130px;
    height: 130px;
    top: -75px;
    left: 75px;
}

.animate-cloud-slow {
    animation: moveClouds linear infinite;
}

@keyframes moveClouds {
    from {
        transform: translateX(-350px);
    }

    to {
        transform: translateX(2200px);
    }
}

/* --- FLAG MARQUEE --- */
.flag-marquee {
    --h: 28px;
    --gap: 35px;
    --speed: 35s;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 15px 0;
    margin-bottom: 0 !important;
    background: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    pointer-events: auto;
    z-index: 30;
}

.flag-marquee .track {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--gap);
    width: max-content;
    animation: flag-scroll var(--speed) linear infinite;
}

.flag-marquee .sequence {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--gap);
}

.flag-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #003366;
    /* Azul profundo solicitado */
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dark .flag-item {
    color: #ffffff !important;
}

.flag-item img {
    height: var(--h);
    aspect-ratio: 3 / 2;
    border-radius: 2px;
    margin-bottom: 6px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes flag-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-33.333%);
    }
}

@media (max-width: 480px) {
    .flag-marquee {
        --h: 20px;
        padding: 10px 0;
        margin-bottom: 0 !important;
    }

    .flag-item {
        font-size: 8px;
    }

    .flag-item img {
        margin-bottom: 3px;
    }
}

/* ─── MILITARY COUNTDOWN: 3D MECHANICAL FLIP CLOCK ─── */
.countdown-container {
    text-align: center;
    z-index: 10;
    width: 100%;
    margin: 0 auto 2.5rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-label {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.dark .countdown-label {
    color: rgba(255, 255, 255, 0.6);
}

.countdown-grid-wrapper {
    position: relative;
    width: auto;
    display: inline-block;
}

.countdown {
    height: 100px;
    margin-bottom: 25px;
    /* space for labels */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3D Flip Mechanics - Vanilla CSS compiled from SASS */
.countdown * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.countdown .countdownFix {
    z-index: 3 !important;
}

.countdown .clockFix {
    z-index: 1 !important;
}

.countdown li span .inn {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.countdown ul {
    list-style: none;
}

.countdown li {
    line-height: 87px;
}

/* Skeleton */
.countdown ul.flip {
    position: relative;
    float: left;
    margin-right: 2px;
    height: 100%;
    width: 40px;
    font-size: 50px;
    font-weight: bold;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
    flex-shrink: 0 !important;
}

/* Colon Separators */
.countdown ul.flip.nth-child-2np2-notlast,
.countdown ul.flip:nth-child(2n+2):not(:last-child) {
    margin-right: 12px;
}

.countdown ul.flip.nth-child-2np2-notlast:after,
.countdown ul.flip:nth-child(2n+2):not(:last-child):after {
    position: absolute;
    top: 20%;
    right: -13px;
    content: ":";
    display: block;
    color: #7a7a7a;
    font-size: 46px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.dark .countdown ul.flip.nth-child-2np2-notlast:after,
.dark .countdown ul.flip:nth-child(2n+2):not(:last-child):after {
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.countdown ul.flip li {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 60px;
}

.countdown ul.flip li span {
    display: block;
    height: 100%;
    -webkit-perspective: 200px;
    perspective: 200px;
}

.countdown ul.flip li span div {
    z-index: 1;
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
}

.countdown ul.flip li span div .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.countdown ul.flip li span div.up {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    top: 0;
}

.countdown ul.flip li span div.up:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.4);
}

.countdown ul.flip li span div.down {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    bottom: 0;
}

.countdown ul.flip li span div div.inn {
    position: absolute;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 200%;
    color: #ffffff;
    font-family: 'DSEG7-Classic', 'Share Tech Mono', monospace;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    background-color: #003e7e;
    border-radius: 6px;
}

.dark .countdown ul.flip li span div div.inn {
    color: #003e7e;
    background-color: #ffffff;
    text-shadow: 0 0 5px rgba(0, 62, 126, 0.3);
}

.countdown ul.flip li span div.up div.inn {
    top: 0;
}

.countdown ul.flip li span div.down div.inn {
    bottom: 0;
}

/* PLAYING STATE TRANSITIONS */
.countdown.play ul li.previous {
    z-index: 2;
}

.countdown.play ul li.current {
    -webkit-animation: asd .5s .5s linear both;
    animation: asd .5s .5s linear both;
    z-index: 3;
}

@keyframes asd {
    0% {
        z-index: 2;
    }

    5% {
        z-index: 4;
    }

    100% {
        z-index: 4;
    }
}

.countdown.play ul li.current .down {
    z-index: 2;
    -webkit-animation: turn .5s .5s linear both;
    animation: turn .5s .5s linear both;
}

@keyframes turn {
    0% {
        transform: rotateX(90deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

.countdown.play ul li.previous .up {
    z-index: 2;
    -webkit-animation: turn2 .5s linear both;
    animation: turn2 .5s linear both;
}

@keyframes turn2 {
    0% {
        transform: rotateX(0deg);
    }

    100% {
        transform: rotateX(-90deg);
    }
}

/* SHADOW EFFECTS DURING FLIP */
.countdown.play ul li.previous .up .shadow {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-animation: show .5s linear both;
    animation: show .5s linear both;
}

.countdown.play ul li.current .up .shadow {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-animation: hide .5s .3s linear both;
    animation: hide .5s .3s linear both;
}

.countdown.play ul li.previous .down .shadow {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    -webkit-animation: show .5s linear both;
    animation: show .5s linear both;
}

.countdown.play ul li.current .down .shadow {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
    -webkit-animation: hide .5s .3s linear both;
    animation: hide .5s .3s linear both;
}

@keyframes show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* UNIT LABELS */
.countdown ul.flip.days:nth-child(1)::before {
    content: "DÍAS";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: calc(200% + 2px);
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.dark .countdown ul.flip.days:nth-child(1)::before {
    color: rgba(255, 255, 255, 0.7);
}

.countdown ul.flip.hours:nth-child(3)::before {
    content: "HORAS";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: calc(200% + 2px);
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.dark .countdown ul.flip.hours:nth-child(3)::before {
    color: rgba(255, 255, 255, 0.7);
}

.countdown ul.flip.minutes:nth-child(5)::before {
    content: "MIN";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: calc(200% + 2px);
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.dark .countdown ul.flip.minutes:nth-child(5)::before {
    color: rgba(255, 255, 255, 0.7);
}

.countdown ul.flip.seconds:nth-child(7)::before {
    content: "SEG";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: calc(200% + 2px);
    text-align: center;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Public Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
}

.dark .countdown ul.flip.seconds:nth-child(7)::before {
    color: rgba(255, 255, 255, 0.7);
}

/* RESPONSIVE SCALING */
.countdown-grid-wrapper {
    position: relative;
    width: auto;
    display: inline-block;
    transform-origin: top center;
}

@media only screen and (max-width: 540px) {
    .countdown-grid-wrapper {
        transform: scale(0.75);
    }

    .countdown {
        margin-bottom: 15px !important;
    }

    .countdown ul.flip::before {
        font-size: 20px !important;
        bottom: -32px !important;
    }
}

@media only screen and (max-width: 440px) {
    .countdown-grid-wrapper {
        transform: scale(0.55);
    }

    .countdown {
        margin-bottom: -5px !important;
    }

    .countdown ul.flip::before {
        font-size: 24px !important;
        bottom: -38px !important;
    }
}

@media only screen and (max-width: 360px) {
    .countdown-grid-wrapper {
        transform: scale(0.48);
    }

    .countdown {
        margin-bottom: -15px !important;
    }

    .countdown ul.flip::before {
        font-size: 26px !important;
        bottom: -40px !important;
    }
}

.evento-iniciado {
    font-family: 'Black Ops One', cursive;
    font-size: 18px;
    color: #d4af37;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.dark .evento-iniciado {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- INFINITE RIBBON SCROLL --- */
@keyframes scrollRibbon {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.ribbon-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.ribbon-track {
    display: flex;
    width: max-content;
    gap: 2.5rem;
    animation: scrollRibbon 40s linear infinite;
    padding: 20px 0;
}

.ribbon-track:hover {
    animation-play-state: paused;
}

.sponsor-circle {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.dark .sponsor-circle {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.sponsor-circle:hover {
    transform: scale(1.1) translateY(-5px);
    background: white;
    border-color: #0032a0;
    /* Navy Blue matching the tanks site primary */
    box-shadow: 0 10px 15px -3px rgba(0, 50, 160, 0.3);
}

.dark .sponsor-circle:hover {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .sponsor-circle {
        width: 65px;
        height: 65px;
    }

    .ribbon-track {
        gap: 1.5rem;
        animation-duration: 25s;
    }
}