/* Cadence — modern minimalist + futuristic UI */

:root {
  --water-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ===== Water-drop button press ===== */
.water-btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.35s var(--water-ease),
              box-shadow 0.35s var(--smooth),
              background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.water-btn:active {
  transform: scale(0.94);
  transition: transform 0.12s var(--water-ease);
}

.water-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
              rgba(255, 255, 255, 0.35) 0%,
              transparent 60%);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.4s ease, transform 0.5s var(--water-ease);
  pointer-events: none;
  border-radius: inherit;
}

.water-btn:active::after {
  opacity: 1;
  transform: scale(1.8);
  transition: opacity 0s, transform 0s;
}

.water-btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: water-ripple 0.6s var(--smooth) forwards;
  pointer-events: none;
}

@keyframes water-ripple {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

.dark .water-btn .ripple {
  background: rgba(255, 255, 255, 0.2);
}

/* ===== Smooth parallax ===== */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===== Chat message entrance ===== */
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.msg-enter {
  animation: msg-in 0.45s var(--smooth) forwards;
}

/* Overlay hover-reveal scrollbars: invisible until the pointer is over that pane. */
@media (hover: hover) and (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  *:not(html):not(body):hover,
  *:not(html):not(body):focus,
  *:not(html):not(body):focus-within {
    scrollbar-color: color-mix(in oklab, currentColor 32%, transparent) transparent;
  }
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: transparent;
  }
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-corner {
    background: transparent;
  }
  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  *:not(html):not(body):hover::-webkit-scrollbar-thumb,
  *:not(html):not(body):focus::-webkit-scrollbar-thumb,
  *:not(html):not(body):focus-within::-webkit-scrollbar-thumb {
    background-color: color-mix(in oklab, currentColor 32%, transparent);
  }
  *:not(html):not(body):hover::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in oklab, currentColor 52%, transparent);
  }
}


/* ===== Feature cards ===== */
.feature-card {
  transition: transform 0.4s var(--smooth), box-shadow 0.4s var(--smooth), border-color 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.15);
}
.dark .feature-card:hover {
  box-shadow: 0 20px 40px -15px rgba(14, 165, 233, 0.08);
}

::selection {
  background: rgba(14, 165, 233, 0.25);
}