/* styles/buttons.css — split from styles.css (structural only) */

:where(.app-button, .mode-card) {
  --btn-border-radius: 20px;
  --btn-border-color: rgba(206, 185, 255, 0.18);
  --btn-text-color: #f5f0ff;
  --btn-background: linear-gradient(140deg, rgba(27, 36, 66, 0.82), rgba(44, 21, 74, 0.86));
  --btn-shadow:
    0 14px 28px rgba(8, 6, 24, 0.52),
    0 0 24px rgba(124, 95, 228, 0.22);
  --btn-shadow-hover:
    0 18px 34px rgba(12, 8, 34, 0.6),
    0 0 40px rgba(168, 229, 255, 0.32),
    0 0 66px rgba(153, 124, 255, 0.28);
  --btn-glow: none;
  --btn-glow-hover: none;
  --btn-base-scale: 1;
  --btn-hover-lift: -1px;
  --btn-hover-scale: 1.02;
  --btn-sheen-opacity: 0.3;
  --btn-morph-opacity: 0.5;
  --btn-morph-blur: 9px;
  --btn-morph-scale: 0.9;
  --btn-motion-transform-dur: 220ms;
  --btn-motion-visual-dur: 360ms;
  --btn-transition-ease: ease;
}

:where(.app-button, .mode-card) {
  position: relative;
  border: 1px solid var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  color: var(--btn-text-color);
  background: var(--btn-background);
  box-shadow: var(--btn-shadow);
  /* clip-path режет box-shadow; наружное свечение — через --btn-glow (drop-shadow) */
  overflow: visible;
  isolation: isolate;
  filter: var(--btn-glow);
  transition:
    transform var(--btn-motion-transform-dur) var(--btn-transition-ease),
    opacity var(--btn-motion-transform-dur) var(--btn-transition-ease),
    box-shadow var(--btn-motion-visual-dur) var(--btn-transition-ease),
    filter var(--btn-motion-visual-dur) var(--btn-transition-ease),
    border-color var(--btn-motion-visual-dur) var(--btn-transition-ease),
    background var(--btn-motion-visual-dur) var(--btn-transition-ease);
}

:where(.app-button, .mode-card)::before {
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 22%, rgba(157, 124, 255, var(--btn-sheen-opacity)), rgba(157, 124, 255, 0) 44%),
    radial-gradient(circle at 84% 78%, rgba(94, 206, 255, calc(var(--btn-sheen-opacity) * 0.9)), rgba(94, 206, 255, 0) 48%);
  z-index: 0;
}

:where(.app-button, .mode-card)::after {
  inset: 16%;
  border-radius: 56% 44% 58% 42% / 42% 58% 39% 61%;
  background:
    radial-gradient(circle at 34% 30%, rgba(246, 238, 255, 0.32), rgba(246, 238, 255, 0) 52%),
    radial-gradient(circle at 70% 64%, rgba(173, 241, 255, 0.26), rgba(173, 241, 255, 0) 56%);
  opacity: var(--btn-morph-opacity);
  filter: blur(var(--btn-morph-blur));
  transform: scale(var(--btn-morph-scale));
  transition:
    opacity var(--btn-motion-visual-dur) var(--btn-transition-ease),
    filter var(--btn-motion-visual-dur) var(--btn-transition-ease),
    transform var(--btn-motion-visual-dur) var(--btn-transition-ease);
  z-index: 1;
}

.app-button {
  --hover-bump: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 10px 16px;
  cursor: pointer;
}

.app-button:not(.btn-variant-menu) {
  align-items: center;
  justify-content: center;
  text-align: center;
  place-content: center;
  --btn-border-color: rgba(206, 185, 255, 0.08);
  --btn-background: linear-gradient(
    140deg,
    rgba(66, 42, 136, 0.58),
    rgba(42, 84, 154, 0.5),
    rgba(54, 128, 133, 0.34),
    rgba(66, 36, 122, 0.56)
  );
  --btn-shadow:
    0 7px 14px rgba(8, 6, 24, 0.36),
    0 0 12px rgba(124, 95, 228, 0.14),
    0 0 20px rgba(75, 196, 255, 0.08);
  --btn-shadow-hover:
    0 10px 18px rgba(12, 8, 34, 0.44),
    0 0 18px rgba(168, 229, 255, 0.24),
    0 0 30px rgba(153, 124, 255, 0.16);
  --btn-sheen-opacity: 0.14;
  --btn-morph-opacity: 0.12;
  --btn-morph-blur: 4px;
  --btn-morph-scale: 0.96;
  --btn-hover-lift: -1px;
  --btn-hover-scale: 1.008;
}

