/* ======================================================================================
// Animations Stylesheet for BIG Route Draft
//
// This file contains all CSS rules related to animations and gamification elements,
// keeping the visual logic separate from the main layout styles (style.css).
// ====================================================================================== */

/* --- Banner Animation --- */
/* This rule creates a smooth slide-down/slide-up effect for the turn banner. */
#turn-banner {
    overflow: hidden; /* Hides the content as the banner shrinks */
    max-height: 0; /* Starts completely collapsed, taking up no vertical space */
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    margin-top: 0;
    margin-bottom: 0;
    /* Defines the smooth transition for the animation */
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, border-width 0.5s ease-out, margin 0.5s ease-out;
}

/* This class is added by JavaScript to trigger the slide-down animation. */
#turn-banner.visible {
    max-height: 100px; /* Animate to a height large enough to show the content */
    padding-top: 0; /* Padding is now handled by the .card-body inside */
    padding-bottom: 0;
    border-width: 1px;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Ensures the text inside the animated banner is styled correctly. */
#turn-banner .card-body {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    padding: 14px 16px;
}


/* --- Countdown Pulsing Animation --- */
/* @keyframes defines the steps of an animation. This one makes text scale up and down. */
@keyframes pulseRed {
    0% { transform: scale(1); color: #c62828; }
    50% { transform: scale(1.1); color: #ff3d3d; }
    100% { transform: scale(1); color: #c62828; }
}

/* This class is added by JavaScript to apply the pulsing animation to the timer. */
.pulse-red {
    animation: pulseRed 1s infinite;
    font-weight: bold;
}

/* --- Row Flash Animations --- */
/* A simple animation to briefly flash a row's background color when a checkbox is clicked. */
@keyframes flashGreen {
    from { background-color: #81c784; }
    to { background-color: transparent; }
}

/* This class is added by JavaScript to the table row. */
tr.flash-green {
    animation: flashGreen 0.5s ease-out;
}


/* --- Confetti Animation --- */
/* This container is created by JavaScript and holds all the confetti pieces. */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicks to pass through the container to elements underneath. */
    overflow: hidden;
    z-index: 9999;
}

/* Each piece of confetti is a div with this class. */
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 20px;
    background: var(--rlx-green);
    top: -50px; /* Starts off-screen at the top */
    opacity: 0;
    /* The animation 'drop-confetti' is applied to make it fall and spin */
    animation: drop-confetti 3s ease-out forwards;
}

/* These rules vary the color and shape of the confetti pieces for a more random look. */
.confetti-piece:nth-child(2n) { background: var(--rlx-blue); }
.confetti-piece:nth-child(3n) { background: #f0ad4e; } /* Orange color */
.confetti-piece:nth-child(4n) { height: 10px; width: 10px; border-radius: 50%; } /* Makes some pieces circular */

/* Defines the falling and spinning motion of a single confetti piece. */
@keyframes drop-confetti {
    0% {
        transform: translateY(0) rotateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotateZ(720deg);
        opacity: 0;
    }
}


/* --- "On the Clock" Spotlight Animation (CORRECTED) --- */
/* A sweeping gradient animation to highlight the current picker. */
@keyframes scanEffect {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* This rule is now stronger and uses a more vibrant color to be noticeable. */
tr.on-the-clock td {
    background-image: linear-gradient(90deg, 
        transparent 0%, 
        #28a745 50%,  /* A bright, noticeable green */
        transparent 100%
    ) !important; /* Use !important to override other background styles like alternating row colors. */
    background-size: 200% 100%;
    animation: scanEffect 1.5s linear infinite; /* Faster animation for more urgency */
    color: #000 !important; /* Ensure text is readable against the bright green */
    font-weight: bold !important;
}

/* --- Truck Progress Bar --- */
.truck-progress-container {
    position: relative;
    width: 100%;
    height: 60px;
    margin-top: 15px;
    padding: 0 30px;
    box-sizing: border-box;
}

.truck-progress-container .road {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #a0a0a0;
    transform: translateY(-50%);
    border-radius: 4px;
}

.truck-progress-container .road::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px dashed white;
    transform: translateY(-50%);
}

.truck-progress-container .truck-icon {
    position: absolute;
    top: 50%;
    height: 50px;
    transform: translate(-50%, -60%);
    transition: left 0.5s ease-in-out; /* Makes the truck slide smoothly */
    z-index: 3;
}

.truck-progress-container .package-icon {
    position: absolute;
    top: 50%;
    height: 35px;
    transform: translate(-50%, -50%);
    z-index: 2;
    transition: opacity 0.4s, transform 0.4s; /* Smooth disappearance */
}

/* This class is added by JavaScript to packages the truck has passed */
.truck-progress-container .package-icon.collected {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.truck-progress-container .finish-line-icon {
    position: absolute;
    top: 15%;
    right: -5px;
    height: 60px;
    transform: translateY(-55%);
    z-index: 1;
}

.truck-progress-container .progress-label {
    position: absolute;
    top: calc(50% + 10px); /* Position the text below the road */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    font-weight: 600;
    color: #555;
    font-size: 14px;
}

/* --- Login Button Hover Effect --- */
/* This provides a subtle "lift" effect when hovering over the login buttons */
.login-buttons .btn {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.login-buttons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}