/* HyperGlass Theme CSS — drop-in stylesheet
   Usage: <link rel="stylesheet" href="hyperglass-theme.css" />
   This applies a glossy, glassmorphism + HyperOS-like look to body, cards,
   inputs, buttons, and links with sensible defaults.
*/

/* =============================
   CSS Variables (theme tokens)
   ============================= */
:root {
  /* Brand / accent */
  --hg-accent-1: #0071e3; /* blue */
  --hg-accent-2: #7c3aed; /* purple */
  --hg-accent-3: #34a853; /* green */
  --hg-accent-4: #ea4335; /* red */
  --hg-accent-5: #fbbc05; /* yellow */

  /* Text */
  --hg-text: #e6e6f0;
  --hg-text-muted: #b8b8c7;

  /* Surfaces */
  --hg-surface: rgba(255, 255, 255, 0.06);
  --hg-surface-hover: rgba(255, 255, 255, 0.1);
  --hg-border: rgba(255, 255, 255, 0.14);
  --hg-border-hover: rgba(255, 255, 255, 0.22);

  /* Effects */
  --hg-blur: 20px;
  --hg-saturation: 160%;
  --hg-radius: 20px;
  --hg-shadow: 0 8px 32px rgba(31, 38, 135, 0.18);
  --hg-shadow-hover: 0 12px 36px rgba(31, 38, 135, 0.25);

  /* Focus */
  --hg-focus: 0 0 0 3px color-mix(in oklab, var(--hg-accent-1) 40%, transparent);

  /* Layout */
  --hg-content-max: 1200px;

  /* Gradient background */
  --hg-bg-from: #120a1a;
  --hg-bg-via: #2a145c;
  --hg-bg-to: #3a1d6f;
}

/* =================================
   Global Background + Grid Overlay
   ================================= */
html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--hg-text);
  background: linear-gradient(135deg, var(--hg-bg-from), var(--hg-bg-via), var(--hg-bg-to));
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: hg-bg-move 30s ease infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle animated grid overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(150% 150% at 50% 50%, black 55%, transparent 100%);
}

/* =================
   Keyframe Effects
   ================= */
@keyframes hg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

