/* ==========================================================================
   Nexa Event — site design system (ported from the Nexa Design prototype)
   Default theme (no attribute / [data-theme="light"]) is LIGHT.
   ========================================================================== */

@view-transition { navigation: auto; }

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --surface: #FFFFFF; --surface-raised: #FBFBFB; --fg: #141717; --fg-sec: #666767; --fg-mut: #8A8C8C;
  --border: #E1E1E1; --border-strong: #ACADAD; --accent: #141717; --on-accent: #FFFFFF; --accent-hover: #2A2C2C;
  --nav-bg: rgba(255,255,255,0.85); --chip-bg: #FFFFFF; --chip-border: #E1E1E1;
  --limb-bg: #ECECEA; --limb-rim: rgba(20,23,23,0.32); --limb-glow: rgba(20,23,23,0.15);
  --orbit: rgba(20,23,23,0.22); --orbit-dot: #2A2C2C;
  --card-bg: #FFFFFF; --card-shadow: 0 1px 2px rgba(10,11,11,0.05);
  --card-shadow-hover: 0 12px 16px -4px rgba(10,11,11,0.08), 0 4px 6px -2px rgba(10,11,11,0.03);
  --band-bg: #141717; --band-fg: #FFFFFF; --band-sec: #ACADAD; --band-border: #2A2C2C;
  --sun-d: none; --moon-d: inline-flex;
}
[data-theme="light"] {
  --surface: #FFFFFF; --surface-raised: #FBFBFB; --fg: #141717; --fg-sec: #666767; --fg-mut: #8A8C8C;
  --border: #E1E1E1; --border-strong: #ACADAD; --accent: #141717; --on-accent: #FFFFFF; --accent-hover: #2A2C2C;
  --nav-bg: rgba(255,255,255,0.85); --chip-bg: #FFFFFF; --chip-border: #E1E1E1;
  --limb-bg: #ECECEA; --limb-rim: rgba(20,23,23,0.32); --limb-glow: rgba(20,23,23,0.15);
  --orbit: rgba(20,23,23,0.22); --orbit-dot: #2A2C2C;
  --card-bg: #FFFFFF; --card-shadow: 0 1px 2px rgba(10,11,11,0.05);
  --card-shadow-hover: 0 12px 16px -4px rgba(10,11,11,0.08), 0 4px 6px -2px rgba(10,11,11,0.03);
  --band-bg: #141717; --band-fg: #FFFFFF; --band-sec: #ACADAD; --band-border: #2A2C2C;
  --sun-d: none; --moon-d: inline-flex;
}
[data-theme="dark"] {
  --surface: #0A0B0B; --surface-raised: #141717; --fg: #FFFFFF; --fg-sec: #ACADAD; --fg-mut: #8A8C8C;
  --border: #2A2C2C; --border-strong: #666767; --accent: #FFFFFF; --on-accent: #141717; --accent-hover: #E1E1E1;
  --nav-bg: rgba(10,11,11,0.82); --chip-bg: transparent; --chip-border: #2A2C2C;
  --limb-bg: #060707; --limb-rim: rgba(255,255,255,0.22); --limb-glow: rgba(255,255,255,0.13);
  --orbit: rgba(255,255,255,0.07); --orbit-dot: #8A8C8C;
  --card-bg: #141717; --card-shadow: none; --card-shadow-hover: none;
  --band-bg: #141717; --band-fg: #FFFFFF; --band-sec: #ACADAD; --band-border: #2A2C2C;
  --sun-d: inline-flex; --moon-d: none;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--surface);
  transition: background 250ms cubic-bezier(0.32,0.72,0,1);
}
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Imagery */
.gs-img {
  display: block;
  filter: grayscale(1);
  transition: filter 500ms cubic-bezier(0.32,0.72,0,1), transform 600ms cubic-bezier(0.32,0.72,0,1);
}
a:hover .gs-img, :hover > .gs-img { filter: grayscale(0); transform: scale(1.06); }
[data-imagery="color"] .gs-img { filter: grayscale(0); }
.svc-img { transition: transform 500ms cubic-bezier(0.32,0.72,0,1); }
a:hover .svc-img { transform: scale(1.05); }
.nx-card:hover .gs-img { filter: grayscale(0); }
.nx-card:hover .svc-img { transform: scale(1.05); }
.nx-workcard:hover .gs-img { filter: grayscale(0); transform: scale(1.06); }
.svc-arrow {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms cubic-bezier(0.32,0.72,0,1), transform 250ms cubic-bezier(0.32,0.72,0,1);
}
a:hover .svc-arrow, .nx-card:hover .svc-arrow { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes waPing { from { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); } to { box-shadow: 0 0 0 20px rgba(37,211,102,0); } }
@keyframes waWiggle { 0% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

/* --------------------------------------------------------------------------
   Hover classes (converted from the prototype's style-hover attributes)
   -------------------------------------------------------------------------- */
.nx-navlink:hover { background: var(--surface-raised); color: var(--fg); }
.nx-mnav:hover { background: var(--surface-raised); color: var(--fg); }
.nx-iconbtn:hover { color: var(--fg); border-color: var(--border-strong); }
.nx-btn-accent:hover { background: var(--accent-hover); }
.nx-btn-ghost:hover { background: var(--surface-raised); }
.nx-wa-btn:hover { transform: scale(1.08); }
.nx-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--card-shadow-hover); }
.nx-workcard:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.nx-soc:hover { color: #FFFFFF; }
.nx-footlink:hover { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   Nav responsiveness (replaces the prototype's vw-based state)
   -------------------------------------------------------------------------- */
.nx-navlinks { display: flex; align-items: center; gap: 4px; }
.nx-clock { display: flex; }
.nx-ham { display: none; }
.nx-mobile-menu { display: none; }
.nx-mobile-menu.open { display: flex; }
@media (max-width: 1149px) {
  .nx-clock { display: none; }
}
@media (max-width: 899px) {
  .nx-navlinks { display: none; }
  .nx-ham { display: flex; }
}
@media (min-width: 900px) {
  .nx-mobile-menu { display: none !important; }
}

/* --------------------------------------------------------------------------
   Hero carousel states
   -------------------------------------------------------------------------- */
.nx-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.32,0.72,0,1), transform 500ms cubic-bezier(0.32,0.72,0,1);
}
.nx-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nx-dot {
  width: 36px;
  height: 3px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 150ms cubic-bezier(0.32,0.72,0,1);
  background: var(--border);
}
.nx-dot.active { background: var(--fg); }

/* --------------------------------------------------------------------------
   Service filter chips
   -------------------------------------------------------------------------- */
.nx-chip {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms cubic-bezier(0.32,0.72,0,1);
  background: var(--chip-bg);
  color: var(--fg-sec);
  border: 1px solid var(--chip-border);
}
.nx-chip.active { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); }

/* --------------------------------------------------------------------------
   Reduced motion kill switch
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* Nav links: truly centered in the bar regardless of side-cluster widths */
@media (min-width: 900px) {
  nav { position: sticky; }
  .nx-navlinks {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}