/* Site-wide motion system.
   Every rule is scoped under html.ka, which an inline script adds only when
   JavaScript runs AND the user has not requested reduced motion. Without .ka
   the page renders fully static, no hidden content, no transforms. */

/* ---------- 1. First-load hero choreography ---------- */

/* Generic load-in for non-homepage heroes (site-anim.js assigns .kl and --d). */
.ka .kl {
  animation: ka-load 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}

/* Opacity-only variant for elements that already carry a CSS transform. */
.ka .kl-o {
  animation: ka-load-o 0.8s ease both;
  animation-delay: var(--d, 0ms);
}

@keyframes ka-load {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ka-load-o {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ka .hero-copy .badge,
.ka .hero h1,
.ka .hero-copy > p,
.ka .hero .actions {
  animation: ka-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ka .hero-copy .badge {
  animation-name: ka-badge;
  animation-delay: 0.05s;
}

.ka .hero h1 {
  animation-delay: 0.16s;
}

.ka .hero-copy > p {
  animation-delay: 0.3s;
}

.ka .hero .actions {
  animation-delay: 0.44s;
}

@keyframes ka-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ka-badge {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The desktop shell keeps its translateX(-50%) centering inside the keyframes. */
.ka .dashboard-shell {
  animation: ka-shell-flow 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
  perspective: 1400px;
}

@keyframes ka-shell-flow {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 1201px) {
  .ka .dashboard-shell {
    animation-name: ka-shell-fixed;
  }

  @keyframes ka-shell-fixed {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(44px) scale(0.985);
    }

    to {
      opacity: 1;
      transform: translateX(-50%);
    }
  }
}

/* Pointer-tracked 3D tilt (driven from home-anim.js on fine pointers). */
.ka .dashboard-inner {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* ---------- 2. Scroll reveals ---------- */

/* JS tags elements with .kr and a --d stagger delay, then flips on .kv when
   they enter the viewport. Both classes are removed after the transition so
   the elements return to their untouched stylesheet state. */
.ka .kr {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}

.ka .kr.kv {
  opacity: 1;
  transform: none;
}

/* Opacity-only reveal for elements that already carry a CSS transform. */
.ka .kr-o {
  opacity: 0;
  transition: opacity 0.8s ease;
  transition-delay: var(--d, 0ms);
}

.ka .kr-o.kv {
  opacity: 1;
}

/* ---------- 3. Buttons ---------- */

.ka .button,
.ka .header-cta,
.ka .table-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ka .button:hover,
.ka .table-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(10, 13, 18, 0.1);
}

.ka .button:active,
.ka .table-button:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
  transition-duration: 0.08s;
}

.ka .arrow::after {
  transition: transform 0.25s ease;
}

.ka .arrow:hover::after {
  transform: translateX(4px);
}

.ka .header-cta span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.ka .header-cta:hover span {
  transform: translateX(4px);
}

/* ---------- 4. Cards, icons, tiles ---------- */

.ka .feature-grid .icon,
.ka .security-grid .icon,
.ka .use-grid .icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .feature-grid article:hover .icon,
.ka .security-grid article:hover .icon,
.ka .use-grid article:hover .icon {
  transform: scale(1.1) rotate(-5deg);
}

.ka .perks .feature-grid article {
  transition: background-color 0.25s ease;
}

.ka .perks .feature-grid article:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.ka .use-grid article {
  transition: background-color 0.25s ease;
}

.ka .use-grid article:hover {
  background-color: #fcf7eb;
}

.ka .platform {
  transition: background-color 0.25s ease;
}

.ka .platform:hover {
  background-color: #f6efdc;
}

.ka .platform img,
.ka .platform .windows-mark {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .platform:hover img,
.ka .platform:hover .windows-mark {
  transform: translateY(-4px) scale(1.08);
}

/* ---------- 5. Stats ---------- */

.ka .stats-grid strong {
  transition: color 0.25s ease;
}

.ka .stats-grid div:hover strong {
  color: var(--orange);
}

/* ---------- 6. Comparison table ---------- */

.ka .comparison tbody td {
  transition: background-color 0.2s ease;
}

.ka .comparison tbody tr:hover td {
  background-color: #f6efdc;
}

.ka .comparison tbody tr:hover td.keen-col {
  background-color: #f9f0da;
}

/* ---------- 7. Server map ---------- */

.ka .server-pin,
.ka .location-pin {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.ka .server-pin:hover,
.ka .server-pin:focus-visible,
.ka .location-pin:hover,
.ka .location-pin:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
}

.ka .server-pin:active,
.ka .location-pin:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.ka .server-pin.active::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(238, 104, 24, 0.45);
  border-radius: 50%;
  animation: ka-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes ka-pulse {
  0% {
    opacity: 0.9;
    transform: scale(0.55);
  }

  70% {
    opacity: 0;
    transform: scale(1.45);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

.ka .map-status span {
  animation: ka-breathe 2.4s ease-in-out infinite;
}

@keyframes ka-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(23, 178, 106, 0.45);
  }

  50% {
    box-shadow: 0 0 0 5px rgba(23, 178, 106, 0);
  }
}

.ka .map-selection strong.ka-swap {
  animation: ka-swap 0.35s ease both;
}

@keyframes ka-swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 8. FAQ accordion ---------- */

.ka .faq-item span {
  transition: transform 0.3s ease, color 0.3s ease;
}

.ka .faq-item.open span {
  transform: rotate(180deg);
  color: var(--orange);
}

.ka .faq-item.open .faq-answer {
  animation: ka-faq 0.35s ease both;
}

@keyframes ka-faq {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 9. Footer ---------- */

.ka .footer-col a {
  transition: color 0.2s ease, transform 0.2s ease;
}

.ka .footer-col a:hover {
  color: var(--orange);
  transform: translateX(3px);
}

.ka .socials a {
  transition: transform 0.2s ease;
}

.ka .socials a:hover {
  transform: translateY(-3px);
}

/* ---------- 10. Sub-page icon bounces ---------- */

/* Kill Switch */
.ka .ks-how-grid article,
.ka .ks-matters-grid article {
  transition: background-color 0.25s ease;
}

.ka .ks-how-grid article:hover {
  background-color: #fcf7eb;
}

.ka .ks-matters-grid article:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.ka .ks-feature-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .ks-matters-grid article:hover .ks-feature-icon {
  transform: scale(1.1) rotate(-5deg);
}

.ka .ks-step-number {
  transition: color 0.25s ease;
}

.ka .ks-how-grid article:hover .ks-step-number {
  color: var(--orange);
}

/* Leak Protection */
.ka .lp-protect-grid article,
.ka .lp-matters-grid article {
  transition: background-color 0.25s ease;
}

.ka .lp-protect-grid article:hover {
  background-color: #fcf7eb;
}

.ka .lp-matters-grid article:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.ka .lp-feature-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .lp-matters-grid article:hover .lp-feature-icon {
  transform: scale(1.1) rotate(-5deg);
}

.ka .lp-step-number {
  transition: color 0.25s ease;
}

.ka .lp-protect-grid article:hover .lp-step-number {
  color: var(--orange);
}

/* Split Tunneling */
.ka .st-card-grid article {
  transition: background-color 0.25s ease;
}

.ka .st-scenario-grid article:hover {
  background-color: #fcf7eb;
}

.ka .st-setup-grid article:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.ka .st-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .st-card-grid article:hover .st-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Dedicated IP */
.ka .dip-benefit-grid article,
.ka .dip-setup-grid article {
  transition: background-color 0.25s ease;
}

.ka .dip-benefit-grid article:hover {
  background-color: #fcf7eb;
}

.ka .dip-setup-grid article:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.ka .dip-feature-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .dip-setup-grid article:hover .dip-feature-icon {
  transform: scale(1.1) rotate(-5deg);
}

.ka .dip-step-number {
  transition: color 0.25s ease;
}

.ka .dip-benefit-grid article:hover .dip-step-number {
  color: var(--orange);
}

/* High-Speed VPN */
.ka .hs-card-grid article {
  transition: background-color 0.25s ease;
}

.ka .hs-card-grid article:hover {
  background-color: #fcf7eb;
}

.ka .hs-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .hs-card-grid article:hover .hs-icon {
  transform: scale(1.1) rotate(-5deg);
}

.ka .hs-stats-grid article {
  transition: background-color 0.25s ease;
}

.ka .hs-stats-grid article:hover {
  background-color: #fcf7eb;
}

.ka .hs-stats-grid article:hover strong {
  color: var(--orange);
}

.ka .hs-stats-grid strong {
  transition: color 0.25s ease;
}

/* High-speed VPN comparison table */
.ka .hs-table tbody td,
.ka .hs-table tbody th {
  transition: background-color 0.2s ease;
}

.ka .hs-table tbody tr:hover td,
.ka .hs-table tbody tr:hover th {
  background-color: #f6efdc;
}

.ka .hs-table tbody tr:hover .hs-keen {
  background-color: #f9f0da;
}

/* Split tunneling comparison table */
.ka .st-table tbody td,
.ka .st-table tbody th {
  transition: background-color 0.2s ease;
}

.ka .st-table tbody tr:hover td,
.ka .st-table tbody tr:hover th {
  background-color: #f6efdc;
}

.ka .st-table tbody tr:hover .st-with {
  background-color: #f9f0da;
}

/* ---------- 11. Perks page interactions ---------- */

/* Guarantee cards (dark) */
.ka .guarantee-grid article {
  transition: background-color 0.25s ease;
}

.ka .guarantee-grid article:hover {
  background-color: rgba(255, 255, 255, 0.045);
}

.ka .step-number {
  transition: color 0.25s ease;
}

.ka .guarantee-grid article:hover .step-number {
  color: var(--orange);
}

/* Principles cards (light) */
.ka .perks-principles article {
  transition: background-color 0.25s ease;
}

.ka .perks-principles article:hover {
  background-color: #fcf7eb;
}

.ka .perks-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .perks-principles article:hover .perks-icon,
.ka .benefit-grid article:hover .perks-icon {
  transform: scale(1.1) rotate(-5deg);
}

/* Benefit stack cards (light) */
.ka .benefit-grid article {
  transition: background-color 0.25s ease;
}

.ka .benefit-grid article:hover {
  background-color: #fcf7eb;
}

/* Partner cards (light) */
.ka .partner-grid article {
  transition: background-color 0.25s ease;
}

.ka .partner-grid article:hover {
  background-color: #fcf7eb;
}

.ka .partner-logo {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .partner-grid article:hover .partner-logo {
  transform: scale(1.1) rotate(-5deg);
}

/* Perks mockup hover tilt */
.ka .perks-desktop-mockup,
.ka .perks-mobile-mockup {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ka .perks-desktop-mockup:hover {
  transform: translateY(-6px);
}

.ka .perks-mobile-mockup:hover {
  transform: translateY(-4px);
}

/* ---------- 12. Transfer page interactions ---------- */

.ka .tp-infos article {
  transition: background-color 0.25s ease;
}

.ka .tp-infos article:hover {
  background-color: #fcf7eb;
}

.ka .tp-infos .icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ka .tp-infos article:hover .icon {
  transform: scale(1.1) rotate(-5deg);
}

/* ---------- 13. Pricing page interactions ---------- */

.ka .pricing-tier-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.ka .pricing-tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10, 13, 18, 0.1);
}

.ka .savings-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ka .savings-card:hover {
  transform: translateY(-3px);
}

/* Pricing comparison table */
.ka .pricing-table tbody td,
.ka .pricing-table tbody th {
  transition: background-color 0.2s ease;
}

.ka .pricing-table tbody tr:hover td,
.ka .pricing-table tbody tr:hover th {
  background-color: #f6efdc;
}

/* ---------- 14. Server Locations page interactions ---------- */

.ka .region-table tbody tr {
  transition: background-color 0.2s ease;
}

.ka .region-table tbody tr:hover {
  background-color: #f6efdc;
}

.ka .location-request {
  transition: background-color 0.25s ease;
}

.ka .location-request:hover {
  background-color: #fcf7eb;
}

/* ---------- 15. Feature-page hero media hover ---------- */

.ka .ks-screen,
.ka .lp-screen,
.ka .st-screen,
.ka .dip-screen,
.ka .hs-screen {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ka .ks-hero-media:hover .ks-screen-desktop,
.ka .lp-hero-media:hover .lp-screen-desktop,
.ka .st-hero-media:hover .st-screen-desktop,
.ka .dip-hero-media:hover .dip-screen-desktop,
.ka .hs-hero-media:hover .hs-screen-desktop {
  transform: translateY(-6px);
}

.ka .ks-hero-media:hover .ks-screen-mobile,
.ka .lp-hero-media:hover .lp-screen-mobile,
.ka .st-hero-media:hover .st-screen-mobile,
.ka .dip-hero-media:hover .dip-screen-mobile,
.ka .hs-hero-media:hover .hs-screen-mobile {
  transform: translateY(-4px);
}