/**
 * Cube Rebar - Fresh Flip Card Animation
 * Completely independent CSS for 3D card flip effect
 * Version: 1.0
 */

/* =====================================================
   3D FLIP CARD - FRESH IMPLEMENTATION
   ===================================================== */

/* Container - Sets up 3D perspective */
.cr-flip-container {
    perspective: 1000px;
    position: relative;
    width: 100%;
    /* Define aspect ratio for container height */
    aspect-ratio: 4 / 3;
}

/* Inner wrapper - This is what rotates */
.cr-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* Enable 3D space for children */
    transform-style: preserve-3d;
    /* Smooth flip animation */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover state - Flip 180 degrees on Y axis */
.cr-flip-container:hover .cr-flip-inner {
    transform: rotateY(180deg);
}

/* Shared styles for front and back faces */
.cr-flip-front,
.cr-flip-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Hide the backface when rotated */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Styling */
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25),
        0 10px 30px rgba(196, 30, 58, 0.15);
}

/* Front face - Visible by default */
.cr-flip-front {
    z-index: 2;
}

/* Back face - Pre-rotated 180deg so it shows when container flips */
.cr-flip-back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Images inside cards */
.cr-flip-front img,
.cr-flip-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Glow effect on hover */
.cr-flip-container::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, #C41E3A, #DC143C, #FF6B6B);
    border-radius: 28px;
    opacity: 0;
    z-index: -1;
    filter: blur(20px);
    transition: opacity 0.5s ease;
}

.cr-flip-container:hover::before {
    opacity: 0.5;
}

/* Blueprint grid overlay - stays on top */
.cr-flip-container .hero-blueprint-grid {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    border-radius: 24px;
}

/* Floating elements overlay - stays on top */
.cr-flip-container .hero-floating-elements {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 991px) {
    .cr-flip-container {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {
    .cr-flip-container {
        aspect-ratio: 16 / 9;
    }

    .cr-flip-front,
    .cr-flip-back {
        border-radius: 16px;
    }

    .cr-flip-container::before {
        border-radius: 20px;
    }
}