@charset "utf-8";
/* CSS Document */

        /* Custom styles for the animation and card elements */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f9fa; /* A light theme background */
        }

        /*
         * The image container now handles the clipping and rounded corners.
         * - overflow: hidden is the key to clipping the scaled image.
         * - border-radius is added here to round the corners of the container itself.
        */
        .portrait-image-wrapper {
            overflow: hidden;
            height: 250px; /* Giving a fixed height for consistency */
            /* Use Bootstrap's variable for the card's inner radius for perfect matching */
            border-top-left-radius: var(--bs-card-inner-border-radius);
            border-top-right-radius: var(--bs-card-inner-border-radius);
        }

        /* Keyframe animation for the continuous zoom effect */
        @keyframes gentle-zoom {
            0% {
                transform: scale(1.05);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1.05);
            }
        }

        /*
         * Applying the animation to the images inside the cards.
         * The image now fills the wrapper, and object-fit: cover prevents distortion.
        */
        .portrait-card-img {
            animation: gentle-zoom 12s ease-in-out infinite;
            transition: transform 0.4s ease; /* Smooth transition for the hover effect */
            transform: scale(1.05); /* Initial scale */
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /*
         * This creates a staggered animation effect.
         * We select each card individually and apply a different animation delay
         * so they zoom in and out one after the other. The 12s animation is
         * divided into three 4s phases.
        */
        /* Card 1 starts at the beginning of the animation cycle (0s) */
        .row > .col:nth-child(1) .portrait-card-img {
            animation-delay: 0s;
        }

        /* Card 2 starts 1/3 of the way through the animation cycle (-8s from the end) */
        .row > .col:nth-child(2) .portrait-card-img {
            animation-delay: -8s;
        }

        /* Card 3 starts 2/3 of the way through the animation cycle (-4s from the end) */
        .row > .col:nth-child(3) .portrait-card-img {
            animation-delay: -4s;
        }


        /* * This handles the hover effect.
         * When a user hovers over the card (.card):
         * 1. We pause the continuous animation on its image.
         * 2. We scale the image up more (to 1.25) for a distinct focus effect.
        */
        .card:hover .portrait-card-img {
            animation-play-state: paused;
            transform: scale(1.25);
        }

        /* Additional styling for disabled card to make it look less active */
        .card.border-dashed .portrait-card-img {
            animation: none; /* Disable animation for the "Coming Soon" card */
            filter: grayscale(80%);
            transform: scale(1.05);
        }
        .card.border-dashed:hover .portrait-card-img {
            transform: scale(1.05); /* Prevent hover zoom on disabled card */
        }