.app-button:not(.btn-variant-menu)::after {
  inset: 19%;
}

:where(.app-button > *:not(.shared-particle-port-canvas)) {
  position: relative;
  z-index: 3;
}

.app-button > .btn-label {
  position: relative;
  z-index: 3;
}

.app-button:not(.btn-variant-menu):not(.btn-variant-card):is(:hover, .active):not(:disabled) {
  --hover-bump: var(--btn-hover-lift);
  transform: translateY(var(--btn-hover-lift)) scale(calc(var(--btn-base-scale) * var(--btn-hover-scale)));
  box-shadow: var(--btn-shadow-hover);
  filter: var(--btn-glow-hover);
}

.app-button:not(.btn-variant-menu):not(.btn-variant-card):is(:hover, .active):not(:disabled)::after {
  opacity: calc(var(--btn-morph-opacity) + 0.08);
  filter: blur(calc(var(--btn-morph-blur) + 1px));
  transform: scale(calc(var(--btn-morph-scale) + 0.02));
}

.app-button:not(.btn-variant-menu):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(149, 236, 255, 0.24),
    0 10px 18px rgba(8, 6, 24, 0.42),
    0 0 14px rgba(168, 229, 255, 0.18);
  filter: var(--btn-glow-hover);
}

.app-button:not(.btn-variant-menu):disabled {
  opacity: 0.46;
  cursor: not-allowed;
  filter: var(--btn-glow) saturate(0.7) brightness(0.82);
}

.btn-variant-menu {
  --btn-base-scale: 1;
}

.btn-variant-primary {
  min-height: 42px;
  --btn-border-color: rgba(206, 185, 255, 0.09);
}

.btn-variant-ghost {
  --btn-background: linear-gradient(140deg, rgba(52, 34, 104, 0.42), rgba(34, 70, 128, 0.34), rgba(52, 32, 96, 0.42));
  --btn-border-color: rgba(176, 160, 220, 0.06);
  --btn-sheen-opacity: 0.06;
}

.btn-variant-ghost::after {
  opacity: 0.1;
  filter: blur(3px);
}

.btn-variant-icon {
  padding: 0;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-content: center;
  --btn-border-radius: 18px;
  --btn-border-color: rgba(206, 185, 255, 0.07);
  --btn-sheen-opacity: 0.08;
  --btn-morph-opacity: 0.1;
  --btn-morph-blur: 3px;
  --btn-morph-scale: 0.97;
  --btn-hover-scale: 1.03;
  /* плотнее фон — ореол не просвечивает сквозь иконку */
  --btn-background: linear-gradient(140deg, rgba(18, 24, 46, 0.96), rgba(36, 16, 62, 0.97));
}

.btn-variant-option {
  justify-content: center;
  text-align: center;
  overflow: visible;
  --btn-background: linear-gradient(140deg, rgba(28, 22, 56, 0.96), rgba(24, 42, 78, 0.94), rgba(30, 20, 54, 0.96));
  --btn-border-color: rgba(163, 149, 208, 0.1);
  --btn-sheen-opacity: 0.06;
  --btn-morph-opacity: 0.07;
  --btn-morph-blur: 2px;
  --btn-morph-scale: 0.99;
  --btn-hover-lift: 0px;
  --btn-hover-scale: 1.004;
}

.btn-variant-option.btn-face-display {
  letter-spacing: 0.02em;
}

.btn-variant-option.btn-font-sm {
  --btn-font-size: clamp(0.98rem, 2.5vw, 1.18rem);
}

.btn-variant-option.btn-sparkles-on {
  --btn-particle-opacity: 0.1;
}

.btn-variant-card {
  --btn-border-radius: 14px;
  --btn-glow: none;
  --btn-glow-hover: none;
  display: block;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
  filter: none;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  animation: none !important;
}

.btn-variant-card::before,
.btn-variant-card::after {
  display: none !important;
}

