/* CosmoMatch — промо 20 «Чертёж карты» */

:root {
  --ground: #0A2540;
  --ink: #DCE9F7;
  --accent: #7FD8FF;
  --secondary: #FFD166;
  --glow: #17456F;
  --grid: rgba(127, 216, 255, 0.07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

body {
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  color: var(--ink);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.sheet {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 56px) 44px;
}

/* ---------- header / title block ---------- */

.title-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 14px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.logo__mark {
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--ink);
}

.lb-rim, .lb-ring { stroke: currentColor; stroke-width: 1.25; opacity: 0.85; }
.lb-ticks path { stroke: var(--accent); stroke-width: 1.25; }
.lb-aspects path { stroke: var(--secondary); stroke-width: 1.25; }

.logo__text { display: flex; flex-direction: column; line-height: 1.2; }

.wordmark {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wordmark__sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: lowercase;
}

.title-block__no {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid rgba(220, 233, 247, 0.35);
  padding: 6px 12px;
}

.frame-line {
  border-top: 1.5px solid rgba(220, 233, 247, 0.5);
  border-bottom: 3px double rgba(220, 233, 247, 0.25);
  height: 6px;
  margin-bottom: 40px;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-bottom: 64px;
}

.kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.headline {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 300;
  font-size: clamp(44px, 5.4vw, 74px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

.sub {
  color: rgba(220, 233, 247, 0.85);
  max-width: 52ch;
  margin-bottom: 30px;
}

.cta {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--accent);
  text-decoration: none;
  padding: 14px 34px;
  border: 1px solid var(--accent);
  transition: background 0.15s linear, color 0.15s linear;
}

.cta:hover, .cta:focus-visible {
  background: transparent;
  color: var(--accent);
}

/* ---------- wheel ---------- */

.wheel-zone {
  position: relative;
  min-width: 0;
}

.wheel {
  width: 100%;
  height: auto;
  display: block;
}

.wheel circle,
.wheel path {
  vector-effect: non-scaling-stroke;
}

.w-rim    { stroke: rgba(220, 233, 247, 0.4); stroke-width: 1.25; }
.w-outer  { stroke: var(--ink); stroke-width: 1.5; }
.w-inner  { stroke: var(--ink); stroke-width: 1.25; }
.w-core   { stroke: var(--accent); stroke-width: 1.25; }
.w-ticks path   { stroke: var(--ink); stroke-width: 1.25; }
.w-aspects path { stroke: var(--accent); stroke-width: 1.25; }
.w-dims path    { stroke: var(--secondary); stroke-width: 1.25; }
.w-cross path   { stroke: var(--secondary); stroke-width: 1.5; }

.w-planets circle { fill: var(--secondary); }

.w-nums text,
.w-dim-labels text {
  font-family: 'JetBrains Mono', monospace;
  fill: var(--ink);
  font-size: 13px;
}

.w-nums text { fill: rgba(220, 233, 247, 0.72); text-anchor: middle; font-size: 12px; }
.w-dim-labels text { fill: var(--secondary); font-size: 11px; letter-spacing: 0.08em; }
.dim-rot { fill: rgba(127, 216, 255, 0.75) !important; }
.dim-ang { fill: var(--secondary); }

.sector {
  fill: rgba(127, 216, 255, 0);
  stroke: rgba(220, 233, 247, 0.28);
  stroke-width: 1;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.sector.lit {
  fill: rgba(127, 216, 255, 0.2);
  stroke: var(--accent);
}

/* выноски */

.callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.callout {
  position: absolute;
  pointer-events: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: rgba(10, 37, 64, 0.9);
  border: 1px solid rgba(220, 233, 247, 0.45);
  padding: 5px 10px 5px 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.callout span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  color: var(--secondary);
  font-size: 11px;
}

.callout:hover, .callout:focus-visible { border-color: var(--accent); }

.callout:nth-child(1) { left: 66%; top: 74%; }
.callout:nth-child(2) { left: 24%; top: 8%; }
.callout:nth-child(3) { right: 2%; top: 34%; }

/* ---------- spec table ---------- */

.spec {
  border-top: 2px solid rgba(220, 233, 247, 0.6);
  padding-top: 14px;
  margin-bottom: 56px;
}

.spec__head {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 0;
  border-bottom: 1px solid rgba(220, 233, 247, 0.25);
}



.spec__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 18px;
  align-items: baseline;
  padding: 20px 0;
}

.spec__t {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.06em;
}

.spec__d {
  grid-column: 3;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 19px;
  color: rgba(220, 233, 247, 0.85);
}

.spec__row:hover .spec__t { color: var(--accent); }

.spec__rule {
  border-bottom: 1px solid rgba(220, 233, 247, 0.25);
  height: 0;
}

.spec__rule--last { border-bottom-width: 2px; border-color: rgba(220, 233, 247, 0.6); }

/* ---------- tolerance / quote ---------- */

.tolerance {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  border: 1.5px dashed rgba(127, 216, 255, 0.55);
  padding: clamp(22px, 4vw, 40px);
  margin-bottom: 40px;
  background: rgba(23, 69, 111, 0.28);
}

.tolerance__label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.tolerance__quote p {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: 0.02em;
}

/* ---------- note ---------- */

.note {
  padding: 6px 0 56px;
}

.note__text {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  border-bottom: 1px solid rgba(255, 209, 102, 0.5);
  padding-bottom: 4px;
}

/* ---------- vertical stamp ---------- */

.stamp {
  position: absolute;
  right: 8px;
  top: 220px;
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(127, 216, 255, 0.5);
  border: 1px solid rgba(127, 216, 255, 0.3);
  padding: 18px 6px;
}

/* ---------- footer ---------- */

.foot {
  border-top: 2px solid rgba(220, 233, 247, 0.6);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.foot__brand {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(220, 233, 247, 0.6);
}

.promo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.promo-nav a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed rgba(127, 216, 255, 0.5);
  padding-bottom: 3px;
  transition: color 0.15s linear, border-color 0.15s linear;
}

.promo-nav a:hover, .promo-nav a:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- черчение по слоям ---------- */

html.js .w-layer,
html.js .w-layer path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-line 1.1s ease-out forwards;
}

html.js .w-rim {
  opacity: 0;
  animation: fade-in 0.9s ease 0.05s forwards;
}

html.js .w-cross   { animation-delay: 0.15s; }
html.js .w-outer   { animation-delay: 0.3s; }
html.js .w-inner   { animation-delay: 0.7s; }
html.js .w-core    { animation-delay: 1s; }
html.js .w-ticks path   { animation-delay: 1.15s; }
html.js .w-aspects path { animation-delay: 1.6s; }
html.js .w-dims path    { animation-delay: 2.2s; }
html.js .w-cross path   { animation-delay: 0.15s; }

html.js .sectors,
html.js .w-nums,
html.js .w-planets,
html.js .w-dim-labels,
html.js .callouts {
  opacity: 0;
  animation: fade-in 0.8s ease forwards;
}

html.js .sectors     { animation-delay: 0.9s; }
html.js .w-nums      { animation-delay: 1.4s; }
html.js .w-planets   { animation-delay: 1.7s; }
html.js .w-dim-labels { animation-delay: 2.5s; }
html.js .callouts    { animation-delay: 2.1s; }

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* ---------- inview reveal ---------- */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

html.js [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

html.js .spec__rule[data-reveal] {
  transform: scaleX(0);
  transform-origin: left center;
}

html.js .spec__rule[data-reveal].in {
  opacity: 1;
  transform: scaleX(1);
}

/* ---------- adaptive ---------- */

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .stamp { display: none; }
  .callout:nth-child(1) { left: 58%; }
}

@media (max-width: 640px) {
  .spec__head { grid-template-columns: 90px minmax(0, 1fr); }
  .spec__head span:nth-child(3) { display: none; }
  .spec__row { grid-template-columns: 90px minmax(0, 1fr); }
  .spec__d { grid-column: 2; }
  .tolerance { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js .w-layer,
  html.js .w-layer path {
    stroke-dashoffset: 0;
    animation: none;
  }
  html.js .w-rim,
  html.js .sectors,
  html.js .w-nums,
  html.js .w-planets,
  html.js .w-dim-labels,
  html.js .callouts {
    opacity: 1;
    animation: none;
  }
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .sector, .cta, .promo-nav a { transition: none; }
}