/* =============================================================
   MPI WATER — Blob Card treatment (every card on the public site:
   product, service, blog, certificate badge)
   Adapted from unlumen-ui's "Blob Card": a rotating glow border
   plus an animated fluid-blob gradient, recolored to the site's
   own blue/gold brand (the original ships pink/magenta, which
   would clash here). Pure CSS — no dependency on the blob-card's
   original React/motion implementation.

   Two pieces, reused across card types:
   - a rotating conic-gradient ring masked down to a thin border
   - a drifting multi-radial-gradient "blob" background, kept on
     its own layer (::before) so it never blurs the icon/emoji
     sitting on top of it
   ============================================================= */

@property --blob-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes blob-card-rotate {
  to {
    --blob-angle: 360deg;
  }
}

@keyframes blob-card-drift {
  0% {
    background-position: 20% 20%, 80% 40%, 40% 90%;
  }

  50% {
    background-position: 60% 50%, 30% 70%, 70% 30%;
  }

  100% {
    background-position: 30% 80%, 70% 20%, 20% 60%;
  }
}

/* ---- Glow ring: product cards (dark theme) ---- */
.product-card {
  isolation: isolate;
}

.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--blob-angle), #00c3ff, #c8962a, #e8b94a, #0077cc, #00c3ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: blob-card-rotate 5s linear infinite;
  pointer-events: none;
}

.product-card:hover::before {
  opacity: 0.85;
}

/* ---- Glow ring: service cards (light theme) ---- */
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--blob-angle), #00aaff, #c8962a, #e8b94a, #0077cc, #00aaff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: blob-card-rotate 5s linear infinite;
  pointer-events: none;
}

.service-card:hover::before {
  opacity: 0.85;
}

/* ---- Fluid blob background: product image slot, icon-fallback
   cards only (real product photos are left untouched) ---- */
.product-card-img:not(:has(img)) {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.product-card-img:not(:has(img))::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 195, 255, 0.55), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(200, 150, 42, 0.4), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(0, 119, 204, 0.5), transparent 60%);
  background-size: 180% 180%, 160% 160%, 200% 200%;
  filter: blur(18px);
  animation: blob-card-drift 9s ease-in-out infinite alternate;
  z-index: -1;
}

/* ---- Glow ring: blog cards (dark theme) ---- */
.blog-card {
  position: relative;
  isolation: isolate;
}

.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--blob-angle), #00c3ff, #c8962a, #e8b94a, #0077cc, #00c3ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: blob-card-rotate 5s linear infinite;
  pointer-events: none;
}

.blog-card:hover::before {
  opacity: 0.85;
}

/* ---- Glow ring: certificate badge cards. index.html's cert-card
   already ships a static gradient-border ::before (same mask trick,
   just not animated); kurumsal.html's is a plainer card with no
   ::before at all. Self-contained so it renders correctly on both. ---- */
.cert-card {
  position: relative;
  isolation: isolate;
}

.cert-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--blob-angle), #00c3ff, #c8962a, #e8b94a, #0077cc, #00c3ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: blob-card-rotate 5s linear infinite;
  pointer-events: none;
}

.cert-card:hover::before {
  opacity: 0.85;
}

/* ---- Fluid blob background: blog image slot (all cards use an
   emoji, never a photo, but the guard is kept for future-proofing) ---- */
.blog-card-img:not(:has(img)) {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.blog-card-img:not(:has(img))::before {
  content: '';
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 195, 255, 0.5), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(200, 150, 42, 0.4), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(0, 119, 204, 0.45), transparent 60%);
  background-size: 180% 180%, 160% 160%, 200% 200%;
  filter: blur(18px);
  animation: blob-card-drift 9s ease-in-out infinite alternate;
  z-index: -1;
}

/* ---- Fluid blob background: service icon chip ---- */
.service-icon {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.service-icon::before {
  content: '';
  position: absolute;
  inset: -60%;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 195, 255, 0.6), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(200, 150, 42, 0.45), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(0, 119, 204, 0.55), transparent 60%);
  background-size: 180% 180%, 160% 160%, 200% 200%;
  filter: blur(10px);
  animation: blob-card-drift 9s ease-in-out infinite alternate;
  z-index: -1;
}

/* ---- Glow ring: admin dashboard cards (stat cards + table/content
   cards). Uses ::after, not ::before — .stat-card's ::before is
   already the colored top-accent bar (blue/gold/green/red/orange
   per metric) and must stay untouched. ---- */
.stat-card,
.card {
  position: relative;
  isolation: isolate;
}

.stat-card::after,
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--blob-angle), #00c3ff, #c8962a, #e8b94a, #0077cc, #00c3ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: blob-card-rotate 5s linear infinite;
  pointer-events: none;
}

.stat-card:hover::after,
.card:hover::after {
  opacity: 0.85;
}

/* ---- Reduced motion: keep the glow, drop the spin/drift ---- */
@media (prefers-reduced-motion: reduce) {

  .product-card::before,
  .service-card::before,
  .blog-card::before,
  .cert-card::before,
  .stat-card::after,
  .card::after,
  .product-card-img:not(:has(img))::before,
  .blog-card-img:not(:has(img))::before,
  .service-icon::before {
    animation: none;
  }

  .product-card::before,
  .service-card::before,
  .blog-card::before,
  .cert-card::before,
  .stat-card::after,
  .card::after {
    --blob-angle: 45deg;
  }
}