@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,500;9..40,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  color-scheme: dark;
  --ink: #f1efe9;
  --muted: #85848e;
  --violet: #a48cff;
  --violet-deep: #4d37d2;
  --safe-x: clamp(24px, 4.45vw, 72px);
  --safe-y: clamp(24px, 4.45vh, 44px);
  --orbX: 0px;
  --orbY: 0px;
  --textX: 0px;
  --textY: 0px;
  --gridX: 0px;
  --gridY: 0px;
  --glowX: 0px;
  --glowY: 0px;
  --numberX: 0px;
  --numberY: 0px;
  --pointer-x: 68vw;
  --pointer-y: 42vh;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body { margin: 0; min-width: 320px; min-height: 100%; }

body {
  background: #050506;
  color: var(--ink);
  font-family: 'DM Sans', Arial, sans-serif;
  overflow: hidden;
}

.scene {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 73% 42%, rgba(67, 48, 150, .12), transparent 28%),
    linear-gradient(135deg, #050506 0%, #060608 48%, #050506 100%);
}

.scene__grid {
  position: absolute;
  z-index: -5;
  inset: -8%;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: clamp(112px, 12vw, 190px) 100%, 100% clamp(112px, 12vw, 190px);
  mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%);
  transform: translate3d(var(--gridX), var(--gridY), 0);
  will-change: transform;
}

.scene__aurora {
  position: absolute;
  z-index: -6;
  top: -22vw;
  right: -14vw;
  width: 60vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116,91,255,.24), rgba(71,48,201,.1) 30%, transparent 68%);
  filter: blur(20px);
  transform: translate3d(var(--glowX), var(--glowY), 0);
  will-change: transform;
}

.scene__spotlight {
  position: absolute;
  z-index: -3;
  width: 30rem;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(157,139,255,.08), transparent 67%);
  transform: translate3d(calc(var(--pointer-x) - 15rem), calc(var(--pointer-y) - 15rem), 0);
  will-change: transform;
}

