@property --turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  color-scheme: dark;
  --ink: #05020d;
  --cyan: #53f5ff;
  --violet: #7228ff;
  --amber: #ffbd4a;
  --pink: #ff3dbe;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: none;
}

.stage { position: relative; width: 100%; height: 100%; min-height: 100svh; isolation: isolate; overflow: hidden; }

.fallback-art, #dream {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover;
  transform: scale(1.02); filter: saturate(1.18) contrast(1.08); will-change: transform;
}

#dream { z-index: 1; }
.fallback-art { z-index: 0; animation: breathe 18s ease-in-out infinite alternate; }

.aurora {
  position: absolute; z-index: 2; inset: -35%; opacity: .74; mix-blend-mode: screen;
  background:
    conic-gradient(from var(--turn) at 52% 48%, transparent 0 12%, rgba(83,245,255,.25) 17%, transparent 24% 47%, rgba(255,61,190,.23) 53%, transparent 61% 78%, rgba(255,189,74,.2) 86%, transparent 93%),
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(114,40,255,.12) 27%, transparent 46%);
  filter: blur(38px) saturate(1.5);
  animation: aurora-spin 23s linear infinite;
}

.halo {
  position: absolute; z-index: 3; left: 50%; top: 50%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 0 32px rgba(83,245,255,.1), 0 0 55px rgba(114,40,255,.14);
  transform: translate(-50%, -50%) rotateX(67deg); mix-blend-mode: screen;
}

.halo-a { width: min(78vw, 980px); aspect-ratio: 1; animation: halo-a 13s ease-in-out infinite alternate; }
.halo-b { width: min(58vw, 730px); aspect-ratio: 1; border-style: dashed; opacity: .45; animation: halo-b 17s linear infinite; }

.seven-wrap {
  position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; perspective: 900px;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.seven {
  position: absolute; font-family: "Arial Black", Impact, Haettenschweiler, sans-serif; font-size: clamp(22rem, 72vh, 58rem);
  line-height: .73; letter-spacing: -.08em; transform: translateY(-2%) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transform-origin: 50% 55%; user-select: none; will-change: transform, filter;
}

.seven-shadow {
  color: rgba(4,0,18,.3); -webkit-text-stroke: 12px rgba(0,0,0,.32); filter: blur(15px);
  transform: translate(2.2%, 3%) scale(1.02); mix-blend-mode: multiply;
}

.seven-glass {
  color: rgba(255,255,255,.035); -webkit-text-stroke: clamp(2px,.32vw,6px) rgba(255,255,255,.72);
  text-shadow: 0 0 8px #fff, 0 0 28px var(--cyan), 0 0 85px rgba(114,40,255,.75), 16px 8px 0 rgba(255,61,190,.12), -12px -5px 0 rgba(83,245,255,.11);
  backdrop-filter: blur(1px); mix-blend-mode: screen; animation: seven-drift 8s ease-in-out infinite alternate;
}

.seven-light {
  color: transparent; -webkit-text-stroke: 1px rgba(255,226,166,.5); opacity: .8; mix-blend-mode: color-dodge;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 17px var(--amber));
  clip-path: polygon(0 0,100% 0,100% 28%,0 52%); animation: scan 6s ease-in-out infinite;
}

.orbit { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(82vmin, 900px); aspect-ratio: 1; transform: translate(-50%,-50%); animation: orbit-spin 27s linear infinite; pointer-events: none; }

.orbit i {
  --a: calc(var(--i) * 51.428deg); position: absolute; left: 50%; top: 50%; font: 700 clamp(.7rem, 1vw, 1rem)/1 monospace;
  color: rgba(255,255,255,.72); text-shadow: 0 0 12px var(--cyan); opacity: .58;
  transform: rotate(var(--a)) translateY(calc(-1 * min(39vmin, 430px))) rotate(calc(-1 * var(--a)));
}

.grain { position: absolute; z-index: 9; inset: -120%; opacity: .065; pointer-events: none; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); animation: grain .18s steps(2) infinite; }

.iris { position: absolute; z-index: 8; inset: 0; pointer-events: none; box-shadow: inset 0 0 14vw 5vw rgba(2,0,12,.72); background: radial-gradient(circle at 50% 48%, transparent 20%, rgba(4,1,15,.04) 50%, rgba(2,0,9,.38) 100%); }

.cursor { position: fixed; z-index: 20; left: 0; top: 0; width: 70px; height: 70px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; transform: translate(-50%,-50%); mix-blend-mode: difference; pointer-events: none; transition: width .2s, height .2s, opacity .3s; }
.cursor span { position: absolute; width: 4px; height: 4px; left: 50%; top: 50%; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes breathe { to { transform: scale(1.1) translate3d(-1.2%, .8%, 0); } }
@keyframes aurora-spin { to { --turn: 360deg; transform: rotate(360deg) scale(1.04); } }
@keyframes halo-a { from { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(-9deg) scale(.94); } to { transform: translate(-50%,-50%) rotateX(61deg) rotateZ(11deg) scale(1.07); } }
@keyframes halo-b { to { transform: translate(-50%,-50%) rotateX(67deg) rotateZ(360deg); } }
@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes seven-drift { from { filter: brightness(.9) saturate(1.1); } to { filter: brightness(1.3) saturate(1.65); } }
@keyframes scan { 0%,100% { clip-path: polygon(0 0,100% 0,100% 18%,0 43%); } 50% { clip-path: polygon(0 62%,100% 35%,100% 65%,0 88%); } }
@keyframes grain { 0% { transform: translate(10%,10%); } 25% { transform: translate(-5%,15%); } 50% { transform: translate(12%,-8%); } 75% { transform: translate(-12%,6%); } 100% { transform: translate(4%,-12%); } }

@media (max-width: 700px) {
  .seven { font-size: clamp(22rem, 78vh, 42rem); }
  .halo-a { width: 115vw; }
  .halo-b { width: 88vw; }
  .orbit { width: 108vmin; }
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  body { cursor: default; }
  .cursor { display: none; }
}