/* ═══════════════════════════════════════════════════════════
   Lazy Stork — Button Standard
   ───────────────────────────────────────────────────────────
   Єдиний контрол: font-size. Все інше — em, автомасштаб.

   Принцип layout: [S][іконка][S][текст][~1.4S]
     S = padding-left = gap = 1.0em
     Іконка і текст — в потоці (не absolute).
     Позиція іконки залежить від ширини тексту.

   Розміри (font-size: 1.375rem = 22px):
     Висота       : 2.6em
     Мін. ширина  : 10.4em  (≈ 4× висота)
     Іконка       : 1.6em   (= 62% висоти)
     padding-left : 1.0em   (= gap між іконкою і текстом)
     padding-right: 1.4em

   Використання:
     <button class="btn">
       <img src="icon.png" class="btn-icon" alt="">
       Текст
     </button>

   Змінити розмір — тільки font-size:
     <button class="btn" style="font-size: 1rem">...</button>
   ═══════════════════════════════════════════════════════════ */

.btn {
  /* ── типографіка ── */
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0A0A0A;

  /* ── форма (em = масштабується з font-size) ── */
  height: 2.6em;
  min-width: 10.4em;
  width: fit-content;
  padding: 0 1.4em 0 1.0em;
  border-radius: 50em;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.30);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);

  /* ── layout ── */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.0em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  /* ── тактильний об'єм ── */
  box-shadow:
    0 1px 0 rgba(255,255,255,.90) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 4px 16px rgba(0,0,0,.08),
    0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow 220ms, transform 220ms cubic-bezier(.34,1.56,.64,1),
              border-color 220ms, background 220ms;
}

.btn:hover {
  background: rgba(255,255,255,.50);
  border-color: rgba(255,255,255,.85);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(0,0,0,.04) inset,
    0 10px 28px rgba(0,0,0,.12),
    0 3px 8px rgba(0,0,0,.08);
  animation: btn-shake .25s ease-in-out infinite;
}

/* ── shake on hover ──
   translate(--drag-x,--drag-y) composes with a per-button drag offset (see
   baza.html's draggable tool cards) — defaults to 0px so it's a no-op
   everywhere else on the site. */
@keyframes btn-shake {
  0%   { transform: translate(var(--drag-x,0px),var(--drag-y,0px)) translateY(-2px) rotate(0deg); }
  25%  { transform: translate(var(--drag-x,0px),var(--drag-y,0px)) translateY(-2px) translateX(-2px) rotate(-.6deg); }
  75%  { transform: translate(var(--drag-x,0px),var(--drag-y,0px)) translateY(-2px) translateX( 2px) rotate( .6deg); }
  100% { transform: translate(var(--drag-x,0px),var(--drag-y,0px)) translateY(-2px) rotate(0deg); }
}


.btn:active {
  transform: translate(var(--drag-x,0px),var(--drag-y,0px)) scale(0.97) translateY(1px);
  background: rgba(255,255,255,.15);
  box-shadow:
    0 2px 6px rgba(0,0,0,.10) inset,
    0 1px 2px rgba(0,0,0,.06);
  transition-duration: 60ms;
}

.btn:disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* ── 3D Lock icon (платний контент) ── */
.lock-icon { position:relative; width:52px; height:52px; pointer-events:none; flex-shrink:0; }
.lock-icon img { width:100%; height:100%; object-fit:contain; display:block; transition:opacity 200ms; }
.lock-icon .lock-alt { position:absolute; inset:0; opacity:0; }

/* ── іконка: wrapper в потоці, front/dynamic swap на hover ── */
.btn-icon-wrap {
  position: relative;
  width: 1.6em;
  height: 1.6em;
  flex-shrink: 0;
}

.btn-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  transition: opacity 200ms;
}

.btn-icon-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.btn:hover .btn-icon:not(.btn-icon-alt) { opacity: 0; }
.btn:hover .btn-icon-alt               { opacity: 1; }