/* ============================================================
   Signature 4 — Effects: shadows, transitions, gradients, motion
   On the dark canvas, depth comes from PHOTOGRAPHY and contrast,
   not heavy UI shadows. Shadows are subtle; the signal-glow is
   reserved for focus states on yellow.
   ============================================================ */
:root {
  /* ---- Shadows (restrained) ---------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.55);
  --shadow-card:0 30px 80px rgba(0,0,0,0.60); /* lifted photo card */

  /* ---- Focus / signal glow ----------------------------------- */
  --focus-ring: 0 0 0 3px var(--signal-glow);

  /* ---- Image protection gradients (text-over-photo legibility) */
  --scrim-bottom: linear-gradient(to top,
      rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0) 62%); /* @kind other */
  --scrim-full:   linear-gradient(to top,
      rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 50%, rgba(0,0,0,0.55) 100%); /* @kind other */
  --scrim-left:   linear-gradient(to right,
      rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.30) 45%, rgba(0,0,0,0) 75%); /* @kind other */

  /* ---- Transitions (calm, premium easing) ------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   520ms; /* @kind other */
  --transition: all var(--dur-base) var(--ease-out); /* @kind other */
}

/* ---- Signature: yellow highlighter behind inline text -------- */
/* Used on About: "We're Designers, Engineers, and Finishers." */
.sig-marker {
  background: var(--signal);
  color: var(--text-on-signal);
  padding: 0.04em 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- Signature: animated underline-reveal on links ----------- */
.sig-underline {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-base) var(--ease-out);
}
.sig-underline:hover { background-size: 100% 2px; }