/* FACHS Consulting & Advisory (fachsconsulting.co.za) holding page. Layout and motion only; type, colour and links come from brand.css.
   Designed and developed by Nodix, a division of FTK Technologies, ftktechnologies@gmail.com */
html, body { height: 100%; }
body { min-height: 100vh; min-height: 100svh; overflow-x: hidden; }

/* Still background: fine lines at the logo's slash angle, and a soft night glow from the bottom corners. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: repeating-linear-gradient(137deg, var(--fachs-night-50) 0 2px, transparent 2px 26px);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 0% 100%, var(--fachs-night-100), transparent 70%),
    radial-gradient(60% 55% at 100% 100%, var(--fachs-night-100), transparent 70%);
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1rem, 3.5vh, 2rem);
  padding: clamp(1.5rem, 5vh, 3rem) 1rem;
  text-align: center;
}
.logo { width: min(30rem, 80vw); line-height: 0; }
.mark { display: block; width: 100%; height: auto; overflow: visible; }
.title { max-width: 18ch; }
.note { margin: 0; max-width: 34rem; color: var(--fachs-grey-700); }
.contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  font-weight: 600;
}
.contact a { text-decoration-thickness: 1px; }
.credit { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The one moving element: the logo mark.
   The mark is two halves cut by one long slash, with a small diamond at each end of each stroke.
   On load the halves slide into place along the slash from opposite ends and the diamonds follow along their rails.
   Then the mark holds still and every few seconds gives one sharp twitch, like a clock ticking: the halves jolt apart across the cut,
   overshoot and snap shut, and the diamonds kick out along the slash a beat later.
   All moves follow the logo's own angle: along the slash u = (.685, -.728), across it p = (.728, .685). Units are the logo's 1958 x 991 grid. */
.mark g { transform-box: view-box; }
.in { animation: slide-in 1.5s cubic-bezier(.16, .84, .3, 1) both; }
.in--up     { --x: 140px;  --y: -149px; }
.in--lo     { --x: -140px; --y: 149px; }
.in--dot-up { --x: 260px;  --y: -277px; animation-delay: .2s; }
.in--dot-lo { --x: -260px; --y: 277px;  animation-delay: .2s; }
@keyframes slide-in { from { transform: translate(var(--x), var(--y)); opacity: 0; } 35% { opacity: 1; } to { transform: none; opacity: 1; } }

.half, .dot { animation: twitch 3.2s linear 1.8s infinite; }
.dot { animation-delay: 1.86s; }
.half--up { --x: -29px; --y: -27px; }
.half--lo { --x: 29px;  --y: 27px; }
.dot--up  { --x: 41px;  --y: -44px; }
.dot--lo  { --x: -41px; --y: 44px; }
@keyframes twitch {
  0%, 84%, 100% { transform: none; }
  86%  { transform: translate(var(--x), var(--y)); }
  88%  { transform: translate(calc(var(--x) * -.35), calc(var(--y) * -.35)); }
  90%  { transform: translate(calc(var(--x) * .5), calc(var(--y) * .5)); }
  92%  { transform: none; }
}

.word { animation: fade 1.2s .5s ease-out both; }
.title, .note, .contact { animation: rise 1.1s .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .in, .half, .dot, .word, .title, .note, .contact { animation: none; }
}