*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: #fafafa;
  overflow: hidden;
}

:root {
  --lx: 50%;
  --ly: 50%;
}

#scene {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at var(--lx) var(--ly),
    #0b1825 0%,
    #060c14 50%,
    #020508 100%
  );
  overflow: hidden;
  transition: background 0.05s linear;
}

/* ── Crystal shard ─────────────────────────────────────────────────────────── */
.shard {
  position: absolute;
  transform-origin: center bottom;
  will-change: filter;
  transition: filter 0.12s ease-out;
}

.shard-face {
  width: 100%;
  height: 100%;
  clip-path: var(--shape);
  background: linear-gradient(
    calc(var(--ang, 140) * 1deg),
    hsla(var(--hue), 90%, 88%, 0.55),
    hsla(var(--hue), 78%, 58%, 0.68) 40%,
    hsla(calc(var(--hue) + 28), 65%, 30%, 0.88) 100%
  );
  position: relative;
}

.shard-face::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--shape);
  background: linear-gradient(
    calc(var(--ang, 140) * 1deg + 90deg),
    hsla(var(--hue), 100%, 98%, 0.25) 0%,
    transparent 35%
  );
  mix-blend-mode: screen;
  animation: shimmer var(--dur, 5s) ease-in-out infinite var(--delay, 0s);
}

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1.0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px)   rotate(var(--rot)); }
  50%       { transform: translateY(-10px) rotate(calc(var(--rot) + 1deg)); }
}

/* ── Ambient glow particles ────────────────────────────────────────────────── */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.dust {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--dc) 0%, transparent 70%);
  animation: drift var(--dd, 12s) ease-in-out infinite var(--dly, 0s);
  opacity: 0;
}

@keyframes drift {
  0%   { transform: translate(0, 0)          scale(0); opacity: 0; }
  15%  { opacity: 0.55; }
  85%  { opacity: 0.3; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.5); opacity: 0; }
}

/* ── Hint ──────────────────────────────────────────────────────────────────── */
.hint {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 0.08em;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}