/* ═══════════════════════════════════════════════════════════════════════════
   KLUCZNIK — components / elevation layer
   ───────────────────────────────────────────────────────────────────────────
   Loaded LAST (after core + page sheets + inline <style>) so it wins on equal
   specificity. Strictly token-pure (only var() from klucznik-core.css). It does
   NOT redo layout — it unifies *interaction feel* and adds world-class polish
   across the divergent page vocabularies so the 5 islands read as one product.

   Principle (AOO / Niklas Bildstein Zaar): material restraint, tactile weight,
   a few moments of surprise. The dopamine is in the feedback, not in noise.

   What it unifies:
     · button vocabularies (.btn-gold / .btn-cinema / .ref-btn …) → one press feel
     · card families → one hover-lift elevation
     · inputs → one focus ring
     · global: selection, focus-visible, scrollbar, smooth-scroll, link underline
     · opt-in utilities: .k-shimmer, .k-rise, .k-pulse for surprise moments
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── local motion + elevation tokens (extend core, don't override) ───────── */
:root {
  --ease-spring:  cubic-bezier(.34, 1.4, .64, 1);   /* tactile overshoot */
  --ease-emph:    cubic-bezier(.16, 1, .3, 1);       /* emphasized decel */
  --shadow-lift:  0 2px 4px rgba(26,37,47,.05), 0 22px 48px -20px rgba(26,37,47,.30);
  --shadow-press: inset 0 1px 2px rgba(26,37,47,.12);
  --glow-gold:    0 8px 30px -10px color-mix(in oklab, var(--gold) 55%, transparent);
  --ring-focus:   0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
  --sheen:        color-mix(in oklab, #fff 22%, transparent);
}

/* ─── global render polish ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

::selection {
  background: color-mix(in oklab, var(--gold) 30%, transparent);
  color: var(--deep);
}
::-moz-selection {
  background: color-mix(in oklab, var(--gold) 30%, transparent);
  color: var(--deep);
}

/* premium thin scrollbar — gold thumb on interaction, calm at rest */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--deep) 24%, transparent) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--deep) 22%, transparent);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color var(--dur-base) var(--ease-out);
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--gold-deep) 48%, transparent);
  background-clip: padding-box;
}

/* one unified focus ring for keyboard users across every control + the
   divergent button/field names. Outline (not box-shadow) so it never disturbs
   layout or fights an element's own shadow. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn-gold:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible,
.btn-outline:focus-visible, .btn-login:focus-visible, .btn-mobile-cta:focus-visible,
.btn-install:focus-visible, .btn-copy:focus-visible, .btn-cinema:focus-visible,
.ref-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* unclassed inline text links: animated gold underline (classy, scoped so it
   never touches buttons/nav which carry their own class) */
.k-prose a:not([class]),
p a:not([class]) {
  color: var(--gold-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur-trans) var(--ease-emph),
              color var(--dur-base) var(--ease-out);
}
.k-prose a:not([class]):hover,
p a:not([class]):hover { background-size: 100% 1.5px; color: var(--deep); }

/* ─── BUTTON SYSTEM — unify the feel, not the skin ────────────────────────────
   The site has 3+ button naming systems (.btn-gold / .btn-cinema / .ref-btn …).
   We leave each one's bespoke color + size alone and unify only the *physics*:
   one spring transition, a 1px hover rise, a satisfying press, a tap reset. */
