/* GxMarket: слой эффектов: орб, голо-карта, 3D-наклон, кастомные контролы, график, экран покупки, reveal.
   Всё декоративное: aria-hidden и только transform/opacity (бесконечные, только compositor, см. tests/css.test.js).
   Выключается lite-режимом (perf.js), data-anim=off и prefers-reduced-motion. */

/* ============================== скроллбары и выделение ============================== */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--accent) 55%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; background-image: linear-gradient(180deg, var(--accent), var(--accent-2)); }
::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, var(--accent-3), var(--accent)); }
::-webkit-scrollbar-corner { background: transparent; }
::selection { background: color-mix(in oklab, var(--accent) 55%, transparent); color: #fff; }

/* ============================== reveal при прокрутке ============================== */
.reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
html:not([data-reveal]) .reveal { opacity: 1; transform: none; } /* без JS/до инициализации, всё видно */

/* ============================== орб в hero ============================== */
.orb { position: relative; width: min(100%, 520px); aspect-ratio: 1 / 0.86; pointer-events: none; }
.orb__glow { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; margin: calc(-46% * 0.86) 0 0 -46%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 52%, transparent), color-mix(in oklab, var(--accent-2) 24%, transparent) 55%, transparent 76%); animation: orb-pulse 5s var(--ease) infinite; }
.orb__scene { position: absolute; inset: 0; transform: translate3d(calc(var(--ox, 0) * 14px), calc(var(--oy, 0) * 10px), 0); transition: transform 0.3s var(--ease); }
.orb__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: scaleY(0.38); }
.orb__ring--1 { width: 56%; aspect-ratio: 1; margin: -28% 0 0 -28%; border: 1px solid color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: 0 0 26px -4px color-mix(in oklab, var(--accent) 65%, transparent), inset 0 0 26px -8px color-mix(in oklab, var(--accent) 55%, transparent); }
.orb__ring--2 { width: 82%; aspect-ratio: 1; margin: -41% 0 0 -41%; border: 1px dashed color-mix(in oklab, var(--accent-2) 60%, transparent); }
.orb__spin { position: absolute; inset: 0; border-radius: 50%; animation: orb-spin 16s linear infinite; will-change: transform; }
.orb__ring--2 .orb__spin { animation-duration: 26s; animation-direction: reverse; }
.orb__sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)); }
.orb__ico { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; will-change: transform;
  background: color-mix(in oklab, var(--panel) 82%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent), 0 0 22px -2px color-mix(in oklab, var(--accent) 75%, transparent); animation: orb-unspin 16s linear infinite; }
.orb__ring--2 .orb__ico { animation-duration: 26s; animation-direction: reverse; left: -17px; top: -17px; width: 34px; height: 34px; }
.orb__ico img { width: 26px; height: 26px; border-radius: 50%; }
.orb__core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%; perspective: 700px; }
.orb__coin { position: absolute; inset: 0; transform-style: preserve-3d; animation: coin-spin 9s linear infinite; will-change: transform; }
.orb__face { position: absolute; inset: 0; border-radius: 26%; display: grid; place-items: center; backface-visibility: hidden;
  background: radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--accent) 45%, var(--panel-2)), var(--panel));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 65%, transparent), 0 0 56px -2px color-mix(in oklab, var(--accent) 85%, transparent), inset 0 0 34px -6px color-mix(in oklab, var(--accent) 60%, transparent); }
.orb__face img { width: 64%; height: 64%; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--accent) 80%, transparent)); }
.orb__face--back { transform: rotateY(180deg); }
.orb__core::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -34%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 60%, transparent), transparent); animation: orb-pulse 5s var(--ease) infinite; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
/* Контр-вращение: компенсирует вращение орбиты и позицию спутника (--a), затем гасит сплющивание кольца (1/0.38). */
@keyframes orb-unspin { from { transform: rotate(calc(var(--a) * -1)) scaleY(2.63); } to { transform: rotate(calc(var(--a) * -1 - 360deg)) scaleY(2.63); } }
@keyframes coin-spin { to { transform: rotateY(360deg); } }
@keyframes orb-pulse { 0%, 100% { opacity: 0.75; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.04); } }
@media (max-width: 1180px) { .orb__ring--2 { width: 76%; margin: -38% 0 0 -38%; } }
@media (max-width: 1023px) { .orb { width: min(100%, 420px); } }
@media (max-width: 767px) { .orb { width: min(92%, 340px); } .orb__ico { width: 32px; height: 32px; left: -16px; top: -16px; } .orb__ico img { width: 22px; height: 22px; } .orb__ring--2 { display: none; } }

