@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Sans+Sinhala:wght@300;400;500;600;700;800&display=swap');

:root {
  --japan-red: #BC002D;
  --dark-navy: #0A1128;
  --dark-navy-light: #131E3A;
  --slate-blue: #1E293B;
  --white: #FFFFFF;
}

/* Custom Font Families depending on language */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  background-color: #F8FAFC;
}

body.lang-ja {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
}

body.lang-si {
  font-family: 'Noto Sans Sinhala', 'Inter', sans-serif;
}

/* Selection colors */
::selection {
  background-color: var(--japan-red);
  color: var(--white);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dark-navy);
}

::-webkit-scrollbar-thumb {
  background: var(--japan-red);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #A00025;
}

/* Hero Cityscape Background Animation */
.hero-bg-overlay {
  background: linear-gradient(135deg, rgba(10, 17, 40, 0.92) 0%, rgba(19, 30, 58, 0.85) 50%, rgba(188, 0, 45, 0.2) 100%);
}

/* Japan Flag Floating Accent */
.floating-sun {
  position: absolute;
  border-radius: 50%;
  background: var(--japan-red);
  filter: blur(150px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  animation: floatSun 20s ease-in-out infinite alternate;
}

@keyframes floatSun {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(50px, 100px) scale(1.2);
  }
}

/* Custom card shadow and transition effects */
.industry-card {
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.industry-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 10px 30px rgba(188, 0, 45, 0.15);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.industry-card:hover {
  transform: translateY(-8px);
}

.industry-card:hover::after {
  opacity: 1;
}

/* Gradient text helper */
.text-gradient {
  background: linear-gradient(to right, #FFFFFF 30%, #BC002D 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Timeline vertical line */
.timeline-line {
  background: linear-gradient(to bottom, var(--japan-red) 0%, var(--dark-navy) 100%);
}

/* Custom navigation item underline animation */
.nav-link-anim {
  position: relative;
}

.nav-link-anim::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--japan-red);
  transition: width 0.3s ease;
}

.nav-link-anim:hover::after {
  width: 100%;
}

/* Image zoom transition */
.image-zoom-hover {
  overflow: hidden;
}

.image-zoom-hover img {
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.image-zoom-hover:hover img {
  transform: scale(1.08);
}

/* Red Pulsing Dot */
.pulsing-dot {
  width: 10px;
  height: 10px;
  background-color: var(--japan-red);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(188, 0, 45, 0.7);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(188, 0, 45, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(188, 0, 45, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(188, 0, 45, 0);
  }
}

/* Neon Glow Styles */
.neon-glow-red {
  box-shadow: 0 0 15px rgba(188, 0, 45, 0.5), 0 0 30px rgba(188, 0, 45, 0.25);
  transition: all 0.3s ease;
}

.neon-glow-red:hover {
  box-shadow: 0 0 25px rgba(188, 0, 45, 0.8), 0 0 40px rgba(188, 0, 45, 0.4);
}

.neon-glow-blue {
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4), 0 0 30px rgba(56, 189, 248, 0.2);
  transition: all 0.3s ease;
}

.neon-glow-blue:hover {
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.7), 0 0 45px rgba(56, 189, 248, 0.35);
}

.neon-glow-white {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}

.neon-glow-white:hover {
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.65), 0 0 40px rgba(255, 255, 255, 0.3);
}

.neon-border-red {
  border: 1px solid rgba(188, 0, 45, 0.6);
  box-shadow: 0 0 8px rgba(188, 0, 45, 0.3);
}

.neon-border-blue {
  border: 1px solid rgba(56, 189, 248, 0.6);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

/* Floating Slow Animations for Collage Cards */
@keyframes float-slow-1 {
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(-2deg); }
}

@keyframes float-slow-2 {
  0%, 100% { transform: translateY(0px) rotate(6deg); }
  50% { transform: translateY(-12px) rotate(4deg); }
}

@keyframes float-slow-3 {
  0%, 100% { transform: translateY(0px) rotate(3deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes float-slow-4 {
  0%, 100% { transform: translateY(0px) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(-4deg); }
}

.animate-float-1 {
  animation: float-slow-1 6s ease-in-out infinite;
}

.animate-float-2 {
  animation: float-slow-2 7s ease-in-out infinite;
}

.animate-float-3 {
  animation: float-slow-3 5s ease-in-out infinite;
}

.animate-float-4 {
  animation: float-slow-4 8s ease-in-out infinite;
}