/* =============================================================
   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;
}
.quote-featured-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 9;
          line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------- Testimonial modal -------- */
.testi-modal.is-open            { display: flex; animation: modal-fade 0.22s ease-out; }
.testi-modal.is-open .testi-modal__panel { animation: modal-panel 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-panel {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .testi-modal.is-open,
  .testi-modal.is-open .testi-modal__panel { animation: none; }
}

/* -------- Contact success modal -------- */
.kk-success-modal.is-open                          { display: flex; animation: modal-fade 0.22s ease-out; }
.kk-success-modal.is-open .kk-success-modal__panel { animation: modal-panel 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .kk-success-modal.is-open,
  .kk-success-modal.is-open .kk-success-modal__panel { animation: none; }
}

/* -------- Testimonial rail (horizontal gallery) -------- */
.testi-rail-wrap {
  /* Soft edge fade so clipped cards hint at more */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 4%, black 96%, transparent 100%);
}
.testi-rail {
  scrollbar-width: thin;
  scrollbar-color: rgba(12, 10, 9, 0.18) transparent;
  -webkit-overflow-scrolling: touch;
}
.testi-rail::-webkit-scrollbar        { height: 4px; }
.testi-rail::-webkit-scrollbar-track  { background: transparent; }
.testi-rail::-webkit-scrollbar-thumb  { background: rgba(12, 10, 9, 0.18); border-radius: 999px; }
.testi-rail::-webkit-scrollbar-thumb:hover { background: rgba(12, 10, 9, 0.32); }

/* -------- Hero electric streams -------- */
.hero-streams .stream {
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.9;
}
.hero-streams .stream-1 {
  stroke: rgba(234, 88, 12, 0.9);
  stroke-dasharray: 90 3200;
  filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.55));
  animation: stream-flow 18s linear infinite;
}
.hero-streams .stream-2 {
  stroke: rgba(120, 113, 108, 0.8);
  stroke-dasharray: 70 3500;
  filter: drop-shadow(0 0 5px rgba(120, 113, 108, 0.45));
  animation: stream-flow 26s linear infinite;
  animation-delay: -4s;
}
.hero-streams .stream-3 {
  stroke: rgba(234, 88, 12, 0.6);
  stroke-dasharray: 120 2800;
  filter: drop-shadow(0 0 7px rgba(234, 88, 12, 0.4));
  animation: stream-flow 21s linear infinite;
  animation-delay: -7s;
}
@keyframes stream-flow {
  from { stroke-dashoffset: 3300; }
  to   { stroke-dashoffset: -100; }
}

/* -------- Hero drifting dots (light packets) -------- */
.hero-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(234, 88, 12, 0.8);
  box-shadow: 0 0 10px 2px rgba(234, 88, 12, 0.5);
  opacity: 0.5;
  will-change: transform, opacity;
}
.hero-dot.dot-1 { top: 22%; left: 14%; animation: dot-drift 17s ease-in-out infinite; }
.hero-dot.dot-2 {
  top: 58%; left: 72%;
  background: rgba(120, 113, 108, 0.7);
  box-shadow: 0 0 8px 2px rgba(120, 113, 108, 0.35);
  animation: dot-drift 24s ease-in-out infinite;
  animation-delay: -6s;
}
.hero-dot.dot-3 { top: 78%; left: 30%; animation: dot-drift 20s ease-in-out infinite; animation-delay: -11s; }
.hero-dot.dot-4 {
  top: 18%; left: 66%;
  width: 5px; height: 5px;
  background: rgba(234, 88, 12, 0.6);
  box-shadow: 0 0 9px 2px rgba(234, 88, 12, 0.35);
  animation: dot-drift 26s ease-in-out infinite;
  animation-delay: -3s;
}
@keyframes dot-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.35; }
  25%      { transform: translate3d(40px, -50px, 0); opacity: 0.9; }
  50%      { transform: translate3d(-30px, 30px, 0); opacity: 0.55; }
  75%      { transform: translate3d(55px, 35px, 0); opacity: 0.85; }
}

/* -------- Mobile visibility boost (streams + dots) --------
   On narrow viewports the 16:9 SVG is slice-cropped to its middle, so
   long sparse dashes are rarely on-screen. Denser dashes + larger,
   brighter dots keep the hero alive on phones. */
@media (max-width: 767px) {
  .hero-streams .stream-1 { stroke-dasharray: 140 520; }
  .hero-streams .stream-2 { stroke-dasharray: 110 560; }
  .hero-streams .stream-3 { stroke-dasharray: 160 480; }

  .hero-dot { width: 8px; height: 8px; opacity: 0.65; }
  .hero-dot.dot-1 { box-shadow: 0 0 14px 3px rgba(234, 88, 12, 0.65); }
  .hero-dot.dot-2 { box-shadow: 0 0 12px 3px rgba(120, 113, 108, 0.5); }
  .hero-dot.dot-3 { box-shadow: 0 0 14px 3px rgba(234, 88, 12, 0.6); }
  .hero-dot.dot-4 { width: 7px; height: 7px; box-shadow: 0 0 12px 3px rgba(234, 88, 12, 0.5); }
}

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