/* =========================================================
   Фаза — alive pass
   Motion on existing objects + soft fillers for empty space
   Theme-safe CSS vars · no brand filter · no hero white panel
   ========================================================= */

/* kill hard diagonal color cuts from old conic mesh / sharp rays */
body::after {
  background:
    radial-gradient(ellipse 55% 45% at 28% 22%, var(--mesh-a, rgba(214, 255, 58, 0.07)), transparent 70%),
    radial-gradient(ellipse 50% 40% at 78% 48%, var(--mesh-b, rgba(12, 122, 109, 0.08)), transparent 68%),
    radial-gradient(ellipse 48% 42% at 52% 88%, var(--mesh-a, rgba(214, 255, 58, 0.05)), transparent 72%) !important;
  filter: blur(52px);
  animation-name: meshDrift;
}

.light-rays {
  filter: blur(34px) saturate(1.05) !important;
  opacity: calc(var(--orbit-opacity) * 0.5);
}

.aurora {
  overflow: visible;
}

/* —— phase-core click play (5 anims per shape) —— */
.phase-core {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.phase-core:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--lime) 70%, transparent);
  outline-offset: 8px;
}

.phase-core.is-tapping {
  animation: none !important;
}

.phase-core .core-heart,
.phase-core .core-face,
.phase-core .core-dna,
.phase-core .face-eye {
  transform-origin: center center;
}

/* shared / default */
.phase-core[data-tap="pop"] {
  animation: coreTapPop 0.7s var(--ease-spring) both !important;
}
.phase-core[data-tap="wobble"] {
  animation: coreTapWobble 0.75s var(--ease) both !important;
}
.phase-core[data-tap="pulse"] {
  animation: coreTapPulse 0.75s var(--ease) both !important;
}
.phase-core[data-tap="tilt"] {
  animation: coreTapTilt 0.7s var(--ease-spring) both !important;
}
.phase-core[data-tap="bounce"] {
  animation: coreTapBounce 0.75s var(--ease-spring) both !important;
}

@keyframes coreTapPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  65% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes coreTapWobble {
  0%, 100% { transform: rotate(0) scale(1); }
  20% { transform: rotate(-10deg) scale(1.06); }
  40% { transform: rotate(9deg) scale(1.04); }
  60% { transform: rotate(-6deg) scale(1.02); }
  80% { transform: rotate(4deg); }
}
@keyframes coreTapPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.14); filter: brightness(1.15); }
  70% { transform: scale(0.97); }
}
@keyframes coreTapTilt {
  0%, 100% { transform: rotate(0) scale(1); }
  40% { transform: rotate(14deg) scale(1.08); }
  70% { transform: rotate(-6deg) scale(1.02); }
}
@keyframes coreTapBounce {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-22px) scale(1.06); }
  55% { transform: translateY(6px) scale(0.96); }
  75% { transform: translateY(-8px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* couple — heart */
.phase-core[data-shape="couple"][data-tap="beat"] .core-heart {
  animation: coreHeartBeat 0.75s var(--ease-spring) both;
}
.phase-core[data-shape="couple"][data-tap="glow"] .core-heart {
  animation: coreHeartGlow 0.8s var(--ease) both;
}
.phase-core[data-shape="couple"][data-tap="squash"] .core-heart {
  animation: coreHeartSquash 0.75s var(--ease-spring) both;
}
.phase-core[data-shape="couple"][data-tap="float"] .core-heart {
  animation: coreHeartFloat 0.8s var(--ease) both;
}
.phase-core[data-shape="couple"][data-tap="jelly"] .core-heart {
  animation: coreHeartJelly 0.8s var(--ease-spring) both;
}

.phase-core[data-shape="couple"][data-tap] {
  animation: coreTapPulse 0.75s var(--ease) both !important;
}

@keyframes coreHeartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.22); }
  30% { transform: scale(0.92); }
  45% { transform: scale(1.28); }
  65% { transform: scale(0.96); }
}
@keyframes coreHeartGlow {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.14); filter: brightness(1.35); }
  60% { transform: scale(1.04); filter: brightness(1.15); }
}
@keyframes coreHeartSquash {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.25, 0.78); }
  55% { transform: scale(0.82, 1.22); }
  75% { transform: scale(1.08, 0.94); }
}
@keyframes coreHeartFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  40% { transform: translateY(-18px) scale(1.1); filter: brightness(1.2); }
  70% { transform: translateY(4px) scale(0.98); }
}
@keyframes coreHeartJelly {
  0%, 100% { transform: skewX(0) scale(1); }
  25% { transform: skewX(8deg) scale(1.1); }
  50% { transform: skewX(-7deg) scale(1.05); }
  75% { transform: skewX(3deg) scale(1.02); }
}

/* friends — face */
.phase-core[data-shape="friends"][data-tap="wink"] .core-face {
  animation: coreFaceWink 0.75s var(--ease-spring) both;
}
.phase-core[data-shape="friends"][data-tap="wink"] .face-eye.right {
  animation: coreEyeWink 0.75s var(--ease) both;
}
.phase-core[data-shape="friends"][data-tap="spin"] .core-face {
  animation: coreFaceSpin 0.8s var(--ease) both;
}
.phase-core[data-shape="friends"][data-tap="laugh"] .core-face {
  animation: coreFaceLaugh 0.75s var(--ease) both;
}
.phase-core[data-shape="friends"][data-tap="jump"] .core-face {
  animation: coreFaceJump 0.75s var(--ease-spring) both;
}
.phase-core[data-shape="friends"][data-tap="wobble"] .core-face {
  animation: coreFaceWobble 0.75s var(--ease) both;
}

.phase-core[data-shape="friends"][data-tap] {
  animation: coreTapBounce 0.75s var(--ease-spring) both !important;
}

@keyframes coreFaceWink {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.12) rotate(-4deg); }
}
@keyframes coreEyeWink {
  0%, 35%, 100% { transform: scaleY(1); }
  45%, 60% { transform: scaleY(0.08); }
}
@keyframes coreFaceSpin {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes coreFaceLaugh {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(3px) rotate(-6deg); }
  40% { transform: translateY(-2px) rotate(6deg); }
  60% { transform: translateY(2px) rotate(-4deg); }
  80% { transform: translateY(-1px) rotate(3deg); }
}
@keyframes coreFaceJump {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-20px) scale(1.08); }
  55% { transform: translateY(4px) scale(0.95); }
  75% { transform: translateY(-6px) scale(1.03); }
}
@keyframes coreFaceWobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.06); }
  50% { transform: rotate(10deg) scale(1.04); }
  75% { transform: rotate(-5deg); }
}

