/* Custom CSS Extensions & Keyframe Animations */

/* Custom Scrollbar configuration */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Aurora Background Northern Lights Animation */
.aurora-blob {
    position: absolute;
    filter: blur(80px);
    opacity: 0.45;
    border-radius: 50%;
    animation: aurora-float 14s infinite alternate ease-in-out;
}

.aurora-1 {
    top: -10%;
    left: 10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #ffd02f 0%, #fff4c4 100%);
}

.aurora-2 {
    top: 20%;
    right: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #c3faf5 0%, #0fbcb0 100%);
    animation-delay: -4s;
}

.aurora-3 {
    bottom: -10%;
    left: 30%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, #fde0f0 0%, #ff9999 100%);
    animation-delay: -7s;
}

@keyframes aurora-float {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    50% {
        transform: translate(40px, -30px) scale(1.15);
    }
    100% {
        transform: translate(-30px, 40px) scale(0.9);
    }
}

/* Micro-interaction Spring Bezier Transitions */
button, a {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Fade In Animation for Slider */
.fade-in {
    animation: fadeIn 0.4s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* [POSTFIX] Enforce uniform gallery images - auto-injected */
img[src*="gallery_"],
[id*="gallery"] img:not([class*="avatar"]):not([class*="logo"]),
[class*="gallery"] img:not([class*="avatar"]):not([class*="logo"]),
[id*="portfolio"] img:not([class*="avatar"]):not([class*="logo"]),
[class*="portfolio"] img:not([class*="avatar"]):not([class*="logo"]) {
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Parent containers of gallery images: enforce aspect-ratio on the wrapper */
[id*="gallery"] [class*="overflow-hidden"],
[class*="gallery"] [class*="overflow-hidden"],
[id*="portfolio"] [class*="overflow-hidden"],
[class*="portfolio"] [class*="overflow-hidden"] {
  aspect-ratio: 4 / 3 !important;
}

/* Except when inside lightbox/modal */
[id*="modal"] img,
[class*="modal"] img,
[id*="lightbox"] img,
[class*="lightbox"] img,
.modal img,
.lightbox img {
  aspect-ratio: auto !important;
  width: auto !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Ensure the grid wrapper doesn't use bento grid heights */
[id*="gallery"] [class*="grid"],
[class*="gallery"] [class*="grid"],
[id*="portfolio"] [class*="grid"],
[class*="portfolio"] [class*="grid"] {
  grid-auto-rows: auto !important;
}

/* [POSTFIX] Enforce small uniform sizes for images inside the shopping cart/basket - auto-injected */
[id*="cart"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="cart"] img:not([class*="logo"]):not([class*="avatar"]),
[id*="basket"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="basket"] img:not([class*="logo"]):not([class*="avatar"]),
[id*="bag"] img:not([class*="logo"]):not([class*="avatar"]),
[class*="bag"] img:not([class*="logo"]):not([class*="avatar"]),
.cart-item img,
.basket-item img,
[class*="cart-item"] img,
[class*="basket-item"] img {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  aspect-ratio: 1 / 1 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Ensure cart items are laid out horizontally in a flex row */
.cart-item,
.basket-item,
[class*="cart-item"],
[class*="basket-item"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

/* Prevent text overflow in cart items (allows text to wrap) */
.cart-item > div,
.basket-item > div,
[class*="cart-item"] > div,
[class*="basket-item"] > div {
  min-width: 0 !important;
}

/* Let the title and price wrap gracefully */
.cart-item h1, .cart-item h2, .cart-item h3, .cart-item h4, .cart-item h5, .cart-item p, .cart-item span,
.basket-item h1, .basket-item h2, .basket-item h3, .basket-item h4, .basket-item h5, .basket-item p, .basket-item span,
[class*="cart-item"] h1, [class*="cart-item"] h2, [class*="cart-item"] h3, [class*="cart-item"] h4, [class*="cart-item"] h5, [class*="cart-item"] p, [class*="cart-item"] span,
[class*="basket-item"] h1, [class*="basket-item"] h2, [class*="basket-item"] h3, [class*="basket-item"] h4, [class*="basket-item"] h5, [class*="basket-item"] p, [class*="basket-item"] span {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Ensure action buttons don't shrink */
.cart-item button,
.basket-item button,
[class*="cart-item"] button,
[class*="basket-item"] button {
  flex-shrink: 0 !important;
}