/* =============================================================================
 * Grafo — Hyper Glass mode (tasteful, opt-in)
 * -----------------------------------------------------------------------------
 * Activated via :root[data-hyperglass="1"]. OFF by default. When ON, only
 * a CURATED set of large surfaces (cards, modals, sidebar items, the two
 * Support-panel CTAs) get the cursor-tracked tilt + sheen + lift effect.
 *
 * We deliberately do NOT cover every <button>, every <input> or every
 * dropdown — that quickly becomes noisy. The mode is meant to feel like a
 * subtle premium polish layer, not a global takeover.
 *
 * Rules of engagement:
 *   - Reduced-motion → no transforms, no sheen, no animations.
 *   - Mobile → no tilt, no hover lift, no diagonal sheen.
 *   - Backdrop-filter fallback → opaque legible background.
 * =============================================================================
 */

:root[data-hyperglass="1"] {
  --hg-radius:           14px;
  --hg-bg:               rgba(255, 255, 255, 0.06);
  --hg-bg-hover:         rgba(255, 255, 255, 0.10);
  --hg-border:           rgba(255, 255, 255, 0.14);
  --hg-border-hover:     rgba(255, 255, 255, 0.30);
  --hg-shadow:           0 14px 40px rgba(0, 0, 0, 0.32),
                         0 4px 12px rgba(0, 0, 0, 0.22),
                         inset 0 1px 0 rgba(255, 255, 255, 0.10),
                         inset 0 -1px 0 rgba(0, 0, 0, 0.30);
  --hg-shadow-hover:     0 22px 64px rgba(0, 0, 0, 0.55),
                         0 6px 18px rgba(0, 0, 0, 0.40),
                         0 0 0 1px rgba(255, 255, 255, 0.18) inset,
                         0 0 18px rgba(255, 255, 255, 0.08);
  --hg-glow:             rgba(255, 255, 255, 0.18);
  --hg-blur:             20px;
  --hg-saturate:         1.5;
  --hg-tilt-max:         5deg;     /* gentler than before */
  --hg-lift:             3px;
  --hg-press:            0.98;
  --hg-fast:             140ms;
  --hg-medium:           260ms;
  --hg-spring:           cubic-bezier(0.22, 1, 0.36, 1);

  /* Per-element values (set by JS only on the curated surfaces). */
  --hg-mx: 50%;
  --hg-my: 50%;
  --hg-rx: 0deg;
  --hg-ry: 0deg;
}

:root[data-hyperglass="1"][data-theme="light"] {
  --hg-bg:               rgba(255, 255, 255, 0.62);
  --hg-bg-hover:         rgba(255, 255, 255, 0.82);
  --hg-border:           rgba(15, 18, 28, 0.10);
  --hg-border-hover:     rgba(15, 18, 28, 0.22);
  --hg-shadow:           0 12px 30px rgba(15, 18, 28, 0.10),
                         0 4px 10px rgba(15, 18, 28, 0.08),
                         inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --hg-shadow-hover:     0 18px 50px rgba(15, 18, 28, 0.16),
                         0 6px 16px rgba(15, 18, 28, 0.10),
                         0 0 0 1px rgba(15, 18, 28, 0.10) inset;
  --hg-glow:             rgba(15, 18, 28, 0.10);
}

/* The CURATED surface list. Anything not on this list keeps its normal
 * styling under hyper-glass mode. */
:root[data-hyperglass="1"] .gp-support-card,
:root[data-hyperglass="1"] .gp-donate,
:root[data-hyperglass="1"] .gp-redeem-btn,
:root[data-hyperglass="1"] .home-card,
:root[data-hyperglass="1"] .depth-card,
:root[data-hyperglass="1"] .depth-card-strong,
:root[data-hyperglass="1"] .glass-card,
:root[data-hyperglass="1"] .glass-panel,
:root[data-hyperglass="1"] #settings-card,
:root[data-hyperglass="1"] #sidebar .sb-item {
  position: relative;
  isolation: isolate;
  transition:
    transform var(--hg-fast) var(--hg-spring),
    background var(--hg-fast) var(--hg-spring),
    border-color var(--hg-fast) var(--hg-spring),
    box-shadow var(--hg-medium) var(--hg-spring);
  will-change: transform;
}

/* Soft specular layer on cards + the Support buttons only. We keep the
 * sidebar items quiet so the nav doesn't shimmer behind every hover. */
