/* Mimir — landing page
 *
 * Tokens are copied from the app's src/index.css on purpose. The site and the
 * product should not look like two different things, and a visitor who
 * downloads should recognise what opens.
 *
 * No web fonts. A system stack renders instantly, needs no licence, and makes
 * no third-party request -- which matters more than usual for a page whose
 * whole argument is that nothing about you gets sent anywhere.
 */

@import "./tokens.css";

:root {
  /* Short local aliases for the shared tokens. The page reads better as
     var(--accent) than var(--mimir-accent) when almost every rule uses one,
     and this is the only place the two vocabularies meet -- change a value in
     design-system/tokens.css and it lands here automatically. */
  --bg: var(--mimir-bg);
  --bg-depth: var(--mimir-bg-depth);
  --surface: var(--mimir-surface);
  --surface-soft: var(--mimir-surface-soft);
  --surface-muted: var(--mimir-surface-muted);
  --text: var(--mimir-text);
  --text-muted: var(--mimir-text-muted);
  --text-subtle: var(--mimir-text-subtle);
  --border: var(--mimir-border);
  --border-strong: var(--mimir-border-strong);
  --accent: var(--mimir-accent);
  --accent-soft: var(--mimir-accent-soft);

  /* Named for what they mean, not what they look like. These three are the
     product's severity vocabulary and the buckets below use them to say
     Important / Review / Ignore. */
  --red: var(--mimir-severity-important);
  --amber: var(--mimir-severity-review);
  --slate: var(--mimir-severity-ignore);

  --ease: var(--mimir-ease);
  --font: var(--mimir-font);
  --mono: var(--mimir-font-mono);

  /* Page layout only -- these have no meaning inside the app. */
  --wrap: 1120px;
  --wrap-narrow: 760px;
}

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

html {
  scroll-behavior: smooth;
  /* The sticky header would otherwise sit on top of an anchored heading. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-muted);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #0b0d0c;
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 28px;
}
.wrap--narrow {
  max-width: var(--wrap-narrow);
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 28px;
  background: rgba(5, 6, 6, 0.6);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--border);
  background: rgba(5, 6, 6, 0.86);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-size: 17px;
}
.brand img {
  border-radius: 6px;
}

.nav nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
}
.nav nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 15px;
  transition: color 0.2s var(--ease);
}
.nav nav a:hover {
  color: var(--text);
}

/* ------------------------------------------------------------ buttons ---- */

.button {
  --btn-bg: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 550;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.button:hover {
  transform: translateY(-2px);
}
.button:active {
  transform: translateY(0);
}

.button--primary {
  --btn-bg: var(--accent);
  color: #0a0d0b;
  border-color: transparent;
  box-shadow: 0 10px 34px -14px rgba(157, 183, 170, 0.75);
}
.button--primary:hover {
  box-shadow: 0 18px 44px -14px rgba(157, 183, 170, 0.85);
}

.button--ghost:hover {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

.button--small {
  padding: 9px 18px;
  font-size: 14px;
  background: var(--surface-soft);
}
.button--small:hover {
  background: var(--surface-muted);
}

.button__meta {
  font-size: 12px;
  font-weight: 450;
  opacity: 0.7;
  letter-spacing: 0.01em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.actions--center {
  justify-content: center;
}

/* --------------------------------------------------------------- hero ---- */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding: 120px 0 140px;
  overflow: hidden;
}

/* ---- ambient layers ---- */

/* Two fields on deliberately mismatched periods (34s and 47s) so the pair
   never returns to the same arrangement -- a single looping gradient reads as
   a loop within about a minute of looking at it. */
.hero__aurora {
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hero__aurora--a {
  background: radial-gradient(38% 42% at 50% 50%, rgba(157, 183, 170, 0.15) 0%, transparent 70%);
  animation: drift-a 34s ease-in-out infinite;
}
.hero__aurora--b {
  background: radial-gradient(34% 38% at 50% 50%, rgba(244, 241, 233, 0.05) 0%, transparent 72%);
  animation: drift-b 47s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate(14%, -8%) scale(1); opacity: 0.85; }
  50%      { transform: translate(-8%, 10%) scale(1.18); opacity: 1; }
}
@keyframes drift-b {
  0%, 100% { transform: translate(-16%, 6%) scale(1.1); opacity: 0.7; }
  50%      { transform: translate(12%, -10%) scale(1); opacity: 1; }
}

/* A single pass on load. It suggests the thing the product does -- reading
   straight through a week of footage -- and then gets out of the way. Looping
   it would turn the page into a screensaver. */
.hero__sweep {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(157, 183, 170, 0.07) 48%,
    rgba(244, 241, 233, 0.05) 50%,
    rgba(157, 183, 170, 0.07) 52%,
    transparent 62%
  );
  background-size: 260% 100%;
  animation: sweep 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.35s both;
}
@keyframes sweep {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* Barely-there structure under the glow, so the black is not flat. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(244, 241, 233, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 233, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 72%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}

.hero__copy {
  min-width: 0;
}

/* ---- micro-interactions ----
 *
 * Small, and all of them attached to something the reader is already doing:
 * arriving at a section, or pointing at a control. Motion that fires on its
 * own timetable competes with the copy.
 */

/* The kicker's rule draws itself in as its section arrives. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.kicker::after {
  content: "";
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--accent), transparent);
  transition: width 0.9s var(--ease) 0.15s;
}
.is-visible.kicker::after,
.is-visible .kicker::after {
  width: 52px;
}

/* Step numbers brighten as the row arrives, so the four steps read in order
   rather than all at once. */
.step__n {
  transition: color 0.6s var(--ease), letter-spacing 0.6s var(--ease);
}
.step.is-visible .step__n {
  color: var(--accent);
  letter-spacing: 0.16em;
}

/* The primary button breathes, very slightly. It is the only thing on the
   page asking to be clicked, and it stops on hover so it is never moving
   under the pointer. */
.button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(157, 183, 170, 0.42);
  animation: breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
.button--primary {
  position: relative;
}
.button--primary:hover::after {
  animation-play-state: paused;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157, 183, 170, 0.3); }
  50%      { box-shadow: 0 0 0 9px rgba(157, 183, 170, 0); }
}

.eyebrow {
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.7rem, 6.4vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
}

.lede {
  margin: 26px auto 0;
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: var(--text-muted);
}

.hero__foot {
  margin: 26px 0 0;
  font-size: 14px;
  color: var(--text-subtle);
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 1;
  width: 22px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.scroll-hint span {
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-subtle);
  animation: nudge 2s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(9px); opacity: 1; }
}

