:root {
  --bg: #eceef5;
  --fg: #14141c;
  --blob-1: #ff8a4c;
  --blob-2: #7c5cff;
  --blob-3: #22c7c7;
  --glass-top: rgba(255, 255, 255, 0.55);
  --glass-bottom: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --shadow: rgba(30, 30, 60, 0.18);
  --ai-1: #ff6a2b;
  --ai-2: #6a3dff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08080d;
    --fg: #f4f4f8;
    --blob-1: #ff5f1f;
    --blob-2: #6a3dff;
    --blob-3: #00a8b5;
    --glass-top: rgba(255, 255, 255, 0.14);
    --glass-bottom: rgba(255, 255, 255, 0.03);
    --glass-edge: rgba(255, 255, 255, 0.22);
    --shadow: rgba(0, 0, 0, 0.5);
    --ai-1: #ffb27f;
    --ai-2: #d2b6ff;
  }
}

* { box-sizing: border-box; margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Drifting color behind the glass */
.blobs {
  position: fixed;
  inset: 0;
  filter: blur(70px);
  opacity: 0.85;
}
.blobs i {
  position: absolute;
  width: 42vmax;
  height: 42vmax;
  border-radius: 50%;
  animation: drift 22s ease-in-out infinite alternate;
}
.blobs i:nth-child(1) { background: var(--blob-1); top: 8%;  left: 12%; }
.blobs i:nth-child(2) { background: var(--blob-2); top: 38%; left: 48%; animation-duration: 28s; animation-delay: -6s; }
.blobs i:nth-child(3) { background: var(--blob-3); top: 52%; left: 4%;  animation-duration: 34s; animation-delay: -12s; }

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(14vmax, -8vmax) scale(1.15); }
  100% { transform: translate(-6vmax, 10vmax) scale(0.9); }
}

/* The glass pane */
.glass {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 7vw, 4.5rem) clamp(1.75rem, 8vw, 5.5rem);
  border-radius: clamp(20px, 4vw, 36px);
  background: linear-gradient(135deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    0 30px 80px -20px var(--shadow),
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

/* Light sheen that sweeps across the glass */
.glass::after {
  content: "";
  position: absolute;
  inset: -50% -30%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-60%);
  animation: sheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sheen {
  0%, 55% { transform: translateX(-60%); }
  100%    { transform: translateX(60%); }
}

h1 {
  position: relative;
  font-size: clamp(2.5rem, 11vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
h1 span {
  background: linear-gradient(120deg, var(--ai-1), var(--ai-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .blobs i, .glass::after { animation: none; }
}