/* TundraLabs — утверждённая бренд-система.
 *
 * Новый знак не сводится к замене favicon: он собирает визуальный язык сайта
 * вокруг чёрного металла, малинового светового контура и «сигнальной» сетки.
 * Логотип используется ровно в двух смысловых местах: навигации и в сцене,
 * объясняющей единый API-доступ. Так он узнаваем, но не становится обоями.
 */

/* Отвечает за знак и сцену бренда. Материал панели первого экрана, карточек
 * и кнопок — не здесь, а в experience.css: карта ответственности описана в
 * шапке polish.css. */

/* ── Шапка ─────────────────────────────────────────────────────────── */

.brand {
  gap: 0.6rem;
  padding-right: var(--s-2);
  border-radius: var(--r-full);
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.brand__mark-shell {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--c-accent) 56%, transparent);
  border-radius: 50%;
  background: var(--c-bg-deep);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
              0 0 0 3px color-mix(in srgb, var(--c-accent) 7%, transparent),
              0 6px 18px rgba(0, 0, 0, 0.38);
}

.brand__mark {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand__text {
  letter-spacing: -0.035em;
  color: var(--c-metal);
}

.brand__text b { font-weight: 720; }
.brand__suffix { color: var(--c-accent-hover); font-weight: 590; }

@media (hover: hover) and (pointer: fine) {
  .brand:hover { background-color: color-mix(in srgb, var(--c-accent) 6%, transparent); }
  .brand:hover .brand__mark-shell { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 4px color-mix(in srgb, var(--c-accent) 10%, transparent), 0 7px 20px color-mix(in srgb, var(--c-accent) 18%, transparent); }
}

.brand:active { transform: scale(0.98); }

/* ── Главная визуальная подпись ─────────────────────────────────────── */

/* Материал самой панели описан в experience.css: держать её фон ещё и
   здесь означало иметь две несовместимые версии первого экрана. За брендом
   остаётся световая линия под панелью и знак. */
.hero__panel::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: 0.48;
}

/* Полный знак входит в первый экран как часть сцены продукта, а не как
 * наклейка в углу. На телефоне он остаётся заметным, но не отнимает место у
 * реального примера API-запроса. */
.hero__art { isolation: isolate; }

.hero__brand-seal {
  position: absolute;
  z-index: 2;
  top: -1.25rem;
  right: -1.15rem;
  width: clamp(7.5rem, 14vw, 11rem);
  aspect-ratio: 1;
  padding: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--c-accent) 72%, transparent);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg-deep);
  box-shadow: 0 0 0 0.7rem color-mix(in srgb, var(--c-accent) 4.5%, transparent),
              0 20px 44px rgba(0,0,0,0.42),
              0 0 48px color-mix(in srgb, var(--c-accent) 18%, transparent);
}

.hero__brand-seal img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.hero__brand-seal-ring {
  position: absolute;
  inset: 0.5rem;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__brand-seal { animation: tundra-seal-float 7s var(--ease-in-out) infinite; }
}

@keyframes tundra-seal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.conv {
  position: relative;
  isolation: isolate;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--c-accent) 19%, transparent);
  border-radius: clamp(1.25rem, 2vw, 2rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 50%, color-mix(in srgb, var(--c-accent) 8.5%, transparent), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 32%),
    var(--c-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.35);
}

.conv::before,
.conv::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.conv::before {
  width: min(39vw, 31rem);
  aspect-ratio: 1;
  right: -13%;
  top: -38%;
  border: 1px solid color-mix(in srgb, var(--c-accent) 48%, transparent);
  border-radius: 50%;
  opacity: 0.36;
  box-shadow: 0 0 0 1rem color-mix(in srgb, var(--c-accent) 1.6%, transparent);
}

.conv::after {
  inset: auto 0 0;
  height: 32%;
  opacity: 0.18;
  background-image: radial-gradient(color-mix(in srgb, var(--c-accent) 90%, transparent) 0.9px, transparent 1px);
  background-size: 13px 13px;
  mask-image: linear-gradient(to top, black, transparent 90%);
}

.conv__svg { position: relative; z-index: 1; }

.conv__disc--key { fill: var(--c-bg); }
.conv__ring--key { stroke: color-mix(in srgb, var(--c-accent) 90%, transparent); stroke-width: 1.25; }
.conv__keyglow { fill: color-mix(in srgb, var(--c-accent) 13%, transparent); }
.conv__pulse { stroke: var(--c-accent-hover); }
.conv__flow { stroke: url(#convLine); }
.conv__label--key { fill: var(--c-metal); font-weight: 620; letter-spacing: 0.04em; }

/* Смысловая, редкая сцена: лёгкое дыхание рамки бренда, не данные и не UI.
 * Используем только opacity/transform и полностью отключаем при reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .conv::before { animation: tundra-orbit-breathe 8s var(--ease-in-out) infinite; }
}

@keyframes tundra-orbit-breathe {
  0%, 100% { transform: scale(1); opacity: 0.74; }
  50% { transform: scale(1.025); opacity: 1; }
}

@media (max-width: 48rem) {
  .brand__mark-shell { width: 2.25rem; height: 2.25rem; }
  .hero__brand-seal {
    top: -0.5rem;
    right: 0.35rem;
    width: 7.2rem;
    box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--c-accent) 5%, transparent),
                0 15px 32px rgba(0,0,0,0.42),
                0 0 32px color-mix(in srgb, var(--c-accent) 15%, transparent);
  }
  .conv { margin-inline: calc(var(--gutter) * -0.1); padding: var(--s-4) var(--s-2); }
  .conv::before { width: 18rem; right: -42%; top: -24%; }
  .conv::after { height: 25%; background-size: 10px 10px; }
}

/* Узкий экран: сцена ужимается сильнее, чем на планшете. Блок идёт после
   48rem намеренно — он должен побеждать на телефоне. */
@media (max-width: 40rem) {
  .conv { padding: 0.85rem 0.35rem; }
  .conv::before { opacity: 0.18; }
  .conv::after { opacity: 0.1; }
}

@media (prefers-reduced-motion: reduce) {
  .conv::before,
  .hero__brand-seal { animation: none; }
}