/* =====================================================================
   ГЕРОЙ — орбита карточек, логотип с чернильным эффектом, маркерные штрихи
   ===================================================================== */
.hero {
  position: relative; width: 100%; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 50% at 50% 50%, #1b1630 0%, transparent 70%),
    radial-gradient(40% 35% at 88% 8%, #10241f 0%, transparent 70%),
    var(--bg);
}

/* ---------- верх и низ героя ---------- */
.hero__top, .hero__bottom {
  position: absolute; left: var(--pad-l); right: var(--pad-r); z-index: 50;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; pointer-events: none;
}
.hero__top { top: calc(28px + env(safe-area-inset-top, 0px)); }
.hero__bottom { bottom: 26px; align-items: flex-end; }
.hero__top a, .hero__bottom a { pointer-events: auto; }

.identity { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; line-height: 1.5; }
.identity__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); animation: hero-pulse 2.4s ease-in-out infinite; }
.identity small { display: block; color: var(--muted); font-size: 13px; font-weight: 400; transition: color .18s; }

.pill-link {
  display: inline-flex; align-items: center; gap: 14px; padding: 11px 18px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px; background: #ffffff08; backdrop-filter: blur(8px);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s;
}

.hero__contacts { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; pointer-events: auto; }
.hero__contacts .muted { font-size: 13px; }

.scroll-cue { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.scroll-cue b { position: relative; width: 22px; height: 34px; border: 1.5px solid currentColor; border-radius: 12px; }
.scroll-cue b::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: var(--ink); animation: hero-cue 1.8s var(--ease-out) infinite;
}

/* ---------- орбита ---------- */
.orbit { position: absolute; inset: 100px 0 110px; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.orbit:active { cursor: grabbing; }
.orbit__track { position: absolute; inset: 0; pointer-events: none; }

.orbit-card {
  position: absolute; top: 50%; left: 50%; width: clamp(135px, 15vw, 240px);
  pointer-events: auto; will-change: transform; cursor: pointer; outline-offset: 8px;
  transform: translate(-50%, -50%) translate(var(--ix), var(--iy)) rotate(var(--rot)) scale(var(--sc));
}
.orbit-card__image {
  aspect-ratio: 1.5; max-width: 100%; overflow: hidden; border-radius: 10px;
  background: var(--surface); border: 1px solid #ffffff14; box-shadow: 0 22px 40px -22px #000;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s;
}
.orbit-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; pointer-events: none; }
.orbit-card__caption {
  position: absolute; top: 100%; left: 50%; margin-top: 10px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: var(--lime); color: var(--on-accent); font-size: 12px; font-weight: 800;
  opacity: 0; transform: translate(-50%, -6px); transition: opacity .18s ease, transform .18s var(--ease-out);
}
.orbit-card:not([href]) { cursor: default; }
.orbit-card:focus-visible { z-index: 30 !important; }
.orbit-card:focus-visible .orbit-card__caption { opacity: 1; transform: translate(-50%, 0); }

