/* =============================================================================
   ryderkatz.com — the homepage (Horizon), 2026-11-10
   -----------------------------------------------------------------------------
   Loaded by /index.html only. Everything here is scoped to that page
   (html[data-page="index"]), so no other page's header, menus or tokens move.

   Two jobs:
   1. THE SCENE — one screen, no scrolling. The name, the greeting and the time
      are real text; this sheet gives them a still version of the horizon so the
      page is complete before (or without) the water canvas in home.js.
   2. THE HEADER ON THIS PAGE — the one header every page has (global.css),
      with no bar surface and a little more height. See the section below.
============================================================================= */

html[data-page="index"] {
  color-scheme: dark;
  overflow: hidden; overscroll-behavior: none;
  background: #0b0c10;

  /* the surfaces the shared header components read */
  --bg:        #0b0c10;
  --bg-elev:   rgba(22, 24, 29, .66);
  --bg-soft:   rgba(255, 255, 255, .08);
  --fg:        #eef0f3;
  --fg-dim:    #c3c8d0;
  --fg-mute:   #9aa0aa;
  --border:    rgba(255, 255, 255, .13);
  --border-hi: rgba(255, 255, 255, .18);
  --hairline:  rgba(255, 255, 255, .1);
  --accent:    #eef0f3;
  --accent-2:  #eef0f3;

  --nav-h: 72px;
  --hz-serif: "Cormorant Garamond", "RK Wordmark", Georgia, serif;
  --hz-sans:  "Geist", var(--sans);
  --hz-side:  max(46px, env(safe-area-inset-left, 0px));
}
html[data-page="index"] body {
  height: 100dvh; min-height: 0; margin: 0; overflow: hidden;
  background: #0b0c10; color: var(--fg);
}
/* the public site's atmosphere (glow, grain) has no place over the water */
html[data-page="index"] body::before,
html[data-page="index"] body::after { content: none; }

/* === The scene ============================================================ */
.hz {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  max-width: none; width: auto; margin: 0; padding: 0;   /* global.css gives every <main> a centred column */
  /* the still horizon: night sky, a glow on the line, dark water */
  background:
    radial-gradient(60% 26% at 50% 60%, rgba(220, 226, 240, .5), transparent 70%),
    linear-gradient(180deg, #050608 0%, #101216 34%, #2b2f38 55%, #8f97a8 59.8%, #3a3e48 60.2%, #14161b 72%, #08090c 100%);
}
#hz-water {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .9s ease;
  touch-action: none;
}
.hz.gl-on #hz-water { opacity: 1; }
/* fine grain over everything, so large dark fields are not flat */
.hz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The name, as text. Once the canvas is drawing, the canvas carries it and this
   steps out of sight (it stays in the document for readers and search). */