/* ----------------------------------------------------------- sections ---- */

.section {
  padding: 118px 0;
  position: relative;
}
.section--tight {
  padding: 84px 0;
}
.section--alt {
  background: var(--bg-depth);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kicker {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.h2 {
  margin: 0 0 22px;
  font-size: clamp(1.9rem, 3.9vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 600;
  max-width: 20ch;
}
.h2--center {
  max-width: none;
  text-align: center;
}

.body {
  margin: 0 0 20px;
  max-width: 62ch;
  color: var(--text-muted);
  font-size: 1.06rem;
}
.body strong {
  color: var(--text);
  font-weight: 600;
}
.body--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}


/* ------------------------------------------------------------ buckets ---- */

.buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
}

.bucket {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  min-height: 230px;
}

.bucket__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
}
.dot--red { background: var(--red); }
.dot--amber { background: var(--amber); }
.dot--slate { background: var(--slate); }

.bucket__body {
  margin: 20px 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  align-content: start;
}
.bucket__body--dense {
  grid-template-columns: repeat(4, 1fr);
}

.chip {
  height: 26px;
  border-radius: 6px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}
.js .chip {
  opacity: 0;
  transform: translateY(-10px) scale(0.94);
}
.bucket--important .chip {
  background: rgba(196, 119, 114, 0.2);
  border-color: rgba(196, 119, 114, 0.35);
  height: 34px;
}
.bucket--review .chip {
  background: rgba(195, 160, 98, 0.14);
  border-color: rgba(195, 160, 98, 0.24);
}

/* Chips settle into their pile when the block scrolls in. It is the product's
   one idea, so it is worth showing rather than only describing. */
.buckets.is-sorting .chip {
  animation: settle 0.55s var(--ease) forwards;
  animation-delay: calc(var(--i) * 55ms + 120ms);
}
@keyframes settle {
  to { opacity: 1; transform: none; }
}

.bucket__note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--text-subtle);
}