.btn-variant-card.btn-sparkles-on::before {
  display: none !important;
}


.btn-variant-ritual {
  --btn-border-radius: 46% 54% 52% 48% / 47% 45% 55% 53%;
}

.btn-intensity-full {
  --btn-sheen-opacity: 0.34;
  --btn-hover-scale: 1.02;
}

.btn-intensity-medium {
  --btn-sheen-opacity: 0.24;
  --btn-hover-scale: 1.015;
}

.btn-intensity-low {
  --btn-sheen-opacity: 0.14;
  --btn-hover-scale: 1.01;
}

.btn-motion-full {
  --btn-motion-transform-dur: 260ms;
  --btn-motion-visual-dur: 420ms;
}

.btn-motion-reduced {
  --btn-motion-transform-dur: 150ms;
  --btn-motion-visual-dur: 210ms;
}

.btn-motion-none {
  --btn-motion-transform-dur: 0ms;
  --btn-motion-visual-dur: 0ms;
  --btn-hover-scale: 1;
  --btn-hover-lift: 0px;
}

.btn-morph-on {
  --btn-morph-opacity: 0.26;
  --btn-morph-blur: 5px;
  --btn-morph-scale: 0.95;
}

.btn-morph-off {
  --btn-morph-opacity: 0.08;
  --btn-morph-blur: 3px;
  --btn-morph-scale: 0.98;
}

.btn-glow-strong {
  --btn-shadow:
    0 14px 28px rgba(8, 6, 24, 0.52),
    0 0 12px rgba(124, 95, 228, 0.12);
  --btn-shadow-hover:
    0 18px 34px rgba(12, 8, 34, 0.58),
    0 0 16px rgba(168, 229, 255, 0.16);
  --btn-glow: none;
  --btn-glow-hover: none;
}

.btn-glow-soft {
  --btn-shadow:
    0 8px 16px rgba(8, 6, 24, 0.36),
    0 0 10px rgba(124, 95, 228, 0.1);
  --btn-shadow-hover:
    0 11px 20px rgba(12, 8, 34, 0.44),
    0 0 12px rgba(168, 229, 255, 0.14);
  --btn-glow: none;
  --btn-glow-hover: none;
}

.btn-glow-off {
  --btn-shadow: 0 4px 8px rgba(8, 6, 24, 0.28);
  --btn-shadow-hover: 0 6px 11px rgba(8, 6, 24, 0.32);
  --btn-glow: none;
  --btn-glow-hover: none;
}

/* Внешний ореол: силуэт-halo за кнопкой (filter drop-shadow светил всю иконку) */
.btn-shell {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
  overflow: visible;
  filter: none;
}

.btn-shell-stretch {
  display: flex;
  width: 100%;
}

.btn-shell > .app-button {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  filter: none !important;
}

.btn-shell-soft,
.btn-shell-strong {
  filter: none;
}

/* text/pill/option: drop-shadow по силуэту (в т.ч. morph); halo-rect тут врёт форму */
.btn-shell-stretch.btn-shell-soft,
.btn-shell-stretch.btn-shell-strong {
  filter:
    drop-shadow(0 0 1.5px rgba(220, 248, 255, 0.8))
    drop-shadow(0 0 7px rgba(124, 232, 255, 0.42));
}

.btn-shell-stretch .btn-halo {
  display: none;
}

.btn-shell-stretch.btn-shell-soft:has(.app-button:hover:not(:disabled)),
.btn-shell-stretch.btn-shell-soft:has(.app-button:focus-visible),
.btn-shell-stretch.btn-shell-soft:has(.app-button.active),
.btn-shell-stretch.btn-shell-strong:has(.app-button:hover:not(:disabled)),
.btn-shell-stretch.btn-shell-strong:has(.app-button:focus-visible),
.btn-shell-stretch.btn-shell-strong:has(.app-button.active),
.app-dropdown.open > .btn-shell-stretch.btn-shell-soft,
.app-dropdown.open > .btn-shell-stretch.btn-shell-strong {
  filter:
    drop-shadow(0 0 2px rgba(240, 252, 255, 0.95))
    drop-shadow(0 0 10px rgba(150, 236, 255, 0.58));
}