/* ============================== голо-карта баланса ============================== */
.wallet-hero { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.holo { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 26px 28px; min-height: 230px; display: grid; align-content: space-between; gap: 10px; color: #f5f5f7;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--accent) 60%, transparent), transparent 55%), radial-gradient(110% 120% at 100% 100%, color-mix(in oklab, var(--accent-2) 60%, transparent), transparent 58%), linear-gradient(135deg, #1a1d3d, #0b0d1f);
  border: 1px solid color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: var(--glow-3), var(--lift-3), inset 0 1px 0 rgb(255 255 255 / 0.28); transition: transform 0.2s var(--ease); }
@media (hover: hover) { .holo:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } }
.holo::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; background-image: repeating-linear-gradient(115deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 9px), repeating-linear-gradient(65deg, rgb(255 255 255 / 0.05) 0 1px, transparent 1px 11px); }
.holo::after { display: none; }
.holo__shine { position: absolute; inset: -40%; z-index: -1; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.9; will-change: transform; background: conic-gradient(from 210deg at 50% 50%, #ff7ad9, #7a8bff, #4df3ff, #7dffa9, #ffe27a, #ff7ad9); animation: holo-drift 12s ease-in-out infinite alternate; }
@keyframes holo-drift { from { transform: translate(-6%, -4%) rotate(0deg); } to { transform: translate(6%, 4%) rotate(14deg); } }
.holo__top { display: flex; align-items: center; justify-content: space-between; }
.holo__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 760; letter-spacing: -0.03em; font-size: 16px; }
.holo__chip { width: 46px; height: 35px; color: #ffe9a8; filter: drop-shadow(0 0 8px rgb(255 226 140 / 0.45)); }
.holo__label { color: rgb(255 255 255 / 0.75); }
.holo__bal { font: 780 clamp(36px, 5vw, 56px)/1.05 var(--mono); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; text-shadow: 0 0 calc(26px * var(--g)) color-mix(in oklab, var(--accent) 70%, transparent), 0 2px 0 rgb(0 0 0 / 0.25); }
.holo__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.holo__id { font: 600 13px var(--mono); color: rgb(255 255 255 / 0.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.holo__nets { display: inline-flex; gap: 6px; }
.holo__nets .asset-ico { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.5); }
.wallet-actions { display: grid; align-content: center; gap: 4px; }
@media (max-width: 767px) { .wallet-hero { grid-template-columns: 1fr; } .holo { min-height: 200px; padding: 20px; } }

/* ============================== 3D-наклон ============================== */
.card--hover { transition: transform 0.2s var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.tilt3d, .tile { transition: transform 0.2s var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
@media (hover: hover) {
  .card--hover:hover { transform: perspective(900px) translateY(-5px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .tile:hover { transform: perspective(1100px) translateY(-3px) rotateX(calc(var(--rx, 0deg) * 0.5)) rotateY(calc(var(--ry, 0deg) * 0.5)); }
  .tilt3d:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .tilt-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity var(--t) var(--ease); z-index: 1;
    background: radial-gradient(240px circle at var(--cx, 50%) var(--cy, 0%), rgb(255 255 255 / 0.18), transparent 60%); mix-blend-mode: soft-light; }
  .card--hover:hover .tilt-glare, .tilt3d:hover .tilt-glare, .tile:hover .tilt-glare { opacity: 1; }
}
.tilt3d { position: relative; }

/* ============================== CTA: бегущий неоновый контур ============================== */
.btn--halo { position: relative; isolation: isolate; overflow: visible; }
.btn--halo::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--ang), var(--accent), var(--accent-2), var(--accent-3), var(--accent)); filter: blur(8px); opacity: calc(0.4 + 0.3 * var(--g)); animation: border-spin 3.4s linear infinite; }

/* ============================== кастомный select ============================== */
.cselect { position: relative; flex: 0 0 auto; min-width: 190px; }
.cselect__btn { width: 100%; height: var(--ctl); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-weight: 600; font-size: 14px; background: var(--glass); box-shadow: var(--hair); transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.cselect__btn:hover, .cselect.is-open .cselect__btn { border-color: color-mix(in oklab, var(--accent) 60%, transparent); box-shadow: var(--hair), var(--glow-1); }
.cselect__chev { width: 15px; height: 15px; color: var(--accent-ink); transition: transform var(--t) var(--ease-spring); flex: 0 0 auto; }
.cselect.is-open .cselect__chev { transform: rotate(180deg); }
.cselect__list { position: absolute; z-index: 45; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: color-mix(in oklab, var(--panel) 86%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--hair), var(--shadow), var(--glow-2); transform-origin: top center; animation: pop-in var(--t) var(--ease-spring) both; }
.cselect__opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 14px; font-weight: 550; color: var(--muted); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.cselect__opt::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: 0 0 auto; transition: all var(--t-fast) var(--ease); }
.cselect__opt:hover, .cselect__opt.is-focus { background: var(--a-glow-sm); color: var(--text); }
.cselect__opt[aria-selected='true'] { color: var(--accent-ink); }
.cselect__opt[aria-selected='true']::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* переключатель вместо нативного чекбокса */
.chip--check .switch { position: relative; width: 34px; height: 20px; border-radius: 99px; flex: 0 0 auto; background: color-mix(in oklab, var(--text) 16%, transparent); box-shadow: inset 0 0 0 1px var(--border-strong); transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.chip--check .switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.5); transition: transform var(--t) var(--ease-spring); }
.chip--check input:checked + .switch { background: var(--grad); box-shadow: 0 0 18px -2px var(--accent); }
.chip--check input:checked + .switch::after { transform: translateX(14px); }

/* неоновый ползунок суммы */
.neon-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 2px 0 14px; background: transparent; cursor: pointer; --p: 10%; }
.neon-range:focus-visible { outline: none; box-shadow: none; }
.neon-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent-2), var(--accent) var(--p), color-mix(in oklab, var(--text) 16%, transparent) var(--p)); box-shadow: 0 0 calc(14px * var(--g)) -2px color-mix(in oklab, var(--accent) 70%, transparent); }
.neon-range::-moz-range-track { height: 6px; border-radius: 99px; background: color-mix(in oklab, var(--text) 16%, transparent); }
.neon-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--grad); }
.neon-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; border: 2px solid #fff; background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 62%); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 26%, transparent), 0 0 20px var(--accent); transition: transform var(--t-fast) var(--ease-spring); }
.neon-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: var(--accent); box-shadow: 0 0 20px var(--accent); }
.neon-range:hover::-webkit-slider-thumb, .neon-range:focus-visible::-webkit-slider-thumb { transform: scale(1.18); }
.neon-range:active::-webkit-slider-thumb { transform: scale(0.95); }