.btn-gold, .btn-primary, .btn-ghost, .btn-outline, .btn-login,
.btn-mobile-cta, .btn-install, .btn-copy, .btn-cinema, .ref-btn,
.cta-primary, .cta-ghost {
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-gold:hover, .btn-primary:hover, .btn-ghost:hover, .btn-outline:hover,
.btn-login:hover, .btn-mobile-cta:hover, .btn-install:hover, .btn-copy:hover,
.btn-cinema:hover, .ref-btn:hover, .cta-primary:hover, .cta-ghost:hover {
  transform: translateY(-1px);
}
.btn-gold:active, .btn-primary:active, .btn-ghost:active, .btn-outline:active,
.btn-login:active, .btn-mobile-cta:active, .btn-install:active, .btn-copy:active,
.btn-cinema:active, .ref-btn:active, .cta-primary:active, .cta-ghost:active {
  transform: translateY(1px) scale(.985);
  transition-duration: 60ms;
}
.btn-gold[disabled], .btn-primary[disabled], .btn-cinema[disabled],
.ref-btn[disabled], .btn-mobile-cta[disabled],
.btn-gold:disabled, .btn-primary:disabled, .btn-cinema:disabled,
.ref-btn:disabled, .btn-mobile-cta:disabled {
  transform: none; opacity: .5; cursor: not-allowed; filter: saturate(.7);
}

/* gold/primary signature: a warmer lift + soft glow on hover (moment of trust) */
.btn-gold:hover, .btn-primary:hover, .btn-install:hover,
.btn-cinema.primary:hover, .ref-btn.gold:hover {
  box-shadow: var(--shadow-lift), var(--glow-gold),
              inset 0 1px 0 var(--sheen);
}

/* ─── CARD FAMILIES — one calm hover lift ─────────────────────────────────── */
.pack-card, .ref-card, .journey-card, .vo-card, .tool-card,
.wallet-card, .lt-card, .vendor-donut-card {
  transition: transform var(--dur-trans) var(--ease-emph),
              box-shadow var(--dur-trans) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.pack-card:hover, .ref-card:hover, .journey-card:hover, .vo-card:hover,
.tool-card:hover, .lt-card:hover, .vendor-donut-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: color-mix(in oklab, var(--gold) 26%, var(--border));
}

/* ─── INPUTS / FIELDS — one focus ring ────────────────────────────────────── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select, textarea,
.ref-input, .ref-field, .field-cinema, .calc-v2-select {
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus, textarea:focus,
.ref-input:focus, .ref-field:focus-within, .field-cinema:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring-focus);
}

/* ─── OPT-IN SURPRISE UTILITIES (zero risk; nothing applies them by default) ── */
@keyframes k-shimmer { to { background-position: 200% 0; } }
.k-shimmer {
  background-image: linear-gradient(100deg,
    transparent 20%, var(--sheen) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: k-shimmer 2.4s var(--ease-out) infinite;
}
@keyframes k-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.k-rise { animation: k-rise var(--dur-enter) var(--ease-emph) both; }
@keyframes k-pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.k-pulse { animation: k-pulse-soft 2s var(--ease-out) infinite; }

/* tactile press helper for any custom clickable that opts in */
.k-tap { transition: transform var(--dur-fast) var(--ease-spring); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.k-tap:active { transform: scale(.97); }

/* ─── TOUCH: no sticky hover transforms on touch devices ──────────────────── */
@media (hover: none) {
  .btn-gold:hover, .btn-primary:hover, .btn-ghost:hover, .btn-outline:hover,
  .btn-login:hover, .btn-mobile-cta:hover, .btn-install:hover, .btn-copy:hover,
  .btn-cinema:hover, .ref-btn:hover,
  .pack-card:hover, .ref-card:hover, .journey-card:hover, .vo-card:hover,
  .tool-card:hover, .lt-card:hover, .vendor-donut-card:hover {
    transform: none;
  }
}

/* ─── REDUCED MOTION: honour the user, keep everything legible ─────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-gold, .btn-primary, .btn-ghost, .btn-outline, .btn-login,
  .btn-mobile-cta, .btn-install, .btn-copy, .btn-cinema, .ref-btn,
  .pack-card, .ref-card, .journey-card, .vo-card, .tool-card,
  .wallet-card, .lt-card, .vendor-donut-card {
    transition-duration: 1ms;
  }
  .btn-gold:hover, .btn-primary:hover, .btn-ghost:hover, .btn-outline:hover,
  .btn-login:hover, .btn-mobile-cta:hover, .btn-install:hover, .btn-copy:hover,
  .btn-cinema:hover, .ref-btn:hover,
  .pack-card:hover, .ref-card:hover, .journey-card:hover, .vo-card:hover,
  .tool-card:hover, .lt-card:hover, .vendor-donut-card:hover,
  .btn-gold:active, .btn-primary:active, .btn-cinema:active, .ref-btn:active {
    transform: none;
  }
  .k-shimmer, .k-rise, .k-pulse { animation: none; }
}