html {
  scroll-behavior: smooth;
  /* Avoid layout shift when modals set overflow:hidden (scrollbar disappears). */
  scrollbar-gutter: stable;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Popup scrollbars ── */
.docs-modal-scroll,
.country-popup-scroll {
  scrollbar-width: thin;
  scrollbar-color: #2d99ff #0b2540;
}

.docs-modal-scroll::-webkit-scrollbar,
.country-popup-scroll::-webkit-scrollbar {
  width: 10px;
}

.docs-modal-scroll::-webkit-scrollbar-track,
.country-popup-scroll::-webkit-scrollbar-track {
  background: #0b2540;
  border-radius: 999px;
}

.docs-modal-scroll::-webkit-scrollbar-thumb,
.country-popup-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2d99ff 0%, #0164db 100%);
  border-radius: 999px;
  border: 2px solid #0b2540;
}

.docs-modal-scroll::-webkit-scrollbar-corner,
.country-popup-scroll::-webkit-scrollbar-corner {
  background: #0b2540;
}

/* ── Header ── */
#site-header {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

#site-header.is-scrolled {
  background-color: rgba(0, 21, 40, 0.92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Mobile menu icon morphs into an X */
#nav-toggle:checked ~ label .burger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

#nav-toggle:checked ~ label .burger-line:nth-child(2) {
  opacity: 0;
}

#nav-toggle:checked ~ label .burger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.burger-line {
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}

/* ── Motion tokens ── */
:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-duration: 0.8s;
}

/* ── Scroll entrance (opt-in via data-reveal) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--motion-duration) var(--motion-ease-out),
    transform var(--motion-duration) var(--motion-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Interactive cards / buttons ── */
.lift {
  transition:
    transform 0.35s var(--motion-ease-out),
    box-shadow 0.35s ease,
    filter 0.35s ease;
}

.lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(0, 21, 40, 0.28);
}

.btn {
  transition:
    transform 0.28s var(--motion-ease-out),
    box-shadow 0.28s ease,
    filter 0.28s ease,
    background-color 0.28s ease;
}

.btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 14px 28px rgba(45, 153, 255, 0.3);
}

.btn:active {
  transform: translateY(0);
}

/* Platform tiles zoom their artwork on hover */
.zoom-media {
  transition: transform 0.7s var(--motion-ease-out);
}

.group:hover .zoom-media {
  transform: scale(1.06);
}

footer a {
  transition: color 0.25s ease;
}

/* ── Modal entrance ── */
#docs-partner-modal.modal-is-open > [data-close-modal],
#country-popup.modal-is-open > [data-country-popup-dismiss] {
  animation: modalBackdropIn 0.45s ease forwards;
}

#docs-partner-modal.modal-is-open .pointer-events-auto > div,
#country-popup.modal-is-open .pointer-events-auto > div {
  animation: modalPanelIn 0.65s var(--motion-ease-out) forwards;
}

@keyframes modalBackdropIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalPanelIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Popup list items stagger in when rendered */
.country-option,
.country-service-option,
.partner-docs-row {
  animation: listItemIn 0.55s var(--motion-ease-out) backwards;
  animation-delay: calc(var(--item-index, 0) * 55ms);
}

@keyframes listItemIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lift:hover,
  .btn:hover,
  .group:hover .zoom-media {
    transform: none;
  }

  #docs-partner-modal.modal-is-open .pointer-events-auto > div,
  #country-popup.modal-is-open .pointer-events-auto > div,
  .country-option,
  .country-service-option,
  .partner-docs-row {
    animation: none;
  }
}