/* Flip Board Counter Styles */
.flip-counter {
    display: inline-flex;
    gap: 2px;
    font-family: 'Anton', 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 3rem;
    /* Adjust based on design needs */
    line-height: 1;
    perspective: 400px;
    /* Essential for 3D flip effect */
}

.flip-digit-wrapper {
    position: relative;
    width: 0.6em;
    /* Fixed width for digits */
    height: 1em;
    background-color: #1e1e1e;
    border-radius: 4px;
    color: #FF453A;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Common styles for top and bottom halves */
.flip-card-top,
.flip-card-bottom,
.flip-card-top-new,
.flip-card-bottom-new {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background-color: #1e1e1e;
    color: #FF453A;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Top Half */
.flip-card-top,
.flip-card-top-new {
    top: 0;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    transform-origin: bottom;
}

/* Bottom Half */
.flip-card-bottom,
.flip-card-bottom-new {
    bottom: 0;
    border-radius: 0 0 4px 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    /* Split line */
    transform-origin: top;
    /* Removed flex properties to fix span positioning */
}

/* Text positioning inside halves */
.flip-card-top span,
.flip-card-bottom span,
.flip-card-top-new span,
.flip-card-bottom-new span {
    display: block;
    height: 200%;
    /* Full height of the digit (relative to 50% container) */
    width: 100%;
    line-height: 1;
    /* Ensure no extra spacing */
}

.flip-card-top span,
.flip-card-top-new span {
    transform: translateY(0);
    /* Show top half */
}

.flip-card-bottom span,
.flip-card-bottom-new span {
    transform: translateY(-50%);
    /* Show bottom half */
}

/* Animation Classes */
.flip-card-top-new {
    z-index: 2;
    transform: rotateX(90deg);
    /* Start hidden */
}

.flip-card-bottom-new {
    z-index: 1;
}

.flip-card-top {
    z-index: 3;
}

.flip-card-bottom {
    z-index: 2;
    transform: rotateX(0deg);
}

/* The Flip Animation */
/* 
   Phase 1: Top card flips down to 90deg (hides)
   Phase 2: New Top card flips down from 90deg (shows) - Wait, no.
   Standard Split Flap:
   1. Top Half of current flips down to cover Bottom Half of current.
   2. Wait, actually:
      - Top Current flips down (-90deg).
      - Bottom New flips down (from 90deg to 0).
   
   Let's refine the animation logic to be more physically accurate.
   - Top Current: 0 -> -90deg
   - Bottom New: 90deg -> 0deg
   
   The "New Top" and "Current Bottom" are static in the background?
   No.
   - Background: New Top (Static), Current Bottom (Static) -> Wait.
   
   Correct Sequence:
   1. Start: Top=Current, Bottom=Current.
   2. Underneath Top=Current is Top=New. Underneath Bottom=Current is Bottom=New.
   3. Animation:
      - Top Current flips down (-90deg).
      - This reveals Top New.
      - The Top Current becomes the Bottom Current (visually) -> No, it covers the bottom.
      
   Actually, the standard CSS implementation:
   - Top Current flips to -90deg.
   - Bottom New flips from 90deg to 0deg.
   - Top New is already visible (behind Top Current).
   - Bottom Current is visible (behind Bottom New).
   
   Let's stick to the current logic but adjust timing.
*/

.flipping .flip-card-top {
    animation: flipTop 0.3s ease-in forwards;
}

.flipping .flip-card-bottom-new {
    animation: flipBottomNew 0.3s ease-out 0.3s forwards;
    /* Starts after top half is done */
}

/* We don't need to animate TopNew or BottomCurrent if they are static layers */
.flipping .flip-card-top-new {
    /* Visible immediately once Top Current flips away */
    z-index: 1;
    /* Behind Top Current */
}

.flipping .flip-card-bottom {
    z-index: 1;
    /* Behind Bottom New */
}


/* Keyframes - Adjusted for smoother 2-part flip */
@keyframes flipTop {
    0% {
        transform: rotateX(0deg);
    }

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

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

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

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

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

/* Static Comma/Suffix Styling */
.flip-static {
    color: #FF453A;
    align-self: flex-end;
    margin-bottom: 0.1rem;
    font-size: 0.8em;
}