/* gh-site.css - site footer + the approved motion and depth treatments (Principal 2026-09-26), layered on gh-design.css.
   Rules kept: blue = witness, red = generated, yellow only for the seal/stripe/focus, never orange; UI text >= 15px; every
   animation plays once and stops (no pause control needed); prefers-reduced-motion shows each finished state. */

/* ---------- 1. hero glow + 3. a light passing across glass (index hero, once) ---------- */
.gh .gh-hero { position: relative; overflow: hidden; isolation: isolate; }
.gh .gh-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 140% at 22% 18%, #123489 0%, rgba(18,52,137,.55) 38%, rgba(7,21,64,0) 72%);
  animation: gh-glow 3s ease-out both; }
.gh .gh-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.09) 50%, transparent 62%);
  transform: translateX(-100%); animation: gh-sheen 1.8s ease-in-out .4s both; }
@keyframes gh-glow { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes gh-sheen { to { transform: translateX(100%); } }

/* ---------- 2. the stripe draws itself (page top, once on load) ---------- */
body.gh::before { transform-origin: left center; animation: gh-draw .8s cubic-bezier(.2,.7,.2,1) .1s both; }
@keyframes gh-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 4. etched provenance bar ---------- */
.gh .gh-provenance { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); border-top-color: var(--rule-blue); }

/* ---------- 5. card depth ---------- */
.gh .card { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }

/* ---------- the footer ---------- */
.gh .ghf { --ghf-muted: #C9D0E3; --ghf-link: #C9D6FF; --ghf-rule: #8FA4E0;
  margin-top: var(--space-6); background: linear-gradient(180deg, #002868 0%, #071540 100%); color: #FFFFFF;
  font-family: var(--font-ui); font-size: 15px; line-height: 1.6; }
.gh .ghf-stripe { height: 6px; display: flex; transform-origin: left center; }
.gh .ghf-stripe i { flex: 1; }
.gh .ghf-stripe i:nth-child(1) { background: #002B7F; box-shadow: inset 0 -1px 0 var(--ghf-rule); }
.gh .ghf-stripe i:nth-child(2) { background: #FCD116; }
.gh .ghf-stripe i:nth-child(3) { background: #CE1126; }
.gh .ghf.armed .ghf-stripe { transform: scaleX(0); }
.gh .ghf.armed.drawn .ghf-stripe { animation: gh-draw .7s cubic-bezier(.2,.7,.2,1) both; }
.gh .ghf-inner { max-width: 68rem; margin: 0 auto; padding: clamp(2.5rem,5vw,4rem) var(--space-4) 1.5rem;
  display: grid; gap: 2.25rem; grid-template-columns: minmax(15rem,1.3fr) repeat(4, minmax(9rem,1fr)); }
.gh .ghf-brand { display: grid; gap: .9rem; align-content: start; }
.gh .ghf-name { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.gh .ghf-tag { font-family: var(--font-body); font-style: italic; color: var(--ghf-muted); margin: 0; max-width: 26ch; }
.gh .ghf-contact { display: grid; gap: .3rem; margin: 0; font-style: normal; }
.gh .ghf-contact .k { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ghf-muted); margin-top: .35rem; }
.gh .ghf-contact .v { color: #FFFFFF; }
.gh .ghf-contact .hint { color: var(--ghf-muted); }
.gh .ghf-contact a { font-family: var(--font-mono); font-size: 15px; }
.gh .ghf nav h2 { font-family: var(--font-ui); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ghf-muted); margin: 0 0 .75rem; border: 0; padding: 0; }
.gh .ghf nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.gh .ghf a { color: var(--ghf-link); text-decoration: none; display: inline-block; padding-block: .35rem;
  background: linear-gradient(90deg, #CE1126, #FCD116) left bottom / 0 1px no-repeat; transition: background-size .25s ease, color .2s; }
.gh .ghf a:hover, .gh .ghf a:focus-visible { color: #FFFFFF; background-size: 100% 1px; }
.gh .ghf a:focus-visible { outline: 2px solid #FCD116; outline-offset: 2px; }
.gh .ghf-legal { grid-column: 1 / -1; border-top: 1px solid rgba(143,164,224,.35); padding-top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between; color: var(--ghf-muted); }
.gh .ghf-legal p { margin: 0; }
.gh .ghf-legal .ghf-note { flex-basis: 100%; }
.gh .ghf-legal nav { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
@media (max-width: 60rem) { .gh .ghf-inner { grid-template-columns: repeat(2, minmax(0,1fr)); } .gh .ghf-brand { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .gh .ghf-inner { grid-template-columns: 1fr; padding-inline: var(--space-3); } }

/* reduced motion: the finished state, no movement (gh-design's switch covers descendants; the body stripe is the body's own) */
@media (prefers-reduced-motion: reduce) {
  body.gh::before { animation: none !important; transform: none !important; }
  .gh .ghf.armed .ghf-stripe { transform: none !important; animation: none !important; }
  .gh .gh-hero::after { display: none; }
}

/* the footer sizes itself, whatever the host page's box model */
.gh .ghf, .gh .ghf *, .gh .ghf *::before, .gh .ghf *::after { box-sizing: border-box; }

/* footer profile icons (Principal 2026-09-28) */
ul > li.social-icons { display: flex; gap: 14px; align-items: center; }
ul > li.social-icons > a.si { display: inline-flex; align-items: center; line-height: 0; }