/* Klarna-style motion & interaction layer — no content/color/layout changes */

/* Smooth anchor scroll */
html { scroll-behavior: smooth; }

/* Sticky nav blur once scrolled past hero */
header {
  transition: background-color .3s ease-out, backdrop-filter .3s ease-out,
              box-shadow .3s ease-out, border-color .3s ease-out;
}
header.is-scrolled {
  background: rgba(13, 19, 48, .72) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* Section reveal — fade + subtle rise, once */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Staggered children */
[data-reveal-child] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in [data-reveal-child] {
  opacity: 1;
  transform: none;
}

/* Soften card corners & add hover lift */
.card, .role-card, .story-card, .route-card, .info-card, .stat-card,
.feature-card, .value-card, .step-card, .popular-card, .price-card,
[class*="-card"] {
  border-radius: 20px;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.card:hover, .role-card:hover, .route-card:hover, .info-card:hover,
.feature-card:hover, .value-card:hover, .step-card:hover,
[class*="-card"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45);
  cursor: default;
}

/* Pill buttons + press feedback */
.btn, button.btn, a.btn, .cta, .primary-btn, .secondary-btn,
button[class*="btn"], a[class*="btn"] {
  border-radius: 999px !important;
  transition: transform .18s ease-out, box-shadow .2s ease-out,
              background-color .2s ease-out, color .2s ease-out,
              border-color .2s ease-out;
  cursor: pointer;
}
.btn:hover, .cta:hover, a[class*="btn"]:hover, button[class*="btn"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .5);
}
.btn:active, .cta:active, a[class*="btn"]:active, button[class*="btn"]:active {
  transform: scale(.97);
}

/* Cursor feedback on interactive things */
a, button, [role="button"], .clickable { cursor: pointer; }

/* Typography breathing room (non-destructive) */
section { scroll-margin-top: 90px; }
h1, h2, h3 { line-height: 1.15; }
p { line-height: 1.65; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-child] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Mobile: keep tap targets large, no layout shift */
@media (max-width: 900px) {
  .btn, .cta, a[class*="btn"], button[class*="btn"] {
    min-height: 44px;
    padding-left: 20px;
    padding-right: 20px;
  }
}