/* ═══════════════════════════════════════════════════════════
   CIPHERX — Polish Layer
   Loaded AFTER cipherx.css / panel-extras.css / home.css.
   Adds smoother motion, ripple feedback, focus rings,
   entry animations, cleaner scrollbars, and the sound chip.
═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   Motion tokens (overrides — keeps easings consistent)
────────────────────────────────────────────────────────── */
:root {
  --cx-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --cx-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --cx-trans:      0.22s var(--cx-ease);
  --cx-trans-slow: 0.38s var(--cx-ease);
}

/* reduced-motion users get near-zero durations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────────────────
   Global focus-visible ring — accessible, consistent.
────────────────────────────────────────────────────────── */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.cx-btn:focus-visible,
.hm-btn:focus-visible,
.cx-nav-btn:focus-visible,
.cx-level-card:focus-visible,
.cx-file-upload:focus-visible {
  outline: 2px solid var(--cx-accent, #22d3ee);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.22);
}

/* ──────────────────────────────────────────────────────────
   Buttons — smoother press + hover + ripple
────────────────────────────────────────────────────────── */
.cx-btn,
.hm-btn,
.cx-nav-btn,
.cx-discord-btn,
.cx-sound-chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, box-shadow, background-color;
  transition:
    transform 0.18s var(--cx-ease-spring),
    background-color var(--cx-trans),
    border-color var(--cx-trans),
    color var(--cx-trans),
    box-shadow var(--cx-trans),
    filter var(--cx-trans);
}

.cx-btn::after,
.hm-btn::after,
.cx-nav-btn::after,
.cx-discord-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--cx-rx, 50%) var(--cx-ry, 50%),
              rgba(255, 255, 255, 0.35) 0%,
              rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.4s var(--cx-ease), transform 0.55s var(--cx-ease);
}

.cx-btn.is-rippling::after,
.hm-btn.is-rippling::after,
.cx-nav-btn.is-rippling::after,
.cx-discord-btn.is-rippling::after {
  opacity: 1;
  transform: scale(1.6);
}

.cx-btn:active,
.hm-btn:active,
.cx-nav-btn:active,
.cx-discord-btn:active {
  transform: translateY(0.5px) scale(0.985);
  transition-duration: 0.08s;
}

/* Subtle primary-button sheen */
.cx-btn-primary {
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition:
    background-position 0.6s var(--cx-ease),
    transform 0.18s var(--cx-ease-spring),
    box-shadow var(--cx-trans),
    filter var(--cx-trans);
}
.cx-btn-primary:hover { background-position: 100% 50%; }

/* ──────────────────────────────────────────────────────────
   Sidebar nav — smooth active-pill glide
────────────────────────────────────────────────────────── */
.cx-sidebar-nav .cx-nav-btn {
  transition:
    background var(--cx-trans),
    color var(--cx-trans),
    padding-left 0.18s var(--cx-ease-spring),
    transform 0.18s var(--cx-ease-spring);
}
.cx-sidebar-nav .cx-nav-btn:hover { padding-left: 1rem; }
.cx-sidebar-nav .cx-nav-btn.is-active { padding-left: 1rem; }
.cx-sidebar-nav .cx-nav-btn.is-active::before {
  animation: cx-sidebar-glow 2.4s ease-in-out infinite alternate;
}
@keyframes cx-sidebar-glow {
  from { box-shadow: 0 0 6px var(--cx-brand-glow); opacity: 0.8; }
  to   { box-shadow: 0 0 14px var(--cx-brand-glow), 0 0 22px rgba(34, 211, 238, 0.22); opacity: 1; }
}

/* Sidebar brand gentle float */
.cx-sidebar-brand:hover .cx-sidebar-logo {
  transform: rotate(-4deg) scale(1.06);
}
.cx-sidebar-logo {
  transition: transform 0.35s var(--cx-ease-spring), box-shadow var(--cx-trans);
}

/* ──────────────────────────────────────────────────────────
   Panel section entry — subtle fade-up
────────────────────────────────────────────────────────── */
.cx-section.is-active > * {
  animation: cx-fade-up 0.45s var(--cx-ease) backwards;
}
.cx-section.is-active > *:nth-child(1) { animation-delay: 0.02s; }
.cx-section.is-active > *:nth-child(2) { animation-delay: 0.07s; }
.cx-section.is-active > *:nth-child(3) { animation-delay: 0.12s; }
.cx-section.is-active > *:nth-child(4) { animation-delay: 0.17s; }
@keyframes cx-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────────────────
   Panel blocks — refined hover lift