.scene__grain {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: .19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.masthead,
.footer {
  position: absolute;
  z-index: 10;
  right: var(--safe-x);
  left: var(--safe-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.masthead { top: var(--safe-y); }

.brand { display: flex; align-items: center; gap: .04em; }
.brand span { color: var(--violet); font-weight: 700; }
.brand i { margin: 0 .6rem; color: #494852; font-style: normal; font-weight: 300; }

.status { display: flex; align-items: center; gap: .7rem; margin: 0; color: #a3a1aa; }
.status span {
  width: .45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 1.2rem var(--violet);
  animation: statusPulse 3.4s ease-in-out infinite;
}

.frame-line {
  position: absolute;
  z-index: 7;
  right: var(--safe-x);
  left: var(--safe-x);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.07) 75%, rgba(255,255,255,.16));
  transform: scaleX(0);
  transform-origin: left;
  animation: ruleIn 1.2s cubic-bezier(.2,.7,.2,1) .1s forwards;
}

.frame-line--top { top: clamp(72px, 10.6vh, 104px); }
.frame-line--bottom { bottom: clamp(78px, 10.8vh, 106px); }

.hero {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: clamp(40px, 7.55vw, 122px);
  width: min(60vw, 780px);
  transform: translate3d(var(--textX), calc(-50% + var(--textY)), 0);
  will-change: transform;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(24px, 3vh, 32px);
  color: #898893;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .25s forwards;
}

.hero__eyebrow::before { content: ''; width: 2.25rem; height: 1px; background: var(--violet); }

h1 { margin: 0; font-weight: 700; letter-spacing: -.088em; line-height: .72; text-transform: uppercase; }
h1 span,
h1 em { display: block; opacity: 0; animation: titleIn 1.1s cubic-bezier(.16,.8,.22,1) forwards; }
h1 span { font-size: clamp(5rem, 10.5vw, 10.7rem); animation-delay: .18s; }
h1 em {
  margin-left: clamp(3rem, 10vw, 10rem);
  color: #b6a8ff;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(5.25rem, 10.8vw, 11rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.09em;
  text-shadow: 0 0 3rem rgba(114,89,255,.14);
  text-transform: none;
  animation-delay: .3s;
}

.hero__copy {
  width: 15.5rem;
  margin: clamp(30px, 4vh, 44px) 0 0 .55rem;
  color: #85848d;
  font-size: .75rem;
  line-height: 1.72;
  opacity: 0;
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .55s forwards;
}

.hero__copy strong { color: #e5e0ff; font-weight: 500; }

.artifact {
  position: absolute;
  z-index: 2;
  top: 48%;
  right: clamp(40px, 8.4vw, 136px);
  width: clamp(260px, 30vw, 490px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate3d(var(--orbX), calc(-50% + var(--orbY)), 0);
  animation: artifactIn 1.5s cubic-bezier(.16,.8,.22,1) .3s forwards;
  will-change: transform;
}

.artifact__field,
.artifact__orb,
.artifact__orbit { position: absolute; border-radius: 50%; }

.artifact__field {
  inset: -8%;
  background: radial-gradient(circle, rgba(92,67,255,.12), transparent 63%);
  filter: blur(12px);
  animation: fieldBreathe 7s ease-in-out infinite;
}

.artifact__orb {
  inset: 10%;
  background:
    radial-gradient(circle at 31% 25%, #fff 0 1.5%, #e3e5ff 3%, #a49cff 9%, #604ce6 21%, #2a187e 39%, #0b0917 61%, #020204 77%);
  box-shadow:
    -2.2rem 2.8rem 6.5rem rgba(93,66,255,.3),
    inset -1.6rem -1.6rem 3rem #000,
    inset 1.15rem 1rem 2.2rem rgba(255,255,255,.16);
  animation: orbBreathe 7s ease-in-out infinite;
}

.artifact__orb::after {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset .4rem .25rem .8rem rgba(255,255,255,.08);
}

.artifact__orbit { border: 1px solid rgba(193,180,255,.18); }
.artifact__orbit--outer { inset: -15%; transform: rotateX(65deg) rotateZ(-18deg); animation: orbitOuter 18s linear infinite; }
.artifact__orbit--inner { inset: -1%; border-color: rgba(119,96,255,.28); transform: rotateY(66deg) rotateZ(32deg); animation: orbitInner 13s linear infinite reverse; }

.artifact__satellite {
  position: absolute;
  z-index: 3;
  top: 20%;
  right: 0;
  width: .5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #c3b6ff;
  box-shadow: 0 0 1.2rem #ad98ff;
  animation: satelliteDrift 8s ease-in-out infinite;
}

.artifact__flare {
  position: absolute;
  z-index: 3;
  top: 24%;
  left: 26%;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 .7rem .25rem rgba(220,220,255,.45), 0 0 2rem .65rem rgba(130,100,255,.2);
  animation: flare 5s ease-in-out infinite;
}

.edition {
  position: absolute;
  z-index: 0;
  right: 3.8vw;
  bottom: 10.4vh;
  color: rgba(255,255,255,.027);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(6rem, 11vw, 11rem);
  font-style: italic;
  letter-spacing: -.08em;
  transform: translate3d(var(--numberX), var(--numberY), 0);
  will-change: transform;
}

.pointer-hint {
  position: absolute;
  z-index: 8;
  top: 14vh;
  right: var(--safe-x);
  margin: 0;
  color: #5f5e68;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.footer { bottom: var(--safe-y); color: #73727c; }
.footer p { margin: 0; }
.coordinates { color: #85838f; font-variant-numeric: tabular-nums; }

@keyframes ruleIn { to { transform: scaleX(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes titleIn { from { opacity: 0; transform: translateY(48px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes artifactIn { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes statusPulse { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes orbBreathe { 0%,100% { scale: 1; } 50% { scale: 1.018; } }
@keyframes fieldBreathe { 0%,100% { scale: .96; opacity: .55; } 50% { scale: 1.08; opacity: 1; } }
@keyframes orbitOuter { to { transform: rotateX(65deg) rotateZ(342deg); } }
@keyframes orbitInner { to { transform: rotateY(66deg) rotateZ(392deg); } }
@keyframes satelliteDrift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-1.8rem,1.25rem); } }
@keyframes flare { 0%,100% { opacity: .4; scale: .8; } 50% { opacity: 1; scale: 1.3; } }

@media (max-width: 780px) {
  :root { --safe-x: max(24px, env(safe-area-inset-left)); --safe-y: max(24px, env(safe-area-inset-top)); }
  .masthead { align-items: flex-start; }
  .status { max-width: 8.5rem; justify-content: flex-end; line-height: 1.45; text-align: right; }
  .frame-line--top { top: 76px; }
  .frame-line--bottom { bottom: 74px; }
  .hero { top: 39%; left: max(28px, 7vw); width: 90vw; }
  .hero__eyebrow { margin-bottom: 1.7rem; font-size: .5rem; letter-spacing: .2em; }
  h1 span { font-size: clamp(4.5rem, 20.5vw, 6.4rem); }
  h1 em { margin-left: 9vw; font-size: clamp(4.8rem, 23vw, 6.7rem); }
  .hero__copy { width: min(15.5rem, 68vw); margin-top: 2rem; font-size: .7rem; }
  .artifact { top: 78%; right: -23vw; width: 72vw; opacity: .82; }
  .edition { right: auto; bottom: 4vh; left: -4vw; }
  .pointer-hint,
  .coordinates { display: none; }
  .footer { font-size: .5rem; letter-spacing: .13em; }
  .footer p:first-child { display: none; }
  .scene__grid { background-size: 35vw 100%, 100% 24vw; opacity: .8; }
}

@media (max-height: 680px) and (min-width: 781px) {
  .hero__eyebrow { margin-bottom: 1rem; }
  .hero__copy { margin-top: 1.5rem; }
  h1 span,
  h1 em { font-size: min(9.5rem, 20vh); }
  .artifact { width: min(30vw, 60vh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .hero__eyebrow,
  h1 span,
  h1 em,
  .hero__copy,
  .artifact { opacity: 1; filter: none; }
  .frame-line { transform: scaleX(1); }
  .pointer-hint { display: none; }
  .scene__spotlight { transform: translate3d(calc(68vw - 15rem), calc(42vh - 15rem), 0); }
}