/* Accent + motion hygiene */
:root {
  --accent: #00B894;            /* tweak to brand green */
  --accent-2: #00D1FF;          /* cyan accent */
  --ink-opacity: 0.35;
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Hero ink background (gentle animated gradient glow) */
.hero-ink { position: relative; overflow: hidden; }
.hero-ink::before {
  content: "";
  position: absolute; inset: -25%;
  background:
    radial-gradient(600px 600px at 20% 30%, color-mix(in oklab, var(--accent) 70%, white 30%) 0%, transparent 70%),
    radial-gradient(500px 500px at 80% 40%, color-mix(in oklab, var(--accent-2) 70%, white 30%) 0%, transparent 70%),
    radial-gradient(700px 700px at 50% 80%, color-mix(in oklab, var(--accent) 45%, black 5%) 0%, transparent 70%);
  filter: blur(60px) saturate(120%);
  opacity: var(--ink-opacity);
  transform: translate3d(0,0,0) scale(1.05);
  animation: ink-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ink-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  100% { transform: translate3d( 3%,  2%, 0) scale(1.08); }
}

/* Parallax targets */
[data-parallax] { will-change: transform; transform: translateZ(0); }

/* Buttons + cards micro-interactions */
.btn, .button, a.button, button {
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover, .button:hover, a.button:hover, button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.card, .tile, .feature {
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.card:hover, .tile:hover, .feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Accent utilities */
.accent-underline {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Optional: subtle section dividers */
.section + .section {
  border-top: 1px solid color-mix(in oklab, #000 10%, white 90%);
}

/* Optional: navbar on scroll */
.nav-compact { transition: backdrop-filter .2s ease, box-shadow .2s ease, padding .2s ease; }
.nav-compact.scrolled {
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  padding-block: .5rem;
}