/* The front of the page: the hero with its compass, the bearing pill that
   follows you down the page, the tool finder, and the effects on the cards.
   hub.css holds the colours and the cards themselves; this sits on top. */

/* ---- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center; gap: 24px;
  min-height: min(640px, calc(100svh - 72px)); padding-top: 36px; padding-bottom: 56px;
}
.hero-text { position: relative; z-index: 1; min-width: 0; }

/* Hidden only while the intro is about to play (set in index.html's head, and
   lifted again if the animation library never arrives). */
.motion .hero-text, .motion .hero-visual { opacity: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font: 600 12px/1 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--red-ink);
  box-shadow: 0 0 0 0 var(--red-tint-strong); animation: ping 2.4s ease-out infinite;
}
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 10px transparent; } }

.hero h1 {
  margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: var(--ink);
  font-size: clamp(40px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance;
}
.hero h1 em {
  font-style: italic; color: var(--red-ink);
  background: linear-gradient(transparent 86%, var(--red-tint-strong) 86%);
}
/* One word per mask, so each can rise out of its own line (js/motion.js). The
   padding keeps descenders and the italic's overhang from being clipped. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.06em 0.16em 0; margin: 0 -0.06em -0.16em 0; }
.w-in { display: inline-block; will-change: transform; }

.intro { margin: 22px 0 0; max-width: 560px; text-wrap: balance; font-size: 18px; line-height: 1.55; color: var(--ink-body); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; min-height: 46px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 12px;
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 999px;
  box-shadow: var(--shadow-sm); color: var(--ink);
  font: 600 14px/1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
}
.chip svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--red-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip:hover { transform: translateY(-2px); border-color: var(--red-ink); box-shadow: var(--shadow-md); }
.chip:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.chip-find { border-style: dashed; background: transparent; box-shadow: none; color: var(--ink-soft); }
.chip-find svg { stroke: currentColor; }
kbd {
  font: 600 11px/1 "IBM Plex Mono", monospace; padding: 3px 6px; border-radius: 5px;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-soft);
}
@media (hover: none) { .chip-find kbd { display: none; } }

/* The compass. Only one ever shows. Where 3D will run, the canvas draws it
   (js/hero3d.js) and fades in where it stands once its first frame is ready;
   until then the place is left empty (three-wait). The flat dial is the
   fallback, for where 3D is off or did not arrive in time (three-off).
   The canvas reaches a little past the compass's box so the plaques at east
   and west have room. */
.hero-visual { position: relative; z-index: 1; width: min(100%, 520px); justify-self: center; }
.hero-compass { position: relative; aspect-ratio: 1; }
.hero-canvas {
  position: absolute; left: -6%; top: -6%; width: 112%; height: 112%;
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.9s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dial-svg {
  position: absolute; inset: 6%; width: 88%; height: 88%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 24px 30px rgba(15, 23, 42, 0.22)); transition: opacity 0.6s ease;
}
.three-on .hero-canvas { opacity: 1; transform: none; }
.three-wait .dial-svg, .three-on .dial-svg { opacity: 0; transition: none; }

/* The name of each tool, under its plaque on the 3D compass. They are real
   links, placed every frame over the plaque they belong to, so the keyboard
   reaches the plaques too, and focus lifts them as hover does. */
.plaques { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.plaque {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px;
  font: 600 12.5px/1 "IBM Plex Sans", system-ui, sans-serif; white-space: nowrap; color: var(--ink);
  background: color-mix(in srgb, var(--surface-raised) 84%, transparent);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  opacity: 0; will-change: translate; transform: translateX(-50%);
  transition: opacity 0.6s ease calc(0.35s + var(--i, 0) * 0.08s), background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* A finger-sized target around the small label. */
.plaque::before { content: ""; position: absolute; inset: -9px -4px; }
.plaque-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red-ink); flex: none; }
.three-on .plaque { opacity: 1; }
.plaque.is-above { transform: translate(-50%, -100%); }
.plaque.is-on { background: var(--red-ink); border-color: var(--red-ink); color: #fff; transform: translateX(-50%) scale(1.06); }
.plaque.is-above.is-on { transform: translate(-50%, -100%) scale(1.06); }
:root[data-theme="dark"] .plaque.is-on { color: #1a0507; }
.plaque.is-on .plaque-dot { background: #FBBF24; }
.plaque:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }

.dial-face { fill: var(--surface-raised); stroke: var(--hairline); stroke-width: 1.5; }
.tick { stroke: var(--ink-faint); stroke-width: 1; }
.tick-major { stroke: var(--ink-muted); stroke-width: 1.6; }
.dial-north { fill: #FBBF24; }
.dial-letter {
  font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 15px;
  fill: var(--ink-muted); text-anchor: middle;
}
.dial-letter.is-north { fill: var(--red-ink); }
[data-needle] { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(40deg); }
.needle-n { fill: var(--red-ink); }
.needle-s { fill: var(--ink-faint); }
.dial-cap { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 2.5; }

/* The readout is set like an instrument's: a bearing in figures over the tool
   it points at. */
.dial-readout { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; text-align: center; }
.dial-bearing {
  font: 600 26px/1 "IBM Plex Mono", monospace; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.dial-target { font-size: 15px; color: var(--ink-soft); min-height: 1.4em; }

/* Behind it all: a soft red light, a dotted grid, and rings that turn slowly. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 62% at 76% 46%, rgba(194, 27, 39, 0.16), transparent 70%),
    radial-gradient(30% 40% at 12% 90%, rgba(251, 191, 36, 0.12), transparent 70%);
}
:root[data-theme="dark"] .hero-glow {
  background:
    radial-gradient(46% 62% at 76% 46%, rgba(248, 113, 113, 0.18), transparent 70%),
    radial-gradient(30% 40% at 12% 90%, rgba(251, 191, 36, 0.08), transparent 70%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 85% at 72% 46%, #000, transparent 78%);
  mask-image: radial-gradient(70% 85% at 72% 46%, #000, transparent 78%);
}
.hero-rings {
  position: absolute; width: min(1100px, 130vw); aspect-ratio: 1; right: -12%; top: 50%; margin-top: min(-550px, -65vw);
  fill: none; stroke: var(--hairline); stroke-width: 1;
}
.hero-rings { will-change: transform; }
.hero-rings .dash { stroke-dasharray: 2 9; stroke: var(--ink-faint); }
.hero-orbit { animation: spin 90s linear infinite; }
.hero-rings .dot { fill: var(--red-ink); stroke: none; }
.hero-rings .dot-amber { fill: #FBBF24; stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* "Scroll", with an arrow that nudges downwards; a link to the tools. It
   steps away once you have started scrolling (js/motion.js). */
.scroll-cue {
  position: absolute; left: 50%; bottom: 18px; z-index: 1; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px;
  font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  transition: color 0.2s, opacity 0.35s, visibility 0.35s;
}
.scroll-cue svg {
  width: 18px; height: 18px; fill: none; stroke: var(--red-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  animation: cue 2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.scroll-cue:hover { color: var(--ink); }
.scroll-cue:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
.scroll-cue.is-gone { opacity: 0; visibility: hidden; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
html { scroll-behavior: smooth; }

/* A hairline of progress across the top, drawn by the browser from the scroll
   position (browsers without scroll-driven animations simply don't show it). */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress {
    display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none;
    background: linear-gradient(90deg, var(--red-ink), #FBBF24); transform-origin: 0 50%;
    animation: grow linear both; animation-timeline: scroll(root);
  }
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.section-label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 4px;
  font: 600 12px/1 "IBM Plex Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* ---- Cards: a light that follows the pointer, a little tilt, a bearing ---- */
.cards-area { padding-top: 8px; padding-bottom: 72px; }
.card {
  position: relative; transform-style: preserve-3d;
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.18s ease-out;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(194, 27, 39, 0.11), transparent 62%);
  transition: opacity 0.3s;
}
:root[data-theme="dark"] .card::before {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(248, 113, 113, 0.16), transparent 62%);
}
.card:hover::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    box-shadow: 0 22px 44px -18px rgba(15, 23, 42, 0.35), 0 4px 10px rgba(15, 23, 42, 0.08);
  }
}
.card-bearing {
  position: absolute; top: 12px; right: 12px; z-index: 1; padding: 4px 9px; border-radius: 999px;
  font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.04em; color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-raised) 80%, transparent); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ---- Bearing pill: the compass follows you once the hero has scrolled away -- */
.hud {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 6px 16px 6px 6px; border-radius: 999px; cursor: pointer; color: var(--ink);
  background: color-mix(in srgb, var(--surface-raised) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--hairline); box-shadow: 0 14px 34px -10px rgba(15, 23, 42, 0.4);
  font: inherit; -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, 28px); opacity: 0; pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s;
}
.hud.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.hud:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.hud-dial { width: 40px; height: 40px; flex: none; overflow: visible; }
.hud-text { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.hud-bearing { font: 600 13px/1 "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.hud-target { font-size: 13px; line-height: 1; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.hud-find { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; margin-left: 4px; }

/* ---- Tool finder (js/palette.js) ------------------------------------------ */
.palette {
  position: fixed; inset: 0; margin: 12vh auto auto; padding: 0; border: 0; background: none; color: var(--ink);
  width: min(580px, calc(100vw - 24px)); max-height: 76vh; overflow: visible;
}
.palette::backdrop { background: rgba(8, 12, 20, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.palette[open] { animation: pal-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.palette[open]::backdrop { animation: fade 0.22s ease-out; }
@keyframes pal-in { from { opacity: 0; transform: translateY(-10px) scale(0.97); } }
@keyframes fade { from { opacity: 0; } }
.pal-box {
  background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.6);
}
.pal-search { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.pal-search svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
.pal-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink);
  font: 500 17px/1.2 "IBM Plex Sans", system-ui, sans-serif;
}
.pal-search input::placeholder { color: var(--ink-muted); }
.pal-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow: auto; }
.pal-group { padding: 10px 10px 4px; font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.pal-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; cursor: pointer;
}
.pal-item[aria-selected="true"] { background: var(--red-tint); }
.pal-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--red-tint); color: var(--red-ink);
}
.pal-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pal-name { font-weight: 600; font-size: 15px; }
.pal-sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.pal-meta { margin-left: auto; padding-left: 8px; font: 500 12px/1 "IBM Plex Mono", monospace; color: var(--ink-muted); white-space: nowrap; }
.pal-empty { padding: 28px 12px; text-align: center; color: var(--ink-soft); }
.pal-foot {
  display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--divider);
  font-size: 12px; color: var(--ink-muted);
}
.pal-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Leaving for a tool: a red iris opens from where you tapped ----------- */
.iris {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: all;
  background: linear-gradient(135deg, var(--header-from), var(--header-to)); clip-path: circle(0 at 50% 50%);
}
.iris svg { width: 96px; height: 96px; color: #fff; opacity: 0; animation: iris-mark 0.5s ease-out 0.18s forwards; }
@keyframes iris-mark { from { opacity: 0; transform: scale(0.7) rotate(-40deg); } to { opacity: 1; transform: none; } }

/* Switching theme: the new one spreads from the toggle (js/theme.js). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---- Smaller screens ------------------------------------------------------ */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; padding-top: 28px; padding-bottom: 36px; }
  .hero-visual { width: min(86vw, 380px); }
  .hero-rings { right: 50%; margin-right: min(-65vw, -550px); top: auto; bottom: -10%; margin-top: 0; }
  .scroll-cue { display: none; }
  .intro { font-size: 17px; margin-top: 18px; }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(38px, 11.5vw, 52px); }
  .eyebrow { font-size: 11px; margin-bottom: 14px; }
  .chips { gap: 8px; margin-top: 22px; }
  .chip { padding: 10px 14px 10px 10px; font-size: 13.5px; }
  .cards-area { padding-bottom: 96px; }
  /* Room at the sides for the names under the east and west plaques. */
  .hero-visual { width: min(78vw, 340px); }
  .plaque { font-size: 11.5px; padding: 5px 9px 5px 8px; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eyebrow-dot, .hero-orbit, .scroll-cue svg { animation: none; }
  .hero-canvas, .dial-svg, .chip, .hud, .card::before, .plaque, .scroll-cue { transition: none; }
  .hero-canvas { transform: none; }
  .plaque.is-on { transform: translateX(-50%); }
  .plaque.is-above.is-on { transform: translate(-50%, -100%); }
  .palette[open], .palette[open]::backdrop, .iris svg { animation: none; }
  .iris svg { opacity: 1; }
  .card, .card:hover { transform: none !important; }
  .progress { display: none !important; }
}