/* ------------------------------------------------------------------ */
/*  Копачевский. Новый проект скоро — style.css                        */
/*  Специфичное для главной. Общее — в base.css.                       */
/* ------------------------------------------------------------------ */

:root {
  --orbit-size: clamp(150px, 16vw, 230px);
}

body {
  height: 100dvh;
  overflow: hidden;
}

/* --------------------------- Подзаголовок ------------------------- */

.sub {
  margin-top: clamp(28px, 5vh, 56px);
}

.sub-last {
  margin: 0.32em 0 0 0.5em;
  font-weight: 400;
  color: var(--ink);
}

.sub-key {
  color: var(--accent-text);
  font-weight: 500;
}

/* ---------------------------- Орбита ------------------------------- */

.orbit {
  position: absolute;
  right: calc(var(--pad-x) * 0.5);
  bottom: clamp(28px, 7vh, 84px);
  z-index: 0;
  width: var(--orbit-size);
  aspect-ratio: 1;
  color: var(--ink-soft);
  user-select: none;
}

.orbit svg {
  display: block;
  width: 100%;
  height: 100%;
}

.orbit-text {
  font-family: var(--font-mono);
  font-size: 14.58px;
  fill: currentColor;
  text-transform: uppercase;
}

.orbit-sep {
  fill: var(--accent);
}

.orbit-spin {
  transform-origin: 100px 100px;
  animation: orbit-spin 28s linear infinite;
  animation-play-state: paused;
}

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}

@media (hover: hover) {
  .orbit:hover .orbit-spin {
    animation-play-state: running;
  }
}

/* ----------------------- Портрет в орбите -------------------------- */

.portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 73%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  filter: grayscale(1) contrast(1.08) brightness(0.97);
  mix-blend-mode: multiply;
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
  opacity: 0.45;
  box-shadow: inset 0 0 24px rgba(22, 19, 12, 0.26);
  pointer-events: none;
}

/* --------------------------- Reveal ------------------------------- */

.r-orbit { animation: orbit-in 0.8s var(--step) 0.55s both; }

@keyframes orbit-in {
  from { opacity: 0; transform: scale(0.8) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ------------------------ Responsive ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .orbit-spin {
    animation: none;
  }
}

@media (max-width: 720px) {
  .sub { margin-top: 24px; }

  .orbit {
    --orbit-size: clamp(112px, 30vw, 164px);
    right: clamp(10px, 3vw, 22px);
    bottom: clamp(12px, 3vh, 40px);
  }
}

@media (max-height: 600px) {
  .sub { margin-top: 16px; }

  .orbit {
    --orbit-size: clamp(96px, 22vw, 140px);
    bottom: 8px;
  }
}