/* KORASAKA hero · live graph orbit (Aiko responsive final) */

html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

:root {
  --P: 96px;
  --k: 1;
  --tx: 0px;
  --ty: 0px;
  --gh: 0px;
}

.hero {
  position: relative;
  height: 828px;
  min-height: 828px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
  border-top: 0;
}

/* Stage: 1440×828 scene, scaled around core (1010, 392) */
.hero .stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 828px;
  transform-origin: 1010px 392px;
  transform: translate(var(--tx), var(--ty)) scale(var(--k));
  pointer-events: none;
  overflow: visible;
}

.hero #bg,
.hero #fx {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.hero #nodes {
  position: absolute;
  inset: 0;
}

.hero .pt {
  font: 500 calc(10.5px * var(--s)) "JetBrains Mono", monospace;
  letter-spacing: 0.2px;
}
.hero .pl {
  font: 500 calc(10.5px * var(--s)) "JetBrains Mono", monospace;
  letter-spacing: 0.3px;
}

.hero .agn {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 0;
  z-index: 2;
}
.hero .agn .av {
  width: calc(48px * var(--s));
  height: calc(48px * var(--s));
  flex: none;
  border-radius: 50%;
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f2f2f2;
  transition: none;
}
.hero .agn .av svg {
  width: calc(23px * var(--s));
  height: calc(23px * var(--s));
}
.hero .agn.busy .av {
  border-color: rgba(235, 86, 0, 0.85);
}
.hero .agn.ghost .av {
  border-style: dashed;
}
.hero .agn .nm {
  position: absolute;
  top: calc(54px * var(--s));
  white-space: nowrap;
  font: 500 calc(12px * var(--s)) Inter, sans-serif;
  color: #e6e6e6;
}
.hero .agn .st {
  position: absolute;
  top: calc(71px * var(--s));
  white-space: nowrap;
  font: calc(10.5px * var(--s)) "JetBrains Mono", monospace;
  color: #6f6f6f;
}
.hero .agn .st.hi {
  color: #c3c3c3;
}
.hero .agn.far .av {
  transform: scale(0.86);
}
.hero .agn.far .nm {
  color: #cfcfcf;
}

.hero .corew {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(104px * var(--s));
  height: calc(104px * var(--s));
  z-index: 3;
}
.hero .corew .glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(330px * var(--s));
  height: calc(330px * var(--s));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(235, 86, 0, 0.22),
    rgba(235, 86, 0, 0.07) 45%,
    transparent 72%
  );
  pointer-events: none;
}
.hero .corew svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero .corew .cl {
  position: absolute;
  left: 50%;
  top: calc(110px * var(--s));
  transform: translateX(-50%);
  white-space: nowrap;
  font: 500 calc(11px * var(--s)) "JetBrains Mono", monospace;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c3c3c3;
}
.hero .corew .cm {
  position: absolute;
  left: 50%;
  top: calc(127px * var(--s));
  transform: translateX(-50%);
  white-space: nowrap;
  font: calc(10.5px * var(--s)) "JetBrains Mono", monospace;
  color: #8a8a8a;
}

.hero svg.mark {
  overflow: visible;
  display: block;
}

/* Logo orbit dots — same lap1–lap4 as korasaka.com (14s) */
.hero .ag {
  animation: 14s infinite both;
}
.hero .ag-1 {
  animation-name: lap1;
}
.hero .ag-2 {
  animation-name: lap2;
}
.hero .ag-3 {
  animation-name: lap3;
}
.hero .ag-4 {
  animation-name: lap4;
}
@keyframes lap1 {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  78.57%,
  100% {
    transform: rotate(360deg);
  }
}
@keyframes lap2 {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  78.57%,
  100% {
    transform: rotate(720deg);
  }
}
@keyframes lap3 {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  78.57%,
  100% {
    transform: rotate(1080deg);
  }
}
@keyframes lap4 {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  78.57%,
  100% {
    transform: rotate(1440deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .ag {
    animation: none !important;
  }
}
.hero.is-paused .ag {
  animation-play-state: paused;
}

.hero .mod {
  position: absolute;
  transform: translate(-50%, -50%);
  font: 500 calc(11px * var(--s)) "JetBrains Mono", monospace;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a8a8a;
  white-space: nowrap;
  z-index: 1;
}
.hero .mod.on {
  color: #ececec;
}
.hero .mod-graph,
.hero .mod-metro {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero .mod-graph i {
  width: calc(11px * var(--s));
  height: calc(11px * var(--s));
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: #111;
  flex: none;
}
.hero .mod-graph span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(20px * var(--s));
}
.hero .mod-graph.side-l span {
  right: calc(20px * var(--s));
  left: auto;
}
.hero .mod-graph.side-r span {
  left: calc(20px * var(--s));
}
.hero .mod.on i {
  border-color: #eb5600;
}

.hero .hum {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 0;
  z-index: 3;
}
.hero .hum .av {
  width: calc(64px * var(--s));
  height: calc(64px * var(--s));
  flex: none;
  border-radius: 50%;
  background: #121212;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  box-shadow: 0 0 0 calc(6px * var(--s)) rgba(255, 255, 255, 0.04);
}
.hero .hum .av svg {
  width: calc(32px * var(--s));
  height: calc(32px * var(--s));
}
.hero .hum.busy .av {
  border-color: #fff;
}
.hero .hum .nm {
  position: absolute;
  top: calc(72px * var(--s));
  white-space: nowrap;
  font: 600 calc(14px * var(--s)) Inter, sans-serif;
  color: #fff;
  letter-spacing: 0.2px;
}
.hero .hum .st {
  position: absolute;
  top: calc(92px * var(--s));
  white-space: nowrap;
  font: calc(10.5px * var(--s)) "JetBrains Mono", monospace;
  color: #c3c3c3;
}

.hero #log {
  position: absolute;
  left: var(--P);
  top: 652px;
  font: calc(11.5px * var(--s)) / 1.9 "JetBrains Mono", monospace;
  color: #5f5f5f;
  white-space: nowrap;
  z-index: 4;
}
.hero #log b {
  font-weight: 400;
  color: #8a8a8a;
}
.hero #log .nw {
  color: #d0d0d0;
}
.hero #log .nw b {
  color: #eb5600;
}