:root[data-hyperglass="1"] .gp-support-card::before,
:root[data-hyperglass="1"] .home-card::before,
:root[data-hyperglass="1"] .depth-card::before,
:root[data-hyperglass="1"] .depth-card-strong::before,
:root[data-hyperglass="1"] .glass-card::before,
:root[data-hyperglass="1"] .glass-panel::before,
:root[data-hyperglass="1"] .gp-donate::before,
:root[data-hyperglass="1"] .gp-redeem-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(180px 130px at var(--hg-mx) var(--hg-my),
                              var(--hg-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--hg-medium) var(--hg-spring);
  z-index: 0;
  mix-blend-mode: overlay;
}
:root[data-hyperglass="1"] .gp-support-card:hover::before,
:root[data-hyperglass="1"] .home-card:hover::before,
:root[data-hyperglass="1"] .depth-card:hover::before,
:root[data-hyperglass="1"] .depth-card-strong:hover::before,
:root[data-hyperglass="1"] .glass-card:hover::before,
:root[data-hyperglass="1"] .glass-panel:hover::before,
:root[data-hyperglass="1"] .gp-donate:hover::before,
:root[data-hyperglass="1"] .gp-redeem-btn:hover::before { opacity: 1; }

/* Children stay above. */
:root[data-hyperglass="1"] .gp-support-card > *,
:root[data-hyperglass="1"] .home-card > *,
:root[data-hyperglass="1"] .depth-card > *,
:root[data-hyperglass="1"] .depth-card-strong > *,
:root[data-hyperglass="1"] .glass-card > *,
:root[data-hyperglass="1"] .glass-panel > * { position: relative; z-index: 1; }

/* Tilt + lift on hover (uses CSS variables set by JS for a few elements). */
:root[data-hyperglass="1"] .gp-support-card:hover,
:root[data-hyperglass="1"] .home-card:hover,
:root[data-hyperglass="1"] .depth-card:hover,
:root[data-hyperglass="1"] .depth-card-strong:hover,
:root[data-hyperglass="1"] .glass-card:hover,
:root[data-hyperglass="1"] .glass-panel:hover,
:root[data-hyperglass="1"] .gp-donate:hover,
:root[data-hyperglass="1"] .gp-redeem-btn:hover {
  background: var(--hg-bg-hover);
  border-color: var(--hg-border-hover);
  box-shadow: var(--hg-shadow-hover);
  transform: translate3d(0, calc(var(--hg-lift) * -1), 0)
             rotateX(var(--hg-rx))
             rotateY(var(--hg-ry));
}

/* Sidebar items get a quieter treatment: lift in X only, no rotation. */
:root[data-hyperglass="1"] #sidebar .sb-item:hover {
  transform: translateX(2px);
}

/* Press feedback on Support CTAs. */
:root[data-hyperglass="1"] .gp-donate:active,
:root[data-hyperglass="1"] .gp-redeem-btn:active {
  transform: scale(var(--hg-press));
}

/* Modal entry animation (stays gentle). */
:root[data-hyperglass="1"] #settings-card {
  animation: hyperGlassModalIn 360ms var(--hg-spring) both;
}
@keyframes hyperGlassModalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Reduced motion: full disable. */
@media (prefers-reduced-motion: reduce) {
  :root[data-hyperglass="1"] .gp-support-card,
  :root[data-hyperglass="1"] .home-card,
  :root[data-hyperglass="1"] .depth-card,
  :root[data-hyperglass="1"] .depth-card-strong,
  :root[data-hyperglass="1"] .glass-card,
  :root[data-hyperglass="1"] .glass-panel,
  :root[data-hyperglass="1"] .gp-donate,
  :root[data-hyperglass="1"] .gp-redeem-btn,
  :root[data-hyperglass="1"] #settings-card,
  :root[data-hyperglass="1"] #sidebar .sb-item {
    transition: none !important;
    transform: none !important;
  }
  :root[data-hyperglass="1"] .gp-support-card:hover,
  :root[data-hyperglass="1"] .home-card:hover,
  :root[data-hyperglass="1"] .depth-card:hover,
  :root[data-hyperglass="1"] .depth-card-strong:hover,
  :root[data-hyperglass="1"] .glass-card:hover,
  :root[data-hyperglass="1"] .glass-panel:hover,
  :root[data-hyperglass="1"] .gp-donate:hover,
  :root[data-hyperglass="1"] .gp-redeem-btn:hover { transform: none !important; }
  :root[data-hyperglass="1"] #settings-card { animation: none !important; }
}

/* Mobile: keep things quiet. */
@media (max-width: 720px) {
  :root[data-hyperglass="1"] .gp-support-card:hover,
  :root[data-hyperglass="1"] .home-card:hover,
  :root[data-hyperglass="1"] .depth-card:hover,
  :root[data-hyperglass="1"] .depth-card-strong:hover,
  :root[data-hyperglass="1"] .glass-card:hover,
  :root[data-hyperglass="1"] .glass-panel:hover,
  :root[data-hyperglass="1"] #sidebar .sb-item:hover { transform: none !important; }
}