/* ══════════════════════════════════════════════════════════════════
   Zoojoy — Liquid Glass utility layer
   Reusable translucent surfaces with solid fallbacks, theme-aware
   (light / dark / read), WCAG-AA safe. Pairs with the CSS-var theme
   system in base.html (--card / --nav / --border / --text).
   ══════════════════════════════════════════════════════════════════ */

:root{
  --glass-bg: 255,255,255;      /* surface tint            */
  --glass-alpha: .70;           /* surface translucency    */
  --glass-rim: 255,255,255;     /* hairline highlight      */
  --glass-rim-alpha: .60;
  --glass-shadow: 45,42,38;     /* ambient shadow tint     */
  --glass-blur: 16px;
}
[data-theme="dark"]{
  --glass-bg: 24,21,32;
  --glass-alpha: .58;
  --glass-rim: 255,255,255;
  --glass-rim-alpha: .10;
  --glass-shadow: 0,0,0;
}
[data-theme="read"]{
  --glass-bg: 249,243,227;
  --glass-alpha: .72;
  --glass-rim: 255,255,255;
  --glass-rim-alpha: .55;
  --glass-shadow: 59,47,47;
}

/* ── Base translucent surface ───────────────────────────────────── */
.glass{
  background: rgba(var(--glass-bg), var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid rgba(var(--glass-rim), var(--glass-rim-alpha));
  box-shadow:
    0 8px 32px -12px rgba(var(--glass-shadow), .24),
    inset 0 1px 0 rgba(var(--glass-rim), var(--glass-rim-alpha));
}

/* ── Card: interactive, lifts on hover ──────────────────────────── */
.glass-card{
  background: rgba(var(--glass-bg), var(--glass-alpha));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur)) saturate(165%);
  border: 1px solid rgba(var(--glass-rim), var(--glass-rim-alpha));
  border-radius: 1.25rem;
  box-shadow:
    0 10px 34px -14px rgba(var(--glass-shadow), .22),
    inset 0 1px 0 rgba(var(--glass-rim), var(--glass-rim-alpha));
  transition: transform .4s cubic-bezier(.34,1.56,.64,1),
              box-shadow .4s ease, border-color .4s ease;
  will-change: transform;
}
.glass-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,107,107,.35);
  box-shadow:
    0 22px 52px -18px rgba(var(--glass-shadow), .34),
    0 0 0 1px rgba(255,107,107,.12),
    inset 0 1px 0 rgba(var(--glass-rim), var(--glass-rim-alpha));
}

/* ── Navigation bar / sticky headers ────────────────────────────── */
.glass-nav{
  background: rgba(var(--glass-bg), .78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(var(--glass-rim), var(--glass-rim-alpha));
  box-shadow: 0 4px 24px -16px rgba(var(--glass-shadow), .5);
}

/* ── Panel / sheet / modal surface ──────────────────────────────── */
.glass-panel{
  background: rgba(var(--glass-bg), .82);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(var(--glass-rim), var(--glass-rim-alpha));
  border-radius: 1.75rem;
  box-shadow:
    0 32px 80px -24px rgba(var(--glass-shadow), .4),
    inset 0 1px 0 rgba(var(--glass-rim), var(--glass-rim-alpha));
}

/* ── Frosted overlay behind modals / sheets ─────────────────────── */
.glass-overlay{
  background: rgba(20,16,24,.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ── Iridescent coral→violet accents ────────────────────────────── */
.gradient-cv{
  background-image: linear-gradient(135deg,#FF8C61 0%,#FF6B6B 45%,#7C5CFC 100%);
}
.gradient-cv-soft{
  background-image: linear-gradient(135deg,rgba(255,140,97,.16),rgba(124,92,252,.16));
}
.text-gradient-cv{
  background: linear-gradient(120deg,#FF8C61,#FF6B6B 40%,#7C5CFC);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Hairline coral→violet rim (use as a decorative outline layer) */
.glass-rim-cv{
  position: relative;
}
.glass-rim-cv::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg,rgba(255,107,107,.55),rgba(124,92,252,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* ── Glass button (secondary/tertiary actions) ──────────────────── */
.btn-glass{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:.75rem;
  font-weight:600; font-size:.875rem;
  color: rgb(var(--text));
  cursor:pointer;
  background: rgba(var(--glass-bg), var(--glass-alpha));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(var(--glass-rim), var(--glass-rim-alpha));
  box-shadow: 0 6px 20px -10px rgba(var(--glass-shadow), .3);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, border-color .3s ease;
}
.btn-glass:hover{
  transform: translateY(-2px);
  border-color: rgba(255,107,107,.4);
  box-shadow: 0 12px 28px -12px rgba(255,107,107,.4);
}
.btn-glass:active{ transform: scale(.97); }
.btn-glass:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,107,107,.4);
}

/* ── Solid fallback where backdrop-filter is unsupported ─────────── */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .glass,.glass-card,.glass-panel,.btn-glass{ background: rgb(var(--glass-bg)); }
  .glass-nav{ background: rgb(var(--glass-bg)); }
  .glass-overlay{ background: rgba(20,16,24,.72); }
}

/* ── Respect reduced-motion for the interactive surfaces ────────── */
@media (prefers-reduced-motion: reduce){
  .glass-card,.btn-glass{ transition: none; }
  .glass-card:hover,.btn-glass:hover{ transform: none; }
}

/* ── Mobile performance ──────────────────────────────────────────
   A phone GPU re-samples every backdrop-filter and filter:blur layer on
   each scroll frame — with a grid of glass cards, each carrying a coral→
   violet halo, that is what makes scrolling stutter. On coarse-pointer /
   small screens we keep the translucent look but shrink the blur radius on
   the few fixed surfaces and defuse the many decorative glow layers (their
   radial gradients already read as soft). Desktops keep the full effect. */
@media (pointer: coarse), (max-width: 700px){
  :root{ --glass-blur: 7px; }
  .glass-nav{ -webkit-backdrop-filter: blur(9px) saturate(150%); backdrop-filter: blur(9px) saturate(150%); }
  .glass-panel{ -webkit-backdrop-filter: blur(13px) saturate(155%); backdrop-filter: blur(13px) saturate(155%); }
  .btn-glass{ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .glass-card{ will-change: auto; }

  /* The shared coral→violet glow behind cards/dashboard tiles (.zj-glow on
     ~38 templates): a tiny blur is ~60× cheaper than blur(26–32px) and still
     soft. Also stop the hover-scale transition compositing on touch. */
  .zj-glow::before{ filter: blur(4px) !important; transition: none !important; }

  /* Navbar: keep the fixed veil, lighter; defuse the aura/brand halos. */
  .nx-veil{ -webkit-backdrop-filter: blur(10px) saturate(1.4) !important; backdrop-filter: blur(10px) saturate(1.4) !important; }
  .nx.is-lifted .nx-veil{ -webkit-backdrop-filter: blur(12px) saturate(1.4) !important; backdrop-filter: blur(12px) saturate(1.4) !important; }
  .nx-aura, .nx-brand-halo{ filter: blur(6px) !important; opacity: .18 !important; }

  /* Dashboard: the blur(88px) background bloom is the costliest single layer
     on the logged-in home — drop it on phones. */
  .ds-bloom{ display: none !important; }

  /* Small frosted chips/buttons on each card → solid instead of blurred. */
  .ac-tag-free, .ac-tag-place, .ac-act{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}