/*
 * Buudhaa Library interaction layer.
 *
 * These classes are intentionally independent of Elementor's generated IDs so
 * editors can reuse them on any section without changing the page structure.
 */

:root {
  --bl-accent: #c9f31d;
  --bl-ink: #0f0e0e;
  --bl-surface: rgba(255, 255, 255, 0.045);
  --bl-border: rgba(201, 243, 29, 0.2);
  --bl-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

/* Shared interactive surface */
.bl-icon-box,
.bl-price-box,
.img-gallery .gallery-item,
.img-gallery figure {
  isolation: isolate;
  position: relative;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 420ms ease, box-shadow 420ms ease, background-color 420ms ease;
}

.bl-icon-box::before,
.bl-price-box::before,
.img-gallery .gallery-item::before,
.img-gallery figure::before {
  background: radial-gradient(circle at var(--bl-glow-x, 50%) var(--bl-glow-y, 0%), rgba(201, 243, 29, 0.18), transparent 42%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 420ms ease;
  z-index: -1;
}

.bl-icon-box:hover,
.bl-icon-box:focus-within {
  border-color: var(--bl-border);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(201, 243, 29, 0.08);
  transform: translateY(-8px) rotateX(var(--bl-tilt-x, 0deg)) rotateY(var(--bl-tilt-y, 0deg));
}

.bl-icon-box:hover::before,
.bl-icon-box:focus-within::before,
.bl-price-box:hover::before,
.bl-price-box:focus-within::before,
.img-gallery .gallery-item:hover::before,
.img-gallery figure:hover::before {
  opacity: 1;
}

.bl-icon-box .elementor-icon,
.bl-icon-box .elementor-icon-box-icon,
.bl-price-box .elementor-heading-title,
.img-gallery img {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), color 320ms ease, filter 420ms ease;
}

.bl-icon-box:hover .elementor-icon,
.bl-icon-box:focus-within .elementor-icon {
  transform: translateY(-3px) scale(1.08) rotate(-4deg);
}

.bl-price-box {
  overflow: hidden;
}

.bl-price-box:hover,
.bl-price-box:focus-within {
  border-color: var(--bl-border);
  box-shadow: var(--bl-shadow), 0 0 0 1px rgba(201, 243, 29, 0.1);
  transform: translateY(-10px);
}

.bl-price-box:hover .elementor-heading-title:first-child,
.bl-price-box:focus-within .elementor-heading-title:first-child {
  color: var(--bl-accent);
  transform: translateX(4px);
}

/* Gallery images remain crisp and never distort their layout box. */
.img-gallery .gallery-item,
.img-gallery figure {
  overflow: hidden;
}

.img-gallery img {
  transform: scale(1.001);
}

.img-gallery .gallery-item:hover img,
.img-gallery figure:hover img {
  filter: saturate(1.08) contrast(1.03);
  transform: scale(1.045);
}

/* Reusable section backgrounds. Every layer stays behind Elementor content. */
.bl-bg-aurora,
.bl-bg-grid,
.bl-bg-glow,
.bl-bg-mesh,
.bl-bg-depth {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.bl-bg-aurora::before,
.bl-bg-aurora::after,
.bl-bg-glow::before,
.bl-bg-glow::after,
.bl-bg-mesh::before,
.bl-bg-mesh::after {
  border-radius: 50%;
  content: "";
  filter: blur(12px);
  opacity: 0.28;
  pointer-events: none;
  position: absolute;
  transform: translate3d(var(--bl-mouse-x, 0px), var(--bl-mouse-y, 0px), 0);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.bl-bg-aurora::before {
  background: rgba(201, 243, 29, 0.22);
  height: 34rem;
  left: -14rem;
  top: -14rem;
  width: 34rem;
}

.bl-bg-aurora::after {
  background: rgba(111, 83, 255, 0.18);
  bottom: -18rem;
  height: 38rem;
  right: -14rem;
  width: 38rem;
}

.bl-bg-grid::before {
  background-image: linear-gradient(rgba(201, 243, 29, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 243, 29, 0.06) 1px, transparent 1px);
  background-size: 70px 70px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  opacity: 0.34;
  pointer-events: none;
  position: absolute;
  transform: translateY(var(--bl-parallax-y, 0px));
  z-index: -1;
}

.bl-bg-glow::before {
  background: rgba(201, 243, 29, 0.23);
  height: 26rem;
  left: 6%;
  top: 10%;
  width: 26rem;
}

.bl-bg-glow::after {
  background: rgba(255, 175, 74, 0.13);
  bottom: -12rem;
  height: 30rem;
  right: 10%;
  width: 30rem;
}

.bl-bg-mesh::before {
  background: repeating-linear-gradient(125deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 24px);
  inset: -30%;
  opacity: 0.3;
  transform: rotate(-7deg) translate3d(var(--bl-mouse-x, 0px), var(--bl-mouse-y, 0px), 0);
}

.bl-bg-mesh::after {
  background: rgba(201, 243, 29, 0.12);
  height: 20rem;
  right: 12%;
  top: -10rem;
  width: 20rem;
}

.bl-bg-depth::after {
  background: linear-gradient(120deg, transparent, rgba(201, 243, 29, 0.06), transparent);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateY(var(--bl-parallax-y, 0px));
  z-index: -1;
}

.bl-bg-aurora > .e-con-inner,
.bl-bg-grid > .e-con-inner,
.bl-bg-glow > .e-con-inner,
.bl-bg-mesh > .e-con-inner,
.bl-bg-depth > .e-con-inner,
.bl-bg-aurora > .elementor-container,
.bl-bg-grid > .elementor-container,
.bl-bg-glow > .elementor-container,
.bl-bg-mesh > .elementor-container,
.bl-bg-depth > .elementor-container {
  position: relative;
  z-index: 1;
}

.bl-motion-critical .bl-icon-box,
.bl-motion-critical .bl-price-box,
.bl-motion-critical .img-gallery {
  will-change: transform;
}

@media (hover: none), (max-width: 767px) {
  .bl-icon-box:hover,
  .bl-price-box:hover {
    transform: none;
  }

  .bl-icon-box,
  .bl-price-box {
    transition-duration: 260ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-icon-box,
  .bl-price-box,
  .img-gallery .gallery-item,
  .img-gallery figure,
  .bl-icon-box .elementor-icon,
  .bl-icon-box .elementor-icon-box-icon,
  .bl-price-box .elementor-heading-title,
  .img-gallery img,
  .bl-bg-aurora::before,
  .bl-bg-aurora::after,
  .bl-bg-glow::before,
  .bl-bg-glow::after,
  .bl-bg-mesh::before,
  .bl-bg-mesh::after {
    transition: none !important;
  }
}
