:root {
  --bg: #07090c;
  --bg-soft: #10141a;
  --line: rgba(255, 255, 255, 0.18);
  --text: #e8ebef;
  --muted: #9ea7b3;
  --accent: #9effc8;
  --accent-hot: #89d3ff;
  --max: 1080px;
  --mx: 0px;
  --my: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: "Space Grotesk", "Noto Sans JP", sans-serif;
  min-height: 100vh;
  line-height: 1.55;
  overflow-x: hidden;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.09;
  background-image: url("/assets/images/hero-texture.jpg");
  background-size: cover;
  mix-blend-mode: screen;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform 0.4s ease-out;
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(45px);
  opacity: 0.42;
  animation: drift 16s ease-in-out infinite;
  will-change: transform;
}

.orb-a {
  width: 42vw;
  height: 42vw;
  left: -8vw;
  top: -10vh;
  background: radial-gradient(circle, #7a8bff 0%, rgba(122, 139, 255, 0) 70%);
}

.orb-b {
  width: 46vw;
  height: 46vw;
  right: -14vw;
  top: 22vh;
  background: radial-gradient(circle, #73ffc6 0%, rgba(115, 255, 198, 0) 72%);
  animation-delay: -4s;
}

.orb-c {
  width: 36vw;
  height: 36vw;
  left: 35vw;
  bottom: -16vh;
  background: radial-gradient(circle, #ffd180 0%, rgba(255, 209, 128, 0) 73%);
  animation-delay: -8s;
}

.float-field {
  position: absolute;
  inset: -10%;
  opacity: 0.62;
  filter: blur(0.1px);
  pointer-events: none;
}

.float-line {
  position: absolute;
  width: var(--w, min(42vw, 520px));
  height: var(--h, 2px);
  animation: var(--anim, glideA) var(--dur, 14s) var(--ease, ease-in-out) infinite;
  will-change: transform, opacity;
}

.float-line::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(190, 220, 255, var(--alpha, 0.8)),
    rgba(255, 255, 255, 0)
  );
  box-shadow: 0 0 24px rgba(150, 220, 255, 0.46);
  animation: var(--pulse, pulseA) var(--pulse-dur, 7.8s) ease-in-out infinite;
  will-change: opacity, box-shadow;
}

.line-1 {
  top: 12%;
  left: -38%;
  --w: min(40vw, 510px);
  --h: 2px;
  --alpha: 0.78;
  --dur: 18s;
  --anim: glideA;
  --ease: cubic-bezier(0.42, 0.01, 0.26, 1);
  --pulse: pulseA;
  --pulse-dur: 8.4s;
  animation-delay: -2.5s;
}

.line-2 {
  top: 31%;
  left: -52%;
  --w: min(33vw, 420px);
  --h: 1px;
  --alpha: 0.55;
  --dur: 13.5s;
  --anim: glideB;
  --ease: cubic-bezier(0.33, 0.3, 0.08, 1);
  --pulse: pulseB;
  --pulse-dur: 6.6s;
  animation-delay: -7.4s;
}

.line-3 {
  top: 50%;
  left: -29%;
  --w: min(48vw, 600px);
  --h: 2px;
  --alpha: 0.86;
  --dur: 22s;
  --anim: glideC;
  --ease: cubic-bezier(0.6, 0.05, 0.2, 1);
  --pulse: pulseC;
  --pulse-dur: 9.8s;
  animation-delay: -12.1s;
}

.line-4 {
  top: 68%;
  left: -60%;
  --w: min(29vw, 350px);
  --h: 1px;
  --alpha: 0.45;
  --dur: 11.8s;
  --anim: glideD;
  --ease: cubic-bezier(0.29, 0.12, 0.18, 0.98);
  --pulse: pulseD;
  --pulse-dur: 6.1s;
  animation-delay: -3.8s;
}

.line-5 {
  top: 86%;
  left: -44%;
  --w: min(44vw, 540px);
  --h: 2px;
  --alpha: 0.72;
  --dur: 16.2s;
  --anim: glideE;
  --ease: cubic-bezier(0.36, 0.11, 0.1, 0.96);
  --pulse: pulseE;
  --pulse-dur: 7.1s;
  animation-delay: -9.7s;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.1rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: var(--text);
  text-decoration: none;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1rem, 2.1vw, 1.45rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: 0.8rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.87rem;
}

.site-nav a:hover {
  color: var(--text);
  border-color: var(--accent);
}

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.5rem 1.1rem 2.4rem;
}

