/* TundraLabs public experience — production visual layer.
 *
 * Signature: a restrained signal field follows a precise pointer while the
 * content remains solid and readable. Pink is a signal, never a wall of paint.
 * This file is loaded last so every public page shares the same material,
 * interaction and hierarchy without duplicating page-specific CSS.
 */

/* Отвечает за общий материал публичных страниц, свет за курсором и реакцию
 * на наведение. Файл грузится последним — и поэтому спорные правила собраны
 * именно здесь: не потому, что он «побеждает» в каскаде, а потому, что у
 * каждого правила должен быть один хозяин. Карта ответственности — в шапке
 * polish.css. */

body { background-color: var(--c-bg); }
main,
.footer { position: relative; z-index: 1; }

/* ── Cursor signal field ───────────────────────────────────────────── */

.cursor-aura {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 30rem;
  height: 30rem;
  margin: -15rem 0 0 -15rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c-accent) 14%, transparent) 0, color-mix(in srgb, var(--c-accent) 5.5%, transparent) 26%, transparent 68%);
  transition: opacity 190ms var(--ease-out);
}

.cursor-aura::before,
.cursor-aura::after {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent);
  border-radius: 50%;
}

.cursor-aura::after {
  inset: 38%;
  border-color: rgba(255, 255, 255, 0.08);
}

.cursor-aura::before {
  animation: xp-aura-breathe 3.2s var(--ease-in-out) infinite alternate;
}

.cursor-aura::after {
  animation: xp-aura-breathe-inner 2.4s var(--ease-in-out) infinite alternate-reverse;
}

.cursor-aura > i {
  position: absolute;
  inset: 47.5%;
  border-radius: 50%;
  background: var(--c-accent-hover);
  box-shadow: 0 0 1.2rem color-mix(in srgb, var(--c-accent) 78%, transparent), 0 0 3.2rem color-mix(in srgb, var(--c-accent) 34%, transparent);
  animation: xp-aura-core 1.8s var(--ease-in-out) infinite alternate;
}

@keyframes xp-aura-breathe {
  from { transform: scale(0.96); opacity: 0.42; }
  to { transform: scale(1.06); opacity: 0.9; }
}

@keyframes xp-aura-breathe-inner {
  from { transform: scale(0.92); opacity: 0.34; }
  to { transform: scale(1.08); opacity: 0.78; }
}

@keyframes xp-aura-core {
  from { transform: scale(0.88); opacity: 0.7; }
  to { transform: scale(1.16); opacity: 1; }
}

.cursor-aura[data-active="true"] { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor-aura { display: none; }
}

/* ── Global page entrance and content hierarchy ───────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* backwards, а не both: при both на main навсегда остаётся transform
     из последнего кадра, и любой position: fixed внутри начинает считать
     координаты от main, а не от экрана. */
  main { animation: xp-page-enter 260ms var(--ease-out) backwards; }
}

@keyframes xp-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-head,
.page-head .section-head {
  position: relative;
  padding-left: clamp(0.9rem, 2vw, 1.25rem);
}

