/* ============================================
   Na Kilo — Shared Styles
   Used across all pages for consistent design
   ============================================ */

:root {
  --accent: #10b981;
  --accent-light: #34d399;
  --accent-dark: #059669;
  --dark: #0f172a;
  --darker: #020617;
  --charcoal: #0f172a;
  --cream: #f8fafc;
}

/* Vue v-cloak — hide template until mounted */
[v-cloak] { display: none !important; }

/* Page loader overlay */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #020617;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader .loader-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  animation: loaderPulse 1.6s ease-in-out infinite;
}
.page-loader .loader-logo .loader-na {
  font-family: 'Georgia', serif;
  font-size: 2rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.page-loader .loader-logo .loader-kilo {
  font-family: 'Georgia', serif;
  font-size: 2rem;
  color: #fff;
  background: #10b981;
  padding: 0.15rem 0.6rem;
  border-radius: 0.75rem;
  letter-spacing: -0.02em;
}
.page-loader .loader-bar {
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2rem;
}
.page-loader .loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #10b981;
  border-radius: 3px;
  animation: loaderSlide 1.2s ease-in-out infinite;
}
@keyframes loaderPulse {
  0%, 100% { opacity: 0.6; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes loaderSlide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { scroll-behavior: auto; }
body { font-family: 'Outfit', sans-serif; background: var(--cream); color: var(--charcoal); }

/* Grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}

/* Scroll animations */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.85); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Navbar */
.nav-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* Dark section texture — asphalt overlay */
.geo-pattern { position: relative; }
.geo-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/asfalt-light.png');
  background-repeat: repeat;
  background-size: 300px;
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.geo-pattern > * { position: relative; z-index: 1; }

/* Light section texture — cartographer */
.light-texture { position: relative; }
.light-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/cartographer.png');
  background-repeat: repeat;
  background-size: 400px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.light-texture > * { position: relative; z-index: 1; }

/* Footer cubes pattern */
.footer-pattern { position: relative; }
.footer-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/cubes.png');
  background-repeat: repeat;
  background-size: 80px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.footer-pattern > * { position: relative; z-index: 1; }

/* Service card hover */
.service-card {
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(16, 185, 129, 0.1);
}
.service-card:hover .service-arrow {
  transform: translateX(4px);
  opacity: 1;
}
.service-card .service-icon {
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .service-icon {
  transform: scale(1.12) rotate(-6deg);
  background: linear-gradient(135deg, #064e3b, #065f46);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}
.service-card .service-icon i {
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card:hover .service-icon i {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.5));
}

/* Process step icon hover */
.process-step-icon {
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.process-step-icon:hover {
  transform: scale(1.08) translateY(-4px);
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 12px 40px rgba(16, 185, 129, 0.15);
}

/* Drawn arrow dash animation */
.drawn-arrow .arrow-path {
  animation: dashDrift 1.2s linear infinite;
}
@keyframes dashDrift {
  to { stroke-dashoffset: -10; }
}

/* Gallery horizontal scroll */
.gallery-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .gallery-scroll { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Gallery items — GPU compositing to prevent hover glitch */
.gallery-item {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gallery-item img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateZ(0) scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gallery-item:hover img {
  transform: translateZ(0) scale(1.05);
}

/* FAQ */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s; }
.faq-content.open { max-height: 400px; }

/* Testimonial scroll — auto-animate on desktop only */
@keyframes slideTestimonial {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testimonial-track {
  animation: none;
}
@media (min-width: 640px) {
  .testimonial-track {
    animation: slideTestimonial 35s linear infinite;
  }
}
.testimonial-track:hover,
.testimonial-track.paused { animation-play-state: paused; }

/* Testimonial mobile scroll */
.testimonial-scroll::-webkit-scrollbar { display: none; }

/* Wave divider */
section { position: relative; }
.wave-divider { position: absolute; bottom: -3px; left: 0; width: 100%; line-height: 0; z-index: 5; }
.wave-divider svg { display: block; width: 100%; height: 86px; }
@media (max-width: 768px) { .wave-divider svg { height: 56px; } }

/* Modal / Service popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-card {
  background: var(--cream);
  border-radius: 2rem;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 50px 100px rgba(0,0,0,0.4);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.modal-card::-webkit-scrollbar { display: none; }
.modal-enter-active { animation: modalIn 0.3s ease-out; }
.modal-leave-active { animation: modalOut 0.2s ease-in; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes modalOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(16px); }
}

/* Star rating */
.star-filled { color: #f59e0b; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dark); }

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(160deg, #020617 0%, #0f172a 40%, #0f1d2e 60%, #0f172a 80%, #020617 100%);
}

/* Transition classes */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.slide-enter-active, .slide-leave-active { transition: all 0.3s; }
.slide-enter-from, .slide-leave-to { opacity: 0; transform: translateY(-10px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}