.btn-halo {
  position: absolute;
  inset: -12px;
  z-index: 0;
  pointer-events: none;
  opacity: var(--ui-edge-halo-opacity);
  transition: opacity 280ms ease;
}

.btn-halo-core,
.btn-halo-outer {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  transform-origin: center center;
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;
}

.btn-halo-fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.btn-halo-core {
  filter: blur(7px);
  transform: scale(1.05);
  opacity: 0.72;
}

.btn-halo-core .btn-halo-fill {
  background: var(--ui-edge-halo-core);
}

.btn-halo-outer {
  filter: blur(12px);
  transform: scale(1.1);
  opacity: 0.4;
}

.btn-halo-outer .btn-halo-fill {
  background: var(--ui-edge-halo-outer);
}

.btn-shell-soft:has(.app-button:hover:not(:disabled)) .btn-halo,
.btn-shell-soft:has(.app-button:focus-visible) .btn-halo,
.btn-shell-soft:has(.app-button.active) .btn-halo,
.btn-shell-strong:has(.app-button:hover:not(:disabled)) .btn-halo,
.btn-shell-strong:has(.app-button:focus-visible) .btn-halo,
.btn-shell-strong:has(.app-button.active) .btn-halo,
.app-dropdown.open > .btn-shell-soft .btn-halo,
.app-dropdown.open > .btn-shell-strong .btn-halo {
  opacity: var(--ui-edge-halo-opacity-hover);
}

.btn-shell-soft:has(.app-button:hover:not(:disabled)) .btn-halo-core,
.btn-shell-soft:has(.app-button:focus-visible) .btn-halo-core,
.btn-shell-soft:has(.app-button.active) .btn-halo-core,
.btn-shell-strong:has(.app-button:hover:not(:disabled)) .btn-halo-core,
.btn-shell-strong:has(.app-button:focus-visible) .btn-halo-core,
.btn-shell-strong:has(.app-button.active) .btn-halo-core,
.app-dropdown.open > .btn-shell-soft .btn-halo-core,
.app-dropdown.open > .btn-shell-strong .btn-halo-core {
  filter: blur(8px);
  transform: scale(1.07);
  opacity: 0.88;
}

.btn-shell-soft:has(.app-button:hover:not(:disabled)) .btn-halo-outer,
.btn-shell-soft:has(.app-button:focus-visible) .btn-halo-outer,
.btn-shell-soft:has(.app-button.active) .btn-halo-outer,
.btn-shell-strong:has(.app-button:hover:not(:disabled)) .btn-halo-outer,
.btn-shell-strong:has(.app-button:focus-visible) .btn-halo-outer,
.btn-shell-strong:has(.app-button.active) .btn-halo-outer,
.app-dropdown.open > .btn-shell-soft .btn-halo-outer,
.app-dropdown.open > .btn-shell-strong .btn-halo-outer {
  filter: blur(14px);
  transform: scale(1.14);
  opacity: 0.52;
}

.intro-ritual-figure-dropdown > .btn-shell,
.intro-ritual-anim-dropdown > .btn-shell,
.app-dropdown-options-viewport > .btn-shell {
  display: flex;
  width: 100%;
}

.btn-sparkles-on {
  --btn-particle-opacity: 0.22;
}

/* Sheen без baked-точек — партиклы из shared-particle-field. */
.app-button:not(.btn-variant-menu).btn-sparkles-on::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(157, 124, 255, var(--btn-sheen-opacity)), rgba(157, 124, 255, 0) 44%),
    radial-gradient(circle at 84% 78%, rgba(94, 206, 255, calc(var(--btn-sheen-opacity) * 0.9)), rgba(94, 206, 255, 0) 48%);
  animation: none;
}

.app-button > .shared-particle-port-canvas {
  position: absolute;
  inset: 0;
  /* Выше ::before/::after (0/1), ниже .btn-label (3) — иначе партиклы не видны. */
  z-index: 2 !important;
  border-radius: inherit;
  mix-blend-mode: screen;
  opacity: 0.95;
  pointer-events: none;
}

