/* 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 glitches for a split second, like a broken signal: the real mark blinks out,
   five slices of it (.gs), cut parallel to the logo's slash, tear along the slash by different amounts, and a sky and a purple
   copy (.gx) split along the slash behind them. It jumps between frames with no easing (steps), then snaps back clean. A smaller hit comes halfway through the loop.
   Everything moves along the logo's slash: u = (.685, -.728); the slice cuts are lines 0.728x + 0.685y = c. 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; } }

.gs, .gx { opacity: 0; }
.main, .gs, .gx { animation: 3.4s steps(1, end) 1.8s infinite; }
.main { animation-name: g-main; }
.gs   { animation-name: g-slice; }
.gx   { animation-name: g-split; }
/* tear along the slash per slice for each frame: --a, --b, --c (big hit), --d (small hit) */
.gs--1 { --a: 80px;   --b: -44px;  --c: 120px; --d: 0px; }
.gs--2 { --a: -110px; --b: 64px;   --c: -30px; --d: 60px; }
.gs--3 { --a: 30px;   --b: -130px; --c: 70px;  --d: 0px; }
.gs--4 { --a: -66px;  --b: 96px;   --c: -104px; --d: -70px; }
.gs--5 { --a: 116px;  --b: -26px;  --c: 44px;  --d: 0px; }
.gx--sky    { --s: -34px; }
.gx--purple { --s: 34px; }
@keyframes g-main {
  0%     { opacity: 1; }
  44%    { opacity: 0; }
  45.5%  { opacity: 1; }
  86%    { opacity: 0; }
  92%    { opacity: 1; }
}
@keyframes g-slice {
  0%     { opacity: 0; transform: none; }
  44%    { opacity: 1; transform: translate(calc(var(--d) * .685), calc(var(--d) * -.728)); }
  45.5%  { opacity: 0; transform: none; }
  86%    { opacity: 1; transform: translate(calc(var(--a) * .685), calc(var(--a) * -.728)); }
  88%    { opacity: 1; transform: translate(calc(var(--b) * .685), calc(var(--b) * -.728)); }
  90%    { opacity: 1; transform: translate(calc(var(--c) * .685), calc(var(--c) * -.728)); }
  92%    { opacity: 0; transform: none; }
}
@keyframes g-split {
  0%     { opacity: 0; transform: none; }
  86%    { opacity: .9; transform: translate(calc(var(--s) * .685), calc(var(--s) * -.728)); }
  88%    { opacity: .9; transform: translate(calc(var(--s) * -1.6 * .685), calc(var(--s) * -1.6 * -.728)); }
  90%    { opacity: .9; transform: translate(calc(var(--s) * .6 * .685), calc(var(--s) * .6 * -.728)); }
  92%    { opacity: 0; 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, .main, .gs, .gx, .word, .title, .note, .contact { animation: none; }
}