@font-face {
  font-family: "Georgian Caps";
  src: url("/assets/fonts/georgian-caps-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

@font-face {
  font-family: "FiraGO";
  src: url("/assets/fonts/firago-georgian-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

@font-face {
  font-family: "FiraGO";
  src: url("/assets/fonts/firago-georgian-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/assets/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --space: #040521;
  --space-2: #070926;
  --space-3: #0c0d3a;
  --copper: #ff4c29;
  --copper-2: #ff6441;
  --copper-light: #ffb59e;
  --copper-deep: #b8340f;
  --purple: #4d3f9f;
  --purple-2: #5a4bb8;
  --purple-3: #2b2468;
  --purple-line: rgba(170, 160, 255, 0.55);
  --lilac: #9e97e6;
  --yellow: #ffea29;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --subtle: rgba(255, 255, 255, 0.42);
  --display: "Georgian Caps", "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --sans: "FiraGO", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --numeric: "Unbounded", ui-sans-serif, system-ui, sans-serif;
  --gutter: 16px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--space);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: radial-gradient(120% 90% at 50% 38%, var(--space-3) 0%, var(--space-2) 45%, var(--space) 80%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
  border-radius: 4px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sky,
.burst {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sky {
  z-index: 0;
  animation: fade-in 1.4s ease-out both;
}

.burst {
  z-index: 50;
}

.nebula {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
}

.nebula::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(32% 28% at 30% 36%, rgba(110, 102, 191, 0.42), transparent 70%),
    radial-gradient(28% 26% at 72% 58%, rgba(255, 76, 41, 0.24), transparent 70%),
    radial-gradient(22% 20% at 62% 24%, rgba(255, 234, 41, 0.08), transparent 70%),
    radial-gradient(30% 24% at 50% 92%, rgba(77, 63, 159, 0.45), transparent 70%);
  filter: blur(24px);
  animation: nebula-in 3s ease-out both, nebula-drift 24s ease-in-out 3s infinite alternate;
}

@keyframes nebula-in {
  from {
    opacity: 0;
    transform: scale(1.3) rotate(-8deg);
  }
}

@keyframes nebula-drift {
  to {
    transform: scale(1.08) rotate(4deg);
  }
}

.scene {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vh, 48px) var(--gutter) 0;
  text-align: center;
}

.stage {
  --size: clamp(30px, 8vw, 56px);

  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 1000px);
  height: clamp(240px, min(80vw, 52vh), 480px);
  perspective: 900px;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84%;
  height: 26%;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--purple-line),
    0 0 40px rgba(110, 102, 191, 0.35),
    inset 0 0 30px rgba(110, 102, 191, 0.25);
  opacity: 0.6;
  transform: translate(-50%, -50%) rotate(-7deg);
  animation: ring-in 1.2s var(--ease-out) 0.5s both;
}

.ring::after {
  content: "";
  position: absolute;
  inset: -12% -4%;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(170, 160, 255, 0.18);
}

@keyframes ring-in {
  from {
    opacity: 0;
    scale: 0.4;
  }
}

.orbit {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glyph {
  --depth: 0.5;

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  opacity: calc(0.35 + var(--depth) * 0.65);
  filter: drop-shadow(0 0 calc(4px + var(--depth) * 14px) var(--glow));
}

.glyph i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fill);
  -webkit-mask: var(--shape) center / contain no-repeat;
  mask: var(--shape) center / contain no-repeat;
  animation: glyph-in 900ms var(--ease-spring) both, glyph-bob 3.4s ease-in-out infinite alternate;
}

.glyph:nth-child(1) i {
  animation-delay: 0.7s, -0.4s;
}

.glyph:nth-child(2) i {
  animation-delay: 0.8s, -1.6s;
}

.glyph:nth-child(3) i {
  animation-delay: 0.9s, -2.3s;
}

.glyph:nth-child(4) i {
  animation-delay: 1s, -0.9s;
}

.glyph:nth-child(5) i {
  animation-delay: 1.1s, -2.9s;
}

.glyph:nth-child(6) i {
  animation-delay: 1.2s, -1.2s;
}

.glyph .bolt {
  --shape: url("/assets/img/bolt.svg");
}

.glyph .coin {
  --shape: url("/assets/img/coin.svg");
}

.glyph .spark {
  --shape: url("/assets/img/spark.svg");
}

.glyph .ticket {
  --shape: url("/assets/img/ticket.svg");
}

.copper {
  --fill: linear-gradient(160deg, #ffb199, var(--copper) 70%);
  --glow: rgba(255, 76, 41, 0.75);
}

.gold {
  --fill: linear-gradient(160deg, #fff6b0, #ffc629 70%);
  --glow: rgba(255, 198, 41, 0.6);
}

.purple {
  --fill: linear-gradient(160deg, #d9d2ff, #6e66bf 70%);
  --glow: rgba(158, 151, 230, 0.75);
}

.white {
  --fill: linear-gradient(160deg, #ffffff, #b8bbe0 70%);
  --glow: rgba(220, 218, 255, 0.6);
}

@keyframes glyph-in {
  from {
    opacity: 0;
    scale: 0.2;
  }
}

@keyframes glyph-bob {
  from {
    rotate: -14deg;
  }

  to {
    rotate: 14deg;
  }
}

.logo {
  position: relative;
  z-index: 2;
  width: clamp(220px, 70vw, 560px);
  margin: 0;
  font-size: inherit;
  cursor: pointer;
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
}

.logo-pop {
  display: block;
  animation: logo-in 1s var(--ease-spring) 0.15s both;
}

.logo-pop.punch {
  animation: logo-punch 520ms var(--ease-spring);
}

.logo-float {
  position: relative;
  display: block;
  animation: logo-float 5s ease-in-out 1.2s infinite;
}

.logo img {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 24px 30px rgba(4, 5, 33, 0.7)) drop-shadow(0 0 26px rgba(255, 76, 41, 0.35));
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1.6;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 76, 41, 0.34), rgba(110, 102, 191, 0.2) 55%, transparent);
  translate: -50% -50%;
  animation: halo-pulse 2.4s ease-in-out infinite alternate;
}

.shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%) -200% 0 / 250% 100% no-repeat;
  -webkit-mask: url("/assets/img/logo-copper-600.webp") center / contain no-repeat;
  mask: url("/assets/img/logo-copper-600.webp") center / contain no-repeat;
  mix-blend-mode: overlay;
  animation: logo-shine 5.5s ease-in-out 1.4s infinite;
}

.flash {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: clamp(220px, 70vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 180, 150, 0.9), 0 0 60px rgba(255, 76, 41, 0.6), inset 0 0 60px rgba(255, 76, 41, 0.4);
  opacity: 0;
  pointer-events: none;
  translate: -50% -50%;
  animation: flash 1.1s var(--ease-out) 0.55s backwards;
}

@keyframes logo-in {
  from {
    opacity: 0;
    scale: 0.35;
    filter: blur(12px);
  }
}

@keyframes logo-punch {
  30% {
    scale: 1.12;
    rotate: -2deg;
  }

  60% {
    scale: 0.97;
    rotate: 1deg;
  }
}

@keyframes logo-float {
  50% {
    translate: 0 -8px;
  }
}

@keyframes logo-shine {
  0%,
  55% {
    background-position: 200% 0;
  }

  100% {
    background-position: -120% 0;
  }
}

@keyframes halo-pulse {
  from {
    scale: 0.85;
    opacity: 0.8;
  }

  to {
    scale: 1.1;
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: 0.9;
    scale: 0.2;
  }

  100% {
    opacity: 0;
    scale: 1.6;
  }
}

.headline {
  margin: clamp(4px, 2vh, 20px) 0 0;
  font-family: var(--display);
  font-size: clamp(64px, min(19vw, 14vh), 176px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
}

.letters {
  display: inline-flex;
}

.letters span {
  position: relative;
  display: inline-block;
  padding: 0.04em 0.01em 0.08em;
  color: var(--copper);
  text-shadow:
    0 3px 0 var(--copper-deep),
    0 6px 0 var(--purple),
    0 22px 40px rgba(255, 76, 41, 0.4);
  animation: letter-in 900ms var(--ease-spring) both;
}

.letters span::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  padding: inherit;
  background: linear-gradient(180deg, #ffd2c2 0%, var(--copper-2) 38%, var(--copper) 62%, #d9380f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.letters span:nth-child(1) {
  animation-delay: 0.95s;
}

.letters span:nth-child(2) {
  animation-delay: 1.05s;
}

.letters span:nth-child(3) {
  animation-delay: 1.15s;
}

.letters span:nth-child(4) {
  animation-delay: 1.25s;
}

@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateY(0.5em) rotateX(70deg) scale(0.8);
  }
}