.hero .copy {
  position: absolute;
  left: var(--P);
  right: auto;
  top: 96px;
  width: 500px;
  z-index: 4;
  text-align: left;
  padding: 0;
}
.hero .kick {
  font: 500 12px "JetBrains Mono", monospace;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 22px;
}
.hero .copy h1 {
  font-family: Michroma, sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: 0.3px;
}
.hero .copy h1 span {
  color: var(--muted);
}
.hero .copy h1.ru {
  font-family: Inter, sans-serif;
  font-weight: 500;
  letter-spacing: -0.6px;
  font-size: 56px;
}
.hero .copy .lead {
  margin: 24px 0 0;
  font-size: 17px;
  max-width: 470px;
  color: #a3a3a3;
  line-height: 1.65;
}
.hero .cta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.hero .foot {
  position: absolute;
  left: var(--P);
  bottom: 22px;
  font-size: 12px;
  color: #5f5f5f;
  z-index: 4;
  white-space: nowrap;
}

/* 1100–1439: --P clamp; H1 stays 56 */
@media (max-width: 1439.98px) {
  :root {
    --P: clamp(40px, calc(40px + (100vw - 1100px) * 0.16471), 96px);
  }
}

/* 601–1099: tablet — graph on top (stage absolute + padding-top --gh), log → copy → foot */
@media (min-width: 601px) and (max-width: 1099.98px) {
  .hero {
    height: auto;
    min-height: 0;
    padding: calc(var(--gh) + 4px) 20px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
  }
  .hero .copy,
  .hero #log,
  .hero .foot {
    position: static;
    width: auto;
    max-width: 560px;
    text-align: center;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
  }
  .hero #log {
    font-size: 11px;
    line-height: 1.8;
    white-space: normal;
  }
  .hero #log div:nth-last-child(n + 3) {
    display: none;
  }
  .hero .copy {
    margin-top: 22px;
    order: 1;
  }
  .hero .kick {
    margin-bottom: 16px;
  }
  .hero .copy h1,
  .hero .copy h1.ru {
    font-size: 40px;
    line-height: 1.22;
  }
  .hero .copy .lead {
    margin: 18px auto 0;
    font-size: 16px;
    max-width: 520px;
  }
  .hero .cta {
    justify-content: center;
    flex-direction: row;
    margin-top: 26px;
  }
  .hero .foot {
    margin-top: 40px;
    font-size: 11.5px;
    white-space: normal;
    order: 2;
  }
}

/* ≤600 phone · CFG_PHONE 390×784 — pixel-stable vs prior */
@media (max-width: 600px) {
  .hero {
    height: 784px;
    min-height: 784px;
    --s: 0.66;
    overflow: hidden;
    max-width: none;
    margin: 0;
  }
  .hero .stage {
    width: 390px;
    height: 784px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    transform-origin: top left;
  }
  .hero .copy {
    left: 24px;
    right: 24px;
    top: 462px;
    width: auto;
    text-align: center;
  }
  .hero .kick,
  .hero .copy .lead {
    display: none;
  }
  .hero .copy h1 {
    font-size: 26px;
    line-height: 1.3;
  }
  .hero .copy h1.ru {
    font-size: 27px;
  }
  .hero .cta {
    flex-direction: column;
    align-items: stretch;
    margin-top: 24px;
    justify-content: center;
  }
  .hero .cta .btn {
    justify-content: center;
    height: 48px;
  }
  .hero #log {
    left: 16px;
    right: 16px;
    top: 430px;
    font-size: 10.5px;
    line-height: 1.7;
    text-align: center;
  }
  .hero #log div:nth-last-child(n + 2) {
    display: none;
  }
  .hero .foot {
    left: 24px;
    right: 24px;
    bottom: 14px;
    font-size: 10.5px;
    text-align: center;
    max-width: none;
    white-space: normal;
  }
  .hero .agn .st,
  .hero .corew .cl,
  .hero .corew .cm {
    display: none;
  }
}