@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk.ttf") format("truetype");
  font-display: swap;
}

:root {
  --night: #17162f;
  --night-deep: #111025;
  --cream: #fff7dc;
  --lavender: #bbb0ff;
  --lime: #adff45;
  --line: rgba(255, 247, 220, .15);
  --pointer-x: 50%;
  --pointer-y: 50%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--night-deep);
  color: var(--cream);
  font-family: "Space Grotesk", Arial, sans-serif;
}

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
[hidden] { display: none !important; }

.world {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(112, 93, 214, .17), transparent 31%),
    radial-gradient(circle at 76% 13%, rgba(93, 72, 178, .31), transparent 34%),
    radial-gradient(circle at 12% 85%, rgba(98, 82, 184, .18), transparent 32%),
    linear-gradient(145deg, #17162f 0%, #1b1a3d 55%, #121127 100%);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: .07;
  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='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.aurora {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(78px);
  pointer-events: none;
}

.aurora-lime {
  width: min(46vw, 660px);
  aspect-ratio: 1;
  left: 50%;
  top: 45%;
  background: rgba(167, 255, 65, .15);
  transform: translate(-50%, -50%);
  animation: breathe-lime 6s ease-in-out infinite;
}

.aurora-violet {
  width: min(40vw, 600px);
  aspect-ratio: 1;
  right: -12%;
  bottom: -31%;
  background: rgba(137, 112, 255, .21);
  animation: drift 11s ease-in-out infinite alternate;
}

.header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
  padding: 0 clamp(22px, 3.4vw, 58px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .8s .05s ease, transform .8s .05s cubic-bezier(.2,.8,.2,1);
}

.ready .header { opacity: 1; transform: translateY(0); }

.identity { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.identity-mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(173, 255, 69, .6);
  border-radius: 50%;
  color: var(--lime);
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 650;
}
.identity-mark span { margin-left: -2px; color: var(--cream); }
.identity-mark::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--night);
  border-radius: 50%;
  background: var(--lime);
}
.identity-copy { display: grid; gap: 3px; }
.identity-copy b { font-size: 10px; letter-spacing: .16em; }
.identity-copy small { color: rgba(255,247,220,.44); font-size: 7px; letter-spacing: .18em; }

.neural-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,247,220,.54);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .18em;
}
.neural-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime);
  animation: status-pulse 2.4s ease-in-out infinite;
}

.header-link {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  color: rgba(255,247,220,.72);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  transition: color .25s ease;
}
.header-link:hover { color: var(--lime); }
.header-link span { font-size: 14px; }

.hero {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 78px);
  padding-bottom: 116px;
}

.title-kicker {
  position: absolute;
  z-index: 12;
  top: 5.4%;
  left: 50%;
  padding: 8px 13px;
  border: 1px solid rgba(173,255,69,.24);
  border-radius: 999px;
  color: rgba(255,247,220,.61);
  background: rgba(18,17,39,.3);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .2em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .7s .2s ease, transform .7s .2s ease;
}
.ready .title-kicker { opacity: 1; transform: translate(-50%, 0); }

.hero-title {
  position: absolute;
  inset: 10% 0 auto;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(14px, 1.45vw, 28px);
  color: var(--cream);
  font-family: "Fredoka", sans-serif;
  font-weight: 610;
  line-height: .82;
  letter-spacing: -.058em;
  pointer-events: none;
  user-select: none;
}

.hero-title span {
  display: block;
  opacity: 0;
  transform: translateY(32px) scale(.98);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.15,.8,.2,1);
}
.ready .hero-title span { opacity: 1; transform: translateY(0) scale(1); }
.title-artifical { font-size: clamp(75px, 10vw, 178px); transition-delay: .05s !important; }
.title-neko {
  color: var(--lime);
  font-size: clamp(75px, 10vw, 178px);
  text-shadow: 0 0 45px rgba(173,255,69,.14);
  transition-delay: .14s !important;
}

.cat-stage {
  --move-x: 0px;
  --move-y: 0px;
  --turn-x: 0deg;
  --turn-y: 0deg;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 59%;
  width: min(48vw, 700px);
  min-width: 500px;
  opacity: 0;
  transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotateX(var(--turn-x)) rotateY(var(--turn-y)) scale(.91);
  transform-style: preserve-3d;
  will-change: transform;
  transition: opacity 1.25s .15s ease, transform 1.3s .15s cubic-bezier(.16,.83,.21,1);
}