/* family — dna */
.phase-core[data-shape="family"][data-tap="helix"] .core-dna {
  animation: coreDnaHelix 0.8s var(--ease) both;
}
.phase-core[data-shape="family"][data-tap="pulse"] .core-dna {
  animation: coreDnaPulse 0.75s var(--ease) both;
}
.phase-core[data-shape="family"][data-tap="shake"] .core-dna {
  animation: coreDnaShake 0.7s var(--ease) both;
}
.phase-core[data-shape="family"][data-tap="bounce"] .core-dna {
  animation: coreDnaBounce 0.75s var(--ease-spring) both;
}
.phase-core[data-shape="family"][data-tap="twist"] .core-dna {
  animation: coreDnaTwist 0.8s var(--ease) both;
}

.phase-core[data-shape="family"][data-tap] {
  animation: coreTapPulse 0.75s var(--ease) both !important;
}

@keyframes coreDnaHelix {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes coreDnaPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.16); filter: brightness(1.25); }
  70% { transform: scale(0.96); }
}
@keyframes coreDnaShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-3deg); }
  40% { transform: translateX(10px) rotate(3deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(5px); }
}
@keyframes coreDnaBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-16px) scale(1.08); }
  60% { transform: translateY(5px) scale(0.95); }
  80% { transform: translateY(-4px) scale(1.02); }
}
@keyframes coreDnaTwist {
  0%, 100% { transform: rotateY(0) scale(1); }
  40% { transform: rotateY(55deg) scale(1.08); }
  70% { transform: rotateY(-25deg) scale(1.02); }
}

/* —— global floating motes (fill empty air) —— */
.alive-motes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
  /* default brand green */
  --mote-a: #f7ffb0;
  --mote-b: #d6ff3a;
  --mote-c: #0c7a6d;
  --mote-glow: #d6ff3abf;
  --mote-glow-2: #0c7a6d59;
  transition:
    opacity 0.45s ease,
    --mote-a 0.75s ease,
    --mote-b 0.75s ease,
    --mote-c 0.75s ease,
    --mote-glow 0.75s ease,
    --mote-glow-2 0.75s ease;
}

