/* ============================================================
   Mastery layer — depth, ink & touch craft
   Loaded last; every rule here is additive and reversible.
   ============================================================ */

:root {
  --mx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mx-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ─── Typographic hygiene ─── */
p {
  text-wrap: pretty;
}

/* ─── Keyboard craft: visible, elegant focus ─── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─── Touch craft ─── */
a,
button,
.pillar {
  -webkit-tap-highlight-color: transparent;
}

/* Press feedback on touch devices — desktop press is handled by the
   magnetic CTA system, so this only exists where hover doesn't. */
@media (hover: none) {
  .btn:active,
  .nav-cta:active,
  .btn-premium-solid:active,
  .link-arrow:active,
  .pillar:active,
  .aws-item:active,
  .chron-card:active,
  .chip:active {
    transform: scale(0.975);
    transition: transform 120ms var(--mx-ease-out);
  }
}

/* ─── Depth tilt system (element transforms driven by js/mastery.js) ───
   Tilt targets get their transform from JS every frame; remove transform
   from their CSS transitions so the pointer lerp is the only smoothing,
   while colour/shadow hover transitions are preserved. */
[data-tilt] {
  position: relative;
  transition-property: color, background-color, border-color, box-shadow,
    opacity, filter;
}
.mtl-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 40;
  background: radial-gradient(
    420px circle at var(--gx, 50%) var(--gy, 30%),
    rgba(255, 255, 255, 0.16),
    rgba(255, 255, 255, 0.05) 38%,
    transparent 64%
  );
  mix-blend-mode: soft-light;
  transition: opacity 0.45s var(--mx-ease-out);
}
[data-tilt]:hover .mtl-glare {
  opacity: 1;
}

/* ─── Ink underline: self-drawing stroke beneath italic serif words ─── */
.ink-underline {
  position: relative;
  display: inline-block;
}
.ink-underline > svg {
  position: absolute;
  left: -0.04em;
  bottom: -0.02em;
  width: calc(100% + 0.08em);
  height: 0.16em;
  overflow: visible;
  pointer-events: none;
}
.ink-underline > svg path {
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}
/* On light-paper sections, deepen the ink so it reads on cream */
.theme-light .ink-underline > svg path {
  stroke: var(--accent-rust);
}

/* ─── Hero headline weight wave: the variable font is the hover state ─── */
.cht-char {
  transition: font-variation-settings 0.3s ease;
}
.cht-line {
  will-change: transform;
}

/* ─── Topographic contour accent (human section) ─── */
.topo-contours {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.topo-contours svg {
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 62%;
  min-width: 480px;
  opacity: 0.5;
}
.topo-contours path {
  fill: none;
  stroke: rgba(138, 106, 48, 0.18);
  stroke-width: 1;
}
.human .human-inner {
  position: relative;
  z-index: 1;
}

/* ─── Giant Signature · Dot-Matrix Constellation ───
   The name sampled into a field of dots joined by a skeletal web of
   hairlines — the architect's signature drawn as a system diagram.
   Assembly, physics and glow live in js/mastery.js section 6. */
.giant-sig {
  margin: 1rem 0 2.5rem;
  user-select: none;
  position: relative;
}
.gs-canvas {
  display: block;
  width: 100%;
  /* height is set by the sampler to match the composed type */
  filter: drop-shadow(0 0 26px rgba(201, 168, 107, 0.12));
}
.gs-baseline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(1.1rem, 2.5vh, 2rem);
}
.gs-cap {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.gs-rule {
  flex: 1;
  height: 7px;
  min-width: 60px;
  overflow: visible;
}
.gs-rule-path {
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.75;
}
@media (max-width: 900px) {
  .gs-baseline .gs-cap:last-child {
    display: none; /* one caption is enough on small screens */
  }
}

/* ─── Mobile calm: cheaper grain, same mood ─── */
@media (max-width: 960px) {
  body::after {
    opacity: 0.04;
    animation-duration: 1.6s;
  }
}

/* ─── Reduced motion: strip the decorative layer entirely ─── */
@media (prefers-reduced-motion: reduce) {
  .mtl-glare {
    display: none;
  }
  .ink-underline > svg path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}