.tease {
  max-width: 34ch;
  margin: clamp(10px, 2.2vh, 20px) 0 0;
  color: var(--muted);
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  animation: rise 900ms var(--ease-out) 1.55s both;
}

.tease b {
  color: var(--ink);
  font-weight: 600;
}

.joke {
  min-height: 1.5em;
  max-width: 28ch;
  margin: clamp(4px, 1.5vh, 16px) 0 0;
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 2px 24px rgba(255, 76, 41, 0.55);
  opacity: 0;
  transition: opacity 600ms ease;
}

.joke.show {
  opacity: 1;
  transition: none;
  animation: joke-pop 480ms var(--ease-spring);
}

@keyframes joke-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.94);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.ground {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: calc(clamp(16px, 4vh, 56px) - 120px);
  padding-top: 120px;
}

.ground::before,
.ground::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.ground::before {
  top: 138px;
  width: max(1500px, 170vw);
  height: 900px;
  background: linear-gradient(180deg, var(--purple-3) 0%, #151339 18%, var(--space) 42%);
  box-shadow:
    0 -1px 0 var(--purple-line),
    0 -24px 90px rgba(110, 102, 191, 0.4);
  translate: -50% 0;
  animation: rise 1.4s var(--ease-out) 0.4s both;
}

.ground::after {
  top: 164px;
  width: max(1300px, 150vw);
  height: 700px;
  border-top: 16px solid var(--purple);
  box-shadow: 0 -1px 0 var(--purple-line), inset 0 1px 0 rgba(170, 160, 255, 0.45);
  opacity: 0.8;
  translate: -46% 0;
  animation: rise 1.4s var(--ease-out) 0.55s both, ribbon-sway 13s ease-in-out 2s infinite alternate;
}

@keyframes ribbon-sway {
  to {
    transform: translateX(-3%) rotate(1.4deg);
  }
}

.tapes {
  position: relative;
  z-index: 1;
  height: clamp(80px, min(14vw, 15vh), 150px);
  animation: fade-in 1s ease-out 1.7s both;
}

.tape {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 120%;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(18px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.tape-front {
  z-index: 2;
  padding: clamp(10px, 1.3vw, 16px) 0;
  background: linear-gradient(180deg, var(--copper-2), var(--copper));
  color: var(--space);
  box-shadow: 0 16px 40px -10px rgba(255, 76, 41, 0.55);
  transform: translateY(-50%) rotate(-3deg);
}

.tape-back {
  padding: clamp(8px, 1vw, 12px) 0;
  background: var(--purple);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 var(--purple-line), inset 0 -1px 0 var(--purple-line);
  transform: translateY(-50%) rotate(2.6deg);
}

.track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tape 32s linear infinite;
}

.tape-back .track {
  animation-duration: 40s;
  animation-direction: reverse;
}

.track > * {
  flex: none;
  margin-right: 0.7em;
}

.track i {
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  -webkit-mask: url("/assets/img/spark.svg") center / contain no-repeat;
  mask: url("/assets/img/spark.svg") center / contain no-repeat;
}

.tape-front .track i {
  color: var(--space);
}

.tape-back .track i {
  color: var(--yellow);
}

@keyframes tape {
  to {
    transform: translateX(-50%);
  }
}

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 8px var(--gutter) max(20px, env(safe-area-inset-bottom));
  color: var(--subtle);
  font-size: 13px;
  animation: fade-in 1s ease-out 1.9s both;
}

.foot a {
  text-decoration: none;
  transition: color 160ms ease;
}

.foot a:hover {
  color: var(--ink);
}

.age {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  color: var(--muted);
  font-family: var(--numeric);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.lost .headline {
  font-family: var(--numeric);
  font-size: clamp(72px, 22vw, 200px);
  letter-spacing: -0.03em;
}

.lost .tease {
  animation-delay: 0.4s;
}

.lost .letters span:nth-child(1) {
  animation-delay: 0.1s;
}

.lost .letters span:nth-child(2) {
  animation-delay: 0.2s;
}

.lost .letters span:nth-child(3) {
  animation-delay: 0.3s;
}

.home {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 14px 24px;
  border-radius: 40px;
  background: linear-gradient(180deg, var(--copper-2), var(--copper));
  box-shadow: 0 14px 34px -10px rgba(255, 76, 41, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms var(--ease-spring), box-shadow 200ms ease;
  animation: rise 900ms var(--ease-out) 0.55s both;
}

.home:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -10px rgba(255, 76, 41, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.home svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 560px) {
  .tape-front {
    transform: translateY(-50%) rotate(-6deg);
  }

  .tape-back {
    transform: translateY(-50%) rotate(5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}