@property --mote-a { syntax: "<color>"; inherits: true; initial-value: #f7ffb0; }
@property --mote-b { syntax: "<color>"; inherits: true; initial-value: #d6ff3a; }
@property --mote-c { syntax: "<color>"; inherits: true; initial-value: #0c7a6d; }
@property --mote-glow { syntax: "<color>"; inherits: true; initial-value: #d6ff3abf; }
@property --mote-glow-2 { syntax: "<color>"; inherits: true; initial-value: #0c7a6d59; }

body.theme-couple .alive-motes {
  --mote-a: #fff0f5;
  --mote-b: #ff8fab;
  --mote-c: #d9486c;
  --mote-glow: #ff8fabcc;
  --mote-glow-2: #d9486c66;
}

body.theme-friends .alive-motes {
  --mote-a: #fff9e6;
  --mote-b: #ffe566;
  --mote-c: #ea580c;
  --mote-glow: #ffe566d9;
  --mote-glow-2: #ea580c66;
}

body.theme-family .alive-motes {
  --mote-a: #eff6ff;
  --mote-b: #93c5fd;
  --mote-c: #1e4e8c;
  --mote-glow: #93c5fdd9;
  --mote-glow-2: #1e4e8c66;
}

.alive-motes i {
  position: absolute;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  opacity: 0.48;
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--mote-c);
  text-shadow:
    0 0 12px var(--mote-glow),
    0 0 22px var(--mote-glow-2);
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
  --fx-dur: 14s;
  animation: aliveMoteDrift var(--fx-dur) var(--ease) infinite alternate;
  pointer-events: auto !important;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    color 0.7s ease,
    text-shadow 0.7s ease,
    left 2.8s cubic-bezier(0.37, 0.01, 0.2, 1),
    top 2.8s cubic-bezier(0.37, 0.01, 0.2, 1);
  touch-action: manipulation;
}

.alive-motes i.is-fx-glide,
.alive-motes i.is-fx-emit,
.alive-motes i.is-fx-snap,
.alive-motes i.is-fx-in,
.alive-motes i.is-fx-dream-out {
  pointer-events: auto !important;
  cursor: pointer;
}

.alive-motes i.is-fx-glide {
  transition:
    left 3.1s cubic-bezier(0.22, 0.82, 0.2, 1),
    top 3.1s cubic-bezier(0.22, 0.82, 0.2, 1),
    opacity 0.55s ease,
    color 0.7s ease,
    text-shadow 0.7s ease;
}

.alive-motes i.is-fx-emit {
  z-index: 4;
  filter: drop-shadow(0 0 10px var(--mote-glow));
}

.alive-motes i.is-fx-snap,
.alive-motes i.is-fx-pop {
  transition: opacity 0.35s ease, filter 0.35s ease !important;
}

/* no decorative circle / chip shapes behind motes */
.alive-motes i::after {
  content: none !important;
  display: none !important;
}

.alive-motes i:nth-child(3n) {
  font-size: 1.2rem;
  color: var(--mote-b);
}

.alive-motes i:nth-child(3n + 1) {
  font-size: 0.95rem;
  opacity: 0.55;
}

.alive-motes i:hover {
  opacity: 1;
  text-shadow:
    0 0 16px var(--mote-glow),
    0 0 32px var(--mote-glow-2);
}

/* secondary theme mark at pick / emit point (≠ main core icon) */
.theme-pick-echo {
  position: absolute;
  z-index: 8;
  translate: -50% -50%;
  pointer-events: none;
  font-style: normal;
  font-size: clamp(1.55rem, 4.2vw, 2.35rem);
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.theme-pick-echo.is-echo-couple {
  color: #ff6b8a;
  filter: drop-shadow(0 0 14px rgba(255, 107, 138, 0.55));
}

.theme-pick-echo.is-echo-friends {
  filter: drop-shadow(0 0 14px rgba(255, 196, 60, 0.55));
}

.theme-pick-echo.is-echo-family {
  filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.55));
}

.theme-pick-echo.is-in {
  animation: themeEchoIn 0.55s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

/* relation pick flash — always above the chip */
.rel-pick-flash {
  position: fixed;
  translate: -50% -50%;
  border-radius: 1.35rem;
  pointer-events: none;
  z-index: 96;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 0 0 color-mix(in srgb, #ff9f1a 45%, transparent),
    0 0 24px color-mix(in srgb, #ff9f1a 35%, transparent);
  animation: relPickFlashOut 0.85s cubic-bezier(0.22, 0.8, 0.36, 1) forwards;
}

.rel-pick-flash.is-flash-couple {
  box-shadow:
    0 0 0 0 color-mix(in srgb, #ff5c8a 45%, transparent),
    0 0 24px color-mix(in srgb, #ff5c8a 35%, transparent);
  border-color: rgba(255, 220, 230, 0.95);
}

.rel-pick-flash.is-flash-family {
  box-shadow:
    0 0 0 0 color-mix(in srgb, #3b9eff 45%, transparent),
    0 0 24px color-mix(in srgb, #3b9eff 35%, transparent);
  border-color: rgba(220, 240, 255, 0.95);
}

@keyframes relPickFlashOut {
  0% {
    opacity: 0.95;
    transform: scale(0.92);
    box-shadow:
      0 0 0 0 currentColor,
      0 0 12px color-mix(in srgb, #fff 40%, transparent);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
    box-shadow:
      0 0 0 18px transparent,
      0 0 0 transparent;
  }
}

@keyframes themeEchoIn {
  0% {
    opacity: 0;
    transform: scale(0.35) translateY(8px);
  }
  60% {
    opacity: 1;
    transform: scale(1.12) translateY(-2px);
  }
  100% {
    opacity: 0.92;
    transform: scale(1) translateY(0);
  }
}

@keyframes themeEchoOut {
  0% {
    opacity: 0.9;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.7) translateY(-18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-pick-echo {
    display: none !important;
  }
}

body.theme-family .mood-glyph {
  opacity: 0.48;
  font-size: clamp(1.25rem, 2.8vw, 2.05rem);
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.55));
  text-shadow: 0 0 18px rgba(96, 165, 250, 0.45);
}

@keyframes aliveMoteDrift {
  from {
    transform: scale(0.96);
    opacity: 0.28;
  }
  to {
    transform: scale(1.04);
    opacity: 0.55;
  }
}

@keyframes aliveMote {
  0%,
  100% { transform: translateY(0) scale(0.7); opacity: 0.15; }
  40% { transform: translateY(-18px) scale(1.15); opacity: 0.55; }
  70% { transform: translateY(-8px) scale(0.9); opacity: 0.3; }
}

/* click → soft fade out → reappear elsewhere */
.fx-pop {
  will-change: transform, opacity;
}

.fx-pop.is-fx-pop {
  /* legacy burst class — kept soft so it never hard-cuts */
  opacity: 0 !important;
  transform: scale(0.75) !important;
  filter: blur(1.5px) !important;
  animation: none !important;
  pointer-events: none !important;
  transition:
    opacity 1.15s ease,
    transform 1.15s ease,
    filter 1.15s ease !important;
}

.fx-pop.is-fx-dream-out {
  z-index: 50 !important;
  pointer-events: none !important;
  animation: fxFadeOut 1.25s ease forwards !important;
  transition: none !important;
}

.alive-motes i.fx-pop.is-fx-dream-out,
.mood-glyph.fx-pop.is-fx-dream-out {
  animation: fxFadeOut 1.25s ease forwards !important;
}

/* auto recycle (no click): dissolve ~4s in place */
.alive-motes i.is-fx-fade-out,
.mood-glyph.is-fx-fade-out {
  z-index: 4;
  pointer-events: none !important;
  animation: fxDissolveOut var(--fx-fade-dur, 4s) ease forwards !important;
  transition: none !important;
}

@keyframes fxDissolveOut {
  0% {
    opacity: 0.5;
    transform: scale(1);
    filter: none;
  }
  30% {
    opacity: 0.34;
    transform: scale(0.97);
    filter: brightness(1.05);
  }
  65% {
    opacity: 0.14;
    transform: scale(0.9);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.78);
    filter: blur(2.5px);
  }
}

@keyframes fxFadeOut {
  0% {
    opacity: 0.55;
    transform: scale(1);
    filter: none;
  }
  35% {
    opacity: 0.32;
    transform: scale(0.94);
    filter: brightness(1.05);
  }
  70% {
    opacity: 0.12;
    transform: scale(0.82);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: scale(0.68);
    filter: blur(2px);
  }
}

.fx-pop.is-fx-in {
  animation: fxPopIn 0.7s var(--ease-spring) both, moodDrift var(--fx-dur, 10s) var(--ease) infinite alternate !important;
}

.alive-motes i.fx-pop.is-fx-in {
  animation: fxPopIn 0.7s var(--ease-spring) both, aliveMoteDrift var(--fx-dur, 11s) var(--ease) infinite alternate !important;
}

@keyframes fxPopIn {
  from {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(2px);
  }
  55% {
    opacity: 0.55;
    transform: scale(1.06);
    filter: blur(0);
  }
  to {
    opacity: 0.48;
    transform: scale(1);
    filter: none;
  }
}

/* —— logo / chrome life —— */
.logo-mark {
  animation: aliveLogoBreath 4.8s var(--ease) infinite;
}

@keyframes aliveLogoBreath {
  0%,
  100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-4deg) scale(1.05); }
}

.logo:hover .logo-mark {
  animation: none;
}

.logo-word {
  transition: letter-spacing 0.35s var(--ease), filter 0.35s ease;
}

.logo:hover .logo-word {
  letter-spacing: -0.02em;
}

.top-link {
  transition:
    transform 0.3s var(--ease),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}

.top-link:hover {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--teal) 14%, transparent);
}

/* —— welcome chips (fill bottom air, not hero clutter) —— */
.alive-chips {
  list-style: none;
  margin: 1.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  max-width: 28rem;
}

.alive-chips li {
  margin: 0;
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  font: 650 0.78rem/1 var(--font-body);
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--ink-soft) 92%, var(--teal));
  background: color-mix(in srgb, #fff 55%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--teal) 16%, transparent);
  animation: aliveChipIn 0.7s var(--ease) both;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--teal) 8%, transparent);
}

.alive-chips li:nth-child(1) { animation-delay: 0.15s; }
.alive-chips li:nth-child(2) { animation-delay: 0.28s; }
.alive-chips li:nth-child(3) { animation-delay: 0.4s; }

@keyframes aliveChipIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* —— welcome: faster core pulse without breaking translate —— */
.welcome-core {
  animation-duration: 3.6s;
}

.welcome-ring.wr-1 {
  animation-duration: 32s;
}

.welcome-waveband path {
  stroke-dasharray: 12 10;
  animation: aliveWaveDrift 7s ease-in-out infinite;
}

.welcome-waveband path:last-child {
  animation-delay: -2.5s;
  animation-duration: 9s;
}

@keyframes aliveWaveDrift {
  0%,
  100% { stroke-dashoffset: 0; opacity: 0.5; }
  50% { stroke-dashoffset: -48; opacity: 0.95; }
}

/* —— CTA / buttons —— */
.btn {
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.35s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    filter 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--teal) 18%, transparent);
}

