/* ==========================================================================
   h3 design — shared tokens & base styles
   Frutiger Aero / Metro / Wii-inspired. Glossy, saturated, optimistic.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* primitive blues */
  --h3-blue-50:  #e6f5ff;
  --h3-blue-100: #b3e2ff;
  --h3-blue-200: #00b3ff;
  --h3-blue-300: #0088ff;
  --h3-blue-400: #0074e0;
  --h3-blue-500: #004cff;
  --h3-blue-600: #003d99;
  --h3-blue-700: #2d4891;

  /* cool accents */
  --h3-cyan:     #00bbff;
  --h3-aqua:     #00ffc3;
  --h3-sky:      #009dff;
  --h3-lavender: #838dff;
  --h3-ice:      #00b3ff;

  /* warm accents */
  --h3-red:      #e40303;
  --h3-orange:   #ff8c00;
  --h3-yellow:   #ffed00;
  --h3-amber:    #ffc60c;
  --h3-green:    #008026;
  --h3-lime:     #00e01e;
  --h3-magenta:  #d400ff;
  --h3-pink:     #ff00fb;
  --h3-hot-red:  #ff0000;
  --h3-purple:   #732982;

  /* neutrals */
  --h3-black:    #000000;
  --h3-white:    #ffffff;
  --h3-ink-900:  #0b0b10;
  --h3-ink-700:  #1e1f26;
  --h3-ink-500:  #555860;
  --h3-ink-300:  #9a9ba3;
  --h3-ink-200:  #cfd0d7;
  --h3-ink-100:  #e6e7ec;
  --h3-ink-50:   #f4f5f8;
  --h3-shadow:   rgba(0,0,0,0.25);

  /* semantic */
  --fg-1: var(--h3-ink-900);
  --fg-2: var(--h3-ink-700);
  --fg-3: var(--h3-ink-500);
  --fg-inverse: var(--h3-white);

  --bg-1: var(--h3-white);
  --bg-2: var(--h3-ink-50);
  --bg-3: var(--h3-ink-100);

  --accent:        var(--h3-blue-400);
  --accent-hover:  var(--h3-blue-500);
  --accent-active: var(--h3-blue-600);

  --border-1:  rgba(0,0,0,0.10);
  --border-2:  rgba(0,0,0,0.18);
  --border-hi: var(--h3-black);

  /* gradients */
  --grad-sky:     linear-gradient(180deg, var(--h3-cyan) 0%, var(--h3-white) 100%);
  --grad-bubble:  linear-gradient(180deg, var(--h3-aqua) 0%, var(--h3-lavender) 100%);
  --grad-rainbow: linear-gradient(180deg, var(--h3-sky) 0%, var(--h3-magenta) 50%, var(--h3-hot-red) 100%);
  --grad-pool:    linear-gradient(180deg, var(--h3-sky) 0%, var(--h3-white) 50%, var(--h3-blue-500) 100%);
  --grad-deep:    linear-gradient(180deg, var(--h3-sky) 0%, var(--h3-blue-600) 100%);

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* radii */
  --radius-1: 6px;
  --radius-2: 12px;
  --radius-3: 20px;
  --radius-4: 28px;
  --radius-pill: 999px;
  --radius-blob: 47px;

  /* shadows — softer, more blurred */
  --shadow-drop:    0 10px 30px -8px rgba(0,0,0,0.20), 0 4px 10px -4px rgba(0,0,0,0.10);
  --shadow-drop-lg: 0 24px 50px -12px rgba(0,0,0,0.25), 0 8px 18px -8px rgba(0,0,0,0.12);
  --shadow-drop-xl: 0 30px 60px -14px rgba(0,0,0,0.28), inset 0 6px 14px -4px rgba(255,255,255,0.4), inset 0 -10px 24px -8px rgba(0,0,0,0.22);
  --shadow-inset-top:  inset 0 6px 14px -4px rgba(255,255,255,0.4);
  --shadow-inset-deep: inset 0 24px 28px -16px rgba(0,0,0,0.28);

  --gloss-top: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 55%);

  /* type */
  --font-display: 'Lora', 'Iowan Old Style', Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-caption: 12px;
  --fs-small:   14px;
  --fs-body:    16px;
  --fs-lede:    18px;
  --fs-h4:      22px;
  --fs-h3:      28px;
  --fs-h2:      40px;
  --fs-h1:      56px;
  --fs-display: 96px;
  --fs-hero:    128px;

  --lh-tight: 1.0;
  --lh-snug:  1.15;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;

  /* motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* dark-adapted values — follows system preference automatically */
