/* =========================================================
   Nerd SuperB — site-wide motion system
   Lightweight CSS driving the reveal / hover / header states
   set by motion.js. Respects prefers-reduced-motion throughout.
   ========================================================= */

:root{
  --ns-ink:#131313;
  --ns-surface:#101010;
  --ns-accent:#E4002B;
  --ns-muted:#6E6E6B;
  --ns-muted-dark:#A6A6A3;
  --ns-line:#E7E5E1;
  --ns-line-dark:#2A2A2A;
  --ns-paper:#F5F4F1;
  --ns-white:#FFFFFF;
  --ns-header-h: 88px;
  --ns-ease: cubic-bezier(.22,.85,.32,1);
}

html{ scroll-behavior: auto; }
body{ background:#fff; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-button:focus-visible{
  outline: 2px solid var(--ns-accent);
  outline-offset: 3px;
}
::selection{ background: var(--ns-accent); color:#fff; }

.ns-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: transparent;
  transition: background-color .45s var(--ns-ease), backdrop-filter .45s var(--ns-ease), box-shadow .45s var(--ns-ease), padding .35s var(--ns-ease);
  border-bottom: 1px solid transparent;
}
.ns-header.is-scrolled{
  background: rgba(16,16,16,.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.ns-menu-open .ns-header{ background: var(--ns-surface); }
.ns-header a, .ns-header button{ color:#fff; }

.ns-nav-toggle{ display:none; }
@media (max-width: 880px){
  .ns-nav-toggle{ display:inline-flex; }
}

.ns-mobile-nav{
  position:fixed; inset:0; z-index: 998;
  background: var(--ns-surface);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding: 40px;
  transform: translateY(-100%);
  transition: transform .5s var(--ns-ease);
}
body.ns-menu-open .ns-mobile-nav{ transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .ns-mobile-nav{ transition: none; }
}

.ns-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px; transition: transform .35s var(--ns-ease), border-color .35s ease, color .35s ease; }
.ns-btn .elementor-align-icon-right,
.ns-btn svg{ transition: transform .35s var(--ns-ease); }
.ns-btn:hover .elementor-align-icon-right,
.ns-btn:hover svg{ transform: translateX(5px); }
.ns-btn--ghost:hover{ border-color: var(--ns-accent) !important; color: var(--ns-accent) !important; }
.ns-btn--ghost:hover i, .ns-btn--ghost:hover svg{ color: var(--ns-accent) !important; }
.ns-btn--solid{ will-change: transform; }
.ns-btn--solid:hover{ transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){
  .ns-btn, .ns-btn *{ transition: none !important; }
}

.js [data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ns-ease), transform .8s var(--ns-ease); }
.js [data-reveal="fade"]{ transform: none; }
.js [data-reveal="left"]{ transform: translateX(-32px); }
.js [data-reveal="right"]{ transform: translateX(32px); }
.js [data-reveal].is-visible{ opacity: 1; transform: none; }
.js [data-reveal-group] > *{ transition-delay: calc(var(--ns-i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

.ns-mask{ overflow:hidden; position:relative; display:block; }
.ns-mask img{ display:block; width:100%; height:100%; object-fit:cover; transform: scale(1.12) translateY(3%); opacity:.001; transition: transform 1.1s var(--ns-ease), opacity .9s ease; }
.ns-mask.is-visible img{ transform: scale(1) translateY(0); opacity:1; }
.ns-mask:hover img{ transform: scale(1.045); }
.ns-mask.is-visible:hover img{ transform: scale(1.045); }
@media (prefers-reduced-motion: reduce){
  .ns-mask img{ transition:none; opacity:1; transform:none; }
}

.ns-project-row{ border-top:1px solid var(--ns-line); }
.ns-project-row:last-child{ border-bottom:1px solid var(--ns-line); }
.ns-project-row a{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding: 26px 4px; transition: padding-left .4s var(--ns-ease), color .3s ease; text-decoration:none; }
.ns-project-row a:hover{ padding-left: 14px; color: var(--ns-accent); }
.ns-dark .ns-project-row{ border-color: var(--ns-line-dark); }
.ns-project-preview{
  position: fixed; width: 260px; height: 330px; pointer-events:none; z-index: 60;
  overflow:hidden; opacity:0; transform: scale(.92); transition: opacity .3s ease, transform .3s ease;
}
.ns-project-preview img{ width:100%; height:100%; object-fit:cover; }
.ns-project-preview.is-active{ opacity:1; transform: scale(1); }
@media (max-width: 880px){ .ns-project-preview{ display:none !important; } }

.ns-marquee{ overflow:hidden; white-space:nowrap; }
.ns-marquee__track{ display:inline-flex; align-items:center; gap:2.5rem; animation: ns-marquee 30s linear infinite; }
@keyframes ns-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ns-marquee__track{ animation: none; }
}

.ns-hero-mark svg{ display:block; }
.ns-hero-mark .ns-mark-a{ transition: transform .2s linear; }
.ns-hero-mark .ns-mark-b{ transition: transform .2s linear; }
@media (prefers-reduced-motion: reduce){
  .ns-hero-mark *{ transition:none !important; }
}

.ns-process-num{ font-family:"Space Grotesk", sans-serif; font-weight:700; opacity:.14; line-height:1; }

.ns-cursor{
  position: fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background: var(--ns-accent); pointer-events:none; z-index: 9999;
  transform: translate(-50%,-50%); transition: width .25s var(--ns-ease), height .25s var(--ns-ease), background-color .25s ease, opacity .25s ease;
  mix-blend-mode: difference; opacity:0;
}
.ns-cursor.is-active{ opacity:1; }
.ns-cursor.is-big{ width:52px; height:52px; background: rgba(228,0,43,.16); border:1px solid var(--ns-accent); }
@media (hover:none), (pointer:coarse){
  .ns-cursor{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .ns-cursor{ display:none !important; }
}

.ns-dark{ background: var(--ns-surface); }
.ns-hairline{ border-top:1px solid var(--ns-line); }
.ns-hairline-dark{ border-top:1px solid var(--ns-line-dark); }

@media (max-width: 767px){
  :root{ --ns-header-h: 72px; }
}