.btn-primary {
  animation: aliveCtaGlow 3.2s var(--ease) infinite;
}

@keyframes aliveCtaGlow {
  0%,
  100% { box-shadow: 0 14px 32px color-mix(in srgb, var(--teal) 16%, transparent); }
  50% { box-shadow: 0 18px 42px color-mix(in srgb, var(--lime) 28%, transparent); }
}

.btn-shine {
  animation-duration: 2.4s;
}

.btn-relation:not(.is-picked-relation) {
  position: relative;
  overflow: hidden;
}

.btn-relation:not(.is-picked-relation)::before {
  content: none;
  display: none;
}

.btn-relation:not(.is-picked-relation):hover::before {
  transform: none;
}

.btn-relation > span {
  position: relative;
  z-index: 1;
}

/* —— how: floating theme tags —— */
.how-wrap {
  position: relative;
}

.alive-float-panel {
  position: absolute;
  right: -0.5rem;
  top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  pointer-events: none;
  z-index: 0;
}

.alive-float-panel span {
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font: 700 0.72rem/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: color-mix(in srgb, #fff 62%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--teal) 10%, transparent);
  animation: aliveFloatTag 4.5s var(--ease) infinite;
  opacity: 0.72;
}

.alive-float-panel span:nth-child(1) { animation-delay: 0s; align-self: flex-end; }
.alive-float-panel span:nth-child(2) { animation-delay: -1s; align-self: flex-start; margin-right: 1.2rem; }
.alive-float-panel span:nth-child(3) { animation-delay: -2s; align-self: flex-end; margin-right: 0.4rem; }
.alive-float-panel span:nth-child(4) { animation-delay: -3s; align-self: flex-start; margin-right: 1.6rem; }

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

.how-num {
  animation: aliveNumPulse 3.4s var(--ease) infinite;
}

.how-steps li:nth-child(2) .how-num { animation-delay: 0.4s; }
.how-steps li:nth-child(3) .how-num { animation-delay: 0.8s; }
.how-steps li:nth-child(4) .how-num { animation-delay: 1.2s; }

@keyframes aliveNumPulse {
  0%,
  100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* —— modes promise strip —— */
.alive-promise {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.alive-promise li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 14px;
  background: color-mix(in srgb, #fff 58%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--teal) 14%, transparent);
  font: 600 0.82rem/1.25 var(--font-body);
  color: var(--ink-soft);
  animation: aliveChipIn 0.65s var(--ease) both;
}

.alive-promise li:nth-child(1) { animation-delay: 0.05s; }
.alive-promise li:nth-child(2) { animation-delay: 0.15s; }
.alive-promise li:nth-child(3) { animation-delay: 0.25s; }

.alive-promise b {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #fff, var(--lime) 55%, var(--teal));
  box-shadow: 0 0 10px color-mix(in srgb, var(--lime) 50%, transparent);
  animation: aliveDotBlink 1.8s var(--ease) infinite;
}

.alive-promise li:nth-child(2) b { animation-delay: 0.25s; }
.alive-promise li:nth-child(3) b { animation-delay: 0.5s; }

@keyframes aliveDotBlink {
  0%,
  100% { transform: scale(0.85); opacity: 0.65; }
  50% { transform: scale(1.2); opacity: 1; }
}

.mode-card {
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}

.mode-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--teal) 16%, transparent);
}

.mode-price {
  animation: alivePriceTick 4s var(--ease) infinite;
}

@keyframes alivePriceTick {
  0%,
  100% { letter-spacing: -0.02em; }
  50% { letter-spacing: 0.01em; }
}

/* —— setup / context hints —— */
.alive-side-note,
.alive-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font: 600 0.8rem/1.2 var(--font-body);
  color: color-mix(in srgb, var(--ink-soft) 90%, var(--teal));
  background: color-mix(in srgb, var(--lime) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--teal) 16%, transparent);
  animation: aliveChipIn 0.6s var(--ease) both;
}

.alive-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--teal);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent);
  animation: aliveRadar 1.8s var(--ease) infinite;
}

@keyframes aliveRadar {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.person-panel {
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}

.person-panel:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--teal) 12%, transparent);
}

/* —— quiz atmosphere boost (speed only — keep existing keyframes) —— */
.quiz-ring.qr-1 {
  animation-duration: 36s;
}

.quiz-ring.qr-2 {
  animation-duration: 26s;
}

.quiz-ring.qr-3 {
  animation-duration: 16s;
}

.quiz-atmosphere {
  animation: aliveAtmosDrift 12s var(--ease) infinite alternate;
}

@keyframes aliveAtmosDrift {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

.q-text {
  animation: aliveQIn 0.45s var(--ease) both;
}

@keyframes aliveQIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.option {
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-spring),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.4s ease,
    opacity 0.35s ease,
    filter 0.35s ease;
}

.options {
  overflow: visible;
  position: relative;
  z-index: 2;
}

#view-quiz .quiz-stage,
#view-quiz .options {
  overflow: visible;
}

.option:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--teal) 12%, transparent);
}

/* lock others while pick plays */
.options.is-locking .option:not(.is-picked) {
  opacity: 0.12 !important;
  transform: scale(0.94) !important;
  filter: grayscale(0.55) blur(0.6px);
  pointer-events: none;
  z-index: 0 !important;
  transition:
    opacity 0.35s ease,
    transform 0.35s var(--ease),
    filter 0.35s ease !important;
}

.option.is-picked,
.option.is-picked.tone-1,
.option.is-picked.tone-2,
.option.is-picked.tone-3,
.option.is-picked.tone-4 {
  position: relative;
  z-index: 40 !important;
  overflow: visible !important;
  /* kill competing transform/transition so vanish reads clearly */
  transition: none !important;
  animation: optionPickVanish 0.9s var(--ease-spring) both !important;
  border-color: color-mix(in srgb, var(--lime) 70%, #fff) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--lime) 55%, transparent),
    0 0 36px color-mix(in srgb, var(--lime) 50%, transparent),
    0 22px 48px color-mix(in srgb, var(--teal) 28%, transparent) !important;
}

.option.is-picked::before {
  background: var(--lime) !important;
  color: var(--lime-ink) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--lime) 70%, transparent);
  animation: optionKeyPulse 0.9s var(--ease) both !important;
}

