/* =====================================================================
   HermitMonster — glass.css
   Liquid-glass / glassmorphism layer. Loaded AFTER styles.css + motion.css
   so it overrides surface treatments without touching the base structure.

   Design intent: high refraction, high contrast, strong depth. Every panel
   reads as a floating sheet of glass over a living aurora backdrop — in BOTH
   light and dark themes.

   GUARDRAILS (Wix-publishable + repo CSP):
   - Self-contained: glass refracts its OWN aurora backdrop, never the parent
     page (a cross-origin iframe cannot backdrop-filter what's behind it).
   - No external assets: the grain texture is an inline SVG data URI (img-src
     'self' data: is allowed; style-src allows 'unsafe-inline').
   - Progressive: a full @supports fallback paints solid frosted panels where
     backdrop-filter is unavailable; motion is gated by prefers-reduced-motion;
     the heavy blur is dialled back on phones for performance.
   ===================================================================== */

/* ------------------------------------------------------------------ *
   1. GLASS + AURORA TOKENS  (themed)
 * ------------------------------------------------------------------ */
:root {
  /* glass surface fills — translucent so the aurora refracts through */
  --glass-bg:        rgba(255, 253, 247, 0.55);
  --glass-bg-strong: rgba(255, 253, 247, 0.72);
  --glass-bg-soft:   rgba(255, 253, 247, 0.38);
  --glass-border:    rgba(255, 255, 255, 0.65);
  --glass-edge:      rgba(24, 23, 15, 0.10);   /* lower contact edge */
  --glass-hi:        rgba(255, 255, 255, 0.85); /* top refraction highlight */
  --glass-blur:      18px;
  --glass-saturate:  1.6;
  --glass-shadow:    0 14px 40px rgba(24, 23, 15, 0.14), 0 4px 12px rgba(24, 23, 15, 0.08);
  --glass-shadow-lg: 0 30px 70px rgba(24, 23, 15, 0.20), 0 8px 24px rgba(24, 23, 15, 0.10);
  --glass-inset:     inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-edge);

  /* aurora bloom colours (light theme) */
  --aurora-1: rgba(31, 93, 76, 0.30);    /* emerald */
  --aurora-2: rgba(232, 168, 56, 0.22);  /* amber  */
  --aurora-3: rgba(44, 122, 99, 0.26);   /* light emerald */
  --aurora-4: rgba(120, 180, 160, 0.20);
  --aurora-base: #eef1ea;

  /* custom cursor */
  --cursor-tint:   rgba(31, 93, 76, 0.16);
  --cursor-ring:   rgba(31, 93, 76, 0.55);
  --cursor-hot:    rgba(232, 168, 56, 0.30);
}

:root[data-theme="dark"] {
  --glass-bg:        rgba(28, 28, 25, 0.50);
  --glass-bg-strong: rgba(28, 28, 25, 0.68);
  --glass-bg-soft:   rgba(28, 28, 25, 0.34);
  --glass-border:    rgba(255, 255, 255, 0.16);
  --glass-edge:      rgba(0, 0, 0, 0.40);
  --glass-hi:        rgba(255, 255, 255, 0.22);
  --glass-blur:      20px;
  --glass-saturate:  1.5;
  --glass-shadow:    0 16px 44px rgba(0, 0, 0, 0.50), 0 4px 14px rgba(0, 0, 0, 0.40);
  --glass-shadow-lg: 0 34px 80px rgba(0, 0, 0, 0.62), 0 10px 28px rgba(0, 0, 0, 0.45);
  --glass-inset:     inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-edge);

  --aurora-1: rgba(88, 201, 168, 0.26);
  --aurora-2: rgba(240, 185, 72, 0.16);
  --aurora-3: rgba(26, 77, 64, 0.40);
  --aurora-4: rgba(60, 130, 150, 0.22);
  --aurora-base: #0d0f0e;

  --cursor-tint:   rgba(88, 201, 168, 0.18);
  --cursor-ring:   rgba(88, 201, 168, 0.65);
  --cursor-hot:    rgba(240, 185, 72, 0.34);
}

