@font-face {
  font-family: "Manrope";
  src: url("./assets/Manrope-Latin-Polish.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --canvas: #0e1714;
  --ink: #f3f1e9;
  --sage: #a7b7a3;
  --amber: #c19a64;
  font-family: "Manrope", sans-serif;
  background: var(--canvas);
  color: var(--ink);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 280px; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}
::selection { color: #142622; background: var(--sage); }
.ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 76% 46%, #25455238 0%, transparent 52%),
    radial-gradient(ellipse at 25% 110%, #c19a6407 0%, transparent 55%);
}
.masthead {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding: clamp(28px, 4.3vw, 64px) clamp(24px, 6.5vw, 104px) 0;
}
.brand { display: block; width: clamp(192px, 18.2vw, 260px); height: auto; }
.hero {
  flex: 1;
  width: min(100%, 1600px);
  margin-inline: auto;
  padding: 48px clamp(24px, 6.5vw, 104px) 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 2%;
}
h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-weight: 400;
  font-size: clamp(43px, 4.85vw, 75px);
  line-height: 1.14;
  letter-spacing: -0.055em;
  animation: arrive 1.25s ease-out both;
}
h1 span { display: block; }
h1 .quiet { color: #aebeb1; }
.sculpture {
  position: relative;
  width: 110%;
  margin-left: -2%;
  aspect-ratio: 1;
  animation: materialize 1.8s cubic-bezier(.15,.65,.25,1) both;
}
.field {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  stroke: #8ebac6;
  stroke-width: .7;
  opacity: .12;
}
.field .axes { opacity: .35; stroke-dasharray: 2 12; }
.field .nodes { fill: var(--amber); stroke: none; }
.neural {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 32px 40px #00000025);
}
.neural-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: normal;
}
.motion-toggle {
  position: absolute;
  right: 3%;
  bottom: 3%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #789181;
  border-radius: 50%;
  background: #0e1714d9;
  color: #aebeb1;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: #f3f1e9; border-color: #aebeb1; background: #142622; }
.motion-toggle:focus-visible { outline: 3px solid #c19a64; outline-offset: 4px; }
.motion-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[data-paused="true"] .pause-icon { display: none; }
.motion-toggle[data-paused="true"] .play-icon { display: block; }
.horizon {
  position: absolute;
  bottom: 35px;
  inset-inline: clamp(24px, 6.5vw, 104px);
  max-width: 1392px;
  margin-inline: auto;
  height: 1px;
  background: linear-gradient(90deg, #a7b7a300, #a7b7a324 25%, #a7b7a324 75%, #a7b7a300);
}
.horizon span {
  position: absolute;
  left: 50%;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  opacity: .7;
  box-shadow: 0 0 18px #c19a6440;
}
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes materialize { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

@media (min-width: 1650px) { .hero { padding-block: 75px 120px; } }
@media (max-width: 760px) {
  .masthead { padding-top: 26px; }
  .brand { width: 195px; }
  .hero {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    padding-top: 54px;
    padding-bottom: 72px;
  }
  h1 { font-size: clamp(36px, 7.6vw, 57px); line-height: 1.14; letter-spacing: -.05em; }
  .sculpture { width: min(88%, 430px); margin: 0 auto; }
  .field { inset: 0; width: 100%; height: 100%; }
  .horizon { bottom: 26px; }
}
@media (max-width: 360px) {
  h1 { font-size: clamp(27px, 8.5vw, 32px); }
  .hero { padding-top: 38px; gap: 30px; }
  .brand { width: 170px; }
}
@media (max-height: 600px) and (min-width: 761px) {
  .masthead { padding-top: 24px; }
  .hero { padding-top: 16px; padding-bottom: 56px; }
  .sculpture { width: min(100%, 380px); justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  h1, .sculpture { animation: none; }
  .neural-flow, .motion-toggle { display: none; }
}