@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --primary-navy: #161942;
  --primary-blue: #0066FF;
  --dark-bg: #0E1017;
  --light-bg: #F4F5F8;
  --border-light: #E5E7EB;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #F4F5F8;
  color: #161942;
  /* overflow-x: hidden here would force overflow-y: auto (per spec, since only one axis
     can be "visible"), which turns body into a scroll container and breaks position:sticky
     for descendants like the Industries stacked cards. overflow-x: clip avoids that. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Header Scroll Transition (Scroll Down = Slide in from top, Scroll Up = Slide out up) */
header {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, background-color 0.3s ease;
  will-change: transform;
}

header.header-hidden {
  transform: translateY(-160%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Lenis Smooth Scroll Standard CSS */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* Modern Mobile Navigation Drawer Animations */
.mobile-nav-item {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  will-change: opacity, transform;
}

#mobile-menu.active #mobile-menu-backdrop {
  opacity: 1;
}

#mobile-menu.active #mobile-menu-drawer {
  transform: translateX(0);
}

#mobile-menu.active .mobile-nav-item {
  opacity: 1;
  transform: translateX(0);
}

/* Hero Section Custom Styles */
.hero-heading {
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.hero-heading span {
  display: block;
  margin-bottom: 0.25em;
}

.hero-heading span:last-child {
  margin-bottom: 0;
}

.hero-gradient-text {
  font-weight: 400 !important;
  background: linear-gradient(90deg, #0066FF 0%, #00A3FF 50%, #0055FF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block !important;
}

/* Gradient Utility Classes */
.bg-gradient-teal {
  background: linear-gradient(135deg, #0066FF 0%, #00D4FF 100%) !important;
}

.bg-gradient-glow {
  background: radial-gradient(circle at center, rgba(0, 102, 255, 0.08) 0%, rgba(244, 245, 248, 0) 70%) !important;
}

/* Chamfered Button & Card Styles */
.btn-chamfer {
  clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
}

.btn-chamfer:hover {
  clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
}

/* Header Bar Chamfer (same cut as buttons, no hover-grow — header shouldn't shift on cursor pass-over) */
.header-chamfer {
  clip-path: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
}

/* Chamfered Card Box Cut (Angled top-left and bottom-right corners) */
.card-chamfer {
  clip-path: polygon(24px 0%, 100% 0%, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0% 100%, 0% 24px);
}

@media (min-width: 640px) {
  .card-chamfer {
    clip-path: polygon(32px 0%, 100% 0%, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0% 100%, 0% 32px);
  }
}

/* Ship Scroll Animation */
.ship-scroll-anim {
  transform: translateX(-220px) scale(1.35);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-out;
  will-change: transform, opacity;
}

.ship-scroll-anim.ship-in-view {
  transform: translateX(0) scale(1.35);
  opacity: 1;
}

@media (min-width: 640px) {
  .ship-scroll-anim {
    transform: translateX(-220px) scale(1.12);
  }
  .ship-scroll-anim.ship-in-view {
    transform: translateX(0) scale(1.12);
  }
}

/* Scroll Word-by-Word Reveal */
#reveal-heading {
  line-height: 1.2 !important;
}

.reveal-word {
  color: #94A3B8;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-word.is-revealed {
  color: #161942 !important;
}

/* Stat Box Entrance Animation */
.stat-box-card {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.stat-box-card.box-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Service Card Entrance Animation */
.service-card-anim {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.service-card-anim.card-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Service Card Image Reveal (emerges up from bottom overflow-hidden container) */
.service-card-img {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s, transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
  will-change: opacity, transform;
}

/* Feature Card Entrance Animation — slides in from the right with a slight
   scale-up, one at a time */
.feature-card-anim {
  opacity: 0;
  transform: translateX(70px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
  will-change: opacity, transform;
}

.feature-card-anim.card-in-view {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.feature-card-anim h3 {
  transition: color 0.35s ease;
}

.feature-card-anim span:first-child {
  transition: color 0.35s ease, transform 0.35s ease;
}

/* Hover state — declared after .card-in-view so it wins once revealed */
.feature-card-anim:hover {
  border-color: #1E4D83;
  background-color: #F8FAFC;
  transform: translateX(10px);
}

.feature-card-anim:hover h3 {
  color: #0F2A4A;
}

.feature-card-anim:hover span:first-child {
  color: rgba(30, 77, 131, 0.9);
  transform: scale(1.15) translateX(4px);
}

/* Real-Time Tracking Plane & Globe — slides in from the left, then floats */
#tracking-plane-visual {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#tracking-plane-visual.in-view {
  opacity: 1;
  transform: translateX(0);
}

#tracking-plane-visual.in-view img {
  animation: trackingPlaneFloat 6s ease-in-out 1s infinite;
}

@keyframes trackingPlaneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* CTA Flying Plane Entrance Animation */
#cta-plane-img {
  transform: translate(-140px, 140px) rotate(-6deg);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease-out;
  will-change: transform, opacity;
}

#cta-plane-img.plane-in-view {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
}

.service-card-anim.card-in-view .service-card-img {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Scrollbar */
html {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F4F5F8;
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #F4F5F8;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Hide scrollbars for clean sliders */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Generic Scroll Reveal (reusable across all pages) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1.in-view { transition-delay: 0.1s; }
.reveal-delay-2.in-view { transition-delay: 0.2s; }
.reveal-delay-3.in-view { transition-delay: 0.3s; }
.reveal-delay-4.in-view { transition-delay: 0.4s; }

/* Industries We Serve — Tab Selector */
.industry-tab {
  color: #94A3B8;
}

.industry-tab:hover {
  color: #1E4D83;
}

.industry-tab.is-active {
  color: #161942;
}

.industry-tab-progress {
  width: 0;
}

.industry-panel {
  display: none;
}

.industry-panel.is-active {
  display: block;
  animation: industryPanelFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes industryPanelFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}