@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
}

/* a:not(:has(img)):hover { */
/*     background-image: none; */
/* } */

.snip-card-container {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.snip-card-container a {
    background-image: none;
}

.snip-card, .snip-card-mini {
    display: flex;
    position: relative;
    flex: 1 1 230px;
    box-sizing: border-box;
    margin: 6px;
    padding: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-align: center;
    border: 3px solid var(--flicker-dark);
    border-radius: 24px;
}

.snip-card {
    animation: spin 45s linear infinite /* , shadows 12s linear infinite */;
    background: var(--flicker-dark);
    /* background-image: linear-gradient(var(--rotate), var(--flicker-dark) 3%, var(--flicker-dark), var(--accent), var(--flicker-dark)); */
}

.snip-card-mini {
    animation: /* spin 15s ease-in-out infinite, */ shadows 12s linear infinite;
    /* background-image: linear-gradient(var(--rotate), var(--bg-color) 20%, var(--bg-color), var(--bg-color), var(--accent)); */
}

.snip-card {
    min-width: 315px;
    max-width: 315px;
    min-height: 485px;
}

.snip-card-mini {
    min-width: 298px;
    max-width: 298px;
    min-height: 360px;
}

.snip-card:before, .snip-card-mini:before {
    position: absolute;
    content: "";
    border-radius: 8px;
    background-color: var(--bg-color);
    z-index: -3;
}

/* .snip-card *, .snip-card-mini * { */
/*     -webkit-transition: all 0.35s ease; */
/*     transition: all 0.35s ease; */
/* } */

.snip-card .screen, .snip-card-mini .screen, .snip-card img, .snip-card-mini img {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    transition-property: background, filter, mix-blend-mode, opacity, transform;
    border-radius: 23px;
    background-color: var(--bg-color);
    mix-blend-mode: multiply;
    object-fit: scale-down;
    will-change: background, transform;
}

.snip-card .screen, .snip-card-mini .screen {
    opacity: 0.85;
}

.snip-card img, .snip-card-mini img {
    opacity: 1 !important;
}

.snip-card figcaption, .snip-card-mini figcaption,
.snip-card .link, .snip-card-mini .link {
    position: absolute;
    top: 20px;
    right: 35px;
    bottom: 20px;
    left: 20px;
}

.snip-card h2, .snip-card-mini h2 {
    position: absolute;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: normal;
    top: 50%;
    width: 100%;
    margin: 0;
    padding: 6px;
    transform: translateY(-50%);
    color: var(--text-color);
    border: none !important;
    border-radius: 6px;
}

.snip-card h2 {
    font-size: 21px;
}

.snip-card-mini h2 {
    font-size: 20px;
}

.snip-card h2 span, .snip-card h4 span, .snip-card-mini h2 span, .snip-card-mini h4 span {
    animation: textGradient 2s ease-in-out 1 forwards;
    color: transparent;
    background-image: var(--shimmer-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% auto;
}

.snip-card h2 span, .snip-card h4 span, .snip-card-mini h2 span, .snip-card-mini h4 span {
    color: var(--gold);
}


.snip-card:hover .screen, .snip-card:hover img, .snip-card-mini:hover .screen, .snip-card-mini:hover img {
    opacity: revert;
    border: 1px solid var(--flicker-light);
    filter: revert;
    mix-blend-mode: revert;
}

.snip-card:hover, .snip-card:focus, .snip-card-mini:hover, .snip-card-mini:focus {
    --flicker-dark: var(--flicker-light) !important;
}

.snip-card h4, .snip-card-mini h4 {
    font-family: "Mate", Arial, sans-serif;
    font-weight: 400;
    top: 0;
    padding-left: 12px;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.snip-card h4 {
    font-size: 1.1em;
}

.snip-card-mini h4 {
    font-size: 1em;
}

/*  */
/*  */
/* LIGHT BORDER CARD */
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0turn;
    inherits: false;
}

.border-card-container {
    display: flex;
    position: relative;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.border-card {
    display: grid;
    position: relative;
    overflow: hidden;
    align-content: baseline;
    min-width: 200px;
    max-width: 240px;
    padding: 24px 16px;
    animation: 12s gradient-angle infinite linear;
    text-decoration: none;
    color: currentColor;
    border: 2px solid transparent;
    border-radius: 16px;
    background-image: linear-gradient(#584827, #2d230f), conic-gradient(from var(--gradient-angle), #584827 0%, #c7a03c 37%, #ffe535 30%, #c7a03c 33%, #584827 40%, #584827 50%, #c7a03c 77%, #ffe535 80%, #c7a03c 83%, #584827 90%);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    place-content: center;
    place-items: center;
    row-gap: 16px;
}


.border-card h2 {
    font-family: "Mate", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 0;
    color: #fae7b1;
    border-top: none;
}

.border-card p {
    font-size: 12px;
    transition: all 0.5s ease-in-out;
    opacity: 0.5;
    color: #e1d3a9;
    backdrop-filter: blur(15px);
}

.glass {
    display: flex;
    position: absolute;
    bottom: -110px;
    align-items: center;
    flex-direction: column;
    padding: 16px;
    transition: all 0.5s ease-in-out;
}

.glass p {
    transition: all 0.5s ease-in-out;
    text-align: center;
    opacity: 0;
    z-index: -1;
}

.border-card:hover .glass {
    bottom: 20px;
    transition: all 0.5s ease-in-out;
}

.border-card:hover p {
    bottom: 20px;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    z-index: 1;
}

.border-card img {
    width: 120px;
    height: 120px;
    margin-bottom: 32px !important;
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.border-card:hover img {
    transition: all 0.3s ease-in-out;
    transform: scale(1.01);
    filter: blur(7px);
}


/*  */
/*  */
/* RING CARD */

.ring-card-container {
    display: flex;
    position: relative;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.ring-card-container.stretch {
    align-items: stretch;
}


.ring-card-container a {
    background-image: none;
}

.ring-card-container * {
    flex: 1 1 280px;
    max-width: 390px;
}

.circle-card {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    min-width: 255px;
    max-width: 255px;
    height: 80%;
    margin: 1em;
    padding: 4px 8px;
    transition: all 0.4s ease-in-out;
    border: 2px solid var(--border-container-small);
    border-radius: 16px;
    background-color: var(--bg-container-small);
    box-shadow: var(--shadow-small-container);
}


.circle-card:hover {
    box-shadow: var(--shadow-small-container--hover);
}

.circle-card:hover .circle-card-round-image {
    filter: grayscale(0);
}

.circle-card:hover .circle-card-blur {
    opacity: 1;
    filter: blur(60px) brightness(1.3) saturate(1.12);
    transform: translate(-50%, -50%) scale(1.15);
    transition: all 0.5s ease-in-out;
}

.circle-card h2 {
    font-family: "Cinzel", serif;
    font-size: 1em;
    font-weight: var(--font-weight-buttons);
    margin-top: 8px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--title-color);
    border-top: none;
}

.circle-card-round-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    transform: translate(-50%, -50%);
}

.red-filter {
    filter: brightness(0) saturate(100%) invert(35%) sepia(63%) saturate(2422%) hue-rotate(346deg) brightness(95%) contrast(89%);
}

.blue-filter {
    filter: brightness(0) saturate(100%) invert(34%) sepia(91%) saturate(2392%) hue-rotate(190deg) brightness(107%) contrast(103%);
}

.green-filter {
    filter: brightness(0) saturate(100%) invert(48%) sepia(89%) saturate(271%) hue-rotate(79deg) brightness(97%) contrast(99%);
}

.gold-filter {
    filter: brightness(0) saturate(100%) invert(77%) sepia(75%) saturate(506%) hue-rotate(333deg) brightness(102%) contrast(104%);
}

.circle-card h2 span {
    font-weight: 700;
    animation: textGradient 1s linear 2;
    color: transparent;
    background-image: var(--shimmer-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200% auto;
}

.circle-card p {
    font-size: 0.955em;
    font-weight: 500;
    padding-top: 16px;
    color: var(--text-color);
}

.circle-card-thumbnail {
    position: relative;
    overflow: hidden;
    height: 160px;
    border-radius: 16px;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.circle-card-blur {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;

    /* NEW SETTINGS */
    width: 180px;   /* Match the size of your ring */
    height: 180px;  /* Match the size of your ring */
    border-radius: 50%;

    /* This grabs the color defined in your HTML */
    background-color: var(--glow-color, #ffffff);

    /* Increase blur to make it a faint shade */
    filter: blur(60px);
    opacity: 0.6;
}

.circle-card-round-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 100px;  /* Keep the square fix */
    height: 100px; /* Keep the square fix */
    object-fit: cover;
    border-radius: 50%;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.circle-card-round-image.vivid {
    filter: grayscale(0);
}

.circle-card-contain-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100% !important;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: scale-down;
}

.circle-card-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(
            205deg,
            #fff3 0%,
            #0000 20%,
            #0000 80%,
            #fff3 100%
    );
    box-shadow: 4px 0 2px -4px #ffffffe6, -4px 0 2px -4px #ffffffe6;
    z-index: 2;
}

.circle-card-ring-outer {
    width: 220px;
    height: 220px;
}

.circle-card-label {
    align-self: normal;
    padding: 0 1.5em 0 1.5em;
}

.circle-card-round-image.square {
    border-radius: 8px;
}

.circle-card-round-image, .circle-card-contain-image {
    transition: all 0.3s ease-in-out;
}

.img-static {
    opacity: 1;
}

/* The hover image is hidden */
.img-hover {
    opacity: 0;
}

/* 2. STATE: HOVERED */
/* When hovering the card, HIDE the static image */
.circle-card:hover .img-static {
    opacity: 0;
}

/* When hovering the card, SHOW the hover image */
.circle-card:hover .img-hover {
    opacity: 1;
    /* Optional: Add a tiny scale effect to the image swap */
    transform: translate(-50%, -50%) scale(1.05);
}


@keyframes gradient-angle {
    to {
        --gradient-angle: 1turn;
    }
}

@keyframes spin {
    0% {
        --rotate: 0deg;
    }
    100% {
        --rotate: 360deg;
    }
}