.ready .cat-stage {
  opacity: 1;
  transform: translate(calc(-50% + var(--move-x)), calc(-50% + var(--move-y))) rotateX(var(--turn-x)) rotateY(var(--turn-y)) scale(1);
}

.cat-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.03) drop-shadow(0 42px 45px rgba(3, 3, 15, .42));
  -webkit-mask-image: radial-gradient(ellipse 66% 63% at 50% 52%, #000 53%, rgba(0,0,0,.98) 69%, transparent 96%);
  mask-image: radial-gradient(ellipse 66% 63% at 50% 52%, #000 53%, rgba(0,0,0,.98) 69%, transparent 96%);
  animation: cat-float 7s 1.5s ease-in-out infinite;
}

.eye-aura {
  position: absolute;
  z-index: 3;
  left: 25%;
  top: 47%;
  width: 53%;
  height: 20%;
  border-radius: 50%;
  background: rgba(173,255,69,.36);
  filter: blur(42px);
  pointer-events: none;
  animation: eye-pulse 3.5s ease-in-out infinite;
}

.radar {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 59%;
  aspect-ratio: 1;
  border: 1px solid rgba(187,176,255,.13);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s .5s ease;
}
.ready .radar { opacity: 1; }
.radar::before, .radar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.radar::before {
  inset: 7%;
  border: 1px dashed rgba(173,255,69,.13);
}
.radar::after {
  top: 8%;
  left: 18%;
  width: 8px;
  height: 8px;
  background: var(--lime);
  box-shadow: 0 0 24px var(--lime);
}
.radar-large {
  width: min(58vw, 820px);
  transform: translate(-50%, -50%);
  animation: rotate 34s linear infinite;
}
.radar-small {
  width: min(40vw, 570px);
  transform: translate(-50%, -50%);
  animation: rotate 25s linear infinite reverse;
}

.story-line {
  position: absolute;
  z-index: 8;
  left: clamp(28px, 5vw, 82px);
  bottom: 151px;
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 430;
  line-height: 1.06;
  letter-spacing: -.035em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s .55s ease, transform .8s .55s ease;
}
.ready .story-line { opacity: 1; transform: translateY(0); }
.story-line span { color: var(--lavender); }

.floating-label {
  position: absolute;
  z-index: 7;
  display: grid;
  gap: 6px;
  padding: 7px 0 7px 11px;
  border-left: 1px solid rgba(173,255,69,.45);
  opacity: 0;
  transition: opacity .75s .75s ease, transform .75s .75s ease;
}
.floating-label span { color: rgba(255,247,220,.4); font-size: 7px; letter-spacing: .18em; }
.floating-label b { font-size: 9px; letter-spacing: .13em; }
.label-left { left: 14%; top: 45%; transform: translate(-10px, 10px); }
.label-right { right: 13%; top: 49%; transform: translate(10px, 10px); }
.ready .label-left { opacity: 1; transform: translate(0, 0); }
.ready .label-right { opacity: 1; transform: translate(0, 0); }

.ticker-pill {
  position: absolute;
  z-index: 7;
  right: clamp(28px, 5vw, 82px);
  bottom: 156px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,247,220,.65);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: .18em;
  opacity: 0;
  transition: opacity .8s .65s ease;
}
.ready .ticker-pill { opacity: 1; }
.ticker-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }

.action-dock {
  position: absolute;
  z-index: 35;
  left: 50%;
  bottom: 27px;
  display: flex;
  align-items: stretch;
  width: min(820px, calc(100% - 44px));
  min-height: 72px;
  padding: 6px;
  border: 1px solid rgba(255,247,220,.16);
  border-radius: 24px;
  background: rgba(22,21,47,.63);
  box-shadow: 0 25px 70px rgba(3,3,15,.42), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translate(-50%, 22px);
  transition: opacity .9s .7s ease, transform .9s .7s cubic-bezier(.2,.8,.2,1);
}
.ready .action-dock { opacity: 1; transform: translate(-50%, 0); }

