/* ============================================
   KOSUMI JSC — Main Stylesheet
   style.css
   ============================================ */

/* ---- Base ---- */
* { font-family: 'Noto Sans JP', sans-serif; }
h1, h2, .font-display { font-family: 'Barlow Condensed', sans-serif; }

:root {
  --orange: #f97316;
  --steel-dark: #102a43;
  --steel-mid: #243b53;
  --steel-blue: #486581;
  --light-steel: #9fb3c8;
}

html { scroll-behavior: smooth; }
body { background: #0d1b2a; color: #e8edf2; overflow-x: hidden; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0d1b2a; }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }

/* ---- Navigation ---- */
nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---- Language Switcher ---- */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(24,48,72,0.6);
  border: 1px solid rgba(72,101,129,0.3);
  border-radius: 4px;
  padding: 3px;
}

.lang-btn {
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(159,179,200,0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  font-family: 'Roboto Mono', monospace;
  line-height: 1;
  user-select: none;
}

.lang-btn:hover {
  color: rgba(159,179,200,0.9);
  background: rgba(72,101,129,0.2);
}

.lang-btn-active {
  background: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(249,115,22,0.35);
}

/* ---- Hero backgrounds ---- */
.hero-bg {
  background:
    linear-gradient(135deg, rgba(13,27,42,0.97) 0%, rgba(13,27,42,0.85) 50%, rgba(72,101,129,0.3) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(72,101,129,0.04) 40px, rgba(72,101,129,0.04) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(72,101,129,0.04) 40px, rgba(72,101,129,0.04) 41px);
}

.hero-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(249,115,22,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 20%, rgba(72,101,129,0.2) 0%, transparent 50%);
}

/* ---- Grid / texture overlays ---- */
.grid-overlay {
  background-image:
    linear-gradient(rgba(72,101,129,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,101,129,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

.diagonal-accent {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 4px,
    rgba(249,115,22,0.08) 4px, rgba(249,115,22,0.08) 5px
  );
}

/* ---- Keyframe animations ---- */
@keyframes fadeUp    { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes pulse-orange {
  0%,100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
}
@keyframes float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ---- Hero entrance classes ---- */
.animate-fade-up { animation: fadeUp 0.7s ease forwards; }
.animate-fade-in { animation: fadeIn 0.8s ease forwards; }
.delay-100 { animation-delay: 0.1s; opacity: 0; }
.delay-200 { animation-delay: 0.2s; opacity: 0; }
.delay-300 { animation-delay: 0.3s; opacity: 0; }
.delay-400 { animation-delay: 0.4s; opacity: 0; }
.delay-500 { animation-delay: 0.5s; opacity: 0; }
.delay-600 { animation-delay: 0.6s; opacity: 0; }

/* ---- Scroll-reveal ---- */
.reveal       { opacity:0; transform:translateY(40px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left  { opacity:0; transform:translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right { opacity:0; transform:translateX(40px);  transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:translate(0); }

/* ---- Section headings underline ---- */
.orange-line::after {
  content:''; display:block; width:60px; height:3px;
  background: var(--orange); margin-top:12px;
}
.orange-line-center::after {
  content:''; display:block; width:60px; height:3px;
  background: var(--orange); margin: 12px auto 0;
}

/* ---- Cards ---- */
.service-card {
  background: linear-gradient(135deg, rgba(36,59,83,0.8) 0%, rgba(16,42,67,0.9) 100%);
  border: 1px solid rgba(72,101,129,0.25);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(249,115,22,0.05) 0%, transparent 60%);
  opacity:0; transition: opacity 0.4s ease;
}
.service-card:hover { border-color: rgba(249,115,22,0.5); transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(249,115,22,0.2); }
.service-card:hover::before { opacity:1; }

.machine-card {
  background: linear-gradient(160deg, rgba(24,48,72,0.9) 0%, rgba(13,27,42,0.95) 100%);
  border: 1px solid rgba(72,101,129,0.2);
  transition: all 0.35s ease;
}
.machine-card:hover { border-color: rgba(249,115,22,0.4); box-shadow: 0 0 30px rgba(249,115,22,0.1); }

.project-card { overflow:hidden; position:relative; }
.project-card .overlay { opacity:0; transition: opacity 0.4s ease; }
.project-card:hover .overlay { opacity:1; }
.project-card:hover img { transform: scale(1.06); }
.project-card img { transition: transform 0.5s ease; }

.client-logo {
  background: rgba(24,48,72,0.5);
  border: 1px solid rgba(72,101,129,0.2);
  transition: all 0.3s ease;
}
.client-logo:hover { border-color: rgba(249,115,22,0.4); background: rgba(36,59,83,0.7); }

.why-card {
  background: rgba(24,48,72,0.4);
  border: 1px solid rgba(72,101,129,0.15);
  border-left: 3px solid var(--orange);
  transition: all 0.3s ease;
}
.why-card:hover { background: rgba(36,59,83,0.6); transform: translateX(6px); }

/* ---- Buttons ---- */
.btn-orange {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-orange::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  opacity:0; transition: opacity 0.3s ease;
}
.btn-orange:hover::after { opacity:1; }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(249,115,22,0.35); }
.btn-orange span { position:relative; z-index:1; }

.btn-outline {
  border: 2px solid rgba(159,179,200,0.4);
  transition: all 0.3s ease;
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-2px); }

/* ---- Nav links ---- */
.nav-link { position:relative; }
.nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background: var(--orange);
  transition: width 0.3s ease;
}
.nav-link:hover::after { width:100%; }
.nav-link:hover { color: #fb923c; }

/* ---- Form inputs ---- */
.form-input {
  background: rgba(24,48,72,0.6);
  border: 1px solid rgba(72,101,129,0.3);
  color: #e8edf2;
  transition: border-color 0.3s ease;
}
.form-input:focus { outline:none; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(249,115,22,0.1); }
.form-input::placeholder { color: rgba(159,179,200,0.5); }

/* ---- Tags ---- */
.tag {
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.3);
  color: #fb923c;
}

/* ---- Section backgrounds ---- */
.section-dark { background: #0d1b2a; }
.section-mid  { background: linear-gradient(180deg, #0d1b2a 0%, #111f30 50%, #0d1b2a 100%); }
.section-alt  { background: linear-gradient(180deg, #111f30 0%, #0f1e2d 100%); }

/* ---- Misc utilities ---- */
.industrial-sep {
  background: repeating-linear-gradient(90deg, var(--orange) 0, var(--orange) 20px, transparent 20px, transparent 30px);
  height: 3px; width: 100%;
}

.badge-float  { animation: float 3s ease-in-out infinite; }
.pulse        { animation: pulse-orange 2s infinite; }

.num-highlight {
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--orange);
  line-height: 1;
}

/* ---- Mobile menu ---- */
#mobile-menu        { display:none; }
#mobile-menu.open   { display:block; }