/* ==========================================================================
   Monolith — shared design system (dark pages: index, services, about,
   success-stories, ziotech case study)
   ========================================================================== */

@font-face {
  font-family: 'VCR OSD Mono';
  src: url('/fonts/vcr-osd-mono.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #1A1A1A;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #FFFFFF;
}

a { color: inherit; }

::selection { background: #BCFF56; color: #1A1A1A; }

img { max-width: 100%; display: block; }

/* ============ keyframes ============ */
@keyframes mq { to { transform: translateX(-50%); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sheen { 0% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@keyframes cardglitch { 0%, 91% { transform: none; } 92% { transform: translate(-3px, 1px) skewX(0.5deg); } 94% { transform: translate(3px, -1px); } 95.5% { transform: translate(-2px, 0) skewX(-0.4deg); } 97%, 100% { transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes loadbar { from { width: 0; } to { width: 100%; } }
@keyframes typeboot { from { width: 0; } to { width: calc(32ch + 5.12em); } }
@keyframes caret { 0%, 49% { border-color: #BCFF56; } 50%, 100% { border-color: transparent; } }
@keyframes glitch {
  0%   { text-shadow: 3px 0 #2044E4, -3px 0 #BA8FFF; }
  33%  { text-shadow: -3px 0 #2044E4, 3px 0 #BCFF56; }
  66%  { text-shadow: 2px 0 #BA8FFF, -2px 0 #BCFF56; }
  100% { text-shadow: 3px 0 #2044E4, -3px 0 #BA8FFF; }
}

/* ============ background graphic (default: scanlines) ============ */
.bg-scan {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(214,254,153,0.03) 0, rgba(214,254,153,0.03) 1px, transparent 1px, transparent 4px);
}

/* ============ boot / loading screen ============ */
.boot {
  position: fixed; inset: 0; z-index: 9999; background: #1A1A1A;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; transition: opacity 0.7s ease;
}
.boot-line {
  display: inline-block; overflow: hidden; white-space: nowrap; box-sizing: content-box;
  border-right: 2px solid #BCFF56; font-family: 'VCR OSD Mono', 'Courier New', monospace;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; width: 0;
  animation: typeboot 2.1s steps(32, end) 0.45s both, caret 0.9s steps(1) 0.45s infinite;
}
.boot-line .dim { color: #9C9C9C; }
.boot-line .lit { color: #BCFF56; }
.boot-bar {
  width: 150px; height: 1px; background: #2A2A2A; overflow: hidden;
  animation: fadein 0.5s ease 2.05s both;
}
.boot-bar-fill { height: 100%; background: #BCFF56; width: 0; animation: loadbar 1.0s cubic-bezier(0.45, 0, 0.15, 1) 2.3s forwards; }

/* ============ nav ============ */
header.mono-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; background: rgba(26,26,26,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mono-word {
  font-size: 12px; color: #9C9C9C; text-decoration: none; letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.mono-word:hover { color: #FFFFFF; }
.mono-mark { position: absolute; left: 50%; transform: translateX(-50%); display: flex; line-height: 0; cursor: pointer; }
header.mono-nav nav { display: flex; gap: 28px; }
header.mono-nav nav a, footer.mono-foot nav a {
  font-size: 12px; color: #9C9C9C; text-decoration: none; transition: color 0.2s ease;
}
header.mono-nav nav a:hover, footer.mono-foot nav a:hover { color: #FFFFFF; }
.nav-spacer { height: 52px; }

/* ============ footer ============ */
footer.mono-foot {
  border-top: 1px solid #2A2A2A; padding: 36px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.mono-foot-brand { display: flex; align-items: center; gap: 12px; }
.mono-foot-brand span { font-size: 12px; color: #9C9C9C; }
footer.mono-foot nav { display: flex; gap: 24px; }
footer.mono-foot nav a { color: #747474; }
.mono-foot-copy { font-family: 'VCR OSD Mono', monospace; font-size: 11px; color: #747474; text-transform: uppercase; }

/* ============ scroll reveal ============ */
[data-reveal] { opacity: 0.08; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.33,1,0.68,1), transform 0.7s cubic-bezier(0.33,1,0.68,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============ mobile (shared across dark pages) ============ */
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  .px80 { padding-left: 22px !important; padding-right: 22px !important; }
  header.mono-nav { padding-left: 18px !important; padding-right: 18px !important; }
  header.mono-nav .mono-mark { display: flex !important; position: static !important; transform: none !important; }
  header.mono-nav nav { display: none !important; }
  footer.mono-foot { padding-left: 20px !important; padding-right: 20px !important; }
  footer.mono-foot nav { gap: 16px !important; }
  .grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
  .work-col-b { padding-top: 0 !important; }
  .no-wrap-hero { white-space: normal !important; }
  canvas[data-motif] { display: none !important; }
  section { padding-top: 88px !important; padding-bottom: 40px !important; }
}