@font-face { font-family: Stone; src: url(/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: block; }
:root { color-scheme: dark; background: #06030b; color: #d9c6ff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #06030b; touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; }
#field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
main {
  position: relative; min-height: 100svh; display: grid; place-items: center; align-content: center;
  gap: clamp(10px, 2vh, 22px); padding: 24px 16px; pointer-events: none;
}
.orb { position: relative; width: clamp(120px, 20vmin, 200px); aspect-ratio: 1; display: grid; place-items: center; }
.orb::before { content: ""; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, #9b5cff40, #3a1d7a14 42%, transparent 66%); animation: breathe 6s ease-in-out infinite; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #b59bff26; }
.ring.a { border-top-color: #cdb6ffaa; border-right-color: transparent; animation: spin 16s linear infinite; }
.ring.c { inset: -12%; border: 0; background: conic-gradient(transparent 0 82%, #7ff3ff77 90%, transparent 92%); -webkit-mask: radial-gradient(circle, transparent 69.5%, #000 70% 70.6%, transparent 71%); mask: radial-gradient(circle, transparent 69.5%, #000 70% 70.6%, transparent 71%); animation: spin 5s linear infinite; }
.crystal { width: 48%; filter: drop-shadow(0 0 18px #9b5cff88) drop-shadow(0 0 2px #e6d4ff99); animation: float 8s ease-in-out infinite; }

h1 {
  position: relative; margin: 0; text-align: center;
  font: 700 clamp(40px, 9vw, 112px)/1 Stone, Georgia, serif; letter-spacing: .22em; padding-left: .22em;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 26px #9b5cff66);
}
h1 span, h1::before, h1::after {
  background: linear-gradient(170deg, #f4ebff 0%, #c9a8ff 28%, #7b4bd6 52%, #c9a8ff 70%, #8ff6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1 span { display: block; clip-path: polygon(0 0, 100% 0, 100% 38%, 71% 47%, 58% 41%, 44% 55%, 29% 49%, 12% 60%, 0 54%); }
h1::before, h1::after { content: attr(data-t); position: absolute; inset: 0; padding-left: .22em; }
h1::before { clip-path: polygon(0 54%, 12% 60%, 29% 49%, 44% 55%, 58% 41%, 71% 47%, 100% 38%, 100% 100%, 0 100%); transform: translate(.035em, .05em) rotate(.4deg); animation: shift 7s steps(1) infinite; }
h1::after {
  background: none; color: transparent; -webkit-text-stroke: 0; clip-path: polygon(0 53%, 12% 59%, 29% 48%, 44% 54%, 58% 40%, 71% 46%, 100% 37%, 100% 40%, 71% 49%, 58% 43%, 44% 57%, 29% 51%, 12% 62%, 0 56%);
  text-shadow: 0 0 6px #7ff3ff, 0 0 18px #7ff3ffaa; color: #bffaff; opacity: .85; animation: vein 3.5s ease-in-out infinite;
}

p { margin: 0; font: 500 clamp(11px, 1.35vw, 14px)/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; color: #9fefffd8; text-shadow: 0 0 14px #7ff3ff77; animation: rise 2s ease .8s both; text-align: center; }
footer { position: fixed; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); text-align: center; font: 10px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .35em; text-transform: uppercase; color: #8d76b866; pointer-events: none; padding: 0 16px; }

body.open h1 { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 40px #b07cffcc); }
body.open p { color: #fff; text-shadow: 0 0 18px #b07cff; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes float { 0%, 100% { transform: translateY(-4%); } 50% { transform: translateY(4%); } }
@keyframes rise { from { opacity: 0; filter: blur(8px); } }
@keyframes vein { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes shift { 0%, 92%, 100% { transform: translate(.035em, .05em) rotate(.4deg); } 93% { transform: translate(-.06em, .07em) rotate(-.3deg); } 95% { transform: translate(.09em, .04em) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }
@media (forced-colors: active) { h1 span { background: none; color: CanvasText; clip-path: none; } h1::before, h1::after, .orb, #field { display: none; } }
@media (max-width: 600px) {
  h1 { letter-spacing: .12em; padding-left: .12em; font-size: 13vw; }
  h1::before, h1::after { padding-left: .12em; }
  footer { letter-spacing: .18em; font-size: 9px; }
}