.section {
  margin: 2.2rem 0;
}

.hero {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.kicker {
  color: var(--accent);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

h1,
h2 {
  margin: 0;
  font-family: "Orbitron", "Noto Sans JP", sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.3rem, 10vw, 5.7rem);
}

h1 .jp {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: clamp(0.84rem, 1.9vw, 1.1rem);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
}

.lead {
  margin: 0.5rem 0 0;
  max-width: 62ch;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
}

.sublead {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 0.94rem;
}

.section-head {
  margin-bottom: 0.75rem;
}

h2 {
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
}

.section-head .jp {
  margin: 0.16rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    var(--bg-soft);
  backdrop-filter: blur(10px);
}

.panel p {
  margin: 0 0 0.8rem;
}

.panel p.jp {
  color: var(--muted);
  font-size: 0.92rem;
}

.embed-wrap iframe {
  border: 0;
  border-radius: 12px;
  background: #151515;
}

.embed-fallback {
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.embed-fallback a {
  color: var(--accent);
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.links-grid a {
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.9rem 0.85rem;
  border-radius: 12px;
  text-align: center;
  font-weight: 500;
}

.links-grid a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.1rem 2rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  40% {
    transform: translate3d(1.3vw, -2.1vh, 0) scale(1.05);
  }
  70% {
    transform: translate3d(-1.8vw, 1.6vh, 0) scale(0.97);
  }
}

@keyframes glideA {
  0% {
    transform: translate3d(0, 0, 0) rotate(-16deg) scaleX(0.85);
    opacity: 0;
  }
  18% {
    opacity: 0.75;
  }
  34% {
    transform: translate3d(65vw, -3.2vh, 0) rotate(-8deg) scaleX(1.08);
    opacity: 0.66;
  }
  62% {
    transform: translate3d(128vw, 3.8vh, 0) rotate(-14deg) scaleX(0.96);
    opacity: 0.54;
  }
  100% {
    transform: translate3d(214vw, -1.8vh, 0) rotate(-9deg) scaleX(1.02);
    opacity: 0;
  }
}

@keyframes glideB {
  0% {
    transform: translate3d(0, 0, 0) rotate(10deg) scaleX(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.5;
  }
  47% {
    transform: translate3d(98vw, 4.6vh, 0) rotate(16deg) scaleX(1.14);
    opacity: 0.38;
  }
  73% {
    transform: translate3d(152vw, -2.4vh, 0) rotate(7deg) scaleX(0.86);
    opacity: 0.44;
  }
  100% {
    transform: translate3d(205vw, 2.8vh, 0) rotate(12deg) scaleX(0.94);
    opacity: 0;
  }
}

@keyframes glideC {
  0% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scaleX(0.92);
    opacity: 0;
  }
  14% {
    opacity: 0.82;
  }
  29% {
    transform: translate3d(54vw, 3.2vh, 0) rotate(-1deg) scaleX(1.12);
    opacity: 0.68;
  }
  58% {
    transform: translate3d(126vw, -5.6vh, 0) rotate(-11deg) scaleX(0.84);
    opacity: 0.48;
  }
  83% {
    transform: translate3d(174vw, 2.7vh, 0) rotate(-5deg) scaleX(1.06);
    opacity: 0.62;
  }
  100% {
    transform: translate3d(230vw, -1.5vh, 0) rotate(-8deg) scaleX(0.92);
    opacity: 0;
  }
}

@keyframes glideD {
  0% {
    transform: translate3d(0, 0, 0) rotate(5deg) scaleX(0.7);
    opacity: 0;
  }
  25% {
    opacity: 0.36;
  }
  43% {
    transform: translate3d(86vw, -1.8vh, 0) rotate(12deg) scaleX(1.16);
    opacity: 0.28;
  }
  69% {
    transform: translate3d(146vw, 3.9vh, 0) rotate(8deg) scaleX(0.9);
    opacity: 0.33;
  }
  100% {
    transform: translate3d(212vw, -1.2vh, 0) rotate(15deg) scaleX(0.75);
    opacity: 0;
  }
}

@keyframes glideE {
  0% {
    transform: translate3d(0, 0, 0) rotate(-13deg) scaleX(0.88);
    opacity: 0;
  }
  17% {
    opacity: 0.7;
  }
  38% {
    transform: translate3d(76vw, 5vh, 0) rotate(-4deg) scaleX(1.22);
    opacity: 0.61;
  }
  61% {
    transform: translate3d(133vw, -3.6vh, 0) rotate(-18deg) scaleX(0.82);
    opacity: 0.42;
  }
  100% {
    transform: translate3d(218vw, 2vh, 0) rotate(-9deg) scaleX(1);
    opacity: 0;
  }
}

@keyframes pulseA {
  0%,
  15%,
  52%,
  78%,
  100% {
    opacity: 0.56;
    filter: drop-shadow(0 0 6px rgba(178, 223, 255, 0.35))
      drop-shadow(0 0 14px rgba(149, 239, 218, 0.16));
  }
  20%,
  24% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(210, 236, 255, 0.85))
      drop-shadow(0 0 30px rgba(140, 255, 225, 0.5));
  }
}