────────────────────────────────────────────────────────── */
.cx-panel-block {
  transition:
    border-color var(--cx-trans),
    box-shadow var(--cx-trans),
    transform 0.25s var(--cx-ease);
}
.cx-panel-block:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--cx-border-mid);
  transform: translateY(-1px);
}

.cx-panel-block::before {
  opacity: 0;
  transition: opacity 0.45s var(--cx-ease);
}
.cx-panel-block:hover::before { opacity: 1; }

/* ──────────────────────────────────────────────────────────
   Stat cards — smoother lift + gradient edge on hover
────────────────────────────────────────────────────────── */
.cx-stat { transition:
  border-color var(--cx-trans),
  box-shadow var(--cx-trans),
  transform 0.25s var(--cx-ease-spring),
  background var(--cx-trans);
}
.cx-stat:hover { transform: translateY(-3px) scale(1.005); }

/* Counter pulse when number changes (JS can toggle .is-bumped) */
.cx-stat strong.is-bumped,
.cx-credit-hero-value > span.is-bumped,
#credit-chip-amount.is-bumped {
  animation: cx-num-bump 0.45s var(--cx-ease-spring);
}
@keyframes cx-num-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.12); filter: drop-shadow(0 0 14px var(--cx-brand-glow)); }
  100% { transform: scale(1); }
}

/* ──────────────────────────────────────────────────────────
   Level cards — richer selection feel
────────────────────────────────────────────────────────── */
.cx-level-card {
  transition:
    border-color var(--cx-trans),
    background var(--cx-trans),
    transform 0.22s var(--cx-ease-spring),
    box-shadow var(--cx-trans);
}
.cx-level-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.cx-level-card.is-selected {
  transform: translateY(-2px);
  animation: cx-level-pop 0.35s var(--cx-ease-spring);
}
@keyframes cx-level-pop {
  0%   { transform: translateY(0) scale(0.98); }
  55%  { transform: translateY(-3px) scale(1.015); }
  100% { transform: translateY(-2px) scale(1); }
}

/* ──────────────────────────────────────────────────────────
   Inputs — cleaner focus ring everywhere
────────────────────────────────────────────────────────── */
.cx-panel-block input:focus,
.cx-panel-block select:focus,
.cx-panel-block textarea:focus,
.cx-settings-field input:focus,
.cx-settings-field textarea:focus,
.cx-redeem-wrap input:focus,
.cx-field-inline input:focus,
.cx-level-cost-item input:focus,
.cx-grant-panel input:focus,
.cx-row-search input:focus,
.cx-encrypt-area textarea:focus,
.cx-login-card input:focus,
.cx-field input:focus {
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.28),
    0 4px 18px rgba(99, 102, 241, 0.14);
}

/* input "caret breathing" is a nice detail on empty fields */
input::placeholder, textarea::placeholder {
  transition: opacity var(--cx-trans);
}
input:focus::placeholder, textarea:focus::placeholder { opacity: 0.3 !important; }

/* ──────────────────────────────────────────────────────────
   Credit chip — glowing pulse when active
────────────────────────────────────────────────────────── */
.cx-credit-chip {
  transition: border-color var(--cx-trans), transform 0.22s var(--cx-ease-spring), box-shadow var(--cx-trans);
}
.cx-credit-chip:hover { transform: translateY(-1px); }

/* ──────────────────────────────────────────────────────────
   Topbar — denser shadow when scrolled (works with sticky)
────────────────────────────────────────────────────────── */
.cx-topbar {
  transition: box-shadow var(--cx-trans), background var(--cx-trans);
}
.cx-topbar.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.42);
}

/* ──────────────────────────────────────────────────────────
   Ledger / user card rows — staggered hover cue
────────────────────────────────────────────────────────── */
.cx-ledger-row,
.cx-user-card,
.cx-login-row {
  transition: border-color var(--cx-trans), transform 0.2s var(--cx-ease), background var(--cx-trans);
}
.cx-ledger-row:hover,
.cx-user-card:hover,
.cx-login-row:hover {
  transform: translateX(2px);
}

/* ──────────────────────────────────────────────────────────
   Tables — polished sticky head + smoother row hover
────────────────────────────────────────────────────────── */
.cx-panel-block tbody tr {
  transition: background var(--cx-trans), box-shadow var(--cx-trans);
}
.cx-panel-block tbody tr:hover {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.03));
  box-shadow: inset 3px 0 0 var(--cx-accent);
}

