@use '../../../../components/molecules/cards/card' as *;
@use '../../../../base/mixins/breakpoints' as break;
@use '../../../../base/functions' as *;

.card {
	backdrop-filter: none;
	border: none;
	border-radius: var(--radius-large);
	background-color: var(--neutral-2);

	&-wrapper {
		&.anim-blob {
			.card-banner {
				position: relative;
				overflow: hidden; // To contain the image within the banner's bounds
				height: 100%;
				transition:
					mask-size 0.5s ease-in-out,
					-webkit-mask-size 0.5s ease-in-out;

				/* Adjust as needed */

				mask-repeat: no-repeat;
				mask-position: center;
				mask-size: 100% 100%;

				/* Adjust as needed to initially size the blob */
				mask-image: url('https://res.cloudinary.com/snyk/image/upload/v1745325696/snyk-mktg-brandui/experimental/blob-square.svg');
				aspect-ratio: 1200 / 630;

				[data-component='Banner'] {
					width: 100%;
					height: 100%;
				}

				img {
					display: block; // Prevent extra space below the image
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				@include break.max-tablet {
					mask-image: none;
				}
			}

			&:hover,
			&:focus {
				.card-banner {
					mask-size: 500% 500%;
				}
			}
		}
	}

	&-banner {
		border-radius: var(--radius-medium) var(--radius-medium) 0 0;
	}

	.bio-trigger {
		color: var(--action-secondary);

		&:hover {
			color: var(--action);
		}

		&:focus {
			color: var(--action);
		}
	}
}