/* ============================================================
   FILE   : app/static/css/base/_glass.css
   TAG    : [BASE] glass-utilities
   PURPOSE: Reusable "spatial glassmorphism" building blocks:
              .bg-blobs      -> fixed full-screen layer with 3 large
                                 soft-focus blurred gradient blobs
                                 that float behind everything, giving
                                 the frosted panels something to
                                 refract/blur.
              .glass         -> base frosted panel (surface, blur,
                                 border, shadow, highlight edge)
              .glass-strong  -> higher-opacity variant for things
                                 that must stay readable (modals,
                                 dropdowns)
              .glass-card    -> glass + rounded corners + padding,
                                 for content cards/tiles
              .glass-hover   -> lift + glow on hover, for clickable
                                 glass surfaces
   PURPOSE: reset uses this on top of base/_tokens.css variables.
   ============================================================ */

/* ---- floating background blobs (fixed, behind everything) ---- */
.bg-blobs{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.bg-blobs span{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
  animation: blobFloat 22s ease-in-out infinite;
}

.bg-blobs span:nth-child(1){
  width: 520px; height: 520px;
  top: -160px; right: -120px;
  background: var(--blob-1);
  animation-delay: 0s;
}
.bg-blobs span:nth-child(2){
  width: 420px; height: 420px;
  bottom: -140px; left: -100px;
  background: var(--blob-2);
  animation-delay: -7s;
}
.bg-blobs span:nth-child(3){
  width: 360px; height: 360px;
  top: 40%; right: 30%;
  background: var(--blob-3);
  animation-delay: -14s;
}

@keyframes blobFloat{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%    { transform: translate(30px,-40px) scale(1.08); }
  66%    { transform: translate(-25px,25px) scale(.96); }
}

@media (prefers-reduced-motion: reduce){
  .bg-blobs span{ animation: none; }
}

/* ---- base glass surface ---- */
.glass{
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border-width) solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-strong{
  background: var(--glass-surface-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  backdrop-filter: blur(var(--glass-blur-strong));
  border: var(--glass-border-width) solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-card{
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border-width) solid var(--glass-border);
  border-radius: var(--glass-radius-md);
  box-shadow: var(--glass-shadow);
  position: relative;
}

/* subtle top highlight to sell the "glass edge" */
.glass-card::before,
.glass::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-highlight), transparent 40%);
  pointer-events: none;
}

.glass-hover{
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.glass-hover:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(0,0,0,.4);
}