/* ------------------------------------------------------------------ *
   2. AMBIENT AURORA BACKDROP
   Fixed, behind all content. Three blooms drift slowly; a fine grain
   sits on top to break up banding. This is the "light" the glass bends.
 * ------------------------------------------------------------------ */
body { position: relative; background: var(--aurora-base); }

.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at var(--au1x, 18%) var(--au1y, 22%), var(--aurora-1), transparent 60%),
    radial-gradient(32vw 32vw at var(--au2x, 82%) var(--au2y, 28%), var(--aurora-2), transparent 60%),
    radial-gradient(46vw 46vw at var(--au3x, 50%) var(--au3y, 88%), var(--aurora-3), transparent 62%),
    radial-gradient(30vw 30vw at var(--au4x, 88%) var(--au4y, 82%), var(--aurora-4), transparent 60%);
  background-color: var(--aurora-base);
  animation: au-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* fine grain overlay (inline SVG noise — no external asset) */
.aurora::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

@keyframes au-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}

/* ------------------------------------------------------------------ *
   3. GLASS SURFACES
   A shared treatment applied to every floating panel. Uses layered
   backgrounds: a top-down refraction sheen + the translucent fill.
 * ------------------------------------------------------------------ */
.site-header,
.tile,
.work-card,
.cap-grid,
.archive-card,
.about__card,
.embed-frame,
.migrate-panel,
.case-nav a,
.nav.is-open,
.embed-bar,
.btn--ghost,
.chip,
.icon-btn {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* cards / panels ---------------------------------------------------- */
.tile,
.work-card,
.archive-card,
.migrate-panel,
.case-nav a {
  background:
    linear-gradient(180deg, var(--glass-hi) 0%, transparent 14%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.tile:hover,
.work-card:hover,
.archive-card:hover,
.case-nav a:hover {
  background:
    linear-gradient(180deg, var(--glass-hi) 0%, transparent 16%),
    var(--glass-bg-strong);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}

/* the capability grid is one glass slab with hairline dividers ------ */
.cap-grid {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  gap: 1px;
}
.cap { background: transparent; }
.cap:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* embed frame — a hovering glass viewport --------------------------- */
.embed-frame {
  background:
    linear-gradient(180deg, var(--glass-hi) 0%, transparent 10%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--glass-inset);
}
.embed-bar { background: var(--glass-bg-soft); border-bottom: 1px solid var(--glass-edge); }
.embed-stage { background: color-mix(in srgb, var(--aurora-base) 40%, transparent); }

/* about quote + CTA keep their signature dark/emerald, add depth ---- */
.about__card,
.cta {
  box-shadow: var(--glass-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.16);
}

/* sticky header — a frosted bar that floats above the aurora -------- */
.site-header {
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 70%, transparent), color-mix(in srgb, var(--paper) 40%, transparent));
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--glass-bg);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 6px 24px rgba(24,23,15,0.08);
}
:root[data-theme="dark"] .site-header.is-stuck { box-shadow: 0 6px 24px rgba(0,0,0,0.4); }

/* glass buttons + chips + icon buttons ------------------------------ */
.btn--ghost {
  background: var(--glass-bg-soft);
  border-color: var(--glass-border);
  box-shadow: var(--glass-inset);
}
.btn--ghost:hover {
  background: var(--glass-bg);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border));
}
.icon-btn {
  background: var(--glass-bg-soft);
  border-color: var(--glass-border);
  box-shadow: var(--glass-inset);
}
.chip {
  background: var(--glass-bg-soft);
  border-color: var(--glass-border);
}