/* sweeping light on pick */
.option.is-picked::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 18%,
    color-mix(in srgb, #fff 65%, transparent) 48%,
    transparent 78%
  );
  animation: optionPickShine 0.7s var(--ease) both !important;
  pointer-events: none;
  z-index: 3;
  opacity: 0.9;
  filter: none !important;
}

@keyframes optionPickVanish {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: none;
  }
  18% {
    opacity: 1;
    transform: scale(1.07) translateY(-2px);
    filter: none;
  }
  38% {
    opacity: 1;
    transform: scale(1.02) translateY(0);
  }
  62% {
    opacity: 0.75;
    transform: scale(0.9) translateY(6px);
    filter: blur(0.5px);
  }
  100% {
    opacity: 0;
    transform: scale(0.28) translateY(-18px) rotate(-3deg);
    filter: blur(2px);
  }
}

@keyframes optionKeyPulse {
  0% { transform: translateY(-50%) scale(0.7); }
  30% { transform: translateY(-50%) scale(1.3); }
  70% { transform: translateY(-50%) scale(1); opacity: 1; }
  100% { transform: translateY(-50%) scale(0.6); opacity: 0; }
}

@keyframes optionPickShine {
  0% { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(130%) skewX(-12deg); opacity: 0; }
}

/* particle burst from pick — paint above the button face */
.option-pick-burst {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 50 !important;
  overflow: visible;
}

/* fixed overlay on #clickFxLayer — always above vanishing options */
.option-pick-burst.is-overlay {
  position: fixed !important;
  inset: auto !important;
  width: 0;
  height: 0;
  z-index: 80 !important;
  overflow: visible;
}

.option-pick-burst.is-overlay i {
  left: 0;
  top: 0;
  margin-left: -0.5em;
  margin-top: -0.5em;
}

.option-pick-burst i {
  position: absolute;
  /* --burst-x/y set from pointer click; keyboard keeps 50% center */
  left: var(--burst-x, 50%);
  top: var(--burst-y, 50%);
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--teal);
  text-shadow: 0 0 10px color-mix(in srgb, var(--lime) 55%, transparent);
  animation: optionSpark 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  opacity: 0;
  transform-origin: center center;
  z-index: 51;
  pointer-events: none;
}

.option-pick-burst i:nth-child(1) { --a: 0deg; --d: 52px; animation-delay: 0.02s; }
.option-pick-burst i:nth-child(2) { --a: 36deg; --d: 64px; animation-delay: 0.04s; color: var(--lime); }
.option-pick-burst i:nth-child(3) { --a: 72deg; --d: 48px; animation-delay: 0.06s; }
.option-pick-burst i:nth-child(4) { --a: 108deg; --d: 70px; animation-delay: 0.03s; }
.option-pick-burst i:nth-child(5) { --a: 144deg; --d: 56px; animation-delay: 0.07s; color: var(--lime); }
.option-pick-burst i:nth-child(6) { --a: 180deg; --d: 66px; animation-delay: 0.05s; }
.option-pick-burst i:nth-child(7) { --a: 216deg; --d: 50px; animation-delay: 0.08s; }
.option-pick-burst i:nth-child(8) { --a: 252deg; --d: 72px; animation-delay: 0.04s; color: var(--lime); }
.option-pick-burst i:nth-child(9) { --a: 288deg; --d: 58px; animation-delay: 0.06s; }
.option-pick-burst i:nth-child(10) { --a: 324deg; --d: 64px; animation-delay: 0.03s; }

@keyframes optionSpark {
  0% {
    opacity: 0.95;
    transform: rotate(var(--a)) translateY(0) scale(0.55) rotate(0deg);
  }
  40% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(var(--d) * -1.2)) scale(1.05) rotate(12deg);
  }
}

/* keep a short pop for relation buttons (not a full vanish) */
@keyframes optionPickEpic {
  0% { transform: scale(0.96); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* theme accents on pick glow */
body.theme-couple .option.is-picked {
  box-shadow:
    0 0 0 2px rgba(255, 179, 198, 0.7),
    0 0 36px rgba(255, 77, 109, 0.55),
    0 22px 48px rgba(180, 35, 74, 0.35) !important;
}
body.theme-couple .option-pick-burst i {
  color: #ff4d6d;
  text-shadow: 0 0 12px rgba(255, 143, 171, 0.85);
}

body.theme-friends .option.is-picked {
  box-shadow:
    0 0 0 2px rgba(255, 229, 102, 0.75),
    0 0 36px rgba(255, 159, 26, 0.55),
    0 22px 48px rgba(194, 65, 12, 0.3) !important;
}
body.theme-friends .option-pick-burst i {
  color: #ea580c;
  text-shadow: 0 0 12px rgba(255, 229, 102, 0.85);
  font-size: 0.88rem;
}

body.theme-family .option.is-picked {
  box-shadow:
    0 0 0 2px rgba(147, 197, 253, 0.75),
    0 0 36px rgba(56, 189, 248, 0.55),
    0 22px 48px rgba(30, 64, 175, 0.3) !important;
}
body.theme-family .option-pick-burst i {
  color: #2563eb;
  text-shadow: 0 0 12px rgba(147, 197, 253, 0.85);
}

/* relation pick — same wow */
.btn-relation {
  overflow: visible;
  isolation: isolate;
}

.btn-relation.is-picked-relation {
  animation: none;
}

.relation-actions:has(.is-picked-relation) .btn-relation:not(.is-picked-relation) {
  /* delight owns sibling dim */
}

.btn-relation.is-pick-burst .option-pick-burst i {
  font-size: 0.82rem;
}

.alive-quiz-tip {
  margin: 1rem 0 0;
  text-align: center;
  font: 600 0.78rem/1.3 var(--font-body);
  color: color-mix(in srgb, var(--ink-soft) 75%, var(--teal));
  letter-spacing: 0.01em;
  animation: aliveTipFade 4.5s var(--ease) infinite;
  transition: color 0.7s ease;
}

.alive-quiz-tip.is-tip-swap {
  animation: quizTipSwap 0.55s var(--ease) both, aliveTipFade 4.5s var(--ease) 0.55s infinite;
}

@keyframes quizTipSwap {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
  }
  to {
    opacity: 0.85;
    transform: translateY(0);
    filter: none;
  }
}

/* paid: own answer */
.option.is-custom {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  margin-top: 0.15rem;
  padding-left: 1.05rem !important;
  border-style: dashed;
  background: color-mix(in srgb, var(--glass-strong) 88%, var(--teal));
  /* base .option starts at opacity:0 — only 1–8 had enter anims */
  opacity: 1;
}

/* hide key badge only — keep ::after for pick shine */
.option.is-custom::before {
  display: none !important;
}

.option.is-custom:not(.is-picked)::after {
  display: none !important;
}

.option.is-custom .option-custom-label {
  font: 800 0.98rem/1.2 var(--font-display, var(--font-body));
  letter-spacing: 0.01em;
}

.option.is-custom .option-custom-sub {
  font: 600 0.72rem/1.25 var(--font-body);
  color: var(--ink-soft);
}

.option.is-custom.is-open,
.option.is-custom.is-picked {
  border-style: solid;
}

.custom-answer {
  margin-top: 0.85rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--teal));
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass-strong) 92%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  animation: customAnswerIn 0.35s var(--ease-spring) both;
}