/* ──────────────────────────────────────────────────────────
   Scrollbar — slim, gradient thumb
────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cx-brand-dark), var(--cx-accent-2));
  border-radius: 999px;
  border: 2px solid rgba(10, 10, 21, 0.8);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--cx-brand), var(--cx-accent));
  background-clip: padding-box;
}

/* ──────────────────────────────────────────────────────────
   Home page polish (hm-*)
────────────────────────────────────────────────────────── */
.hm-feature-card,
.hm-pricing-card {
  transition:
    transform 0.25s var(--cx-ease-spring),
    box-shadow var(--cx-trans),
    border-color var(--cx-trans),
    background var(--cx-trans);
}
.hm-feature-card:hover,
.hm-pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(10, 15, 40, 0.18);
}

.hm-nav-link {
  position: relative;
  transition: color var(--cx-trans), background var(--cx-trans);
}
.hm-nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  border-radius: 2px;
  opacity: 0;
  transition: left 0.25s var(--cx-ease), right 0.25s var(--cx-ease), opacity 0.2s var(--cx-ease);
}
.hm-nav-link:hover::after { left: 20%; right: 20%; opacity: 1; }

.hm-btn {
  position: relative;
  overflow: hidden;
}
.hm-btn-solid,
.hm-btn-outline,
.hm-btn-outline-white,
.hm-btn-discord {
  transition:
    transform 0.18s var(--cx-ease-spring),
    background 0.25s var(--cx-ease),
    border-color var(--cx-trans),
    color var(--cx-trans),
    box-shadow var(--cx-trans);
}
.hm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 60, 0.16); }
.hm-btn:active { transform: translateY(0) scale(0.98); }

.hm-logo-icon {
  transition: transform 0.4s var(--cx-ease-spring), filter var(--cx-trans);
}
.hm-logo:hover .hm-logo-icon {
  transform: rotate(-8deg) scale(1.06);
  filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.55));
}

/* ──────────────────────────────────────────────────────────
   Login card — gentle idle "breathing"
────────────────────────────────────────────────────────── */
.cx-login-card {
  animation:
    cx-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    cx-login-breathe 6s ease-in-out infinite alternate 0.9s;
}
@keyframes cx-login-breathe {
  from { box-shadow: var(--cx-shadow), 0 0 22px rgba(99, 102, 241, 0.20); }
  to   { box-shadow: var(--cx-shadow), 0 0 38px rgba(99, 102, 241, 0.32); }
}

.cx-brand-icon {
  animation: cx-brand-float 4.5s ease-in-out infinite alternate;
}
@keyframes cx-brand-float {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-4px) rotate(-2deg); }
}

/* ──────────────────────────────────────────────────────────
   Sound-toggle floating chip (panel only)
────────────────────────────────────────────────────────── */
.cx-sound-chip {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--cx-border-mid);
  background: var(--cx-glass-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--cx-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  box-shadow: var(--cx-shadow);
  transition:
    transform 0.25s var(--cx-ease-spring),
    background var(--cx-trans),
    border-color var(--cx-trans),
    color var(--cx-trans),
    box-shadow var(--cx-trans);
}
.cx-sound-chip:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--cx-accent);
  color: var(--cx-accent);
  box-shadow: 0 12px 32px rgba(34, 211, 238, 0.25);
}
.cx-sound-chip:active { transform: scale(0.95); }
.cx-sound-chip.is-off {
  color: var(--cx-text-dim);
  opacity: 0.72;
}
.cx-sound-chip.is-off:hover {
  color: var(--cx-danger);
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 10px 28px rgba(248, 113, 113, 0.25);
}

/* ──────────────────────────────────────────────────────────
   Toast polish
────────────────────────────────────────────────────────── */
.cx-toast {
  transform-origin: right bottom;
  transition: transform 0.25s var(--cx-ease-spring), opacity 0.2s var(--cx-ease);
}
.cx-toast:hover { transform: translateX(-3px) scale(1.015); }

/* ──────────────────────────────────────────────────────────
   Loader shimmer — use for any element with .cx-shimmer
────────────────────────────────────────────────────────── */
.cx-shimmer {
  position: relative;
  overflow: hidden;
  color: transparent !important;
}
.cx-shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    rgba(148, 163, 255, 0.06) 0%,
    rgba(148, 163, 255, 0.16) 45%,
    rgba(148, 163, 255, 0.06) 90%);
  background-size: 220% 100%;
  animation: cx-shimmer-move 1.25s linear infinite;
}
@keyframes cx-shimmer-move {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}

/* ──────────────────────────────────────────────────────────
   File-upload — highlight state cleaner, dragover support
────────────────────────────────────────────────────────── */
.cx-file-upload.is-drag {
  border-color: var(--cx-accent);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(99, 102, 241, 0.08));
  transform: scale(1.005);
}

/* ──────────────────────────────────────────────────────────
   Mobile polish
────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cx-sound-chip {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 36px;
    height: 36px;
  }
  .cx-toast-area {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }
}