/* New bowler / new batter alert card, shown over the 256x128 scoreboard */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap');

:root {
    --pa-bg: #000;
    --pa-panel: #730000;
    --pa-accent: #ff2a2a;
    --pa-text: #fff;
    --pa-label-text: #fff;
    --pa-duration: 10s;
}

#scoreBoard {
    position: relative;
}

.pa-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 256px;
    height: 128px;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(115deg, var(--pa-bg) 0%, var(--pa-bg) 38%, var(--pa-panel) 100%);
    font-family: 'Oswald', Arial Narrow, Arial, sans-serif;
    color: var(--pa-text);
    animation: pa-card-in .3s ease-out both;
}

.pa-card.pa-out {
    animation: pa-card-out .45s ease-in both;
}

/* diagonal light band that sweeps across as the card opens */
.pa-sweep {
    position: absolute;
    top: -20px;
    left: -120px;
    width: 70px;
    height: 170px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: skewX(-20deg);
    z-index: 3;
    animation: pa-sweep .7s ease-in-out .1s both;
}

.pa-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 128px;
    background: var(--pa-panel);
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    animation: pa-photo-in .45s cubic-bezier(.2, .8, .2, 1) .25s both;
}

.pa-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* accent stripe along the angled edge of the photo */
.pa-edge {
    position: absolute;
    top: 0;
    left: 78px;
    width: 22px;
    height: 128px;
    background: var(--pa-accent);
    clip-path: polygon(80% 0, 100% 0, 18% 100%, 0 100%);
    animation: pa-photo-in .45s cubic-bezier(.2, .8, .2, 1) .3s both;
}

.pa-body {
    position: absolute;
    top: 0;
    left: 98px;
    right: 4px;
    height: 128px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pa-label {
    align-self: flex-start;
    padding: 0 6px;
    background: var(--pa-accent);
    color: var(--pa-label-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 20px;
    text-transform: uppercase;
    animation: pa-wipe .4s ease-out .5s both;
}

.pa-name {
    margin-top: 4px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    animation: pa-rise .45s ease-out .7s both;
}

.pa-info {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    opacity: .85;
    animation: pa-rise .45s ease-out .9s both;
}

/* thin bar along the bottom that counts down how long the card stays up */
.pa-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--pa-accent);
    transform-origin: left;
    animation: pa-timer var(--pa-duration) linear both;
}

@keyframes pa-card-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pa-card-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(110%); opacity: 0; }
}

@keyframes pa-sweep {
    from { left: -120px; }
    to { left: 300px; }
}

@keyframes pa-photo-in {
    from { transform: translateX(-110%); }
    to { transform: translateX(0); }
}

@keyframes pa-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes pa-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pa-timer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}