.custom-answer.is-invalid {
  border-color: color-mix(in srgb, #e11d48 55%, var(--line));
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}

.custom-answer-lead {
  margin: 0 0 0.7rem;
  font: 600 0.86rem/1.4 var(--font-body);
  color: var(--ink-soft);
}

.custom-answer-text {
  width: 100%;
  resize: vertical;
  min-height: 4.5rem;
  max-height: 10rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, #fff 72%, transparent);
  color: var(--ink);
  font: 600 0.95rem/1.4 var(--font-body);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-answer-text:focus {
  border-color: color-mix(in srgb, var(--teal) 65%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent);
}

.custom-answer-match {
  margin: 0.7rem 0 0;
  font: 600 0.84rem/1.4 var(--font-body);
  color: var(--ink-soft);
}

.custom-answer-match strong {
  color: var(--ink);
  font-weight: 800;
}

.custom-answer-match[data-confidence="high"] strong {
  color: color-mix(in srgb, var(--teal-deep) 75%, var(--ink));
}

.custom-answer-match[data-confidence="low"] {
  opacity: 0.88;
}

.custom-answer-near,
.custom-near-list,
.custom-near-chip {
  display: none !important;
}

.custom-answer-hint {
  margin: 0.55rem 0 0;
  font: 700 0.78rem/1.3 var(--font-body);
  color: #be123c;
}

.custom-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

@keyframes customAnswerIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.theme-couple .custom-answer-text:focus {
  border-color: color-mix(in srgb, #ec4899 65%, var(--line));
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18);
}

body.theme-friends .custom-answer-text:focus {
  border-color: color-mix(in srgb, #f59e0b 65%, var(--line));
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

body.theme-family .custom-answer-text:focus {
  border-color: color-mix(in srgb, #38bdf8 65%, var(--line));
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

@keyframes aliveTipFade {
  0%,
  100% { opacity: 0.35; }
  50% { opacity: 0.85; }
}

.progress-fill {
  box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 40%, transparent);
  transition: width 0.45s var(--ease);
}

.who-badge {
  animation: aliveBadgeSoft 2.4s var(--ease) infinite;
}

@keyframes aliveBadgeSoft {
  0%,
  100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--lime) 12%, transparent); }
}

/* —— handoff rings —— */
.handoff-wrap {
  position: relative;
}

.alive-handoff-rings {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(52vw, 220px);
  height: min(52vw, 220px);
  transform: translate(-50%, -40%);
  pointer-events: none;
  z-index: 0;
}

.alive-handoff-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--teal) 28%, transparent);
  animation: aliveHandoffRing 3.2s var(--ease) infinite;
  opacity: 0;
}

.alive-handoff-rings span:nth-child(2) { animation-delay: 0.7s; }
.alive-handoff-rings span:nth-child(3) { animation-delay: 1.4s; }

@keyframes aliveHandoffRing {
  0% { transform: scale(0.55); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Twin core on handoff — same theme, alternate look (not a copy of #phaseCore) */
.handoff-core {
  position: relative;
  z-index: 1;
  width: min(42vw, 168px);
  height: min(42vw, 168px);
  margin: 0 auto 1.35rem;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.handoff-core-glow {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--lime) 45%, transparent), transparent 55%),
    radial-gradient(circle at 62% 68%, color-mix(in srgb, var(--teal) 35%, transparent), transparent 58%);
  filter: blur(14px);
  opacity: 0.75;
  animation: handoffGlowPulse 4.2s ease-in-out infinite;
  z-index: 0;
}

.handoff-core-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(160deg, color-mix(in srgb, var(--lime) 35%, #fff), color-mix(in srgb, var(--teal) 40%, #e8f5ef));
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--teal) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  z-index: 1;
}

.handoff-core-ring {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--teal) 35%, transparent);
  animation: handoffRingSpin 18s linear infinite;
  z-index: 2;
  pointer-events: none;
}

.handoff-heart,
.handoff-face,
.handoff-dna,
.handoff-core-mark {
  position: relative;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.45s var(--ease);
}

.handoff-core-mark {
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
}

.handoff-core[data-shape="default"] .handoff-core-mark {
  opacity: 0.85;
  visibility: visible;
  color: color-mix(in srgb, var(--teal) 70%, var(--ink));
}

