/* KONTA shared motion and liquid-glass surfaces */

/* Restrained glass: translucent ink, a fine highlight and a soft edge. */
.site-head {
  background:
    linear-gradient(110deg, rgba(255,255,255,0.07), transparent 42%),
    rgba(8,8,8,0.68);
  backdrop-filter: saturate(175%) blur(24px);
  -webkit-backdrop-filter: saturate(175%) blur(24px);
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 8px 30px rgba(0,0,0,0.16);
}

.bag {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), transparent 42%),
    rgba(16,16,16,0.82);
  backdrop-filter: saturate(150%) blur(28px);
  -webkit-backdrop-filter: saturate(150%) blur(28px);
}

.sticky-cta__inner {
  background:
    linear-gradient(105deg, rgba(255,255,255,0.07), transparent 48%),
    rgba(8,8,8,0.76);
}

.btn-primary {
  background: linear-gradient(135deg, #fff 0%, #f6f5f2 58%, rgba(255,255,255,0.9) 100%);
  box-shadow: inset 0 1px rgba(255,255,255,0.9), 0 8px 24px rgba(255,255,255,0.055);
}

.summary,
.pay-box,
.track-result,
.track-cancelled {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.065), transparent 48%),
    rgba(18,18,18,0.72);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  box-shadow: inset 0 1px rgba(255,255,255,0.08), 0 18px 48px rgba(0,0,0,0.16);
}

.choice {
  background: rgba(255,255,255,0.018);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.k-header {
  background:
    linear-gradient(110deg, rgba(255,255,255,0.065), transparent 44%),
    rgba(8,8,8,0.78);
  backdrop-filter: saturate(170%) blur(24px);
  -webkit-backdrop-filter: saturate(170%) blur(24px);
  box-shadow: inset 0 1px rgba(255,255,255,0.07), 0 8px 28px rgba(0,0,0,0.2);
}

.k-sidebar {
  background: rgba(8,8,8,0.88);
  backdrop-filter: saturate(140%) blur(22px);
  -webkit-backdrop-filter: saturate(140%) blur(22px);
}

.k-card,
.k-order-card,
.k-stat,
.k-kpi,
.k-col,
.k-palette__box {
  background-image: linear-gradient(145deg, rgba(255,255,255,0.045), transparent 58%);
}

.k-card,
.k-stat,
.k-kpi,
.k-col {
  backdrop-filter: saturate(125%) blur(12px);
  -webkit-backdrop-filter: saturate(125%) blur(12px);
}

.k-palette__box {
  background-color: rgba(12,12,12,0.86);
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
}

/* Scroll reveals are opt-in at runtime so content stays visible without JS. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(0.16,1,0.3,1),
              transform 760ms cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; will-change: auto; }
}

@media (max-width: 760px) {
  html body :is(input, select, textarea) { font-size: 16px !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: rgba(8,8,8,0.94); }
  .bag { background: #101010; }
  .sticky-cta__inner { background: rgba(8,8,8,0.96); }
  .summary, .pay-box, .track-result, .track-cancelled { background: #121212; }
  .k-header, .k-sidebar { background: #080808; }
  .k-palette__box { background: #0c0c0c; }
}