/* ---------- заглушка-превью проекта (пока нет скриншота) ---------- */
.art { height: 100%; display: flex; flex-direction: column; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }
.art__bar { display: flex; gap: 4px; padding: 7px 8px; background: #00000040; }
.art__bar i { width: 6px; height: 6px; border-radius: 50%; background: #ffffff70; }
.art__body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10% 10% 8%; }
.art__body b { font-family: var(--f-display); font-weight: 900; font-size: clamp(12px, 1.25vw, 20px); line-height: 1.05; letter-spacing: -.02em; }
.art__body span { display: block; height: 5px; border-radius: 3px; background: #ffffff55; }
.art__body span + span { width: 60%; }
.art__body em { align-self: flex-start; margin-top: 4px; padding: 3px 8px; border-radius: 99px; background: var(--bg); font-style: normal; font-size: 9px; font-weight: 800; color: var(--a); }

/* ---------- логотип ---------- */
.wordmark { position: absolute; top: 50%; left: 50%; z-index: 20; width: min(68vw, 1180px); text-align: center; pointer-events: none; transform: translate(-50%, -46%); }
.wordmark h1 { position: relative; line-height: 0; isolation: isolate; }
.wordmark__svg { position: relative; z-index: 2; width: 100%; height: auto; overflow: visible; }
.wordmark__echo { position: absolute; inset: 0; z-index: 1; width: 100%; height: auto; overflow: visible; }
.sketch { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; overflow: visible; transform: translate(-50%, -50%); }
.sketch--back { z-index: 0; }
.sketch--front { z-index: 3; }
.marker-star { transform-box: fill-box; transform-origin: 50% 50%; }
.wordmark__services {
  position: relative; z-index: 4; width: fit-content; max-width: calc(100vw - 44px); margin: 38px auto 0; padding: 6px 14px;
  font-size: 13px; line-height: 1.5; text-wrap: balance;
  background: #0b0a10cc; border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(6px);
}
.wordmark__services span { white-space: nowrap; }
.wordmark__services i { font-style: normal; color: var(--lime); margin: 0 6px; }

/* ---------- анимация входа ---------- */
.marker { stroke-dasharray: 1; stroke-dashoffset: 1; }
.no-js .marker, .is-reduced .marker { stroke-dashoffset: 0; }
.hero.is-entering .marker,
.hero.is-entered .marker { animation: hero-marker 1.1s var(--ease-out) both; }
.hero.is-entering .marker--delay { animation-delay: .18s; }
.hero.is-entering .marker--late { animation-delay: .36s; }
.hero.is-entering .wordmark__svg,
.hero.is-entering .wordmark__echo { animation: hero-arrive .9s var(--ease-out) both; }
.hero.is-entering .wordmark__echo { animation-delay: .12s; }
.hero.is-entering .wordmark__services { animation: hero-arrive .8s .3s var(--ease-out) both; }
.hero.is-entering .orbit-card { animation: hero-fade .9s var(--ease-out) both; }

@keyframes hero-arrive { from { opacity: .05; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hero-marker { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hero-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-pulse  { 50% { opacity: .35; transform: scale(.8); } }
@keyframes hero-cue    { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- наведение ---------- */
@media (hover: hover) and (pointer: fine) {
  .orbit-card:hover { z-index: 30 !important; }
  .orbit-card:hover .orbit-card__image { transform: scale(1.07); border-color: var(--lime); box-shadow: 0 26px 50px -24px #000, 0 0 34px -6px color-mix(in srgb, var(--lime) 40%, transparent); }
  .orbit-card:hover .orbit-card__caption { opacity: 1; transform: translate(-50%, 0); }
  .pill-link:hover { border-color: var(--ink); background: var(--ink); color: var(--on-accent); }
  .identity:hover small { color: var(--ink); }
}

/* ---------- без анимаций: аккуратная сетка ---------- */
.is-reduced .orbit__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px; padding: 0 var(--pad-l); align-content: space-between; }
.is-reduced .orbit-card { position: relative; top: auto; left: auto; width: 100%; transform: none !important; }

/* ---------- адаптив ---------- */
@media (width <= 900px) { .orbit-card { width: 19vw; } .wordmark { width: 80vw; } }
@media (width <= 699px) {
  .hero { min-height: 520px; }
  .hero__top { gap: 12px; }
  .identity { font-size: 13px; gap: 9px; }
  .identity small { font-size: 10px; }
  .pill-link { padding: 9px 14px; font-size: 13px; gap: 8px; white-space: nowrap; }
  .orbit { inset: 90px 0 130px; }
  .orbit-card { width: 37vw; max-width: 190px; }
  .wordmark { width: 92vw; }
  .wordmark__services { margin-top: 30px; font-size: 11px; max-width: 300px; }
  .hero__bottom { bottom: 20px; gap: 12px; }
  .hero__contacts { font-size: 12px; gap: 2px; }
  .scroll-cue span { display: none; }
}
@media (height <= 680px) and (width >= 700px) {
  .orbit { inset: 75px 0 80px; }
  .orbit-card { width: 12vw; }
  .wordmark { width: 60vw; }
}