/* Couple: outline heart (main core = filled 3D heart) */
.handoff-core[data-shape="couple"] .handoff-core-disc {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7), transparent 40%),
    linear-gradient(155deg, #ffe4ec, #ffb3c6 55%, #ff8fab);
}
.handoff-core[data-shape="couple"] .handoff-core-glow {
  background:
    radial-gradient(circle at 40% 35%, rgba(255, 143, 171, 0.55), transparent 55%),
    radial-gradient(circle at 65% 70%, rgba(180, 35, 74, 0.28), transparent 58%);
}
.handoff-core[data-shape="couple"] .handoff-core-ring {
  border-color: color-mix(in srgb, #ff5c8a 45%, transparent);
  border-style: dotted;
}
.handoff-core[data-shape="couple"] .handoff-heart {
  opacity: 1;
  visibility: visible;
  width: 58%;
  height: 58%;
  color: #c9184a;
  filter: drop-shadow(0 0 12px rgba(255, 92, 138, 0.45));
  animation: handoffHeartBeat 2.4s ease-in-out infinite;
}

/* Friends: flat line-face (main = detailed 3D face / 😊) */
.handoff-core[data-shape="friends"] .handoff-core-disc {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.75), transparent 42%),
    linear-gradient(155deg, #fff8e1, #ffe082 50%, #ffca28);
}
.handoff-core[data-shape="friends"] .handoff-core-glow {
  background:
    radial-gradient(circle at 42% 35%, rgba(255, 213, 74, 0.55), transparent 55%),
    radial-gradient(circle at 60% 70%, rgba(255, 167, 38, 0.3), transparent 58%);
}
.handoff-core[data-shape="friends"] .handoff-core-ring {
  border-color: color-mix(in srgb, #f9a825 50%, transparent);
  border-style: solid;
  border-width: 2.5px;
  animation: handoffRingSpin 12s linear infinite reverse;
}
.handoff-core[data-shape="friends"] .handoff-face {
  opacity: 1;
  visibility: visible;
  position: absolute;
  inset: 22%;
  z-index: 3;
}
.handoff-face .hf-eye {
  position: absolute;
  top: 32%;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  background: #5d4037;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.25);
}
.handoff-face .hf-eye.left { left: 22%; }
.handoff-face .hf-eye.right { right: 22%; }
.handoff-face .hf-blush {
  position: absolute;
  top: 48%;
  width: 16%;
  height: 10%;
  border-radius: 50%;
  background: rgba(255, 112, 67, 0.35);
  filter: blur(2px);
}
.handoff-face .hf-blush.left { left: 12%; }
.handoff-face .hf-blush.right { right: 12%; }
.handoff-face .hf-smile {
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 22%;
  height: 22%;
  border: 3px solid #5d4037;
  border-top: none;
  border-radius: 0 0 50% 50%;
  background: transparent;
}
.handoff-core[data-shape="friends"] .handoff-face {
  animation: handoffWink 5s ease-in-out infinite;
}

/* Family: flat helix bars (main = 3D DNA cell) */
.handoff-core[data-shape="family"] .handoff-core-disc {
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.7), transparent 40%),
    linear-gradient(155deg, #e3f2fd, #90caf9 55%, #42a5f5);
}
.handoff-core[data-shape="family"] .handoff-core-glow {
  background:
    radial-gradient(circle at 40% 35%, rgba(144, 202, 249, 0.55), transparent 55%),
    radial-gradient(circle at 65% 70%, rgba(37, 99, 235, 0.28), transparent 58%);
}
.handoff-core[data-shape="family"] .handoff-core-ring {
  border-color: color-mix(in srgb, #2563eb 40%, transparent);
  border-style: double;
  border-width: 3px;
}
.handoff-core[data-shape="family"] .handoff-dna {
  opacity: 1;
  visibility: visible;
  position: absolute;
  inset: 18%;
  z-index: 3;
}
.handoff-dna i {
  position: absolute;
  left: 50%;
  width: 58%;
  height: 3px;
  margin-left: -29%;
  border-radius: 2px;
  background: linear-gradient(90deg, #1e88e5, #90caf9, #1e88e5);
  transform-origin: center;
  animation: handoffDnaTwist 3.6s ease-in-out infinite;
}
.handoff-dna i:nth-child(1) { top: 12%; animation-delay: 0s; width: 42%; margin-left: -21%; }
.handoff-dna i:nth-child(2) { top: 28%; animation-delay: 0.15s; }
.handoff-dna i:nth-child(3) { top: 44%; animation-delay: 0.3s; width: 50%; margin-left: -25%; }
.handoff-dna i:nth-child(4) { top: 60%; animation-delay: 0.45s; }
.handoff-dna i:nth-child(5) { top: 76%; animation-delay: 0.6s; width: 42%; margin-left: -21%; }
.handoff-dna b {
  position: absolute;
  top: 8%;
  bottom: 8%;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #64b5f6, #1565c0);
  opacity: 0.85;
}
.handoff-dna b:first-of-type { left: 28%; transform: rotate(-8deg); }
.handoff-dna b:last-of-type { right: 28%; transform: rotate(8deg); }

.handoff-core.is-handoff-pop {
  animation: handoffCorePop 0.7s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

@keyframes handoffGlowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.06); }
}
@keyframes handoffRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes handoffHeartBeat {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.08); }
  55% { transform: scale(0.96); }
}
@keyframes handoffWink {
  0%, 40%, 60%, 100% { transform: scale(1); }
  48% { transform: scale(1.04) rotate(-2deg); }
  52% { transform: scale(1.02) rotate(2deg); }
}
@keyframes handoffDnaTwist {
  0%, 100% { transform: scaleX(0.55); opacity: 0.7; }
  50% { transform: scaleX(1); opacity: 1; }
}
@keyframes handoffCorePop {
  from { opacity: 0; transform: scale(0.72) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

body.theme-couple .alive-handoff-rings span {
  border-color: color-mix(in srgb, #ff5c8a 40%, transparent);
}
body.theme-friends .alive-handoff-rings span {
  border-color: color-mix(in srgb, #f9a825 45%, transparent);
}
body.theme-family .alive-handoff-rings span {
  border-color: color-mix(in srgb, #2563eb 40%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .handoff-core-glow,
  .handoff-core-ring,
  .handoff-core[data-shape="couple"] .handoff-heart,
  .handoff-core[data-shape="friends"] .handoff-face,
  .handoff-dna i,
  .handoff-core.is-handoff-pop {
    animation: none !important;
  }
}

/* —— results glow —— */
.results-wrap {
  position: relative;
}

.alive-results-glow {
  position: absolute;
  left: 50%;
  top: 4rem;
  width: min(70vw, 420px);
  height: min(70vw, 420px);
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 40%, color-mix(in srgb, var(--lime) 28%, transparent), transparent 48%),
    radial-gradient(circle at 60% 60%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 55%);
  filter: blur(12px);
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
  animation: aliveResultsGlow 6s var(--ease) infinite alternate;
}

@keyframes aliveResultsGlow {
  from { opacity: 0.4; transform: translateX(-50%) scale(0.92); }
  to { opacity: 0.75; transform: translateX(-50%) scale(1.05); }
}

.score-hero,
.cats,
.result-factors,
.friction,
.sync,
.deep-report,
.results-actions {
  position: relative;
  z-index: 1;
}

/* results atmosphere + factor mosaic */
.results-mosaic {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.results-mosaic i {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border-radius: 40% 60% 55% 45%;
  opacity: 0.22;
  filter: blur(18px);
  animation: resultsMosaicFloat 14s ease-in-out infinite alternate;
}

.results-mosaic i:nth-child(1) {
  left: 6%;
  top: 18%;
  background: color-mix(in srgb, var(--lime) 55%, transparent);
}
.results-mosaic i:nth-child(2) {
  right: 8%;
  top: 28%;
  width: 5rem;
  height: 5rem;
  background: color-mix(in srgb, var(--teal) 40%, transparent);
  animation-delay: -3s;
}
.results-mosaic i:nth-child(3) {
  left: 18%;
  bottom: 22%;
  width: 9rem;
  height: 6rem;
  background: color-mix(in srgb, var(--lime) 30%, var(--teal));
  opacity: 0.14;
  animation-delay: -6s;
}
.results-mosaic i:nth-child(4) {
  right: 16%;
  bottom: 12%;
  background: color-mix(in srgb, var(--teal) 35%, transparent);
  animation-delay: -2s;
}
.results-mosaic i:nth-child(5) {
  left: 42%;
  top: 8%;
  width: 4rem;
  height: 4rem;
  background: color-mix(in srgb, var(--lime) 45%, transparent);
  animation-delay: -8s;
}
.results-mosaic i:nth-child(6) {
  right: 30%;
  top: 55%;
  width: 6rem;
  height: 3.5rem;
  background: color-mix(in srgb, var(--teal) 25%, transparent);
  animation-delay: -5s;
}

@keyframes resultsMosaicFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-12px) scale(1.06); }
}

body.theme-friends .results-mosaic i:nth-child(odd) {
  background: color-mix(in srgb, #ffd54a 50%, transparent);
}
body.theme-couple .results-mosaic i:nth-child(odd) {
  background: color-mix(in srgb, #ff6b8a 45%, transparent);
}
body.theme-family .results-mosaic i:nth-child(odd) {
  background: color-mix(in srgb, #60a5fa 45%, transparent);
}

.result-factors {
  margin: 1.25rem 0 0.5rem;
}

.result-factors-label {
  margin-bottom: 0.75rem;
}

.result-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
}

.result-factor {
  padding: 0.95rem 1.05rem;
  border-radius: 1.1rem;
  background: color-mix(in srgb, #fff 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 5%, transparent);
  animation: fadeUp 0.5s var(--ease) both;
}

.result-factor h4 {
  margin: 0 0 0.35rem;
  font: 700 0.92rem/1.25 var(--font-body);
  letter-spacing: -0.01em;
}

.result-factor p {
  margin: 0;
  font: 500 0.82rem/1.45 var(--font-body);
  color: color-mix(in srgb, var(--ink-soft) 92%, var(--ink));
}

.result-factor.is-good {
  border-color: color-mix(in srgb, var(--teal) 28%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lime) 12%, #fff), color-mix(in srgb, #fff 88%, transparent));
}

.result-factor.is-warn {
  border-color: color-mix(in srgb, #e8b84a 40%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffe9a8 35%, #fff), color-mix(in srgb, #fff 90%, transparent));
}

.result-factor.is-bad {
  border-color: color-mix(in srgb, #ff6b8a 28%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, #ffd0da 30%, #fff), color-mix(in srgb, #fff 90%, transparent));
}

.cat-hint {
  margin: 0.35rem 0 0.55rem;
  font: 500 0.78rem/1.4 var(--font-body);
  color: color-mix(in srgb, var(--ink-soft) 88%, var(--ink));
}

.friction-tip {
  display: inline-block;
  margin-top: 0.35rem;
  font: 500 0.78rem/1.4 var(--font-body);
  color: color-mix(in srgb, var(--teal) 70%, var(--ink-soft));
  font-style: normal;
}

.deep-stats {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

@media (prefers-reduced-motion: reduce) {
  .results-mosaic i {
    animation: none;
  }
}

.score-num span {
  animation: aliveScoreBreath 3.5s var(--ease) infinite;
}

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

.cats > * {
  transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

.cats > *:hover {
  transform: translateY(-3px);
}

/* —— remote wait —— */
.remote-wait-orb {
  animation-duration: 3.2s;
}

/* —— aurora / atmosphere a bit livelier —— */
.aurora-blob {
  animation-duration: 14s;
}

.aurora-blob.b { animation-duration: 18s; }
.aurora-blob.c { animation-duration: 22s; }
.aurora-blob.d { animation-duration: 16s; }

.peak-halo {
  animation: aliveHalo 8s var(--ease) infinite alternate;
}

@keyframes aliveHalo {
  from { opacity: 0.35; transform: scale(0.96); }
  to { opacity: 0.65; transform: scale(1.04); }
}

/* —— invite / kb soft presence —— */
.invite-fab {
  transition:
    transform 0.3s var(--ease-spring),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.35s ease;
}

.kb-help-btn {
  animation: aliveKbNudge 5s var(--ease) infinite;
}

@keyframes aliveKbNudge {
  0%,
  88%,
  100% { transform: translateY(0); }
  92% { transform: translateY(-3px); }
  96% { transform: translateY(0); }
}

/* —— mobile —— */
@media (max-width: 820px) {
  .alive-motes i:nth-child(n + 12) {
    display: none;
  }

  .alive-float-panel {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 0.9rem;
    opacity: 0.9;
  }

  .alive-float-panel span {
    align-self: auto !important;
    margin: 0 !important;
    animation: none;
    opacity: 0.8;
  }

  .alive-promise {
    grid-template-columns: 1fr;
  }

  .alive-chips {
    max-width: none;
  }

  .alive-handoff-rings {
    top: 14%;
    width: min(70vw, 200px);
    height: min(70vw, 200px);
  }

  .alive-side-note {
    font-size: 0.74rem;
    padding: 0.48rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alive-motes i,
  .mood-glyph,
  .logo-mark,
  .btn-primary,
  .alive-float-panel span,
  .how-num,
  .alive-promise b,
  .alive-pulse-dot,
  .quiz-atmosphere,
  .alive-quiz-tip,
  .who-badge,
  .alive-handoff-rings span,
  .alive-results-glow,
  .score-num span,
  .peak-halo,
  .kb-help-btn,
  .alive-chips li,
  .alive-promise li,
  .mode-price,
  .q-text,
  .welcome-waveband path {
    animation: none !important;
  }

  .btn:hover,
  .mode-card:hover,
  .option:hover,
  .how-steps li:hover {
    transform: none;
  }

  .option.is-picked,
  .btn-relation.is-picked-relation,
  .option-pick-burst i,
  .option.is-picked::after,
  .option.is-picked::before {
    animation: none !important;
  }

  .option.is-picked {
    opacity: 0.35 !important;
    transform: scale(0.96) !important;
  }

  .options.is-locking .option:not(.is-picked) {
    filter: none;
    opacity: 0.45;
  }

  .custom-answer {
    animation: none !important;
  }
}