/* craigh.com.au — the landing page only (index.html).

   WHY THIS IS A SEPARATE FILE
   style.css is shared by every page on this site and linked with an ABSOLUTE
   path from all of them, including the BC checker and the robots page. A bare
   `.gate {}` or `.lede h1 {}` rule added there would have restyled those too.
   Keeping the landing page in its own file means the front door can be as
   decorated as it likes without touching anything behind it — and reverting it
   is deleting one file and one <link>.

   It is loaded AFTER style.css and only overrides; every colour comes from the
   tokens style.css already defines, so light and dark mode both keep working.

   Craig, 25 Sep: "make it look modern, make it obvious where we click, how
   fancy can you make it look." The words on the page are his — Login, BC,
   StratLab online trading — and nothing else is written on it.

   Linked absolutely (/landing.css) for the same reason style.css is: a
   relative path broke once already when a page served from /bc/admin resolved
   it to /bc/style.css. */

.landing {
  position: relative;
  overflow-x: hidden;
}

/* ── the backdrop ───────────────────────────────────────────────────────
   Three big blurred colour fields drifting slowly behind a fine grid. No
   images and no canvas: three composited layers the GPU moves on its own. */

.landing .aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* the grid, masked to an ellipse so it fades out instead of stopping dead */
.landing .aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 38%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 38%, #000 25%, transparent 78%);
  opacity: .5;
}

.landing .blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .42;
  will-change: transform;
}

.landing .blob.b1 {
  top: -14vh; left: -8vw;
  width: 52vw; height: 52vw;
  min-width: 340px; min-height: 340px;
  background: radial-gradient(circle at 35% 35%, var(--accent), transparent 68%);
  animation: drift-a 24s ease-in-out infinite;
}

.landing .blob.b2 {
  top: 6vh; right: -14vw;
  width: 46vw; height: 46vw;
  min-width: 300px; min-height: 300px;
  background: radial-gradient(circle at 60% 40%, #4d8fb5, transparent 68%);
  animation: drift-b 29s ease-in-out infinite;
}

.landing .blob.b3 {
  bottom: -22vh; left: 26vw;
  width: 44vw; height: 44vw;
  min-width: 280px; min-height: 280px;
  background: radial-gradient(circle at 45% 55%, #c8a35e, transparent 70%);
  opacity: .3;
  animation: drift-c 34s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing .blob { opacity: .34; }
  :root:not([data-theme="light"]) .landing .blob.b3 { opacity: .22; }
}

:root[data-theme="dark"] .landing .blob { opacity: .34; }
:root[data-theme="dark"] .landing .blob.b3 { opacity: .22; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.06); }
  50%      { transform: translate3d(-7vw, 7vh, 0) scale(.94); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, -6vh, 0) scale(1.1); }
}

/* Motion here is decoration. If the machine asks for less, it holds still and
   the page still looks like the same page. */
@media (prefers-reduced-motion: reduce) {
  .landing .blob { animation: none; }
}

/* ── the real content sits above the backdrop ───────────────────────── */

.landing .topbar,
.landing main,
.landing .foot { position: relative; z-index: 1; }

/* Craig likes the home button exactly where it is, so it stays put — it just
   loses the bar behind it, which would have cut the backdrop in half. */
.landing .topbar {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Two cards side by side. main.centred caps at 460px, which is too narrow
   once one of them is called "StratLab online trading". */
.landing main.centred {
  max-width: 740px;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 64px;
}

/* ── the word ───────────────────────────────────────────────────────── */

.landing .lede {
  margin-bottom: 40px;
  text-align: center;
}

/* `background-clip: text` clips to the LINE BOX, not to the glyphs. With
   line-height:1 a descender - the g in "Login", the g in "Sign in" - falls
   outside that box and is cut clean off. Hence the roomier line-height and
   the padding: both are there to keep descenders inside the paintable area,
   not for looks. Change them and the tail of the g goes again. */
.landing .lede h1 {
  margin: 0;
  padding-bottom: .08em;
  font-size: clamp(40px, 9vw, 66px);
  font-weight: 680;
  letter-spacing: -.045em;
  line-height: 1.22;
  background: linear-gradient(170deg,
              var(--text) 18%,
              color-mix(in srgb, var(--accent) 72%, var(--text)) 96%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── the two gates ──────────────────────────────────────────────────── */

.landing .gates { gap: 18px; }

.landing .gate {
  isolation: isolate;
  overflow: hidden;
  min-height: 210px;
  padding: 28px 26px 24px;
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 22px;
  /* Glass: let the backdrop through, but keep the text on something solid
     enough to read at a glance on a phone in daylight. */
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--shadow);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1),
              box-shadow .22s ease,
              border-color .22s ease;
}

/* A hairline of light along the top edge, the way a real pane of glass catches
   it. Drawn rather than bordered, so it can fade away at the far corner. */
.landing .gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
              color-mix(in srgb, #fff 60%, transparent),
              transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .8;
}

/* On a dark page that white hairline reads as a hard white stripe rather than
   a catch of light, and the glass needs to be a little more opaque to stop
   the backdrop muddying the text behind it. */
:root[data-theme="dark"] .landing .gate::before { opacity: .38; }

:root[data-theme="dark"] .landing .gate {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}

/* The sweep across the card on hover — what says "this is a button" before
   you have read a word of it. */
.landing .gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%,
              color-mix(in srgb, var(--accent) 22%, transparent) 50%,
              transparent 68%);
  transform: translateX(-100%);
  opacity: 0;
  transition: transform .7s ease, opacity .3s ease;
}

.landing .gate:hover,
.landing .gate:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: var(--shadow-lift),
              0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
              0 24px 60px color-mix(in srgb, var(--accent) 20%, transparent);
}

.landing .gate:hover::after,
.landing .gate:focus-visible::after {
  transform: translateX(100%);
  opacity: 1;
}

.landing .gate:active { transform: translateY(-2px); }

.landing .gate .mark {
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  border-radius: 15px;
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 88%, #fff),
              var(--accent));
  color: var(--accent-text);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}

.landing .gate:hover .mark { transform: scale(1.07) rotate(-3deg); }

.landing .gate h2 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 640;
  letter-spacing: -.028em;
  line-height: 1.18;
}

/* Where you click. No label, because Craig asked for those three phrases and
   nothing else written on the page — so the affordance is the arrow. */
.landing .gate .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: auto;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
  color: var(--accent);
  transition: background-color .22s ease,
              transform .22s cubic-bezier(.2, .8, .3, 1),
              border-color .22s ease, color .22s ease;
}

.landing .gate:hover .arrow,
.landing .gate:focus-visible .arrow {
  transform: translateX(5px);
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-text);
}

/* Keyboard users get the same obvious target, drawn by the browser. */
.landing .gate:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.landing .who {
  justify-content: center;
  margin-bottom: 22px;
}

.landing .foot {
  padding-bottom: 32px;
  letter-spacing: .04em;
}

@media (max-width: 619px) {
  .landing main.centred { padding-top: 24px; }
  .landing .lede { margin-bottom: 30px; }
  .landing .gate { min-height: 150px; }
  .landing .gate h2 { max-width: none; }
}