/* From Uiverse.io by ElSombrero2 */
.card-punk {
   overflow: visible;
   /* Make width/aspect configurable so card matches the back-content image size.
      --card-width: desired width (default 190px)
      --card-aspect: aspect-ratio as "width/height" (default 190/254)
      You can override these per-card via inline style or a specific class.
   */
   width: var(--card-width, 190px);
   aspect-ratio: var(--card-aspect, 190/254);
   /* Constrain to container so large natural images don't overflow */
   max-width: 100%;
   position: relative; /* ensure absolute children are positioned correctly */
   box-sizing: border-box;
}

.content-punk {
   /* fill the .card-punk container which now uses aspect-ratio */
   width: 100%;
   height: 100%;
   position: relative; /* children .front/.back are absolute and will fill */
   transform-style: preserve-3d;
   transition: transform 300ms;
   box-shadow: 0px 0px 10px 1px #000000ee;
   border-radius: 5px;
}

.front,
.back {
   background-color: #151515;
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   border-radius: 5px;
   overflow: hidden;
}

.back {
   width: 100%;
   height: 100%;
   justify-content: center;
   display: flex;
   align-items: center;
   overflow: hidden;
}

.back::before {
   position: absolute;
   content: ' ';
   display: block;
   width: 160px;
   height: 160%;
   background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
   animation: rotation_481 5000ms infinite linear;
}

.back-content {
   position: absolute;
   width: 99%;
   height: 99%;
   background-color: #151515;
   border-radius: 5px;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: end;
   align-items: center;
   gap: 30px;
}

.back-content-title {
   position: relative;
   z-index: 1;
   background-color: #00000055;
   padding: 12px;
   /* border-radius: 10px; */
   backdrop-filter: blur(3px);
}

.card-punk:hover .content-punk {
   transform: rotateY(180deg);
}

@keyframes rotation_481 {
   0% {
      transform: rotateZ(0deg);
   }

   100% {
      transform: rotateZ(360deg);
   }
}

.front {
   transform: rotateY(180deg);
   color: white;
}

.front .front-content {
   position: absolute;
   width: 100%;
   height: 100%;
   padding: 10px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.front-content .badge {
   background-color: #00000055;
   padding: 2px 10px;
   border-radius: 10px;
   backdrop-filter: blur(2px);
   width: fit-content;
}

.description {
   box-shadow: 0px 0px 10px 5px #00000088;
   width: 100%;
   padding: 10px;
   background-color: #00000099;
   backdrop-filter: blur(5px);
   border-radius: 5px;
}

.title {
   font-size: 11px;
   max-width: 100%;
   display: flex;
   justify-content: space-between;
}

.title p {
   width: 50%;
}

.card-footer {
   color: #ffffff88;
   margin-top: 5px;
   font-size: 8px;
}

.front .img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

/* Ensure decorative image layer doesn't block clicks in Chrome.
   Place front-content above the image and allow pointer events on it. */
.front .img {
   z-index: 1;
   pointer-events: none; /* decorative only */
}

.front .front-content {
   z-index: 5;
   position: absolute; /* already set earlier, but ensure stacking context */
   pointer-events: all; /* allow links/buttons inside to be clickable */
}

/* Ensure decorative/back layers cannot intercept clicks so front-content links work */
.back,
.back::before,
.card-punk .back-content,
.card-punk .back-content::after {
   pointer-events: none;
}

/* Make sure front-content and interactive elements are on top and accept pointer events */
.front .front-content,
.front .front-content a,
.front .front-content button {
   pointer-events: auto;
   position: relative;
   z-index: 10;
}

.circle {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   background-color: #ffbb66;
   position: relative;
   filter: blur(15px);
   animation: floating 2600ms infinite linear;
}

#bottom {
   background-color: #ff8866;
   left: 50px;
   top: 0px;
   width: 150px;
   height: 150px;
   animation-delay: -800ms;
}

#right {
   background-color: #ff2233;
   left: 160px;
   top: -80px;
   width: 30px;
   height: 30px;
   animation-delay: -1800ms;
}

@keyframes floating {
   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(10px);
   }

   100% {
      transform: translateY(0px);
   }
}

/* Card back - use an image instead of inline SVG */
.card-punk .back-content {
   /* Change this path if you want a different image */
   /* background-image: url("/assets/imgs/webapp_crop.jpg"); */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-color: #151515; /* fallback */
   color: #ffffff;
   position: relative; /* for overlay pseudo-element */
}

.card-punk .back-content::after {
   /* subtle overlay so text stays readable */
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
   pointer-events: none;
   border-radius: 5px;
}

/* Helper size classes you can use instead of inline styles
   Examples:
   <div class="card-punk card-size-sm"> ... </div>
   <div class="card-punk card-size-md"> ... </div>
   <div class="card-punk card-size-lg"> ... </div>
*/
.card-size-sm { --card-width: 140px; --card-aspect: 140/188; }
.card-size-md { --card-width: 190px; --card-aspect: 190/254; }
.card-size-lg { --card-width: 260px; --card-aspect: 260/348; }

/* Utility: ensure cards don't exceed parent width when width is set large */
.card-punk { box-sizing: border-box; }