:root {
  --color-bg: #010b13;
  --color-orb: #c6d8dd;
  --color-fill-from: rgba(255, 255, 255, 1);
  --color-fill-to: rgba(255, 255, 255, 0.25);
  --color-stroke-from: #0d2b42;
  --color-stroke-to: #c7d8e6;
  --shadow-text: 0 4px 10px rgba(0, 0, 0, 0.25);
}

@font-face {
  font-family: "LINE Seed Sans";
  src: url("../../fonts/lineseed/WOFF2/LINESeedSans_W_Rg.woff2") format("woff2"), url("../../fonts/lineseed/WOFF/LINESeedSans_W_Rg.woff") format("woff"), url("../../fonts/lineseed/EOT/LINESeedSans_W_Rg.eot") format("embedded-opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LINE Seed Sans";
  src: url("../../fonts/lineseed/WOFF2/LINESeedSans_W_XBd.woff2") format("woff2"), url("../../fonts/lineseed/WOFF/LINESeedSans_W_XBd.woff") format("woff"), url("../../fonts/lineseed/EOT/LINESeedSans_W_XBd.eot") format("embedded-opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

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

body {
  position: relative;
  width: 100vw;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  font-family: "LINE Seed Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  inset: 50% auto auto 50%;
  width: min(78vmax, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-orb);
  opacity: 0.15;
  filter: blur(200px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

.landing {
  position: relative;
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  overflow: hidden;
}
.landing::before {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: min(58vh, 520px);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(126, 56, 255, 0.22) 0%, rgba(70, 51, 255, 0.18) 24%, rgba(0, 89, 255, 0.14) 50%, rgba(0, 124, 255, 0.18) 76%, rgba(100, 210, 255, 0.22) 100%), radial-gradient(34% 52% at 0% 100%, rgba(181, 129, 255, 0.42) 0%, rgba(105, 0, 255, 0.22) 42%, rgba(0, 0, 0, 0) 78%), radial-gradient(34% 52% at 100% 100%, rgba(123, 200, 255, 0.42) 0%, rgba(0, 149, 255, 0.22) 42%, rgba(0, 0, 0, 0) 78%), radial-gradient(42% 30% at 50% 100%, rgba(0, 89, 255, 0.14) 0%, rgba(0, 0, 0, 0) 76%);
  filter: blur(42px);
  transform: translateY(22px) scaleY(0.96);
  transition: opacity 200ms ease, transform 240ms ease;
  z-index: -1;
  -webkit-mask-image: radial-gradient(92% 130% at 50% 0%, transparent 0 48%, rgba(0, 0, 0, 0.2) 54%, #000 62%);
  mask-image: radial-gradient(92% 130% at 50% 0%, transparent 0 48%, rgba(0, 0, 0, 0.2) 54%, #000 62%);
}
.landing::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  height: min(52vh, 460px);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(186, 146, 255, 0.16) 0%, rgba(121, 164, 255, 0.14) 50%, rgba(143, 221, 255, 0.16) 100%), radial-gradient(32% 48% at 0% 100%, rgba(220, 185, 255, 0.24) 0%, rgba(147, 93, 255, 0.12) 42%, rgba(0, 0, 0, 0) 80%), radial-gradient(32% 48% at 100% 100%, rgba(188, 232, 255, 0.24) 0%, rgba(74, 178, 255, 0.12) 42%, rgba(0, 0, 0, 0) 80%), radial-gradient(40% 28% at 50% 100%, rgba(95, 152, 255, 0.08) 0%, rgba(0, 0, 0, 0) 78%);
  filter: blur(18px);
  transform: translateY(10px) scaleY(0.98);
  transition: opacity 180ms ease, transform 220ms ease;
  z-index: -1;
  -webkit-mask-image: radial-gradient(90% 126% at 50% 0%, transparent 0 49%, rgba(0, 0, 0, 0.24) 55%, #000 63%);
  mask-image: radial-gradient(90% 126% at 50% 0%, transparent 0 49%, rgba(0, 0, 0, 0.24) 55%, #000 63%);
}
.landing__title-svg {
  display: block;
  width: min(92vw, 1400px);
  height: min(54vh, 430px);
  overflow: visible;
  transform: scaleX(-1);
  transform-origin: center center;
  will-change: transform;
}
.landing__title-svg text {
  font-family: "LINE Seed Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  paint-order: stroke fill;
}

@media (max-width: 768px) {
  .landing {
    padding: clamp(12px, 5vw, 28px);
  }
  .landing__title-svg {
    width: min(96vw, 680px);
    height: min(64vh, 560px);
  }
}

body.is-anomaly-active .landing::before {
  opacity: 0.2;
  transform: translateY(0) scaleY(1);
}

body.is-anomaly-active .landing::after {
  opacity: 0.28;
  transform: translateY(0) scaleY(1);
}

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