/*
    Foil fixture cards for knockout matches (Home/Index), on top of tickets.css.
    GameSchedules.CardStyle: 'bronze' quarter-final, 'silver' semi-final, 'gold' final.
    Dark card, metal edge and stub, a slow sheen. A new tier only needs its three --foil-* colours.
*/

.fixture.style-bronze {
    --foil-light: #f0c9a0;
    --foil: #c08a55;
    --foil-dark: #7a4f27;
}

.fixture.style-silver {
    --foil-light: #f4f7fa;
    --foil: #b9c4cf;
    --foil-dark: #6f7c89;
}

.fixture.style-gold {
    --foil-light: #f3dc9a;
    --foil: #d8b25a;
    --foil-dark: #8f6f25;
}

.fixture.style-bronze .fixture-card,
.fixture.style-silver .fixture-card,
.fixture.style-gold .fixture-card {
    position: relative;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, #0a2f52, var(--vb-navy-deep)) padding-box,
        linear-gradient(120deg, var(--foil-light), var(--foil) 40%, var(--foil-dark) 70%, var(--foil-light)) border-box;
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--foil) 14%, transparent), 0 12px 26px -14px rgba(0, 0, 0, 0.9);
}

.fixture.style-bronze .fixture-card:hover,
.fixture.style-bronze .fixture-card:focus,
.fixture.style-silver .fixture-card:hover,
.fixture.style-silver .fixture-card:focus,
.fixture.style-gold .fixture-card:hover,
.fixture.style-gold .fixture-card:focus {
    color: #fff;
}

/* a few stars on the ticket side */
.fixture.style-bronze .fixture-card::before,
.fixture.style-silver .fixture-card::before,
.fixture.style-gold .fixture-card::before {
    content: "";
    position: absolute;
    inset: 0 0 0 74px;
    background: radial-gradient(circle, var(--foil-light) 1px, transparent 1.6px) 82% 22% / 100% 100% no-repeat,
        radial-gradient(circle, var(--foil-light) 0.8px, transparent 1.3px) 64% 78% / 100% 100% no-repeat,
        radial-gradient(circle, var(--foil-light) 1.2px, transparent 1.8px) 94% 62% / 100% 100% no-repeat,
        radial-gradient(circle, var(--foil-light) 0.7px, transparent 1.2px) 52% 14% / 100% 100% no-repeat;
    opacity: 0.8;
    pointer-events: none;
}

/* sheen sweep */
.fixture.style-bronze .fixture-card::after,
.fixture.style-silver .fixture-card::after,
.fixture.style-gold .fixture-card::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--foil-light) 30%, transparent), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    animation: fixture-foil-sheen 4.5s ease-in-out infinite;
}

@keyframes fixture-foil-sheen {
    0%, 55% {
        left: -40%;
    }

    100% {
        left: 130%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fixture.style-bronze .fixture-card::after,
    .fixture.style-silver .fixture-card::after,
    .fixture.style-gold .fixture-card::after {
        display: none;
    }
}

.fixture.style-bronze .fixture-date,
.fixture.style-silver .fixture-date,
.fixture.style-gold .fixture-date {
    background: linear-gradient(160deg, var(--foil-light), var(--foil) 55%, var(--foil-dark));
    color: var(--vb-navy-deep);
}

.fixture.style-bronze .fixture-date::after,
.fixture.style-silver .fixture-date::after,
.fixture.style-gold .fixture-date::after {
    background-image: radial-gradient(circle at 5px 5px, #0a2f52 3.5px, transparent 4px);
}

.fixture.style-bronze .fixture-dow,
.fixture.style-silver .fixture-dow,
.fixture.style-gold .fixture-dow {
    opacity: 1;
}

.fixture.style-bronze .fixture-comp,
.fixture.style-silver .fixture-comp,
.fixture.style-gold .fixture-comp {
    color: var(--foil-light);
}

.fixture.style-bronze .fixture-teams span,
.fixture.style-silver .fixture-teams span,
.fixture.style-gold .fixture-teams span,
.fixture.style-bronze .more-options,
.fixture.style-silver .more-options,
.fixture.style-gold .more-options {
    color: #9fb3c8;
}

.fixture.style-bronze .fixture-meta,
.fixture.style-silver .fixture-meta,
.fixture.style-gold .fixture-meta {
    color: #b9c8d8;
}

.fixture.style-bronze .fixture-cta,
.fixture.style-silver .fixture-cta,
.fixture.style-gold .fixture-cta,
.fixture.style-bronze .fixture-card:hover .fixture-cta,
.fixture.style-silver .fixture-card:hover .fixture-cta,
.fixture.style-gold .fixture-card:hover .fixture-cta {
    background: transparent;
    color: var(--foil-light);
    box-shadow: inset 0 0 0 1.5px var(--foil);
}

.fixture.style-bronze .more-options:hover,
.fixture.style-bronze .more-options:focus,
.fixture.style-silver .more-options:hover,
.fixture.style-silver .more-options:focus,
.fixture.style-gold .more-options:hover,
.fixture.style-gold .more-options:focus {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}