@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Syncopate:wght@700&display=swap');

/* Base Resets */
*, ::before, ::after {
  box-sizing: border-box;
}

html, body {
  background-color: #09090b; /* zinc-950 */
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Lenis resets */
html.lenis,
html.lenis-scrolling {
  scroll-behavior: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overflow: clip;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Marquee animations */
@keyframes marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee-left {
  animation: marquee-left 40s linear infinite;
}

.animate-marquee-right {
  animation: marquee-right 40s linear infinite;
}

/* Fast scrolling marquee for About section background */
@keyframes marquee-fast {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-fast {
  animation: marquee-fast 20s linear infinite;
}

/* 3D Perspective Utility */
.perspective-3d {
  perspective: 1000px;
}

/* Hero Video Device Frame 3D Tilt */
.hero-video-frame {
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.hero-video-frame:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

/* Magnetic button wrapper */
.magnetic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}


/* Marching ants dashed border style */
@keyframes marching-ants {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -12; }
}

.marching-ants-rect {
  stroke-dasharray: 6 6;
  animation: marching-ants 0.8s linear infinite;
}

/* Outlined typography helper */
.outlined-text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
}

.outlined-text-yellow {
  color: transparent;
  -webkit-text-stroke: 2px #facc15;
}

.outlined-text-bold {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
}

.outlined-text-black-bold {
  color: transparent;
  -webkit-text-stroke: 2px rgba(9, 9, 11, 0.9);
}

/* Glassmorphism utility */
.glassmorphism {
  background: rgba(24, 24, 27, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Hide scrollbar default utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Paper grain/noise overlay effect */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Glow highlights */
.shadow-neon-blue {
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.5);
}
.shadow-neon-yellow {
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.5);
}

/* Perspective viewport helper */
.perspective-3d {
  perspective: 2000px;
}

/* Animated Coded Service Train Styles */
@keyframes wheel-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes train-marquee-10s-pause {
  0% { transform: translateX(100vw); }
  75% { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}

.animate-train-marquee {
  animation: train-marquee-10s-pause 40s linear infinite;
}

/* Realistic Railway Track & Train Car Styling */
.railway-track-container {
  position: relative;
  width: 100%;
}

.railway-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background: linear-gradient(to bottom, #71717a 0%, #3f3f46 30%, #18181b 100%);
  border-top: 4px solid #a1a1aa;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.railway-track::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(90deg, #27272a 0px, #27272a 12px, transparent 12px, transparent 28px);
}

.train-coach-roof {
  background: linear-gradient(180deg, #e4e4e7 0%, #a1a1aa 40%, #71717a 100%);
  border-bottom: 3px solid #52525b;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.train-window-glass {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #0c4a6e 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.2);
  border: 2px solid #94a3b8;
  position: relative;
  overflow: hidden;
}

.train-window-glass::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.4) 50%, transparent 55%);
  pointer-events: none;
}

.bogie-underchassis {
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  border-top: 2px solid #3f3f46;
}

.steel-wheel-outer {
  background: radial-gradient(circle, #71717a 0%, #3f3f46 50%, #18181b 80%, #09090b 100%);
  border: 3px solid #a1a1aa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 0 6px rgba(0, 0, 0, 0.8);
}

.steel-wheel-spoke {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #a1a1aa;
  top: 50%;
  left: 0;
  margin-top: -1px;
}

/* Hyper-Realistic Train Aesthetics */
.headlight-beam {
  position: absolute;
  top: 20%;
  left: -160px;
  width: 170px;
  height: 120px;
  background: linear-gradient(270deg, rgba(254, 240, 138, 0.7) 0%, rgba(250, 204, 21, 0.2) 60%, transparent 100%);
  clip-path: polygon(100% 40%, 0% 0%, 0% 100%, 100% 60%);
  pointer-events: none;
  z-index: 30;
  filter: blur(4px);
}

.catenary-wire-container {
  position: absolute;
  top: -28px;
  left: 0;
  width: 100%;
  height: 30px;
  pointer-events: none;
  z-index: 5;
}

.catenary-wire {
  width: 100%;
  height: 2px;
  background: #52525b;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.catenary-pole {
  position: absolute;
  top: -20px;
  width: 4px;
  height: 48px;
  background: #3f3f46;
  border-right: 1px solid #71717a;
}

.metallic-coach-body {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 40%, #1e1b4b 100%);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.2);
  position: relative;
}

.coach-speed-stripe {
  background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
  height: 6px;
  width: 100%;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* Client Love Marquee Animations */
@keyframes client-marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes client-marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-client-marquee-left {
  animation: client-marquee-left 25s linear infinite;
}

.animate-client-marquee-right {
  animation: client-marquee-right 25s linear infinite;
}