/* ============================== график активности (админка) ============================== */
.chart { position: relative; height: 180px; margin-top: 8px; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: chart-draw 1.2s var(--ease) 0.1s forwards; filter: drop-shadow(0 0 calc(8px * var(--g)) var(--accent)); vector-effect: non-scaling-stroke; }
.chart__area { opacity: 0; animation: chart-fade 0.9s var(--ease) 0.6s forwards; }
.chart__pt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); opacity: 0; transform: scale(0.4); animation: chart-pt 0.35s var(--ease-spring) forwards; transition: box-shadow var(--t-fast); }
.chart__pt--top { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.chart__pt.is-hot { background: var(--accent-3); box-shadow: 0 0 16px var(--accent-3); }
.chart__guide { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--accent), transparent); pointer-events: none; }
.chart__tip { position: absolute; transform: translateX(-50%); padding: 6px 11px; border-radius: var(--r-sm); pointer-events: none; white-space: nowrap; z-index: 2; font: 650 12px var(--mono); background: color-mix(in oklab, var(--panel) 88%, transparent); backdrop-filter: var(--blur); border: 1px solid var(--border-strong); box-shadow: var(--glow-2); }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { to { opacity: 1; } }
@keyframes chart-pt { to { opacity: 1; transform: scale(1); } }