.app-button:not(.btn-variant-menu).btn-morph-on {
  clip-path: polygon(5% 16%, 13% 8%, 25% 6%, 39% 8%, 52% 6%, 66% 8%, 79% 7%, 90% 12%, 95% 23%, 96% 38%, 97% 52%, 96% 67%, 95% 81%, 88% 91%, 74% 95%, 59% 94%, 44% 96%, 29% 94%, 16% 91%, 8% 81%, 5% 67%, 4% 52%, 5% 36%);
  -webkit-clip-path: polygon(5% 16%, 13% 8%, 25% 6%, 39% 8%, 52% 6%, 66% 8%, 79% 7%, 90% 12%, 95% 23%, 96% 38%, 97% 52%, 96% 67%, 95% 81%, 88% 91%, 74% 95%, 59% 94%, 44% 96%, 29% 94%, 16% 91%, 8% 81%, 5% 67%, 4% 52%, 5% 36%);
  animation: appButtonEdgeMorph 9s ease-in-out infinite;
}

.btn-sparkles-off::before {
  opacity: 0.65;
}

.btn-size-sm {
  font-size: 0.88rem;
  padding: 8px 12px;
}

.btn-size-md {
  font-size: 0.95rem;
  padding: 10px 16px;
}

.btn-size-lg {
  font-size: 1rem;
  padding: 12px 18px;
}

.btn-variant-card.btn-size-sm,
.btn-variant-card.btn-size-md,
.btn-variant-card.btn-size-lg,
.btn-variant-icon.btn-size-sm,
.btn-variant-icon.btn-size-md,
.btn-variant-icon.btn-size-lg {
  padding: 0;
}

/* Full-width plaque: после .btn-size-*, иначе md сбивает padding и режет иконку morph */
.app-plaque-button,
.app-plaque-button.btn-size-sm,
.app-plaque-button.btn-size-md,
.app-plaque-button.btn-size-lg {
  position: relative;
  justify-content: center;
  min-height: 54px;
  /* слева/справа запас под clip-path 4–5% и иконку */
  padding: 0.95rem clamp(2.85rem, 11%, 3.5rem);
  font-family: var(--font-display);
  font-size: var(--btn-font-size, clamp(1.15rem, 3.2vw, 1.55rem));
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Без явного fontSize — сохраняем размер btn-size (для диалогов ворона и т.п.) */
.app-plaque-button:not(.btn-font-sm):not(.btn-font-md):not(.btn-font-lg):not(.btn-font-xl) {
  --btn-font-size: 0.95rem;
  min-height: 48px;
  padding: 0.78rem clamp(2.4rem, 10%, 3.1rem);
}

.app-plaque-button.btn-size-sm:not(.btn-font-sm):not(.btn-font-md):not(.btn-font-lg):not(.btn-font-xl) {
  --btn-font-size: 0.88rem;
  min-height: 42px;
  padding: 0.65rem clamp(2.2rem, 9%, 2.8rem);
}

/* Адаптивный размер шрифта для любых app-button (в т.ч. plaque) */
.app-button.btn-font-sm {
  --btn-font-size: clamp(0.92rem, 2.4vw, 1.12rem);
  font-size: var(--btn-font-size);
}

.app-button.btn-font-md {
  --btn-font-size: clamp(1.05rem, 2.8vw, 1.28rem);
  font-size: var(--btn-font-size);
}

.app-button.btn-font-lg {
  --btn-font-size: clamp(1.2rem, 3.4vw, 1.55rem);
  font-size: var(--btn-font-size);
}

.app-button.btn-font-xl {
  --btn-font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-size: var(--btn-font-size);
}

/* Начертание: быстрая смена через btn-face-* / setAppButtonTypography */
.app-button.btn-face-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.app-button.btn-face-body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
}

.app-button.btn-face-currency {
  font-family: var(--font-currency);
  letter-spacing: 0.02em;
}

