/* Добавки к родному CSS из trc-примера (сам styles.css не трогаем — он байт-в-байт из примера).
   Только то, чего в нём нет: .hidden, путь к фоновой картинке, пара технических классов. */

.hero-background{background-image:url("assets/hero-background.png");background-size:cover;background-position:center}

/* Мерцание hero-background: в родном CSS картинка сидит на z-index:-1, то есть ЗА непрозрачным
   градиентом секции, а поверх неё работают backdrop-filter и 4 бесконечные анимации float —
   Chrome на каждом кадре пересобирает композит и картинку то прячет, то показывает.
   Лечим честным порядком слоёв (картинка → полупрозрачный градиент → паттерн → контент)
   и убираем backdrop-filter/background-attachment:fixed — они тут единственные, кто заставляет
   перерисовывать фон каждый кадр. Выглядит так же, только без мигания. */
.hero-section{background:none;background-attachment:scroll}
.hero-background{z-index:0;transform:translateZ(0)}
.hero-gradient{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(135deg,rgba(102,126,234,.78),rgba(118,75,162,.78))}

.hidden{display:none!important}

/* select в стиле .input-field (в примере select не было — только input/textarea) */
select.input-field{background:#fff;color:#111827;font:inherit;width:100%}
select.input-field:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a;outline:none}

/* кнопки внутри карточек могут показывать спиннер */
.action-btn .spin,.approve-button .spin{display:inline-block;width:14px;height:14px;border:2px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}

.wallet-modal-divider{background:#e5e7eb;border:none;height:1px;margin:20px 0}

/* иконки-картинки в строках модалки (в примере иконки файловые, не текстовые) */
.wallet-option-icon img{height:32px;width:32px;object-fit:contain;border-radius:6px}
.wallet-info-item img{height:18px;width:18px;object-fit:contain;border-radius:4px;vertical-align:-4px}

/* toast-хост (сами тосты позиционируются классами из примера) */
#toastHost{pointer-events:none;z-index:100000}
#toastHost .toast{pointer-events:auto}

/* Моргание UI. В родном CSS `pulse` гоняет opacity 1→.5 каждые 2 с, и висит он не только
   на индикаторе подключения кошелька (там он осмысленен), но и на иконке одобрения и на точке
   в футере — со стороны выглядит так, будто мигает полстраницы. Оставляем спокойное «дыхание»
   только у статуса подключения; остальное — статика. Декоративный float в шапке замедлены:
   движение остаётся, назойливость уходит. */
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.72}}
.floating-wallet-connected .wallet-status-dot{animation:breathe 3s ease-in-out infinite}
.approval-icon{animation:none}
.stat-dot{animation:none;opacity:.9}
.hero-decoration.shield{animation-duration:12s}
.hero-decoration.lock{animation-duration:16s}
.hero-decoration.check{animation-duration:14s}
.hero-decoration.globe{animation-duration:18s}

/* QR для WalletConnect: раньше его не было вовсе — на десктопе подключаться было нечем */
.wc-qr{background:#fff;border-radius:16px;margin:0 auto 16px;max-width:200px;padding:10px;width:100%}
.wc-qr svg{display:block;height:auto;width:100%}