:root {
  color-scheme: dark;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glow-x: 50%;
  --glow-y: 48%;
  --pulse: 0;
  --ink: #f7f3e8;
  --gold: #d8b35a;
  --copper: #b46a43;
  --wine: #7c1f38;
  --aegis: #0a7f8f;
  --deep: #07090f;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at var(--glow-x) var(--glow-y),
      rgba(216, 179, 90, 0.28),
      rgba(180, 106, 67, 0.1) 18%,
      transparent 42%
    ),
    radial-gradient(circle at 18% 18%, rgba(10, 127, 143, 0.28), transparent 32%),
    radial-gradient(circle at 84% 74%, rgba(124, 31, 56, 0.34), transparent 34%),
    linear-gradient(145deg, #06070b 0%, #0b111d 45%, #160d17 100%);
  color: var(--ink);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

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

body::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

body::after {
  background:
    repeating-linear-gradient(
      108deg,
      transparent 0 17px,
      rgba(255, 255, 255, 0.035) 18px,
      transparent 20px
    ),
    radial-gradient(circle at center, transparent 0 44%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

.stage {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  perspective: 1000px;
  isolation: isolate;
}

.sigma-wrap {
  position: relative;
  display: grid;
  width: min(68vw, 620px);
  min-width: 240px;
  aspect-ratio: 1;
  place-items: center;
  transform:
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(calc(1 + var(--pulse) * 0.018));
  transform-style: preserve-3d;
  transition: transform 240ms ease-out;
}

.sigma-wrap::before,
.sigma-wrap::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  transform: translateZ(-90px);
}

.sigma-wrap::before {
  inset: 8%;
  background:
    conic-gradient(
      from 210deg,
      transparent,
      rgba(216, 179, 90, 0.65),
      transparent,
      rgba(10, 127, 143, 0.42),
      transparent,
      rgba(124, 31, 56, 0.45),
      transparent
    );
  filter: blur(28px);
  opacity: 0.56;
  animation: halo-turn 18s linear infinite;
}

.sigma-wrap::after {
  inset: 18%;
  border: 1px solid rgba(247, 243, 232, 0.16);
  box-shadow:
    0 0 0 24px rgba(216, 179, 90, 0.025),
    0 0 92px rgba(10, 127, 143, 0.22),
    inset 0 0 66px rgba(255, 255, 255, 0.035);
}

.sigma,
.sigma-shadow {
  grid-area: 1 / 1;
  font-size: clamp(13rem, 42vw, 31rem);
  font-weight: 900;
  line-height: 0.74;
  letter-spacing: 0;
  user-select: none;
}

.sigma-shadow {
  color: rgba(2, 3, 7, 0.74);
  filter: blur(10px);
  transform: translate3d(0.035em, 0.055em, -50px) scale(1.02);
}

.sigma {
  position: relative;
  background:
    radial-gradient(circle at 28% 22%, #fff9d7 0 8%, transparent 20%),
    linear-gradient(132deg, #fff8d0 6%, var(--gold) 31%, var(--copper) 55%, #f2d48c 78%);
  filter:
    drop-shadow(0 0 16px rgba(216, 179, 90, 0.4))
    drop-shadow(0 26px 42px rgba(0, 0, 0, 0.5));
  transform: translateZ(64px);
  animation: breathe 5.8s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sigma::before,
.sigma::after {
  position: absolute;
  inset: 0;
  content: attr(data-letter);
  pointer-events: none;
}

.sigma::before {
  color: transparent;
  -webkit-text-stroke: clamp(2px, 0.45vw, 5px) rgba(255, 247, 207, 0.8);
  mix-blend-mode: screen;
  opacity: 0.5;
}

.sigma::after {
  background:
    linear-gradient(100deg, transparent 8%, rgba(255, 255, 255, 0.86) 46%, transparent 62%);
  background-size: 220% 100%;
  filter: blur(0.4px);
  opacity: 0.46;
  animation: glint 4.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes breathe {
  0%,
  100% {
    transform: translateZ(64px) scale(1);
  }

  50% {
    transform: translateZ(74px) scale(1.018);
  }
}

@keyframes halo-turn {
  to {
    transform: translateZ(-90px) rotate(1turn);
  }
}

@keyframes glint {
  0%,
  36% {
    background-position: 140% 0;
  }

  72%,
  100% {
    background-position: -110% 0;
  }
}

@media (max-width: 560px) {
  .sigma-wrap {
    width: min(88vw, 440px);
  }

  .sigma,
  .sigma-shadow {
    font-size: clamp(11rem, 64vw, 22rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}