/* mobile-fx.css — KLUCZNIK.AI
   Injected once by mobile-fx.js (id="klucz-mobile-style"). Never link directly.
   Contains: breath keyframes, bottom-sheet chrome, reduced-motion overrides.  */

/* ── klucz-breath ────────────────────────────────────────────────────────── */
/* Subtle idle float for the HORYZONT saldo figure. ±1px vertical drift,
   4s period. Added via horizonBreath(el) — class is the toggle, not the guard.
   JS skips adding the class when prefers-reduced-motion is active.          */
@keyframes klucz-breath {
  from { transform: translateY(-1px); }
  to   { transform: translateY(1px);  }
}

.klucz-breath {
  animation: klucz-breath 4s ease-in-out infinite alternate;
  will-change: transform;
}

/* ── bottom sheet ────────────────────────────────────────────────────────── */
/* .klucz-sheet — the panel itself
   .klucz-sheet-backdrop — the scrim behind it
   .klucz-sheet-grip — the drag handle pill

   JS mounts the backdrop + sheet into document.body. The open/close toggle
   is handled via [hidden] and a CSS transition on transform.                */

.klucz-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: color-mix(in oklab, var(--deep, #2C3947) 52%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;  /* JS sets pointer-events:auto on open */
}

.klucz-sheet-backdrop.klucz-sheet-open {
  opacity: 1;
}

.klucz-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 901;
  background: var(--surface, #F4F7FA);
  border-radius: 18px 18px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 16px);
  box-shadow: 0 -4px 32px -8px rgba(26,37,47,.22);
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  /* Ensure the sheet never gets taller than 90dvh — scroll internally */
  max-height: 90dvh;
  max-height: 90vh;  /* fallback for engines without dvh */
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}

.klucz-sheet.klucz-sheet-open {
  transform: translateY(0);
}

.klucz-sheet[hidden] {
  display: none !important;
}

.klucz-sheet-grip {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--gold, #C2A56D);
  border-radius: 999px;
  margin: 12px auto 8px;
  flex-shrink: 0;
  opacity: .55;
}

/* Content area inside the sheet — pages inject their DOM node here */
.klucz-sheet-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  padding: var(--pad-card, 20px);
}

/* Focus trap sentinel nodes (visually hidden) */
.klucz-sheet-sentinel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── reduced-motion overrides ────────────────────────────────────────────── */
/* All animations collapse to 0.01ms — content still reaches its final state,
   transitions just happen instantly. The 0.01ms avoids the pitfall of
   duration:0 breaking animation-fill-mode in some engines.                  */
@media (prefers-reduced-motion: reduce) {
  .klucz-breath {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .klucz-sheet {
    transition-duration: 0.01ms !important;
  }

  .klucz-sheet-backdrop {
    transition-duration: 0.01ms !important;
  }

  @keyframes klucz-breath {
    from, to { transform: translateY(0); }
  }
}