/**
 * styles.css — AC IA SUPPORT
 * -----------------------------------------------------------------------
 * Sections:
 *   1. Base / typography
 *   2. Background layers (grid canvas, 3D robot canvas, cursor glow)
 *   3. Brand surfaces (glassmorphism, buttons, gradients)
 *   4. Components (nav, products dropdown, timeline, carousel, cards)
 *   5. Motion & accessibility (reduced motion, focus states)
 * -----------------------------------------------------------------------
 */

/* 1. Base ---------------------------------------------------------------- */
:root {
  --brandBg: #04020d;
  --brandPanel: #0a0b1e;
  --brandCyan: #00e5ff;
  --brandMagenta: #ff66cc;
  --brandMuted: #94a3b8;
}

html {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--brandBg);
  color: #ffffff;
  overflow-x: hidden;
  font-family: 'Noto Sans JP', sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background:
    radial-gradient(circle at 20% 12%, rgba(0, 229, 255, 0.13), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(255, 102, 204, 0.12), transparent 26rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 35%);
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #04020d; }
::-webkit-scrollbar-thumb { background: var(--brandCyan); border-radius: 10px; }

section { transform-style: preserve-3d; }

/* 2. Background layers ---------------------------------------------------- */

/* Data-circuit grid canvas: the deepest layer (z-[-2] set inline in HTML). */
#ram-canvas { display: block; }

/* 3D robot canvas: sits just behind page content (z-[-1] in HTML).
   Kept semi-transparent via its own wireframe materials + this opacity
   so hero copy stays readable without a heavy overlay. */
#robot-canvas {
  display: block;
  opacity: 0.9;
  mix-blend-mode: screen;
}

@media (max-width: 767px) {
  /* robot-bg.js already skips initializing THREE.js under 768px; this is
     just a safety net in case the element is ever left visible. */
  #robot-canvas { display: none; }
}

/* Ambient cursor glow: a soft blob that eases toward the pointer. */
#cursor-glow {
  width: 420px;
  height: 420px;
  margin-left: -210px;
  margin-top: -210px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.10) 0%, rgba(255, 102, 204, 0.06) 45%, transparent 70%);
  will-change: transform;
}

@media (hover: none) {
  #cursor-glow { display: none; }
}

/* 3. Brand surfaces --------------------------------------------------------- */
.hero-text-shadow { text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.8); }

.glass-nomad {
  background: rgba(10, 11, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.text-gradient {
  background: linear-gradient(135deg, #00e5ff 0%, #ff66cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-nomad-outline {
  border: 2px solid var(--brandCyan);
  color: var(--brandCyan);
  background: transparent;
  transition: all 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}
.btn-nomad-outline:hover {
  background: var(--brandCyan);
  color: var(--brandBg);
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.6);
}

.btn-nomad-solid {
  background: var(--brandMagenta);
  color: var(--brandBg);
  border: 2px solid var(--brandMagenta);
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 102, 204, 0.4);
}
.btn-nomad-solid:hover {
  background: transparent;
  color: var(--brandMagenta);
  box-shadow: 0 0 25px rgba(255, 102, 204, 0.6);
}

.btn-nomad-outline, .btn-nomad-solid { position: relative; overflow: hidden; transform: translateZ(0); }
.btn-nomad-outline::after, .btn-nomad-solid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.28) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.65s cubic-bezier(.2, .8, .2, 1);
}
.btn-nomad-outline:hover::after, .btn-nomad-solid:hover::after { transform: translateX(120%); }

/* 4. Components ------------------------------------------------------------- */

#main-nav { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* Products dropdown */
#products-dropdown { pointer-events: none; }
#products-dropdown:not(.invisible) { pointer-events: auto; }
#products-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Product / portfolio / case cards get a shared "lift" treatment */
.glass-nomad, [data-service], .portfolio-item, #cases-list > div {
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: perspective(1200px) translateZ(0);
  will-change: transform, box-shadow, border-color;
}
.glass-nomad:hover, [data-service]:hover, .portfolio-item:hover, #cases-list > div:hover {
  transform: perspective(1200px) translateY(-8px) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.48), 0 0 34px rgba(0, 229, 255, 0.13);
}

.timeline-line::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; height: 100%; width: 2px;
  background: linear-gradient(to bottom, var(--brandCyan), var(--brandMagenta));
  z-index: -1;
}

.accordion-content { transition: max-height 0.4s ease-out; }

.portfolio-item img { transition: transform 0.7s ease; }
.portfolio-item:hover img { transform: scale(1.1); }

.logo-slide-track { display: flex; width: fit-content; }
.logo-slide-track:hover { animation-play-state: paused; }

#language-selector > .language-card {
  animation: entranceLift 900ms cubic-bezier(.2, .8, .2, 1) both;
  width: min(32rem, calc(100vw - 3rem)) !important;
  max-width: 32rem !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

@keyframes entranceLift {
  from { opacity: 0; transform: perspective(1000px) translateY(24px) rotateX(8deg) scale(.96); }
  to { opacity: 1; transform: perspective(1000px) translateY(0) rotateX(0) scale(1); }
}

/* Back to top button */
#back-to-top { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

a, button, input, textarea { outline-offset: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brandCyan);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  #language-selector .glass-nomad { padding: 2rem; }
  .glass-nomad, [data-service], .portfolio-item, #cases-list > div { border-radius: 14px; }
  [data-service]:hover, .portfolio-item:hover, #cases-list > div:hover { transform: translateY(-4px); }
}

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