.hz-name, .hz-mirror {
  position: absolute; left: 0; right: 0; margin: 0;
  text-align: center; white-space: nowrap; pointer-events: none;
  font: 300 15vw/1 var(--hz-serif); letter-spacing: -.03em;
  transition: opacity .7s ease;
}
.hz-name {
  bottom: 45%;
  color: transparent;
  background: linear-gradient(180deg, #f7f8fa 20%, #c2c7d0 78%); -webkit-background-clip: text; background-clip: text;
}
.hz-mirror {
  top: 65%; transform: scaleY(-1); color: #b9bfc9; opacity: .5;
  -webkit-mask-image: linear-gradient(0deg, #000 25%, transparent 85%); mask-image: linear-gradient(0deg, #000 25%, transparent 85%);
}
.hz.gl-on .hz-name { opacity: 0; }
.hz.gl-on .hz-mirror { opacity: 0; }

/* Bottom corners: the greeting (left) and the time (right), built alike */
.hz-greet, .hz-time {
  position: absolute; z-index: 2; bottom: max(42px, env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; flex-direction: column; gap: 9px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}
.hz-greet { left: var(--hz-side); align-items: flex-start; }
.hz-time  { right: max(46px, env(safe-area-inset-right, 0px)); align-items: flex-end; pointer-events: none; }
.hz-hello, .hz-time b {
  margin: 0;
  font: italic 300 34px/1 var(--hz-serif); color: #eef0f3; letter-spacing: .005em;
}
.hz-time b { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
.hz-cur, .hz-time > span {
  margin: 0;
  font: 400 14px/1.2 var(--hz-sans); color: #c3c8d0;
}
.hz-cur .k { color: #8d939d; margin-right: 9px; }
#typewriter::after {
  content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 3px;
  vertical-align: -.14em; background: currentColor; animation: hz-blink 1s steps(1) infinite;
}
@keyframes hz-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #typewriter::after { animation: none; } }

/* === The header on this page ============================================== */
/* The header's design lives in global.css ("THE HEADER, ONE DESIGN ON EVERY
   PAGE") and is the same everywhere. Here it differs in two ways only: the bar
   has no surface — the button, tabs and tools sit directly on the sky — and it
   is taller, with the button at this page's scale. Because the bar has no
   backdrop of its own here, the menus can be true glass over the water. */
html[data-page="index"] .nav {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  --bg-elev: rgba(22, 24, 29, .66);
}
html[data-page="index"] .nav-inner { padding: 0 max(44px, env(safe-area-inset-right, 0px)) 0 var(--hz-side); }
html[data-page="index"] .nav .brand { height: 36px; gap: 11px; }
html[data-page="index"] .brand-mark { width: 32px; height: 32px; }
html[data-page="index"] .nav .brand-name { font-family: var(--hz-serif); font-weight: 400; font-size: 25px; }
html[data-page="index"] .nav-links a { height: 36px; padding: 0 11px; border-radius: 18px; font-size: 14px; }
html[data-page="index"] .nav-private { height: 42px; border-radius: 21px; }
html[data-page="index"] .nav-menu, html[data-page="index"] .nav-avatar { width: 40px; height: 40px; }
html[data-page="index"] .nav-menu svg { width: 20px; height: 20px; }
html[data-page="index"] .sm-nav .sm-scroll { padding-left: var(--hz-side); padding-right: var(--hz-side); }
html[data-page="index"] .site-menu, html[data-page="index"] .site-menu.managing { background: rgba(20, 22, 27, .66); }   /* over the dark scene the sheet can be true glass */

/* The admin text-editing controls normally own the bottom-right corner, which
   on this page is the clock's. Here they sit bottom-centre, clear of the greeting
   (left) and the time (right): the pill at the edge, its formatting toolbar
   directly above it. The long how-to hint is dropped on this page — one line is
   editable — so the pill stays small enough to clear both corners at any width. */
html[data-page="index"] #rk-edit-pill { right: auto; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
html[data-page="index"] #rk-edit-pill .rk-edit-hint { display: none; }
html[data-page="index"] #rk-fmt { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 48px); }

/* === Narrower windows ===================================================== */
@media (max-width: 1240px) {
  html[data-page="index"] { --hz-side: max(28px, env(safe-area-inset-left, 0px)); }
  html[data-page="index"] .nav-inner { padding-right: max(26px, env(safe-area-inset-right, 0px)); }
  html[data-page="index"] .nav-links a { padding: 0 8px; font-size: 13.5px; }
  html[data-page="index"] .nav .brand-name { font-size: 22px; }
  .hz-time { right: max(28px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 720px) {
  html[data-page="index"] { --hz-side: max(20px, env(safe-area-inset-left, 0px)); --nav-h: 64px; }
  html[data-page="index"] .nav-inner { padding-right: max(14px, env(safe-area-inset-right, 0px)); }
  .hz-greet, .hz-time { bottom: max(54px, env(safe-area-inset-bottom, 0px) + 22px); }
  .hz-hello, .hz-time b { font-size: 26px; }
  .hz-time { right: max(20px, env(safe-area-inset-right, 0px)); }
  .hz-time > span { display: none; }
  .hz-greet { max-width: 62%; }
  /* signed in on a phone: the corners move up to clear the edit pill, and its toolbar goes under the header instead of over the greeting */
  html[data-rk-admin] .hz-greet, html[data-rk-admin] .hz-time { bottom: max(70px, env(safe-area-inset-bottom, 0px) + 60px); }
  html[data-page="index"] #rk-fmt { bottom: auto; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 6px); }
}
/* portrait: the name stacks, and the horizon sits a little higher (matches home.js) */
@media (max-aspect-ratio: 18/25) {
  .hz { background:
    radial-gradient(90% 18% at 50% 54%, rgba(220, 226, 240, .5), transparent 70%),
    linear-gradient(180deg, #050608 0%, #101216 30%, #2b2f38 49%, #8f97a8 53.8%, #3a3e48 54.2%, #14161b 68%, #08090c 100%); }
  .hz-name, .hz-mirror { font-size: 33vw; line-height: 1; }
  .hz-name span, .hz-mirror span { display: block; }
  .hz-name { bottom: 49%; }
  .hz-mirror { top: 56%; }
}