@keyframes pulseB {
  0%,
  22%,
  60%,
  100% {
    opacity: 0.34;
    filter: drop-shadow(0 0 5px rgba(160, 216, 255, 0.28))
      drop-shadow(0 0 10px rgba(140, 255, 222, 0.14));
  }
  29%,
  33% {
    opacity: 0.86;
    filter: drop-shadow(0 0 9px rgba(210, 240, 255, 0.76))
      drop-shadow(0 0 22px rgba(140, 255, 222, 0.42));
  }
}

@keyframes pulseC {
  0%,
  18%,
  45%,
  100% {
    opacity: 0.62;
    filter: drop-shadow(0 0 7px rgba(181, 227, 255, 0.44))
      drop-shadow(0 0 16px rgba(151, 255, 228, 0.2));
  }
  52%,
  55%,
  83% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(213, 241, 255, 0.9))
      drop-shadow(0 0 34px rgba(151, 255, 228, 0.56));
  }
}

@keyframes pulseD {
  0%,
  26%,
  66%,
  100% {
    opacity: 0.28;
    filter: drop-shadow(0 0 4px rgba(171, 218, 255, 0.24))
      drop-shadow(0 0 8px rgba(140, 255, 220, 0.1));
  }
  70%,
  74% {
    opacity: 0.72;
    filter: drop-shadow(0 0 8px rgba(210, 237, 255, 0.68))
      drop-shadow(0 0 18px rgba(146, 255, 220, 0.32));
  }
}

@keyframes pulseE {
  0%,
  12%,
  57%,
  100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 6px rgba(182, 225, 255, 0.37))
      drop-shadow(0 0 14px rgba(145, 255, 219, 0.18));
  }
  16%,
  21%,
  62% {
    opacity: 0.95;
    filter: drop-shadow(0 0 10px rgba(210, 236, 255, 0.84))
      drop-shadow(0 0 28px rgba(145, 255, 219, 0.48));
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  .float-line,
  .float-line::before,
  .reveal {
    animation: none !important;
    transition: none !important;
  }

  .backdrop {
    transform: none !important;
  }
}

@media (max-width: 820px) {
  .float-field {
    opacity: 0.42;
  }

  .site-header {
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }

  .links-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .line-2,
  .line-4 {
    display: none;
  }

  .links-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 50vh;
  }
}