/* ============================== экран успешной покупки ============================== */
.done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 8px 0 4px; }
.done__ring { width: 120px; height: 120px; filter: drop-shadow(0 0 calc(18px * var(--g)) var(--good)); }
.done__circle, .done__tick { fill: none; stroke: var(--good); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.done__circle { animation: chart-draw 0.7s var(--ease) forwards; }
.done__tick { stroke-width: 6.5; animation: chart-draw 0.45s var(--ease) 0.6s forwards; }
.done__title { margin: 4px 0 0; font-size: 26px; font-weight: 780; letter-spacing: -0.045em; background: linear-gradient(110deg, var(--good), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.done__num { color: var(--faint); font-size: 13px; letter-spacing: 0.08em; }
.done__items { display: grid; gap: 2px; color: var(--muted); font-size: 14px; }
.done__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }

/* ============================== пустые состояния, вход, декор ============================== */
.empty__icon::before { content: ''; position: absolute; inset: -10px; border-radius: inherit; border: 1px dashed color-mix(in oklab, var(--accent) 50%, transparent); animation: orb-spin 14s linear infinite; }
.empty__icon::after { content: ''; position: absolute; top: -13px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform-origin: 3px 41px; animation: orb-spin 7s linear infinite; }
.auth__card::after { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--ang), transparent 0 55%, var(--accent) 75%, var(--accent-2) 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: calc(0.35 + 0.4 * var(--g)); animation: border-spin 5s linear infinite; }
.fx-sparks { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
[data-scramble] { font-variant-ligatures: none; }
.neon-underline { position: relative; display: inline-block; }
.neon-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.is-in .neon-underline::after, .neon-underline.is-in::after { transform: scaleX(1); }

/* ============================== выключатели ============================== */
html[data-fx='lite'] { --blur: none; }
html[data-fx='lite'] .aurora span, html[data-fx='lite'] .orb__glow, html[data-fx='lite'] .orb__core::after, html[data-fx='lite'] .orb__spin, html[data-fx='lite'] .orb__ico, html[data-fx='lite'] .orb__coin,
html[data-fx='lite'] .btn--halo::before, html[data-fx='lite'] .holo__shine, html[data-fx='lite'] .hero h1 .grad, html[data-fx='lite'] .rails__track, html[data-fx='lite'] .flow__link i,
html[data-fx='lite'] .empty__icon::before, html[data-fx='lite'] .empty__icon::after, html[data-fx='lite'] .auth__card::after { animation: none; }
html[data-fx='lite'] .hero__canvas, html[data-fx='lite'] .btn--halo::before, html[data-fx='lite'] .tilt-glare, html[data-fx='lite'] .fx-noise, html[data-fx='lite'] .orb__ring--2 { display: none; }
html[data-fx='lite'] .topbar__in { background: color-mix(in oklab, var(--panel) 94%, transparent); }
html[data-fx='lite'] .tabbar { background: color-mix(in oklab, var(--panel) 97%, transparent); }
html[data-fx='lite'] .modal__backdrop { backdrop-filter: none; background: color-mix(in oklab, #000 72%, transparent); }
html[data-fx='lite'] .reveal { opacity: 1; transform: none; transition: none; }
html[data-anim='off'] *, html[data-anim='off'] *::before, html[data-anim='off'] *::after { animation: none !important; transition-duration: 0.01ms !important; }
html[data-anim='off'] .hero__canvas, html[data-anim='off'] .btn--halo::before, html[data-anim='off'] .tilt-glare, html[data-anim='off'] .route-bar, html[data-anim='off'] .aurora { display: none; }
html[data-anim='off'] .reveal { opacity: 1; transform: none; }
html[data-anim='off'] .chart__line, html[data-anim='off'] .chart__area, html[data-anim='off'] .chart__pt { opacity: 1; stroke-dashoffset: 0; transform: none; }
html[data-anim='off'] .done__circle, html[data-anim='off'] .done__tick { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .hero__canvas, .btn--halo::before, .tilt-glare, .aurora { display: none; }
  .reveal { opacity: 1; transform: none; }
  .chart__line, .chart__area, .chart__pt { opacity: 1; stroke-dashoffset: 0; transform: none; }
  .done__circle, .done__tick { stroke-dashoffset: 0; }
}

/* ============================== Neon 2: свет на касании, лампа таббара, полёт в корзину ==============================
   Правила: бесконечное, только transform/opacity и только на малых элементах; всё остальное одноразовое.
   Свет: на интерактиве и статусах (DESIGN.md); на телефоне опираемся на :active и появление, а не на hover. */
:root { --fx-a: color-mix(in oklab, var(--accent) 60%, transparent); --fx-a-soft: color-mix(in oklab, var(--accent) 34%, transparent); }
html[data-theme='light'] { --fx-a: color-mix(in oklab, var(--accent) 44%, transparent); --fx-a-soft: color-mix(in oklab, var(--accent) 22%, transparent); }
@media (prefers-color-scheme: light) { html[data-theme='system'] { --fx-a: color-mix(in oklab, var(--accent) 44%, transparent); --fx-a-soft: color-mix(in oklab, var(--accent) 22%, transparent); } }

/* ripple: волна из точки касания (создаёт fx.js, клипуется собственной обёрткой) */
.btn, .chip, .icon-btn, .cselect__btn, .cselect__opt { position: relative; }
.fx-rip { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fx-rip i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(closest-side, var(--fx-a), transparent); transform: scale(0.08); opacity: 0.95; animation: fx-ripple 0.7s var(--ease) forwards; }
.btn--primary .fx-rip i { background: radial-gradient(closest-side, rgb(255 255 255 / 0.7), transparent); }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }

/* нажатие: карточка проседает и вспыхивает кромкой (на телефоне hover нет, это главный отклик) */
.card--hover:active { transform: scale(0.985); border-color: color-mix(in oklab, var(--accent) 58%, var(--border)); box-shadow: var(--hair), var(--shadow), var(--glow-3); }
.card--hover:active::before { opacity: 1; }
.tile:active { transform: scale(0.992); border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); box-shadow: var(--hair), var(--shadow), var(--glow-2); }
.btn--primary:active { filter: brightness(1.14) saturate(1.15); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 0 46px 2px var(--fx-a); }
@media (hover: hover) { .card--hover:hover { box-shadow: var(--hair), var(--shadow), var(--glow-3); } .tile:hover { box-shadow: var(--hair), var(--shadow), var(--glow-2); } }
.input:focus, .select:focus { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent), 0 0 34px -6px var(--fx-a), var(--hair); }

/* кромки карточек вспыхивают один раз, когда карточка появилась (сетка каталога и плитки главной) */
.grid > .card--hover::before { animation: edge-flash 1.8s var(--ease) backwards; animation-delay: inherit; }
.tile.reveal.is-in::before { animation: edge-flash 1.8s var(--ease) backwards; animation-delay: calc(var(--d, 0ms) + 250ms); }
.grid > .card--hover:hover::before, .grid > .card--hover:active::before, .tile.reveal.is-in:hover::before, .tile.reveal.is-in:active::before { animation: none; } /* отклик на касание важнее вспышки появления */
@keyframes edge-flash { 0%, 22% { opacity: 0; } 42% { opacity: 1; } 100% { opacity: 0.22; } }

/* статусы: «пинг» вокруг живых точек и наличия */
.dot-live { position: relative; }
.dot-live::after, .pcard__stock:not(.pcard__stock--out)::after { content: ''; position: absolute; border-radius: 50%; border: 1.5px solid var(--good); pointer-events: none; opacity: 0; animation: ping 2.6s var(--ease) infinite; }
.dot-live::after { inset: 0; }
.pcard__stock { position: relative; }
.pcard__stock:not(.pcard__stock--out)::after { left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; animation-delay: 0.6s; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 75%, 100% { transform: scale(3.4); opacity: 0; } }

/* новая строка ленты: световой проход слева направо */
.feed__row { position: relative; overflow: hidden; }
.feed__row.is-new::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 45%; pointer-events: none; background: linear-gradient(90deg, transparent, var(--fx-a-soft), transparent); animation: sheen-x 1.1s var(--ease) both; }

