/* Additive styles: load AFTER styles.css */

/* Skip link (accessibility) */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: 7px;
  color: #08090d;
  background: var(--cyan);
  font-size: 0.85rem;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* Header shrinks slightly after scrolling */
.site-header { transition: background 200ms ease, border-color 200ms ease; }
.nav { transition: min-height 200ms ease; }
.site-header.is-scrolled { background: rgba(8, 9, 13, 0.94); }
.site-header.is-scrolled .nav { min-height: 68px; }

/* Active section in nav */
.nav-links > a:not(.nav-cta) { position: relative; }
.nav-links > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  background: var(--cyan);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.nav-links > a.is-active { color: var(--text); }
.nav-links > a.is-active::after { transform: scaleX(1); }

/* Cursor spotlight on cards */
.project-card,
.expertise-card { position: relative; }

.project-card::after,
.expertise-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    rgba(167, 139, 250, 0.1),
    transparent 60%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}
.project-card:hover::after,
.expertise-card:hover::after { opacity: 1; }

/* Copy email button */
.contact-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.copy-email { cursor: pointer; }
.copy-email.is-copied { color: var(--green); border-color: rgba(141, 245, 191, 0.5); }

/* Keep the hero art from stealing taps on touch devices */
@media (hover: none) {
  .project-card::after,
  .expertise-card::after { display: none; }
}

/* No-JS fallback: never hide content */
.no-js .reveal { opacity: 1; transform: none; }

/* =========================================
   FULL-PAGE BACKGROUND ORBITS
   (replaces the hero-art block on the right)
   ========================================= */

.bg-art {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: grid;
  width: min(110vmax, 1400px);
  aspect-ratio: 1;
  place-items: center;
  opacity: 0.3;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(calc(var(--scroll, 0) * 100deg));
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
}

/* Hero is now a single column */
.hero-grid { grid-template-columns: 1fr; }
.hero-copy {
  max-width: none;
  text-align: center;
}
.hero h1 { font-size: clamp(4rem, 10vw, 9rem); }
.hero .eyebrow,
.hero .hero-actions,
.hero .hero-meta { justify-content: center; }
.hero .hero-description {
  max-width: 620px;
  margin-inline: auto;
}

/* Let the background show through formerly solid sections */
.projects-section,
.manifesto-section { background: rgba(11, 12, 18, 0.6); }
.site-footer { background: rgba(7, 8, 11, 0.85); }

@media (max-width: 760px) {
  .bg-art { opacity: 0.22; }
  .hero h1 { font-size: clamp(3.4rem, 15vw, 5.5rem); }
}

/* =========================================
   PROOF TREE (replaces the logic diagram)
   ========================================= */

.proof-art {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 94%;
  padding-right: 2.4em;
  font-family: var(--mono);
  font-size: clamp(0.6rem, 1.7vw, 0.78rem);
}

.proof-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.2em;
}

.proof-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.proof-step-single { padding-bottom: 0; }

.proof-formula {
  padding: 0.55em 0.4em;
  color: #e3d9ff;
  white-space: nowrap;
}

.proof-line {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(174, 150, 255, 0.65);
}

.proof-line::after {
  position: absolute;
  top: 50%;
  left: calc(100% + 0.6em);
  color: var(--cyan);
  font-size: 0.82em;
  font-style: italic;
  content: attr(data-label);
  transform: translateY(-50%);
}

.proof-line-wide { width: 100%; max-width: 100%; }

.proof-conclusion {
  align-self: center;
  margin-top: 0.15em;
  margin-right: -2.4em;
  padding: 0.55em 1.1em;
  border: 1px solid rgba(94, 231, 247, 0.55);
  border-radius: 6px;
  color: var(--cyan);
  background: rgba(94, 231, 247, 0.07);
  box-shadow: 0 0 25px rgba(94, 231, 247, 0.12);
}

.proof-conclusion b {
  margin-left: 0.5em;
  color: #bba6ff;
  font-weight: 400;
}

.proof-caption {
  align-self: center;
  margin-top: 1.6em;
  margin-right: -2.4em;
  color: #6e708a;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}