@keyframes hg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes hg-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes hg-bg-move {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes hg-shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* ================
   Utility Classes
   ================ */
.hg-gradient-text {
  background: linear-gradient(90deg, var(--hg-accent-1), var(--hg-accent-3), var(--hg-accent-5), var(--hg-accent-4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 300% 300%;
  animation: hg-gradient 8s ease infinite;
}

.hg-floating { animation: hg-float 4s ease-in-out infinite; }
.hg-pulse    { animation: hg-pulse 2s ease-in-out infinite; }

/* =====================
   Glassy Surface Blocks
   ===================== */
.glass-morphism, .hg-card {
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  backdrop-filter: blur(var(--hg-blur)) saturate(var(--hg-saturation));
  -webkit-backdrop-filter: blur(var(--hg-blur)) saturate(var(--hg-saturation));
  border-radius: var(--hg-radius);
  border: 1px solid var(--hg-border);
  box-shadow: var(--hg-shadow);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.glass-morphism:hover, .hg-card:hover {
  background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  border-color: var(--hg-border-hover);
  box-shadow: var(--hg-shadow-hover);
}

/* Optional diagonal liquid shine */
.hg-liquid {
  position: relative;
  overflow: hidden;
}
.hg-liquid::before {
  content: "";
  position: absolute; inset: -35% -35% auto auto;
  width: 140%; height: 140%;
  background: linear-gradient(45deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.07) 100%);
  transform: rotate(45deg);
  animation: hg-shine 10s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

/* =====================
   Typography & Headings
   ===================== */
:where(h1,h2,h3,h4,h5,h6) { color: var(--hg-text); margin: 0 0 0.5em; }
:where(p, small, label, span) { color: var(--hg-text); }
.muted { color: var(--hg-text-muted); }

/* =======================
   Forms — Inputs & Selects
   ======================= */
:where(input[type="text"],input[type="email"],input[type="password"],input[type="search"],input[type="url"],input[type="number"],select,textarea) {
  width: 100%;
  padding: 0.75rem 0.875rem;
  color: var(--hg-text);
  background: var(--hg-surface);
  border: 1px solid var(--hg-border);
  border-radius: 12px;
  outline: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:where(input, select, textarea)::placeholder { color: color-mix(in oklab, var(--hg-text-muted) 80%, transparent); }

:where(input, select, textarea):hover {
  border-color: var(--hg-border-hover);
  background: var(--hg-surface-hover);
}

:where(input, select, textarea):focus {
  border-color: color-mix(in oklab, var(--hg-accent-1) 60%, white 0%);
  box-shadow: var(--hg-focus);
}

/* Checkbox & radio (modern browsers) */
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--hg-accent-1);
}

/* =======================
   Buttons (primary & ghost)
   ======================= */
button, .btn, input[type="submit"], input[type="button"] {
  --_from: var(--hg-accent-1);
  --_to:   var(--hg-accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hg-border);
  color: #fff;
  background: linear-gradient(to right, var(--_from), var(--_to));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

button:hover, .btn:hover, input[type="submit"]:hover, input[type="button"]:hover {
  transform: translateY(-1.5px);
  border-color: var(--hg-border-hover);
  filter: brightness(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

button:active, .btn:active, input[type="submit"]:active, input[type="button"]:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}

/* Ghost / secondary button */
.btn-ghost {
  color: var(--hg-text);
  background: var(--hg-surface);
  border: 1px solid var(--hg-border);
}
.btn-ghost:hover { background: var(--hg-surface-hover); }

/* Button color helpers */
.btn-blue   { --_from: #2563eb; --_to: #7c3aed; }
.btn-green  { --_from: #22c55e; --_to: #16a34a; }
.btn-purple { --_from: #7c3aed; --_to: #a855f7; }

/* Icon inside inputs (Font Awesome support) */
.input-with-icon { position: relative; }
.input-with-icon > i {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: color-mix(in oklab, var(--hg-text-muted) 85%, transparent);
  pointer-events: none;
}
.input-with-icon > input { padding-left: 2.5rem; }
.input-with-icon > input:focus ~ i { color: var(--hg-accent-1); }

/* =====================
   Links & Inline Actions
   ===================== */
:where(a) {
  color: color-mix(in oklab, var(--hg-accent-1) 85%, white 0%);
  text-decoration: none;
  transition: color 0.15s ease;
}
:where(a:hover) { color: color-mix(in oklab, var(--hg-accent-1) 100%, white 0%); text-decoration: underline; }

/* =====================
   Simple Layout Helpers
   ===================== */
.container {
  width: min(100% - 2rem, var(--hg-content-max));
  margin-inline: auto;
}
.center-screen {
  min-height: 100dvh; display: grid; place-items: center; padding: 1rem;
}

/* =====================
   Cards & Dividers
   ===================== */
.hg-card { padding: 1.25rem; }
.hg-card .hg-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  margin: 1rem 0;
}

/* =====================
   Ripple Effect (for JS)
   ===================== */
.ripple-effect {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: hg-ripple 700ms ease-out forwards;
  pointer-events: none;
}
@keyframes hg-ripple {
  from { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0;   transform: translate(-50%,-50%) scale(26); }
}

/* =====================
   Accessibility Modes
   ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================
   Ready-to-use Composition
   ===================== */
.hg-login {
  width: min(100%, 420px);
}
.hg-avatar {
  width: 96px; height: 96px; border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; font-size: 2rem;
  background: linear-gradient(135deg, var(--hg-accent-1), var(--hg-accent-2));
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Optional helper to add soft colored blobs in corners */
.blob {
  position: fixed; filter: blur(28px); opacity: 0.18; z-index: -1;
  border-radius: 999px; pointer-events: none;
}
.blob.blue   { background: #3b82f6; width: 120px; height: 120px; top: 12%; left: 18%; }
.blob.purple { background: #8b5cf6; width: 160px; height: 160px; bottom: 14%; right: 12%; }

/* =====================================
   HG SELECT — Custom glass dropdown (iOS-style)
   ===================================== */
.hg-select { position: relative; isolation: isolate; overflow: visible; }
.hg-select * { box-sizing: border-box; }

.hg-select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 16px; color: var(--hg-text);
  background: var(--hg-surface); border: 1px solid var(--hg-border);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: border-color .2s, background .2s, box-shadow .2s, filter .2s; outline: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.hg-select-btn:hover { background: var(--hg-surface-hover); border-color: var(--hg-border-hover); filter: brightness(1.03); }
.hg-select-btn:focus-visible { box-shadow: var(--hg-focus); border-color: color-mix(in oklab, var(--hg-accent-1) 60%, white 0%); }
.hg-select-icon { opacity: .95; }

.hg-select-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  display: none; z-index: 999; transform: translateZ(0);
  background: linear-gradient(to bottom, rgba(255,255,255,.11), rgba(255,255,255,.06));
  border: 1px solid var(--hg-border); border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.32);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: 6px; max-height: 280px; overflow: auto; -webkit-overflow-scrolling: touch;
}
.hg-select.open > .hg-select-list { display: block; }

.hg-option {
  padding: 12px 14px; border-radius: 12px; cursor: pointer; user-select: none; color: var(--hg-text);
}
.hg-option:hover,
.hg-option[aria-selected="true"],
.hg-option:focus { background: var(--hg-surface-hover); outline: none; }

.hg-pill { border-radius: 20px; background: var(--hg-surface); border: 1px solid var(--hg-border); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.hg-panel { border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid var(--hg-border); box-shadow: 0 12px 36px rgba(0,0,0,.25); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }

.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}