:root {
  color-scheme: dark;
  --accent: #ff2b61;
  --accent-hot: #ff5b82;
  --accent-rgb: 255, 43, 97;
  --accent-hot-rgb: 255, 91, 130;
  --drift-x: 0deg;
  --drift-y: 0deg;
  --landing-smoke-filter: none;
}

:root[data-accent="violet"] { --accent: #9754ff; --accent-hot: #b883ff; --accent-rgb: 151, 84, 255; --accent-hot-rgb: 184, 131, 255; --landing-smoke-filter: hue-rotate(278deg) saturate(1.08); }
:root[data-accent="blue"] { --accent: #2e77ff; --accent-hot: #67a2ff; --accent-rgb: 46, 119, 255; --accent-hot-rgb: 103, 162, 255; --landing-smoke-filter: hue-rotate(218deg) saturate(1.08); }
:root[data-accent="cyan"] { --accent: #00b8d9; --accent-hot: #4ee3ff; --accent-rgb: 0, 184, 217; --accent-hot-rgb: 78, 227, 255; --landing-smoke-filter: hue-rotate(178deg) saturate(.98); }
:root[data-accent="green"] { --accent: #1bc277; --accent-hot: #60e7a4; --accent-rgb: 27, 194, 119; --accent-hot-rgb: 96, 231, 164; --landing-smoke-filter: hue-rotate(118deg) saturate(.94); }
:root[data-accent="amber"] { --accent: #ff9d2e; --accent-hot: #ffc15c; --accent-rgb: 255, 157, 46; --accent-hot-rgb: 255, 193, 92; --landing-smoke-filter: hue-rotate(48deg) saturate(1.04); }
:root[data-accent="obsidian"] { --accent: #111318; --accent-hot: #aeb7c2; --accent-rgb: 86, 94, 105; --accent-hot-rgb: 174, 183, 194; --landing-smoke-filter: grayscale(1) saturate(0) brightness(.68) contrast(1.18); }

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020204;
}

body {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 49%, rgba(var(--accent-rgb), .105), transparent 25%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--accent-rgb), .055), transparent 48%),
    linear-gradient(145deg, #010103, #050409 52%, #010103);
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  z-index: -1;
  inset: -18%;
  background:
    conic-gradient(from 120deg at 50% 50%, transparent, rgba(var(--accent-rgb), .045), transparent 20%, rgba(204, 236, 255, .025), transparent 52%),
    radial-gradient(circle at 50% 50%, transparent 0 13%, rgba(var(--accent-rgb), .025) 28%, transparent 58%);
  filter: blur(28px);
  animation: atmosphere-turn 24s linear infinite;
}

body::after {
  z-index: 5;
  inset: 0;
  opacity: .16;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(204, 236, 255, .035) 4px),
    linear-gradient(90deg, rgba(var(--accent-rgb), .035), transparent 20% 80%, rgba(var(--accent-rgb), .035));
  mix-blend-mode: screen;
  animation: scanline-drift 8s linear infinite;
}

.logo-smoke-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .72;
}

.logo-smoke-stage[hidden] { display: none; }

.logo-smoke-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: var(--landing-smoke-filter);
  transition: filter .55s ease;
}

.logo-stage {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: center;
  perspective: 1000px;
}

.logo-stage::before {
  content: "";
  position: absolute;
  width: min(78vw, 850px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .025) 36%, transparent 67%);
  filter: blur(34px);
  animation: halo-breathe 5.4s ease-in-out infinite;
}

.logo-account-count {
  position: absolute;
  z-index: 2;
  top: max(28px, env(safe-area-inset-top));
  left: 50%;
  color: rgba(226, 235, 247, .68);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: clamp(13px, 1.2vw, 18px);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: .2em;
  line-height: 1;
  text-indent: .2em;
  text-shadow: 0 0 13px rgba(var(--accent-rgb), .58);
  transform: translateX(-50%);
  transition: opacity .4s ease, color .4s ease, text-shadow .4s ease;
}

.logo-account-count[hidden] { display: none; }

