/* ==========================================================================
   Brite Lotus — Reset, base elements, typography, layout primitives
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* The rubber-band strip you see when you pull the page past its end.

     The browser paints that area with the canvas color, which it takes from
     <html> when <html> has one and otherwise borrows from <body>. So giving
     <html> its own background is what claims the overscroll without touching
     what sits behind the page panel — body stays black below, which is what
     the panel's rounded bottom corners are cut against.

     The lotus mark's blue, not --bl-cyan: the cyan reads as teal against the
     white page and is not the brand color anyone recognizes. */
  background: var(--bl-blue);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--bl-font-sans);
  font-size: var(--bl-size-body);
  font-weight: var(--bl-weight-medium);
  line-height: var(--bl-lh-body);
  letter-spacing: var(--bl-track-body);
  color: var(--bl-text);
  /* Black, not white: the page panel covers the viewport, and its rounded
     bottom corners need the dark footer showing through rather than the
     browser canvas. */
  background: var(--bl-black);
  /* Reaches the bottom of the viewport so the blue behind it is only ever
     seen in the overscroll strip. Without this, any page shorter than the
     screen — and every page for the instant before its stylesheets land —
     shows a field of blue instead of a dark panel. */
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button { cursor: pointer; }

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--bl-border);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

.bl-display {
  font-size: var(--bl-size-display);
  font-weight: var(--bl-weight-black);
  line-height: var(--bl-lh-display);
  letter-spacing: var(--bl-track-display);
  margin: 0;
}

.bl-h1 {
  font-size: var(--bl-size-h1);
  font-weight: var(--bl-weight-black);
  line-height: var(--bl-lh-heading);
  letter-spacing: var(--bl-track-display);
}

.bl-h2 {
  font-size: var(--bl-size-h2);
  font-weight: var(--bl-weight-black);
  line-height: var(--bl-lh-heading);
  letter-spacing: var(--bl-track-heading);
}

.bl-h3 {
  font-size: var(--bl-size-h3);
  font-weight: var(--bl-weight-bold);
  line-height: 1.25;
  letter-spacing: var(--bl-track-heading);
}

.bl-lead {
  font-size: var(--bl-size-lead);
  font-weight: var(--bl-weight-medium);
  line-height: 1.5;
  letter-spacing: -0.028em;
}

.bl-sm    { font-size: var(--bl-size-sm); font-weight: var(--bl-weight-regular); line-height: 1.2; }
.bl-xs    { font-size: var(--bl-size-xs); }
.bl-micro { font-size: var(--bl-size-micro); font-weight: var(--bl-weight-medium); }

.bl-eyebrow {
  font-size: var(--bl-size-xs);
  font-weight: var(--bl-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bl-text-muted);
}

/* Inline emphasis. Yellow on dark grounds, blue on light ones — yellow on
   white fails contrast badly, so the light variant switches automatically. */
.bl-mark {
  color: var(--bl-yellow);
  font-weight: inherit;
}

.on-light .bl-mark,
.bl-panel .bl-mark { color: var(--bl-blue); }

.bl-italic {
  font-style: italic;
  font-weight: var(--bl-weight-bold);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.bl-shell {
  width: 100%;
  max-width: var(--bl-max-width);
  margin-inline: auto;
  padding-inline: var(--bl-gutter);
}

.bl-shell--wide { max-width: var(--bl-max-width-wide); }

.bl-section { padding-block: var(--bl-section-y); }

.bl-stack > * + * { margin-top: var(--bl-space-5); }
.bl-stack-sm > * + * { margin-top: var(--bl-space-3); }
.bl-stack-lg > * + * { margin-top: var(--bl-space-7); }

/* --------------------------------------------------------------------------
   Ground treatments
   -------------------------------------------------------------------------- */

/* The night sky. A real starfield photo carries the grain and the aurora
   bloom; a pure CSS gradient reads flat by comparison. The gradient overlay
   deepens the top so white type always clears contrast. */
.bl-ground-night {
  position: relative;
  background-color: var(--bl-black);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.18) 38%, rgba(0, 0, 0, 0) 72%),
    url("../img/starfield.jpg");
  background-size: cover, cover;
  background-position: center top, center bottom;
  background-repeat: no-repeat, no-repeat;
  color: var(--bl-text-on-dark);
}

/* The circuit board. Tiled line art at very low contrast — present enough to
   feel engineered, quiet enough to read across. The tile lives on a
   pseudo-element so its opacity can be dialed down without fading the
   content sitting on top of it. */
.bl-ground-circuit {
  position: relative;
  isolation: isolate;
  background-color: var(--bl-surface);
  color: var(--bl-text);
}

.bl-ground-circuit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/circuit-tile.png");
  background-size: 420px 420px;
  background-repeat: repeat;
  opacity: 0.3;
  pointer-events: none;
}

.bl-on-dark { color: var(--bl-text-on-dark); }
.bl-on-dark .bl-muted { color: var(--bl-text-on-dark-muted); }
.bl-muted { color: var(--bl-text-muted); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.bl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bl-skip-link {
  position: absolute;
  top: var(--bl-space-3);
  left: var(--bl-space-3);
  z-index: var(--bl-z-toast);
  padding: var(--bl-space-3) var(--bl-space-5);
  border-radius: var(--bl-radius-pill);
  background: var(--bl-yellow);
  color: var(--bl-black);
  font-weight: var(--bl-weight-bold);
  transform: translateY(-160%);
  transition: transform var(--bl-dur-fast) var(--bl-ease-out);
}

.bl-skip-link:focus-visible { transform: translateY(0); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--bl-focus);
  outline-offset: 3px;
  border-radius: var(--bl-radius-xs);
}

.bl-ground-night :where(a, button, input, [tabindex]):focus-visible {
  outline-color: var(--bl-yellow);
}

/* --------------------------------------------------------------------------
   Page-to-page transition

   Cross-document view transitions: the browser snapshots the outgoing page,
   loads the next one, and cross-fades between them. The incoming page also
   rises a few pixels, which gives the change a direction rather than a
   dissolve.

   Progressive by construction. Browsers without the API navigate the way
   they always did — there is no polyfill, no blocking script, and nothing
   to clean up if it never runs.
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }

@keyframes bl-page-out {
  to { opacity: 0; }
}

@keyframes bl-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

::view-transition-old(root) {
  animation: bl-page-out 170ms var(--bl-ease-enter) both;
}

::view-transition-new(root) {
  animation: bl-page-in 380ms var(--bl-ease-enter) both;
}

/* Keep the transition — losing it mid-navigation is its own jolt — but take
   the movement out of it. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}