/* World Cup login theme */
.cosic-login-theme-copa.cosic-login--page {
    background: #f7faf8;
}

.cosic-login-theme-copa .cosic-login-side {
    background: #061512;
    perspective: 1400px;
}

.cosic-login-theme-copa .cosic-login-side::before,
.cosic-login-theme-copa .cosic-login-side::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cosic-login-theme-copa .cosic-login-side::before {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(3, 17, 14, 0.88), rgba(3, 17, 14, 0.42) 45%, rgba(3, 17, 14, 0.82)),
        radial-gradient(760px 420px at 15% 78%, rgba(250, 205, 54, 0.24), transparent 68%),
        radial-gradient(720px 430px at 68% 22%, rgba(25, 128, 70, 0.26), transparent 70%);
}

.cosic-login-theme-copa .cosic-login-side::after {
    z-index: 2;
    background:
        linear-gradient(140deg, transparent 0 58%, rgba(250, 205, 54, 0.18) 58.2%, transparent 61%),
        linear-gradient(154deg, transparent 0 70%, rgba(0, 95, 161, 0.18) 70.2%, transparent 73%);
    mix-blend-mode: screen;
    opacity: 0.9;
}

.cosic-login-theme-copa .cosic-login-copa-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    transform-style: preserve-3d;
}

.cosic-login-theme-copa .cosic-login-copa-image {
    position: absolute;
    inset: -1px;
    background-image: var(--cosic-copa-bg);
    background-position: 32% center;
    background-size: cover;
    opacity: 0;
    filter: blur(12px) saturate(0.8) contrast(1.08);
    transform: translate3d(-34px, 0, -110px) rotateY(-18deg) rotateX(4deg) scale(1.08);
    transform-origin: left center;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    animation: copaImageReveal 1200ms cubic-bezier(0.2, 0.8, 0.2, 1) 380ms forwards;
}

.cosic-login-theme-copa .cosic-login-copa-depth {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 18% 72%, rgba(255, 255, 255, 0.08)),
        repeating-linear-gradient(112deg, transparent 0 34px, rgba(250, 205, 54, 0.10) 35px, transparent 38px);
    opacity: 0;
    transform: translate3d(24px, 0, 70px) rotateY(10deg);
    animation: copaDepthReveal 1300ms ease 520ms forwards;
}

.cosic-login-theme-copa .cosic-login-copa-trophy {
    position: absolute;
    left: -34px;
    bottom: -22px;
    z-index: 2;
    width: clamp(280px, 36vw, 460px);
    height: clamp(420px, 78vh, 680px);
    pointer-events: none;
    isolation: isolate;
    opacity: 0;
    background-image: var(--cosic-copa-bg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 820px;
    filter:
        drop-shadow(0 26px 34px rgba(0, 0, 0, 0.56))
        drop-shadow(0 0 22px rgba(250, 205, 54, 0.42))
        saturate(1.22)
        contrast(1.12);
    -webkit-mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, #000 0 72%, rgba(0, 0, 0, 0) 100%);
    transform: translate3d(-26px, 34px, 120px) rotateY(-12deg) scale(0.92);
    transform-origin: left bottom;
    animation: copaTrophyFocus 1250ms cubic-bezier(0.2, 0.8, 0.2, 1) 620ms forwards;
}

.cosic-login-theme-copa .cosic-login-copa-trophy::before {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 12px;
    z-index: 1;
    width: 68%;
    height: 72%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 42%, rgba(255, 228, 115, 0.62), rgba(250, 205, 54, 0.20) 38%, transparent 70%);
    filter: blur(24px);
    mix-blend-mode: screen;
    opacity: 0.9;
}

.cosic-login-theme-copa .cosic-login-brand,
.cosic-login-theme-copa .cosic-login-side-copy,
.cosic-login-theme-copa .cosic-login-method-cards {
    z-index: 3;
}

.cosic-login-theme-copa .cosic-login-brand-mark {
    border-color: rgba(250, 205, 54, 0.58);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24), 0 0 0 5px rgba(19, 133, 68, 0.16);
}