.app-button > .btn-label {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.app-plaque-button.btn-font-sm {
  --btn-font-size: clamp(0.95rem, 2.4vw, 1.2rem);
  min-height: 44px;
  padding: 0.72rem clamp(2.4rem, 10%, 3.1rem);
}

.app-plaque-button.btn-font-md {
  --btn-font-size: clamp(1.15rem, 3.2vw, 1.55rem);
  min-height: 54px;
}

.app-plaque-button.btn-font-lg {
  --btn-font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  min-height: 58px;
}

.app-plaque-button.btn-font-xl {
  --btn-font-size: clamp(1.45rem, 4.2vw, 2rem);
  min-height: 64px;
}

.app-plaque-button > .btn-label {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  text-transform: none;
}

.app-plaque-button.has-section-icon > .profile-section-icon {
  /* 0.95rem попадало под вырез morph — двигаем внутрь силуэта */
  left: clamp(1.9rem, 8.2%, 2.85rem);
  width: 1.35rem;
  height: 1.35rem;
  color: color-mix(in srgb, var(--cyan, #84d1ff) 72%, currentColor 28%);
  opacity: 0.92;
  z-index: 4;
}

.app-plaque-button.btn-font-sm.has-section-icon > .profile-section-icon {
  width: 1.15rem;
  height: 1.15rem;
  left: clamp(1.7rem, 7.5%, 2.5rem);
}

.app-plaque-button.profile-delete-btn.has-section-icon > .profile-section-icon {
  color: color-mix(in srgb, #ffb0bc 70%, var(--cyan, #84d1ff) 30%);
}

.app-plaque-button.app-dropdown-trigger > .app-dropdown-trigger-caret {
  right: clamp(1.5rem, 7%, 2.4rem);
  z-index: 4;
}

.app-plaque-button.app-dropdown-trigger > .btn-label.app-dropdown-trigger-label {
  padding-right: 1.1rem;
}

.motion-tilt {
  perspective: 720px;
  transform: translateY(calc(var(--tilt-lift, 0px) + var(--hover-bump, 0px))) rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg)) scale(calc(1 + var(--tilt-depth, 0) * 0.035));
  transform-style: preserve-3d;
  transition: transform 110ms ease-out, box-shadow 110ms ease-out, filter 110ms ease-out;
}

.icon-button:not(.app-button) {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 999px;
  padding: 0;
  display: grid;
  place-items: center;
  place-content: center;
}

.primary-button .icon,
.ghost-button .icon,
.theme-trigger .icon,
.nav-icon-button .icon,
.app-button:not(.btn-variant-menu) .icon {
  --icon-shift-x: 0px;
  animation: appControlIconBob 4.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}

.theme-trigger.icon-button .icon,
.nav-icon-button .icon {
  position: relative;
  z-index: 2;
  filter: none;
}

.intro-ritual-debug-bar .btn-shell {
  width: 100%;
  display: flex;
}

@media (hover: none), (pointer: coarse) {
  .app-button:not(.btn-variant-menu):not(.btn-variant-card) {
    transform: none !important;
  }

  .app-button:not(.btn-variant-menu):not(.btn-variant-card):hover,
  .app-button:not(.btn-variant-menu):not(.btn-variant-card):active {
    transform: none !important;
  }

  .app-button:not(.btn-variant-menu) {
    --btn-motion-transform-dur: 140ms;
    --btn-motion-visual-dur: 200ms;
    --btn-hover-scale: 1;
    --btn-hover-lift: 0px;
  }

  .app-button.btn-variant-icon {
    --btn-shadow: 0 4px 8px rgba(8, 6, 24, 0.26);
    --btn-shadow-hover: 0 4px 8px rgba(8, 6, 24, 0.26);
  }

  .app-button:not(.btn-variant-menu).btn-sparkles-on {
    --btn-particle-opacity: 0.12;
  }

  .app-button::before,
  .app-button::after {
    animation: none !important;
  }

  .app-button:not(.btn-variant-menu).btn-morph-on {
    clip-path: none;
    -webkit-clip-path: none;
  }

  .mode-card-mobile::after {
    opacity: calc(0.12 + var(--hover-morph, 0) * 0.22);
    filter: blur(calc(8px + var(--hover-morph, 0) * 8px));
    transform: scale(calc(0.88 + var(--hover-morph, 0) * 0.14));
  }

  /* На touch нет hover — искры и ореол живут постоянно на активных карточках */
  .mode-card-mobile.active .mode-card-edge-sparks {
    opacity: 0.72;
  }

  .mode-card-mobile.active .mode-card-edge-spark {
    animation-play-state: running;
  }

  .mode-card-mobile.active:active {
    box-shadow:
      0 10px 20px rgba(8, 6, 24, 0.42),
      0 0 16px rgba(124, 95, 228, 0.18);
  }
}