/* активный чип и включённый переключатель «вспыхивают» при выборе */
.chip.is-active { animation: chip-pop 0.45s var(--ease-spring); }
.chip--check input:checked + .switch { animation: switch-on 0.7s var(--ease); }
@keyframes chip-pop { from { transform: scale(0.88); } to { transform: none; } }
@keyframes switch-on { from { box-shadow: 0 0 0 0 var(--fx-a); } }

/* корзина: волна-кольцо и прыжок значка, когда товар долетел */
.cart-btn::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.cart-btn.is-bumped::after { animation: cart-ring 0.75s var(--ease) both; }
.cart-btn.is-bumped svg { animation: cart-hop 0.55s var(--ease-spring); }
@keyframes cart-ring { from { opacity: 0.9; transform: scale(0.7); } to { opacity: 0; transform: scale(1.9); } }
@keyframes cart-hop { 0% { transform: none; } 35% { transform: translateY(-4px) scale(1.2) rotate(-9deg); } 70% { transform: translateY(1px) scale(0.96); } 100% { transform: none; } }
.fx-fly { position: fixed; left: 0; top: 0; z-index: 130; width: 18px; height: 18px; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 55%, var(--accent-2)); box-shadow: 0 0 18px 4px var(--fx-a), 0 0 42px 8px var(--fx-a-soft); }