.logo-experience {
  position: relative;
  display: block;
  width: clamp(230px, 42vw, 560px);
  aspect-ratio: 1;
  outline: none;
  transform: rotateX(var(--drift-y)) rotateY(var(--drift-x));
  transform-style: preserve-3d;
  transition: transform 220ms ease-out;
}

.logo-experience::before,
.logo-experience::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/static/enough-e.svg") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

.logo-experience::before {
  filter:
    drop-shadow(7px 0 0 rgba(var(--accent-hot-rgb), .9))
    drop-shadow(0 0 15px rgba(var(--accent-rgb), .72));
}

.logo-experience::after {
  filter:
    drop-shadow(-7px 0 0 rgba(105, 231, 255, .72))
    drop-shadow(0 0 12px rgba(204, 236, 255, .58));
}

.logo-experience img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 7px var(--accent-hot))
    drop-shadow(0 0 24px rgba(var(--accent-rgb), .78))
    drop-shadow(0 0 72px rgba(var(--accent-rgb), .24));
  animation: logo-breathe 4.8s ease-in-out infinite, logo-flicker 9s linear infinite;
}

.logo-experience:is(:hover, :focus-visible) img {
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 10px var(--accent-hot))
    drop-shadow(0 0 32px rgba(var(--accent-rgb), .9))
    drop-shadow(0 0 95px rgba(var(--accent-rgb), .32));
}

.logo-experience:focus-visible {
  border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(204, 236, 255, .25);
}

.logo-experience.is-glitching::before {
  opacity: .78;
  animation: glitch-upper 260ms steps(2, jump-none) both;
}

.logo-experience.is-glitching::after {
  opacity: .68;
  animation: glitch-lower 310ms steps(2, jump-none) both;
}

.logo-experience.is-glitching img {
  animation: glitch-core 300ms steps(2, jump-none) both;
}

@keyframes atmosphere-turn {
  to { transform: rotate(1turn) scale(1.04); }
}

@keyframes scanline-drift {
  from { transform: translateY(-12px); }
  to { transform: translateY(12px); }
}

@keyframes halo-breathe {
  0%, 100% { opacity: .6; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes logo-breathe {
  0%, 100% { opacity: .9; transform: scale(.985) translateZ(0); }
  50% { opacity: 1; transform: scale(1.015) translateZ(24px); }
}

@keyframes logo-flicker {
  0%, 31%, 32%, 71%, 72%, 100% { visibility: visible; }
  31.4%, 71.35% { visibility: hidden; }
}

@keyframes glitch-core {
  0% { transform: translate(0); filter: drop-shadow(0 0 6px var(--accent-hot)) drop-shadow(0 0 28px rgba(var(--accent-rgb), .85)); }
  22% { transform: translate(-7px, 2px) skewX(-2deg); }
  44% { transform: translate(5px, -1px); }
  68% { transform: translate(-2px, 1px) skewX(1deg); }
  100% { transform: translate(0); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 24px rgba(var(--accent-rgb), .78)); }
}

@keyframes glitch-upper {
  0% { clip-path: inset(5% 0 71%); transform: translate(9px, -2px); }
  35% { clip-path: inset(32% 0 48%); transform: translate(-12px, 1px); }
  70% { clip-path: inset(15% 0 62%); transform: translate(6px, 0); }
  100% { clip-path: inset(47% 0 39%); transform: translate(0); }
}

@keyframes glitch-lower {
  0% { clip-path: inset(67% 0 9%); transform: translate(-9px, 1px); }
  38% { clip-path: inset(54% 0 23%); transform: translate(13px, -1px); }
  73% { clip-path: inset(78% 0 5%); transform: translate(-5px, 1px); }
  100% { clip-path: inset(42% 0 44%); transform: translate(0); }
}

@media (max-width: 620px) {
  .logo-account-count { top: max(22px, env(safe-area-inset-top)); }
  .logo-experience { width: min(74vw, 390px); }
  .logo-stage::before { width: 110vw; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .logo-stage::before,
  .logo-experience img,
  .logo-experience.is-glitching::before,
  .logo-experience.is-glitching::after,
  .logo-experience.is-glitching img {
    animation: none !important;
  }

  .logo-account-count { transition: none; }
  .logo-experience { transform: none; }
  .logo-smoke-stage canvas { transition: none; }
}