/* ============ Sysverge 5.0: inner-page layer ============
   Loaded AFTER the 4.0 stylesheets (fonts.css, styles.css, page css) on every
   generated inner page. 4.0 keeps owning the content styles; this file adds the
   5.0 treatment: WebGL canvas behind the page, a chrome shape in the page hero,
   display-scale headings, and cards that tilt toward the pointer. */

/* ---- WebGL layer (same rules as the homepage) ---- */
body { position: relative; }
#gl {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}
.no-gl #gl, html:not(.js) #gl { display: none; }
.no-gl body, html:not(.js) body {
  background:
    radial-gradient(60vw 60vw at 78% 18vh, rgba(29, 59, 255, .22), transparent 70%),
    var(--bg);
}
main, .footer { position: relative; z-index: 1; }

.nav-brand img { width: 76px; height: auto; }

/* ---- page hero: bigger type, room for the shape ---- */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(76vh, 740px);
  padding: clamp(150px, 21vh, 210px) 0 clamp(36px, 6vh, 80px);
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(38px, 4.9vw, 74px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.page-hero .page-lede { max-width: 560px; font-size: clamp(17px, 1.35vw, 20px); }
/* when a shape is present the copy keeps to the left so the two never collide */
.page-shape ~ .wrap > :is(h1, .label, .crumb) { max-width: min(100%, 720px); }
.page-shape {
  position: absolute;
  top: 54%;
  right: max(0px, calc((100vw - 1160px) / 2 - 110px));
  width: min(42vw, 540px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.no-gl .page-shape, html:not(.js) .page-shape { display: none; }

/* ---- display scale for section headings ---- */
:is(.section-head, .closing, .sd-left, .why-left) > h2 {
  font-size: clamp(32px, 4.3vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* ---- surfaces stay readable over the starfield ---- */
.card { background: rgba(10, 12, 26, .72); }
.card:hover { background: rgba(13, 16, 34, .82); }
.footer { background: rgba(4, 5, 13, .84); }
.portfolio-experience { background: transparent; }

/* ---- cards lean toward the pointer (class added by app.js on fine pointers) ---- */
.card.tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .3s, background-color .3s;
  will-change: transform;
}
.card.tilt:hover { transition-duration: .12s, .3s, .3s; }

.form-status { font-size: 14.5px; color: var(--muted-2); }

@media (max-width: 900px) {
  .page-hero { display: block; min-height: 0; padding-top: 118px; }
  .page-shape ~ .wrap > :is(h1, .label, .crumb) { max-width: none; }
  .page-shape {
    position: static;
    display: block;
    transform: none;
    width: 168px;
    margin: 0 0 6px calc(6vw - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card.tilt { transform: none; }
}