/* ============================================================
   Homepage (city entry) — page-specific overrides & intro animation.
   Load AFTER styles.css. Intentionally divergent: dimmer chrome
   (--ink-60), the breathing-city background, and curtain reveal.
   ============================================================ */
:root {
--indigo: #4338CA; --indigo-dark: #3730A3; --indigo-tint: #EEF2FF;
  --green: #16A34A; --amber: #EA580C;
  --base: #F2F0EC; --surface: #E8E4DC;
  --ink: #0A0A0A; --ink-60: rgba(10,10,10,0.6);
  --ink-30: rgba(10,10,10,0.3); --ink-12: rgba(10,10,10,0.12);
}
.nav-link {
font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-60); text-decoration:none; transition:color 0.15s;
}
.hero-tag {
font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-60); display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.hero-body {
font-family:'Barlow',sans-serif; font-size:15px; font-weight:300; color:var(--ink-60); line-height:1.7; margin-bottom:28px;
}
.hero-impact-label {
font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-60); display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.hero-metric-label {
font-family:'IBM Plex Mono',monospace; font-size:8px; color:var(--ink-60); letter-spacing:0.18em; text-transform:uppercase; line-height:1.5;
}
.city-col-scale {
font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-60); padding:10px 20px; border-left:1px solid var(--ink-12); display:flex; align-items:center; white-space:nowrap;
}
.titleblock-left {
font-family:'IBM Plex Mono',monospace; font-size:7.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-60); line-height:1.8;
}
.scale-label {
font-family:'IBM Plex Mono',monospace; font-size:7px; letter-spacing:0.08em; color:var(--ink-60); text-align:right;
}
.projects-col-label {
font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-60); padding:10px 20px; flex:1; display:flex; align-items:center;
}
.proj-num {
font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.15em; color:var(--ink-60); text-transform:uppercase; margin-bottom:7px; transition:color 0.2s;
}
.proj-meta {
font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-60); letter-spacing:0.06em;
}
.proj-arrow-dim {
font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-30);
}
.about-text {
font-family:'Barlow',sans-serif; font-size:18px; font-weight:300; color:var(--ink-60); line-height:1.75; font-style:italic; margin-bottom:40px; max-width:900px;
}
.metric-label {
font-family:'IBM Plex Mono',monospace; font-size:7.5px; color:var(--ink-60); letter-spacing:0.12em; text-transform:uppercase; line-height:1.5;
}
.footer-text {
font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--ink-60); letter-spacing:0.14em; text-transform:uppercase;
}
html.intro-active, html.intro-active body {
overflow: hidden !important;
  height: 100% !important;
}
#intro-overlay {
position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #c8cdd6;
  transform: translateY(0%);
  transition: transform 1.6s cubic-bezier(0.87, 0, 0.13, 1);
}
#intro-overlay.curtain-up {
transform: translateY(-100%);
  pointer-events: none;
}
#layer-full {
position: absolute; inset: -8%;
  background-image: url("/assets/index/city-layer.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform-origin: center center;
  animation: breathe 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes breathe {
0%,100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
#layer-full.animating { animation: none; }
.intro-vignette {
position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(6,4,18,0.45) 100%);
  pointer-events: none; z-index: 2;
}
.intro-ui {
position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 3; pointer-events: none;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.4,0,1,1);
}
.intro-ui.exit { opacity: 0; transform: translateY(80px); }
.intro-eyebrow {
font-family: 'IBM Plex Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 16px; text-align: center;
}
.intro-headline {
display: flex; align-items: center; gap: 24px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-style: italic;
  font-size: clamp(72px, 10vw, 148px); line-height: 1;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: #4338CA; text-shadow: 0 0 80px rgba(67,56,202,0.5);
  white-space: nowrap; user-select: none;
  pointer-events: all; cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.intro-headline:hover { color: #6366f1; text-shadow: 0 0 100px rgba(99,102,241,0.7); }
.intro-arrow {
display: flex; align-items: center; flex-shrink: 0;
  animation: arrow-bounce 2.2s ease-in-out infinite;
}
@keyframes arrow-bounce {
0%,100% { transform: translateY(0); opacity: 0.8; }
  50%      { transform: translateY(9px); opacity: 1; }
}

/* ---------- Responsive overrides ---------- */
@media (max-width: 600px) {
  nav, footer { padding: 16px 24px; }
}