.dock-button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  flex: 1 1 0;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid rgba(255,247,220,.1);
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .28s ease, color .28s ease, transform .28s ease;
}
.dock-button:last-child { border-right: 0; }
.dock-button:hover { z-index: 2; background: rgba(255,255,255,.075); transform: translateY(-2px); }
.dock-primary { color: #16152c; background: var(--lime); }
.dock-primary:hover { background: #bcff68; }
.dock-number { font-size: 7px; opacity: .45; }
.dock-button b { overflow: hidden; font-size: 9px; letter-spacing: .12em; white-space: nowrap; text-overflow: ellipsis; }
.dock-button i { font-size: 15px; font-style: normal; font-weight: 400; }

.edge-note {
  position: absolute;
  z-index: 8;
  top: 50%;
  color: rgba(255,247,220,.29);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
}
.edge-left { left: 14px; transform: translateY(-50%) rotate(180deg); }
.edge-right { right: 14px; transform: translateY(-50%); }

.toast {
  position: fixed;
  z-index: 50;
  top: 95px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 17px;
  border: 1px solid rgba(173,255,69,.28);
  border-radius: 999px;
  background: rgba(18,17,39,.8);
  box-shadow: 0 17px 40px rgba(0,0,0,.24);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.toast-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.toast b { font-size: 8px; letter-spacing: .14em; }

@keyframes status-pulse { 50% { opacity: .4; transform: scale(.75); } }
@keyframes breathe-lime { 50% { opacity: .6; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes drift { to { transform: translate(-35px, -25px) scale(1.12); } }
@keyframes rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes cat-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes eye-pulse { 0%,100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 980px) {
  .hero { min-height: 820px; }
  .title-kicker { top: 5%; }
  .hero-title { top: 10%; }
  .title-artifical, .title-neko { font-size: clamp(62px, 9.5vw, 104px); }
  .cat-stage { top: 56%; width: min(73vw, 650px); min-width: 0; }
  .radar { top: 56%; }
  .radar-large { width: min(83vw, 740px); }
  .radar-small { width: min(61vw, 540px); }
  .label-left { left: 5%; top: 46%; }
  .label-right { right: 5%; top: 50%; }
  .story-line { bottom: 158px; }
  .ticker-pill { bottom: 164px; }
}

@media (max-width: 700px) {
  .header { grid-template-columns: 1fr auto; min-height: 66px; padding: 0 18px; }
  .neural-status { display: none; }
  .identity-copy small { display: none; }
  .header-link { font-size: 8px; }
  .hero { min-height: calc(100svh - 66px); height: 800px; padding-bottom: 172px; }
  .title-kicker { top: 5.5%; font-size: 6px; }
  .hero-title { top: 11%; gap: 10px; }
  .title-artifical, .title-neko { font-size: clamp(42px, 12.6vw, 78px); }
  .cat-stage { top: 50%; width: 108vw; }
  .radar { top: 50%; }
  .radar-large { width: 112vw; }
  .radar-small { width: 81vw; }
  .floating-label { display: none; }
  .story-line { left: 22px; bottom: 178px; font-size: 21px; }
  .ticker-pill { right: 22px; bottom: 181px; font-size: 7px; }
  .action-dock {
    bottom: 18px;
    display: grid;
    grid-template-columns: 1.15fr .85fr .85fr .65fr;
    width: calc(100% - 28px);
    min-height: 126px;
    padding: 6px;
    border-radius: 22px;
  }
  .dock-button {
    display: flex;
    min-height: 54px;
    justify-content: center;
    padding: 0 9px;
    border-right: 1px solid rgba(255,247,220,.1);
  }
  .dock-primary { grid-column: 1 / -1; }
  .dock-number { display: none; }
  .dock-button b { font-size: 8px; }
  .edge-note { display: none; }
  .toast { top: 80px; }
}

@media (max-width: 430px) {
  .hero { height: 760px; }
  .cat-stage { top: 49%; width: 118vw; }
  .story-line { bottom: 178px; font-size: 18px; }
  .ticker-pill { display: none; }
  .title-artifical, .title-neko { font-size: 12.1vw; }
  .dock-button i { display: none; }
}

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