/* =============================================================
   Kodo Kelias — premium refinements layered over Tailwind
   ============================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: "ss01", "cv11"; }

/* -------- Subtle grid backgrounds -------- */
.bg-hero-grid {
  background-image:
    linear-gradient(to right, rgba(12, 10, 9, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12, 10, 9, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
          mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
}
.bg-hero-grid-dark {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* -------- Animated mesh (hero) -------- */
.mesh-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
  animation: blob-drift 22s ease-in-out infinite alternate;
}
.mesh-blob-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(234, 88, 12, 0.22), rgba(234, 88, 12, 0) 70%);
  top: -140px; right: -120px;
  animation-delay: 0s;
}
.mesh-blob-2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(120, 113, 108, 0.38), rgba(120, 113, 108, 0) 70%);
  bottom: -160px; left: -80px;
  animation-delay: -11s;
}
@keyframes blob-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(40px, -32px, 0) scale(1.07); }
  100% { transform: translate3d(-24px, 22px, 0) scale(0.96); }
}

/* -------- Premium shadow -------- */
.shadow-premium {
  box-shadow:
    0 1px 2px rgba(12, 10, 9, 0.04),
    0 8px 24px -8px rgba(12, 10, 9, 0.08),
    0 24px 48px -24px rgba(12, 10, 9, 0.14);
}

/* -------- Scroll reveal -------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* -------- Soft pulse (hero indicator) -------- */
.animate-pulse-soft { animation: pulse-soft 2.4s ease-in-out infinite; }
@keyframes pulse-soft {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.82); }
}

/* -------- Nav scrolled state -------- */
#site-nav.is-scrolled {
  background: rgba(250, 250, 249, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
          backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(12, 10, 9, 0.06);
}

/* -------- Focus / selection polish -------- */
:focus-visible {
  outline: 2px solid #ea580c;
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------- Typography polish -------- */
h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }

/* -------- Testimonial quote clamp -------- */
.quote-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 7;
          line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .reveal             { opacity: 1; transform: none; transition: none; }
  .mesh-blob          { animation: none; }
  .animate-pulse-soft { animation: none; }
  html                { scroll-behavior: auto; }
}