/* десктопная капсула навигации: пружина и верхняя «лампа» вместо нижней черты */
.nav__ind { transition: transform 0.5s var(--ease-spring), width 0.5s var(--ease-spring), opacity var(--t) var(--ease); }
.nav__ind::before { content: ''; position: absolute; left: 50%; top: -1px; width: 22px; height: 2px; margin-left: -11px; border-radius: 0 0 3px 3px; background: var(--grad); box-shadow: 0 0 12px 1px var(--accent); }
.nav a.is-active:not(.nav__tab)::after { display: none; }

/* прогресс прокрутки: тонкая неоновая нить под шапкой (scroll-driven animation, без JS; где не поддержано, просто нет) */
@supports (animation-timeline: scroll()) {
  .topbar__in { position: relative; }
  .topbar__in::after { content: ''; position: absolute; left: 28px; right: 28px; bottom: -1px; height: 2px; border-radius: 2px; pointer-events: none; transform-origin: left center; transform: scaleX(0); opacity: 0;
    background: var(--grad); box-shadow: 0 0 12px var(--accent); animation: fx-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes fx-progress { 0% { transform: scaleX(0); opacity: 0; } 3% { opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }

/* лампа нижней панели телефона: капсула едет на пружине, у активной вкладки светится верхняя кромка и конус света */
@media (max-width: 767px) {
  .tabbar__ind { position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--w, 0); border-radius: var(--r-pill); z-index: 0; pointer-events: none; opacity: 0; transform: translateX(var(--x, 0));
    transition: transform 0.5s var(--ease-spring), width 0.5s var(--ease-spring), opacity var(--t) var(--ease);
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, var(--glass-2)), var(--glass-2) 72%); box-shadow: var(--tint-ring), var(--hair), 0 0 32px -6px var(--fx-a); }
  .tabbar__ind.is-on { opacity: 1; }
  .tabbar__ind::before { content: ''; position: absolute; left: 50%; top: -1px; width: 30px; height: 3px; margin-left: -15px; border-radius: 0 0 4px 4px; background: var(--grad); box-shadow: 0 0 14px 2px var(--accent); animation: lamp-breathe 3.2s ease-in-out infinite; }
  .tabbar__ind::after { content: ''; position: absolute; left: 50%; top: 0; width: 70px; height: 46px; margin-left: -35px; pointer-events: none; opacity: 0.85; background: radial-gradient(closest-side at 50% 0, var(--fx-a-soft), transparent); }
  .tabbar a.is-active { background: none; box-shadow: none; }
  .tabbar:not(:has(.tabbar__ind.is-on)) a.is-active { background: var(--glass-2); box-shadow: var(--tint-ring), var(--hair), 0 0 24px -8px var(--accent); }
  .tabbar a.is-active svg { animation: tab-hop 0.55s var(--ease-spring); }
}
@keyframes lamp-breathe { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes tab-hop { from { transform: translateY(4px) scale(0.84); } to { transform: none; } }

/* тост: центровка через translate (анимация pop-in затирала transform: translateX(-50%), тост уезжал вправо) + свечение по типу */
.toast { transform: none; translate: -50% 0; box-shadow: var(--hair), var(--shadow), 0 0 34px -8px var(--fx-a); }
.toast--err { box-shadow: var(--hair), var(--shadow), 0 0 34px -8px var(--bad); }

/* экран успешной покупки: две волны расходятся от галочки, когда она дорисована */
.done { position: relative; }
.done::before, .done::after { content: ''; position: absolute; top: 8px; left: 50%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; border: 2px solid var(--good); pointer-events: none; opacity: 0; animation: done-wave 1.3s var(--ease) 0.95s both; }
.done::after { animation-delay: 1.25s; }
@keyframes done-wave { from { opacity: 0.75; transform: scale(0.8); } to { opacity: 0; transform: scale(2.3); } }
.holo:active { transform: perspective(900px) scale(0.985); }

/* глубина фона: aurora плывёт вверх при прокрутке (scroll-driven, compositor); цены с мягким неоновым ореолом */
@supports (animation-timeline: scroll()) {
  .aurora { animation: aurora-scroll linear both; animation-timeline: scroll(root block); }
}
@keyframes aurora-scroll { to { transform: translate3d(0, -16vh, 0) scale(1.1); } }
.price { text-shadow: 0 0 20px var(--fx-a-soft); }

/* выключатели Neon 2: lite, анимации выключены и reduced-motion (общее глушение анимаций для двух последних уже есть выше) */
html[data-fx='lite'] .aurora { animation: none; }
html[data-fx='lite'] .done::before, html[data-fx='lite'] .done::after { display: none; }
html[data-fx='lite'] .fx-rip, html[data-fx='lite'] .fx-fly, html[data-fx='lite'] .topbar__in::after, html[data-fx='lite'] .dot-live::after, html[data-fx='lite'] .pcard__stock::after,
html[data-fx='lite'] .tabbar__ind::after, html[data-fx='lite'] .feed__row.is-new::after { display: none; }
html[data-fx='lite'] .tabbar__ind::before, html[data-fx='lite'] .grid > .card--hover::before, html[data-fx='lite'] .tile.reveal.is-in::before,
html[data-fx='lite'] .chip.is-active, html[data-fx='lite'] .tabbar a.is-active svg, html[data-fx='lite'] .cart-btn.is-bumped::after, html[data-fx='lite'] .cart-btn.is-bumped svg { animation: none; }
html[data-anim='off'] .fx-rip, html[data-anim='off'] .fx-fly, html[data-anim='off'] .topbar__in::after, html[data-anim='off'] .dot-live::after, html[data-anim='off'] .pcard__stock::after, html[data-anim='off'] .feed__row.is-new::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fx-rip, .fx-fly, .topbar__in::after, .dot-live::after, .pcard__stock::after, .feed__row.is-new::after { display: none; }
  .tabbar__ind, .nav__ind { transition-duration: 0.01ms; }
}

/* Админ-шапка: семь вкладок + кнопка + переключатели помещаются в 1280: плотные вкладки, подпись ADMIN прячется. */
body:has(#tabs) .nav a { padding: 8px 12px; }
body:has(#tabs) .brand__sub { display: none; }
body:has(#tabs) .by--pill .by__txt { display: none; }
body:has(#tabs) .by--pill { padding: 0 9px; }

/* Админ на планшете (768-899): шапке тесно, быстрые переключатели уходят (всё есть в ⚙), вкладки плотнее. */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(#tabs) .quick { display: none; }
  body:has(#tabs) .nav a { padding: 8px 10px; }
  body:has(#tabs) .topbar__in { gap: 8px; }
}

/* Планшет 768-899: быстрые переключатели уходят в ⚙ (в шапке десять элементов, особенно у админа). */
@media (min-width: 768px) and (max-width: 899px) { .quick { display: none; } }