/* =========================================================
   Фаза — polish pass
   Theme-safe (only CSS vars) · no hero cards · no brand filter
   ========================================================= */

:root {
  --polish-sheen: color-mix(in srgb, var(--lime) 22%, transparent);
}

/* —— deeper themed air —— */
body {
  background:
    radial-gradient(900px 520px at 96% -8%, var(--bg-spot-2), transparent 50%),
    radial-gradient(720px 480px at 70% 105%, var(--bg-spot-3), transparent 52%),
    radial-gradient(520px 360px at 12% 75%, var(--bg-spot-4), transparent 60%),
    radial-gradient(480px 280px at 40% 20%, color-mix(in srgb, var(--lime) 10%, transparent), transparent 55%),
    linear-gradient(
      168deg,
      var(--bg-base-1) 0%,
      var(--bg-base-1) 24%,
      var(--bg-base-2) 54%,
      var(--bg-base-2) 70%,
      var(--bg-base-3) 100%
    );
}

.aurora-blob.b {
  opacity: 0.5;
  filter: blur(88px);
}

.aurora-blob.c {
  opacity: 0.42;
}

.noise {
  opacity: 0.09;
  mix-blend-mode: soft-light;
}

/* —— chrome —— */
.top-link,
.step-pill {
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  background: color-mix(in srgb, #fff 70%, var(--paper));
}

.top-link:hover {
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, #fff 85%, var(--lime));
}

.invite-fab {
  border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent);
  background: color-mix(in srgb, #fff 78%, var(--paper));
}

body.coop-on .invite-fab,
.invite-fab.is-active,
.invite-fab:hover {
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--lime) 55%, #fff),
    color-mix(in srgb, #fff 78%, var(--paper))
  );
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
}

/* —— welcome —— */
.welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--lime) 28%, transparent), transparent 58%),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--teal) 10%, transparent));
}

.welcome-core {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.7), transparent 38%),
    radial-gradient(circle at 68% 68%, color-mix(in srgb, var(--lime) 45%, transparent), transparent 48%),
    radial-gradient(circle at 50% 55%, var(--teal), var(--teal-deep) 62%, #010806);
  box-shadow:
    0 0 0 16px color-mix(in srgb, var(--teal) 10%, transparent),
    0 0 0 36px color-mix(in srgb, var(--lime) 8%, transparent),
    0 42px 84px rgba(3, 13, 11, 0.28);
}

.welcome-ring.wr-1 {
  border-color: color-mix(in srgb, var(--teal) 30%, transparent);
}

.welcome-ring.wr-2 {
  border-color: color-mix(in srgb, var(--lime) 48%, transparent);
}

.welcome-ring.wr-3 {
  border-color: color-mix(in srgb, var(--teal) 34%, transparent);
}

.welcome-dot.wd-a {
  background: var(--lime);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--lime) 25%, transparent);
}

.welcome-dot.wd-b {
  background: var(--teal);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--teal) 22%, transparent);
}

.welcome-waveband path:first-child {
  stroke: var(--teal);
}

.welcome-waveband path:last-child {
  stroke: var(--lime-soft);
}

.welcome-wrap h1 {
  position: relative;
}

.welcome-wrap h1::after {
  content: "";
  display: block;
  width: min(7.5rem, 40%);
  height: 3px;
  margin-top: 0.85rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--lime), transparent);
  opacity: 0.75;
}

/* —— landing orbit —— */
.orbit-ring {
  border-color: var(--orbit-a);
  box-shadow:
    inset 0 0 48px var(--orbit-b),
    0 0 28px var(--orbit-c);
}

.light-rays {
  opacity: calc(var(--orbit-opacity) * 1.05);
}

.wave-a .wave-path {
  stroke: var(--teal);
}

.wave-b .wave-path {
  stroke: var(--teal-deep);
}

.wave-c .wave-path {
  stroke: var(--lime-soft);
}

.dot-a i {
  background: var(--teal);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--teal) 18%, transparent),
    0 0 24px color-mix(in srgb, var(--teal) 40%, transparent);
}

.dot-b i {
  background: var(--lime);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--lime) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--lime) 50%, transparent);
}

.phase-core[data-shape="default"] {
  animation: polishCore 5s var(--ease) infinite;
}

.phase-core.is-morphing {
  animation: corePop 0.7s var(--ease-spring);
}