@media (prefers-color-scheme: dark) {
  :root {
    --fg-1: #f5f5f8;
    --fg-2: #cfd0d7;
    --fg-3: #9a9ba3;
    --bg-1: #07070c;
    --bg-2: #12121a;
    --bg-3: #1c1c26;
    --border-1: rgba(255,255,255,0.10);
    --border-2: rgba(255,255,255,0.18);
    --accent:       #45a7ff;
    --accent-hover: #7ec1ff;
    --shadow-drop:    0 10px 30px -8px rgba(0,0,0,0.55), 0 4px 10px -4px rgba(0,0,0,0.45);
    --shadow-drop-lg: 0 24px 50px -12px rgba(0,0,0,0.60), 0 8px 18px -8px rgba(0,0,0,0.45);
    --grad-sky:    linear-gradient(180deg, #0a2a4a 0%, #07070c 100%);
    --grad-bubble: linear-gradient(180deg, #0a5c58 0%, #2b2e7a 100%);
    --grad-pool:   linear-gradient(180deg, #0a5e9e 0%, #0c0d22 50%, #1a278a 100%);
    --grad-deep:   linear-gradient(180deg, #0074e0 0%, #002766 100%);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
}

::selection { background: var(--h3-aqua); color: var(--fg-1); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: pretty;
  margin: 0;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(0,116,224,0.35);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }

/* ===== primitives ===== */

.orb {
  border-radius: 50%;
  background: var(--grad-bubble);
  box-shadow: var(--shadow-drop-xl);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.orb::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--gloss-top);
  pointer-events: none;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--border-1);
}
.chip--accent  { background: var(--h3-blue-50); color: var(--h3-blue-600); border-color: transparent; }
.chip--success { background: #e7f6ea; color: var(--h3-green); border-color: transparent; }
.chip--warning { background: #fff3e5; color: #b85c00; border-color: transparent; }
.chip--danger  { background: #fde6e6; color: var(--h3-red); border-color: transparent; }

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms var(--ease-bounce),
              box-shadow 180ms var(--ease-out);
}
.btn--primary {
  background: var(--grad-deep);
  color: #fff;
  box-shadow: var(--shadow-drop), inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.btn--primary:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.08) saturate(1.1);
  box-shadow: var(--shadow-drop-lg), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--secondary {
  background: #fff;
  color: var(--fg-1);
  box-shadow: var(--shadow-drop), inset 0 0 0 1px var(--border-1);
}
.btn--ghost {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.btn:hover:not(:disabled)  { transform: translateY(-2px) scale(1.03); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled              { opacity: 0.5; cursor: not-allowed; }

.card {
  background: #fff;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-drop), inset 0 0 0 1px var(--border-1);
  padding: 22px 24px;
}
.card--sky     { background: var(--grad-sky);     border-radius: var(--radius-4); box-shadow: var(--shadow-drop); }
.card--dark    { background: var(--h3-ink-900);   color: #fff; }
.card--channel { background: var(--grad-rainbow); border-radius: var(--radius-blob); color: #fff; box-shadow: var(--shadow-drop); }

/* ===== nav (sticky pill) ===== */
.h3-nav {
  position: sticky; top: 20px; z-index: 50;
  margin: 24px auto 0;
  max-width: 1040px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-drop), inset 0 0 0 1px rgba(255,255,255,0.5);
}
.h3-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--fg-1);
  font-family: var(--font-display);
  font-weight: 500;
}
.h3-nav__brand img { width: 32px; height: 32px; }
.h3-nav__spacer { flex: 1; }
.h3-nav__link {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--fg-3);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.h3-nav__link:hover { color: var(--fg-1); background: var(--bg-2); }
.h3-nav__link.is-current { color: var(--fg-1); font-weight: 600; }
.h3-nav__link.is-cta { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ===== layout helpers ===== */
.h3-container { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.h3-section   { margin: 64px auto 0; }

/* ===== footer ===== */
.h3-footer {
  max-width: 1040px; margin: 96px auto 40px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); padding: 0 32px;
  flex-wrap: wrap; gap: 12px;
}
.h3-footer a { color: var(--fg-3); text-decoration: none; }
.h3-footer a:hover { color: var(--accent); }

/* ===== hero (sky gradient w/ floating orbs) ===== */
.h3-hero {
  position: relative; overflow: hidden;
  margin: 32px auto 0;
  max-width: 1040px;
  min-height: 620px;
  padding: 96px 60px 108px;
  background: var(--grad-sky);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-drop);
}
.h3-hero__inner {
  position: relative; z-index: 1;
  display: flex; gap: 36px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.h3-hero__copy { max-width: 560px; }
.h3-hero__title {
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 128px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--fg-1);
}
.h3-hero__lede {
  font-family: var(--font-body);
  font-size: 20px; line-height: 1.45;
  color: var(--fg-2);
  margin-top: 18px; max-width: 480px;
}
.h3-hero__actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.h3-hero__emblem { width: 240px; height: 240px; flex-shrink: 0; }
.h3-hero__emblem img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25)); }
.h3-hero__orb {
  position: absolute; border-radius: 50%;
  box-shadow: 2px 7px 6.6px rgba(0,0,0,0.25), inset 0 4px 4px rgba(0,0,0,0.25);
  z-index: 0;
}

@keyframes logo-spin {
  0%   { transform: rotate(0deg) scale(1); }
  40%  { transform: rotate(220deg) scale(1.12); }
  70%  { transform: rotate(330deg) scale(0.95); }
  100% { transform: rotate(360deg) scale(1); }
}
.logo-spinning { animation: logo-spin 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards; }

@media (max-width: 720px) {
  .h3-hero { padding: 48px 28px 64px; min-height: 520px; }
  .h3-hero__lede { font-size: 17px; }
  .h3-hero__emblem { width: 180px; height: 180px; }
  .h3-container { padding: 0 16px; }
  .h3-nav { margin-left: 16px; margin-right: 16px; }
  .h3-footer { padding: 0 16px; }
}

/* utility */
.h3-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== animations ===== */
@keyframes h3-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes h3-float-slow {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -14px); }
}
@keyframes h3-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes h3-pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes h3-spin-slow {
  to { transform: rotate(360deg); }
}

.h3-hero__orb        { animation: h3-float 7s var(--ease-out) infinite; }
.h3-hero__orb:nth-child(2) { animation-duration: 9s; animation-delay: -2s; }
.h3-hero__orb:nth-child(3) { animation: h3-float-slow 11s var(--ease-out) infinite; }

.h3-hero__copy  { animation: h3-rise 700ms var(--ease-out) both; }
.h3-hero__emblem { animation: h3-pop 700ms var(--ease-bounce) both 120ms; }

.thing, .tool-card, .contact-row {
  animation: h3-rise 500ms var(--ease-out) both;
}
.thing:nth-child(1), .tool-card:nth-child(1), .contact-row:nth-child(1) { animation-delay: 60ms; }
.thing:nth-child(2), .tool-card:nth-child(2), .contact-row:nth-child(2) { animation-delay: 120ms; }
.thing:nth-child(3), .tool-card:nth-child(3), .contact-row:nth-child(3) { animation-delay: 180ms; }
.thing:nth-child(4), .tool-card:nth-child(4), .contact-row:nth-child(4) { animation-delay: 240ms; }
.thing:nth-child(5) { animation-delay: 300ms; }
.thing:nth-child(6) { animation-delay: 360ms; }

.orb { transition: transform var(--dur-med) var(--ease-bounce); }
.orb:hover { transform: scale(1.04) rotate(-2deg); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/* dark-mode per-component overrides (placed after base rules to win the cascade) */
@media (prefers-color-scheme: dark) {
  .h3-nav { background: rgba(18,18,26,0.72); }
  .card, .tool-card, .contact-row, .thing { background: var(--bg-2); color: var(--fg-1); }
  .card--sky { background: var(--grad-sky); color: var(--fg-1); }
  .card--dark { background: var(--h3-ink-900); }
  .h3-hero { background: var(--grad-sky); }
  .tools-hero { background: var(--grad-bubble); color: var(--fg-1); }
  .contact-hero { background: var(--grad-sky); color: var(--fg-1); }
  .thing__sub, .thing__meta { color: var(--fg-2); }
  .email-reveal { background: var(--bg-2); color: var(--fg-1); }
  .btn--secondary { background: var(--bg-2); color: var(--fg-1); box-shadow: var(--shadow-drop), inset 0 0 0 1px var(--border-1); }
  .btn--secondary:hover:not(:disabled) { background: var(--bg-3); color: var(--fg-1); }
  .chip { background: var(--bg-3); color: var(--fg-2); }
  .chip--accent { background: #10284d; color: #9ac7ff; }
  .orb__face { background: var(--bg-2); color: var(--fg-1); }
}