/* -------------------------------------------------------------- steps ---- */

.steps {
  list-style: none;
  margin: 54px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 28px;
}
.step {
  border-top: 1px solid var(--border-strong);
  padding-top: 22px;
}
.step__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.step h3 {
  margin: 14px 0 10px;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.97rem;
}

/* -------------------------------------------------------------- cards ---- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 16px;
  margin-top: 42px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.card h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 600;
}
.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* -------------------------------------------------------------- specs ---- */

.specs {
  margin: 0;
}
.specs > div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.specs > div:last-child {
  border-bottom: 0;
}
.specs dt {
  font-weight: 600;
  font-size: 12.8px;
  color: var(--text);
}
.specs dd {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.8px;
  line-height: 1.6;
}

/* --------------------------------------------------------- disclosure ---- */

/* Requirements and caveats, one click from the download button. Quiet enough
   not to stand between someone and trying it, prominent enough that nobody
   can say they were not told. */
.disclosure {
  margin: 46px auto 0;
  max-width: 640px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(244, 241, 233, 0.014);
}

.disclosure summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
  font-weight: 550;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.disclosure summary::-webkit-details-marker {
  display: none;
}
.disclosure summary:hover {
  color: var(--text);
}
.disclosure summary svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.disclosure[open] summary svg {
  transform: rotate(180deg);
}
.disclosure[open] summary {
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.disclosure__body {
  padding: 6px 20px 20px;
}

.disclosure__note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.disclosure__note h3 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.disclosure__note p {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.6;
  color: var(--text-muted);
}
.disclosure__note a {
  color: var(--accent);
}

/* ---------------------------------------------------------------- cta ---- */

.cta {
  padding: 130px 0 140px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(157, 183, 170, 0.09) 0%, transparent 62%),
    var(--bg-depth);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------- footer ---- */

.footer {
  padding: 44px 0 60px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer__row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 26px;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.footer__brand img {
  border-radius: 5px;
}
.footer__links {
  margin-left: auto;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s var(--ease);
}
.footer__links a:hover {
  color: var(--text);
}
.footer__legal {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 13px;
  max-width: 78ch;
}

/* ------------------------------------------------------------- reveal ---- */

/* Hiding is scoped to .js, which a blocking inline script in <head> sets
 * before first paint. Two things fall out of that, both deliberate:
 *
 * - Without JavaScript the page is simply a normal, fully visible document.
 *   Nothing is ever stuck at opacity 0 because a script failed to load.
 * - There is no flash. The alternative -- ship visible, then hide from a
 *   deferred script -- paints the content and snatches it away.
 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.75s var(--ease) var(--delay, 0ms),
    transform 0.75s var(--ease) var(--delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
  .buckets {
    grid-template-columns: 1fr;
  }
  .bucket {
    min-height: 0;
  }
  .bucket__body,
  .bucket__body--dense {
    grid-template-columns: repeat(6, 1fr);
  }
  .specs > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .nav {
    padding: 12px 18px;
    gap: 14px;
  }
  .nav nav {
    display: none;
  }
  .wrap,
  .hero__inner {
    padding: 0 20px;
  }
  .hero {
    min-height: 0;
    padding: 92px 0 104px;
  }
  .section {
    padding: 80px 0;
  }
  .cta {
    padding: 92px 0 100px;
  }
  .actions .button {
    width: 100%;
  }
  .counter__arrow {
    transform: rotate(90deg);
    width: 34px;
  }
  .scroll-hint {
    display: none;
  }
}

/* --------------------------------------------------- reduced motion ------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .chip {
    opacity: 1;
    transform: none;
  }
  /* The ambient layers are the one thing the blanket rules above do not fully
     settle: zeroing their duration leaves them frozen at whatever keyframe
     they start on, which for the sweep is a bright band across the hero. */
  .hero__aurora,
  .hero__sweep {
    animation: none;
    opacity: 0.6;
  }
  .hero__sweep {
    background: none;
  }
  .kicker::after {
    width: 52px;
  }
}

/* Shown only on devices that cannot run the installer -- see the Windows-only
   block in main.js. */
.platform-note {
  margin: 14px auto 0;
  max-width: 42ch;
  text-align: center;
  font-size: 0.9rem;
  color: var(--mimir-text-subtle);
}

.button.is-disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}