@charset "utf-8";

/* ==========================================================
   THEME VARIABLES
   Everything a color/theme tool needs to touch lives here.
   Swap these and the whole page re-skins — no other edits
   required below this block.
   ========================================================== */
:root {
  --font-family: Roboto, Helvetica, Arial, sans-serif;

  /* Golden ratio (phi) drives the type scale, radii and the
     card/button-row width relationship below via calc(). */
  --phi: 1.618;

  /* Splits the quarter-turn from "up" to "right" at the golden ratio
     point, so the dark end concentrates in the top-right corner
     instead of washing the whole right edge (the old flat 90deg).
     Also tried the golden angle (137.5deg, dark bottom-right) and a
     plain 45deg diagonal — this is the one that stuck after a live
     side-by-side comparison. */
  --bg-gradient-angle: calc(90deg / var(--phi));
  --bg-gradient-start: #d9a21f;
  --bg-gradient-end: #000000;

  --card-bg: rgba(0, 0, 0, 0.5);
  --card-text: #ffffff;
  --btn-radius: 8px;
  --card-radius: calc(var(--btn-radius) * var(--phi)); /* ~13px */
  --card-max-width: 360px;

  --btn-bg: rgba(255, 255, 255, 0.15);
  --btn-bg-hover: rgba(255, 255, 255, 0.25);
  --btn-text: #ffffff;

  /* Solid backdrop painted behind glow buttons so text stays
     crisp while the blurred ring bleeds through only at the edges. */
  --glow-backdrop: rgba(22, 17, 13, 0.92);

  /* Multi-stop gradient used by the hover glow ring.
     Set to a single color twice (e.g. "#fff, #fff") for a
     plain glow instead of the rainbow sweep. */
  --glow-gradient: linear-gradient(
    45deg,
    #cca01d, #e8d3ac, #996666, #b2ec5d,
    #4aff00, #ead4c6, #c6ead4, #4974a5, #f2bec8
  );

  /* Fibonacci-stepped spacing scale (approximates phi growth). */
  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;
  --space-4: 34px;
  --space-5: 55px;

  /* Type scale: title is exactly phi times the subtitle. */
  --text-base: 14px;
  --text-lg: calc(var(--text-base) * var(--phi)); /* ~22.6px */

  /* Fibonacci-numbered shadow offsets/blur (3, 5, 8, 21). */
  --shadow: 0 3px 5px rgba(0, 0, 0, 0.25), 0 8px 21px rgba(0, 0, 0, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-image: linear-gradient(
    var(--bg-gradient-angle),
    var(--bg-gradient-start),
    var(--bg-gradient-end)
  );
  min-height: 100vh;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* True vertical centering. The golden-section offset (~38.2% from
     top) this used to have read fine with fewer buttons, but with
     more rows it just pushed everything down and felt off-balance --
     plain centering scales better as button count grows. */
  justify-content: center;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

/* Page masthead: the compact header on the plain shared-style pages (home,
   Products, Instructions, Origami) -- a wordmark + one line saying what the
   page is. Deliberately NOT a card: it used to be a full glass .hero-card,
   which is a lot of vertical space every visit for something a returning
   visitor doesn't need. `.hero-card` below is kept for the actual boxed-card
   component (e.g. Products' Starlink referral card). */
.masthead {
  width: 100%;
  max-width: calc(var(--card-max-width) * var(--phi));
  margin: 0 auto var(--space-2);
  text-align: center;
}
.masthead > h1 {
  margin: 0 0 2px;
  font-size: calc(var(--text-base) * 1.15);
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--card-text);
}
.masthead > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
}

.hero-card {
  width: 100%;
  max-width: var(--card-max-width);
  margin: 0 auto var(--space-3);
  padding: var(--space-4) var(--space-3); /* 34:21 ratio ~= phi */
  background: var(--card-bg);
  backdrop-filter: blur(var(--space-2));
  -webkit-backdrop-filter: blur(var(--space-2));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--card-text);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.hero-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.hero-subtitle {
  margin: 0;
  font-size: var(--text-base);
  line-height: 140%;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: calc(var(--card-max-width) * var(--phi)); /* ~583px */
}

.button-row + .button-row {
  margin-top: var(--space-2);
}

/* Visible label above each button group on the home page. The groupings
   used to exist only as each <nav>'s aria-label -- invisible to a sighted
   visitor, so the page read as one undifferentiated stack of buttons.
   Centered small-caps between two hairlines. Hidden automatically when the
   search box filters its section out (see the :has() rule in index.html's
   own <style> block). Only index.html uses this class. */
.nav-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: calc(var(--card-max-width) * var(--phi));
  margin: var(--space-3) auto var(--space-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.nav-heading::before,
.nav-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.nav-heading:first-of-type {
  margin-top: var(--space-1);
}

/* The .button-row + .button-row rule above also spaces the two stacked rows
   (Personal / Work) inside the home page's "Accounts" <nav>. Sections
   themselves are now separated by each .nav-heading's own margins, so the
   old nav[aria-label="Time"] + .button-row bridging hack is gone. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3); /* 13:21 ratio ~= phi */
  font-size: 16px;
  text-align: center;
  text-decoration: none !important;
  color: var(--btn-text);
  background: var(--btn-bg);
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Small brand-icon chip, optional, placed before a button's label.
   Fixed square size keeps every button the same height whether or
   not it carries an icon — flex align-items:center on .btn does the
   vertical centering, so the icon never stretches the row. The white
   backing card guarantees legibility regardless of whether the
   source icon itself has a transparent or dark background. */
.btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: #fff;
  padding: 2px;
  object-fit: contain;
}

/* For icons that already look right on their own (a custom-designed
   square, already themed to the site) -- skip the white backing chip
   that unfamiliar third-party favicons need for legibility. */
.btn-icon.plain {
  background: none;
  padding: 0;
}

.btn:hover {
  transform: translateY(-2px);
}

/* Plain (non-glow) buttons get a simple background brighten on hover. */
.btn:not(.glow):hover {
  background: var(--btn-bg-hover);
}

/* Optional animated glow ring — add/remove the "glow" class
   on any .btn independently of the base button style.
   Layering (back to front): blurred rainbow ring -> solid backdrop -> text.
   The backdrop keeps label text crisp; only the ring's blur bleeds
   past the button's own edges. */
.glow {
  position: relative;
  z-index: 0;
  background: transparent;
  outline: none;
}

.glow::before,
.glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: var(--btn-radius);
}

.glow::before {
  top: -2px;
  left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  background: var(--glow-gradient) 0% 0% / 400%;
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  animation: glowing 20s linear infinite;
}

.glow::after {
  inset: 0;
  background: var(--glow-backdrop);
}

.glow:hover::before {
  opacity: 1;
}

@keyframes glowing {
  0%   { background-position: 0% 0; }
  50%  { background-position: 400% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .glow::before {
    animation: none;
  }
  .btn {
    transition: none;
  }
}