@keyframes polishCore {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* —— relation picks —— */
.btn-relation {
  /* palette owned by design-delight.css */
}

.relation-actions .btn.is-picked-relation {
  /* delight owns select transform */
}

.btn-probe {
  border: 1.5px solid color-mix(in srgb, var(--teal) 38%, transparent);
  background: color-mix(in srgb, #fff 18%, transparent);
  transition:
    transform 0.35s var(--ease-spring),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.35s ease;
}

.btn-probe:hover {
  background: color-mix(in srgb, #fff 28%, transparent);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--teal) 12%, transparent);
}

.btn-chosen {
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--teal-deep) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* —— buttons —— */
.btn-primary {
  background: linear-gradient(160deg, color-mix(in srgb, var(--ink) 70%, var(--teal-deep)), var(--ink) 55%, #010706);
  color: var(--lime);
}

.btn-primary:hover {
  background: linear-gradient(160deg, var(--teal), var(--teal-deep));
  color: #fff;
}

.btn-shine {
  background: linear-gradient(
    110deg,
    transparent 22%,
    color-mix(in srgb, var(--lime) 55%, #fff),
    transparent 78%
  );
}

/* —— how / setup —— */
.how-steps li {
  border-left-color: color-mix(in srgb, var(--teal) 75%, transparent);
  background: linear-gradient(
    125deg,
    color-mix(in srgb, #fff 75%, var(--paper)),
    color-mix(in srgb, #fff 40%, var(--paper))
  );
}

.how-steps li:hover {
  border-left-color: var(--lime-ink);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--teal) 12%, transparent);
}

.how-num {
  background: linear-gradient(180deg, var(--teal), var(--teal-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.person-panel {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #fff 80%, var(--paper)),
    color-mix(in srgb, #fff 45%, var(--paper))
  );
  border-color: color-mix(in srgb, var(--teal) 14%, transparent);
}

.person-panel:focus-within {
  border-color: color-mix(in srgb, var(--teal) 50%, transparent);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--teal) 14%, transparent);
}

.person-link span {
  background: linear-gradient(90deg, transparent, var(--teal), var(--lime), var(--teal), transparent);
  height: 2.5px;
  border-radius: 2px;
}

/* —— quiz —— */
.quiz-atmosphere {
  opacity: 0.95;
}

.q-text {
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

.who-badge {
  background: linear-gradient(145deg, color-mix(in srgb, var(--ink) 80%, var(--teal-deep)), var(--ink));
  color: var(--lime);
}

.who-badge.is-b {
  background: linear-gradient(145deg, var(--lime), var(--lime-soft));
  color: var(--lime-ink);
}

.progress-fill {
  background: linear-gradient(90deg, var(--teal-deep), var(--teal) 40%, var(--lime));
  box-shadow: 0 0 18px color-mix(in srgb, var(--lime) 45%, transparent);
}

.option {
  backdrop-filter: blur(10px);
}

.option:hover::before {
  background: var(--lime);
  color: var(--lime-ink);
  box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 50%, transparent);
}

/* —— results —— */
.score-hero {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, #fff 82%, var(--paper)),
    color-mix(in srgb, #fff 48%, var(--paper))
  );
  border: 1px solid color-mix(in srgb, var(--teal) 14%, transparent);
  position: relative;
  overflow: hidden;
}

.score-hero::before {
  content: "";
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 70%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lime) 22%, transparent), transparent 65%);
  pointer-events: none;
}

.score-ring-wrap {
  animation: polishRing 6s var(--ease) infinite;
}

@keyframes polishRing {
  0%,
  100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.pair-line {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
}

.cat-row {
  border: 1px solid color-mix(in srgb, var(--teal) 12%, transparent);
  transition: transform 0.3s var(--ease), border-color 0.3s ease;
}

.cat-row:hover {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--teal) 35%, transparent);
}

/* —— handoff —— */
.handoff-orb {
  background:
    radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--lime) 55%, transparent), transparent 42%),
    radial-gradient(circle at 62% 68%, color-mix(in srgb, var(--teal) 42%, transparent), transparent 48%);
}

.handoff-wrap h2 {
  background: linear-gradient(120deg, var(--ink), var(--teal-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* —— view motion —— */
@keyframes polishIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.view.is-active {
  animation: polishIn 0.65s var(--ease) both;
}

.view.is-active .brand span {
  animation: letterFade 0.85s var(--ease) both;
}

.view.is-active .brand span:nth-child(2) { animation-delay: 0.05s; }
.view.is-active .brand span:nth-child(3) { animation-delay: 0.1s; }
.view.is-active .brand span:nth-child(4) { animation-delay: 0.15s; }

body.theme-couple .welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 143, 171, 0.32), transparent 58%),
    linear-gradient(180deg, transparent, rgba(217, 72, 108, 0.1));
}

body.theme-friends .welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 229, 102, 0.34), transparent 58%),
    linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.1));
}

body.theme-family .welcome-horizon {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(147, 197, 253, 0.34), transparent 58%),
    linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.1));
}

/* keep logo filters from elevate — do not override hue-rotate here */

@media (max-width: 820px) {
  .welcome-wrap h1::after {
    width: 5.5rem;
  }

  .score-hero::before {
    height: 55%;
  }

  .phase-core {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phase-core,
  .score-ring-wrap,
  .view.is-active {
    animation: none !important;
  }
}