.cosic-login-theme-copa .cosic-login-brand-kicker {
    color: rgba(250, 205, 54, 0.82);
}

.cosic-login-theme-copa .cosic-login-side-copy {
    animation: copaCopyIn 760ms ease 700ms both;
}

.cosic-login-theme-copa .cosic-login-side-copy small {
    color: rgba(250, 205, 54, 0.9);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.cosic-login-theme-copa .cosic-login-side-copy h1,
.cosic-login-theme-copa .cosic-login-side-copy p,
.cosic-login-theme-copa .cosic-login-brand-title {
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.55);
}

.cosic-login-theme-copa .cosic-login-method-card {
    border-color: rgba(250, 205, 54, 0.28);
    background: rgba(3, 19, 15, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.cosic-login-theme-copa .cosic-login-method-card i {
    color: #facd36;
}

.cosic-login-theme-copa .cosic-login-panel {
    background:
        radial-gradient(620px 420px at 88% 14%, rgba(250, 205, 54, 0.16), transparent 65%),
        radial-gradient(520px 360px at 12% 82%, rgba(19, 133, 68, 0.12), transparent 68%),
        #ffffff;
    z-index: 5;
}

.cosic-login-theme-copa .cosic-login-lock {
    background: linear-gradient(135deg, #0b7a39, #005fa1);
    box-shadow: 0 12px 28px rgba(0, 95, 161, 0.18);
}

.cosic-login-theme-copa .cosic-login-method.is-active {
    background: #0b7a39;
    box-shadow: 0 1px 2px rgba(11, 122, 57, 0.25);
}

.cosic-login-theme-copa .cosic-input-shell .form-control:focus {
    border-color: #0b7a39;
    box-shadow: 0 0 0 2px rgba(11, 122, 57, 0.20);
}

.cosic-login-theme-copa .cosic-login-remember input:checked + .cosic-login-remember-switch {
    background: #0b7a39;
}

.cosic-login-theme-copa .cosic-login-submit {
    background: linear-gradient(90deg, #0b7a39 0%, #005fa1 58%, #facd36 160%);
    box-shadow: 0 10px 22px rgba(11, 122, 57, 0.20);
}

.cosic-login-theme-copa .cosic-login-submit:hover,
.cosic-login-theme-copa .cosic-login-submit:focus {
    background: linear-gradient(90deg, #096c33 0%, #00538c 58%, #e8bb2f 160%);
}

.copa-ball-stage {
    --copa-ball-top: 46vh;
    --copa-ball-scale: 1;
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.copa-ball,
.copa-ball-trail {
    position: absolute;
    left: -120px;
    top: var(--copa-ball-top);
}

.copa-ball {
    width: 82px;
    height: 82px;
    display: block;
    opacity: 0;
    filter:
        drop-shadow(0 20px 28px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 12px rgba(250, 205, 54, 0.24));
    animation: copaBallFlight 9200ms cubic-bezier(0.18, 0.78, 0.2, 1) 260ms infinite;
    will-change: transform, opacity;
}

.copa-ball-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    transform-origin: center;
    animation: copaBallSpin 2800ms linear infinite;
    will-change: transform;
}

.copa-ball-trail {
    width: 190px;
    height: 22px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(250, 205, 54, 0.18), rgba(19, 133, 68, 0.30), rgba(255, 255, 255, 0.72));
    filter: blur(8px);
    animation: copaTrailFlight 9200ms cubic-bezier(0.18, 0.78, 0.2, 1) 260ms infinite;
    will-change: transform, opacity;
}

@keyframes copaImageReveal {
    0% {
        opacity: 0;
        filter: blur(12px) saturate(0.8) contrast(1.08);
        transform: translate3d(-34px, 0, -110px) rotateY(-18deg) rotateX(4deg) scale(1.08);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
    48% {
        opacity: 0.92;
        filter: blur(4px) saturate(0.96) contrast(1.08);
        clip-path: polygon(0 0, 76% 0, 62% 100%, 0 100%);
    }
    100% {
        opacity: 1;
        filter: blur(0) saturate(1.06) contrast(1.08);
        transform: translate3d(0, 0, 0) rotateY(0) rotateX(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes copaDepthReveal {
    0% {
        opacity: 0;
        transform: translate3d(24px, 0, 70px) rotateY(10deg);
    }
    100% {
        opacity: 0.56;
        transform: translate3d(0, 0, 0) rotateY(0);
    }
}

@keyframes copaCopyIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes copaTrophyFocus {
    0% {
        opacity: 0;
        filter:
            blur(5px)
            drop-shadow(0 22px 30px rgba(0, 0, 0, 0.48))
            drop-shadow(0 0 8px rgba(250, 205, 54, 0.18))
            saturate(0.92)
            contrast(1.04);
        transform: translate3d(-26px, 34px, 120px) rotateY(-12deg) scale(0.92);
    }
    58% {
        opacity: 0.92;
    }
    100% {
        opacity: 1;
        filter:
            drop-shadow(0 26px 34px rgba(0, 0, 0, 0.56))
            drop-shadow(0 0 22px rgba(250, 205, 54, 0.42))
            saturate(1.22)
            contrast(1.12);
        transform: translate3d(0, 0, 0) rotateY(0) scale(1);
    }
}

@keyframes copaBallFlight {
    0% {
        opacity: 0;
        transform: translate3d(-18vw, 0, 0) scale(0.72);
    }
    9% {
        opacity: 1;
    }
    34% {
        opacity: 1;
        transform: translate3d(34vw, 0, 90px) scale(var(--copa-ball-scale));
    }
    58% {
        opacity: 0.92;
        transform: translate3d(66vw, 0, 48px) scale(0.94);
    }
    82% {
        opacity: 0.52;
        transform: translate3d(98vw, 0, 12px) scale(0.72);
    }
    100% {
        opacity: 0;
        transform: translate3d(124vw, 0, 0) scale(0.58);
    }
}

@keyframes copaBallSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes copaTrailFlight {
    0% {
        opacity: 0;
        transform: translate3d(-22vw, 0, 0) rotate(-8deg) scaleX(0.7);
    }
    11% {
        opacity: 0.82;
    }
    36% {
        opacity: 0.92;
        transform: translate3d(30vw, 0, 0) rotate(-8deg) scaleX(1);
    }
    61% {
        opacity: 0.54;
        transform: translate3d(63vw, 0, 0) rotate(-8deg) scaleX(0.86);
    }
    100% {
        opacity: 0;
        transform: translate3d(119vw, 0, 0) rotate(-8deg) scaleX(0.52);
    }
}

@media (max-width: 900px) {
    .cosic-login-theme-copa .cosic-login-side {
        min-height: 58vh;
    }

    .cosic-login-theme-copa .cosic-login-copa-image {
        background-position: 28% center;
    }

    .cosic-login-theme-copa .cosic-login-copa-trophy {
        width: 320px;
        height: 430px;
        background-size: auto 620px;
    }
}

@media (max-width: 640px) {
    .cosic-login-theme-copa .cosic-login-side {
        display: flex;
        min-height: 46vh;
        padding: 24px;
        gap: 28px;
    }

    .cosic-login-theme-copa .cosic-login-side-copy h1 {
        font-size: 25px;
    }

    .cosic-login-theme-copa .cosic-login-side-copy p,
    .cosic-login-theme-copa .cosic-login-method-cards {
        display: none;
    }

    .cosic-login-theme-copa .cosic-login-copa-trophy {
        left: -28px;
        bottom: -58px;
        width: 260px;
        height: 340px;
        background-size: auto 500px;
        opacity: 0.88;
    }

    .copa-ball {
        width: 58px;
        height: 58px;
    }

    .copa-ball-trail {
        width: 128px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cosic-login-theme-copa .cosic-login-copa-image,
    .cosic-login-theme-copa .cosic-login-copa-depth,
    .cosic-login-theme-copa .cosic-login-copa-trophy,
    .cosic-login-theme-copa .cosic-login-side-copy,
    .copa-ball,
    .copa-ball-image,
    .copa-ball-trail {
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
    }

    .copa-ball-stage {
        display: none;
    }
}