.section-head::before,
.page-head .section-head::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0;
  width: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(to bottom, var(--c-accent), color-mix(in srgb, var(--c-accent) 8%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

.section-kicker { letter-spacing: 0.12em; }
.section-lead { color: var(--c-text-secondary); }

/* ── Shared material: all public pages ────────────────────────────── */

.card,
.panel,
.install-picker,
.install-panel,
.legal-toc__box,
.doc-nav,
.code,
.login,
.catalog-bar,
.status-hero,
.kpi__cell {
  border-color: var(--c-border);
  background-color: var(--c-bg-elevated);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 5rem),
    radial-gradient(32rem 15rem at 108% -18%, color-mix(in srgb, var(--c-accent) 4.5%, transparent), transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.card--raised,
.install-picker,
.install-panel,
.drawer,
.status-hero {
  box-shadow: var(--sh-float);
}

.card::before,
.install-picker::before,
.install-panel::before {
  border-color: rgba(255, 255, 255, 0.012);
}

.card__title { color: var(--c-text); }
.card__desc { color: var(--c-text-secondary); }

@media (hover: hover) and (pointer: fine) {
  .card--interactive,
  .model-card,
  .install-app,
  .btn,
  .chip {
    transition: transform 190ms var(--ease-out),
                border-color 190ms var(--ease-out),
                background-color 190ms var(--ease-out),
                box-shadow 190ms var(--ease-out);
  }

  .card--interactive:hover,
  .model-card:hover {
    transform: translateY(-2px);
    border-color: var(--c-border-strong);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

.btn:active,
.chip:active,
.install-app:active,
.nav-toggle:active { transform: scale(0.97); }

/* ── Header ───────────────────────────────────────────────────────── */

.header[data-scrolled="true"] .header__inner {
  background: rgba(10, 8, 13, 0.9);
  border-color: color-mix(in srgb, var(--c-accent) 18%, transparent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header[data-scrolled="true"] .header__inner::before {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.035), transparent 43%, color-mix(in srgb, var(--c-accent) 3.5%, transparent));
}

.brand__mark-shell {
  border-color: color-mix(in srgb, var(--c-accent) 42%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 0 3px color-mix(in srgb, var(--c-accent) 4%, transparent);
}

/* ── Home: product remains the hero ───────────────────────────────── */

/* Панель первого экрана целиком: материал, сетка и световая линия под ней.
   Раньше она была разобрана по трём файлам — фон задавала бренд-система,
   сетку polish.css, а перекрывал всё этот файл. */
.hero__panel {
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(44rem 24rem at 92% 4%, color-mix(in srgb, var(--c-accent) 7.5%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.018), transparent 45%),
    var(--c-bg);
}

.hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.017) 1px, transparent 1px) 0 0 / 5rem 5rem,
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px) 0 0 / 5rem 5rem;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.68), transparent 58%);
  opacity: 0.25;
}

.mock__window,
.mock__float {
  border-color: rgba(255, 255, 255, 0.09);
  background-color: rgba(13, 10, 16, 0.92);
}

.hero__strip {
  background: rgba(10, 8, 13, 0.76);
}

/* ── Models, status, docs, cabinet, installer, legal ──────────────── */

.catalog-bar,
.status-hero,
.install-picker,
.install-panel { border-radius: var(--r-xl); }

.model-card,
.status-panel,
.dash-panel,
.install-panel {
  position: relative;
  overflow: hidden;
}

.model-card::after,
.status-panel::after,
.dash-panel::after,
.install-panel::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c-accent) 38%, transparent), transparent);
  opacity: 0.55;
}

.install-app { background-color: rgba(255, 255, 255, 0.012); }
.install-app[aria-pressed="true"] {
  background: linear-gradient(100deg, color-mix(in srgb, var(--c-accent) 9%, transparent), rgba(255, 255, 255, 0.018));
}

.install-app__icon {
  background: var(--c-text);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.22);
}

.legal-section + .legal-section,
.doc-h2,
.spark,
.card__foot { border-color: var(--c-border); }

.doc-body code,
.legal-body code,
.dash-key {
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--c-bg-elevated);
}

/* ── Mobile: keep the scene calm and readable ─────────────────────── */

@media (max-width: 40rem) {
  main { animation: xp-mobile-enter 280ms var(--ease-out) backwards; }

  .section-head,
  .page-head .section-head { padding-left: 0.85rem; }

  .section-head::before,
  .page-head .section-head::before { width: 1px; }

  .card,
  .panel,
  .install-picker,
  .install-panel { border-radius: var(--r-lg); }

  .card--pad-lg { padding: 1.25rem; }
}

@keyframes xp-mobile-enter {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .cursor-aura { display: none; }
  .card--interactive,
  .model-card,
  .install-app,
  .btn,
  .chip { transition: none; }
}