/* primary button gets a refractive top sheen + bloom ---------------- */
.btn--primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), transparent 45%),
    var(--accent);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn--primary:hover {
  box-shadow: var(--glass-shadow-lg), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* mobile nav sheet -------------------------------------------------- */
.nav.is-open {
  background: var(--glass-bg-strong);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
}

/* tints behind glass stay readable: lift the tinted section a touch */
.section--tint { background: color-mix(in srgb, var(--aurora-base) 55%, transparent); }

/* ------------------------------------------------------------------ *
   4. CUSTOM GLASS CURSOR  (fine pointers only; JS positions it)
   Two layers: a fast inner lens (refracts the aurora via backdrop-filter)
   and a slower trailing ring. "Zoom refraction falloff" is faked with a
   radial highlight that brightens toward the centre and bends at the rim.
 * ------------------------------------------------------------------ */
.glass-cursor,
.glass-cursor__trail {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, opacity;
}

/* inner lens — the refracting glass bead */
.glass-cursor {
  width: 26px; height: 26px;
  -webkit-backdrop-filter: blur(2px) saturate(1.7) brightness(1.08);
  backdrop-filter: blur(2px) saturate(1.7) brightness(1.08);
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,0.55), transparent 42%),
    radial-gradient(circle at 50% 50%, transparent 48%, var(--cursor-tint) 78%, transparent 100%);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.45),
    inset 0 -2px 6px var(--glass-edge),
    0 4px 14px rgba(24,23,15,0.18);
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

/* outer trailing ring — the elegant follow */
.glass-cursor__trail {
  width: 46px; height: 46px;
  border: 1.5px solid var(--cursor-ring);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cursor-ring) 35%, transparent);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

.glass-cursor.is-active,
.glass-cursor__trail.is-active { opacity: 1; }

/* hover state over interactive elements — the bead blooms + zooms */
.glass-cursor.is-hot {
  width: 44px; height: 44px;
  -webkit-backdrop-filter: blur(3px) saturate(2) brightness(1.14);
  backdrop-filter: blur(3px) saturate(2) brightness(1.14);
  border-color: color-mix(in srgb, var(--spark) 70%, transparent);
}
.glass-cursor__trail.is-hot {
  width: 64px; height: 64px;
  border-color: color-mix(in srgb, var(--spark) 60%, transparent);
  background: var(--cursor-hot);
}

/* pressed state — a quick refractive pinch */
.glass-cursor.is-down { width: 20px; height: 20px; }
.glass-cursor__trail.is-down { width: 38px; height: 38px; }

/* hide the native cursor only when our glass cursor is live */
html.has-glass-cursor,
html.has-glass-cursor a,
html.has-glass-cursor button,
html.has-glass-cursor [role="button"],
html.has-glass-cursor .btn,
html.has-glass-cursor input,
html.has-glass-cursor summary { cursor: none; }

/* retire the old simple cursor from main.js when glass cursor is on */
html.has-glass-cursor .cursor-glow { display: none !important; }

/* ------------------------------------------------------------------ *
   5. FILM-OVER-GLASS REFRACTION SWEEP on cards (subtle moving highlight)
 * ------------------------------------------------------------------ */
.tile, .work-card, .archive-card { position: relative; }
.tile::after,
.work-card::after,
.archive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%);
  background-size: 220% 100%;
  background-position: var(--sheen, 120%) 0;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.tile:hover::after,
.work-card:hover::after,
.archive-card:hover::after { opacity: 1; }

/* ------------------------------------------------------------------ *
   6. FALLBACKS & RESPONSIVE GUARDRAILS
 * ------------------------------------------------------------------ */

/* No backdrop-filter support → solid frosted panels (still on-brand) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg:        color-mix(in srgb, var(--paper-2) 94%, transparent);
    --glass-bg-strong: var(--paper-2);
    --glass-bg-soft:   color-mix(in srgb, var(--paper-2) 88%, transparent);
  }
  .glass-cursor { background: var(--cursor-tint); }
}

/* Phones: dial back blur radius for paint performance; smaller cursor off */
@media (max-width: 640px) {
  :root { --glass-blur: 12px; }
}

/* Coarse pointers never get the custom cursor (handled in JS too) */
@media (hover: none), (pointer: coarse) {
  .glass-cursor, .glass-cursor__trail { display: none !important; }
  html.has-glass-cursor, html.has-glass-cursor * { cursor: auto; }
}

/* Reduced motion: kill aurora drift + sheen; keep static glass depth */
@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none !important; }
  .tile::after, .work-card::after, .archive-card::after { display: none; }
  .glass-cursor, .glass-cursor__trail { transition: opacity .2s linear !important; }
}

/* Print: no glass, no aurora */
@media print {
  .aurora, .glass-cursor, .glass-cursor__trail { display: none !important; }
}