/* =====================================================================
   manifesto.css

   The manifesto performs the product instead of describing it: the first
   half is dark and crowded (the inbox you have), then it goes quiet and
   light (the inbox you want). One idea per screen, ultra-short heading,
   two lines under it, nothing else. Reading the whole thing is faster
   than clearing one morning of mail, which is the point.
   ===================================================================== */

.mf-body {
  overflow: hidden;
  background: #0e0f12;
}

/* thin reading progress line, the only chrome */
.mf-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--amber);
  z-index: 200;
  transition: width 0.15s linear;
}

.mf-nav {
  transition: color 0.5s var(--ease);
}
.mf-nav .mi {
  color: inherit;
  opacity: 0.74;
}
.mf-nav .mi:hover {
  opacity: 1;
}
/* over the dark half the whole nav flips to white */
.mf-body.on-dark .mf-nav,
.mf-body.on-dark .nav-toggle {
  color: #fff;
}
.mf-body.on-dark .nav-brand img.mark,
.mf-body.on-dark .nav-brand img.word {
  filter: brightness(0) invert(1);
}
@media (max-width: 760px) {
  /* the panel keeps its own light surface on both halves */
  .mf-nav .mi {
    color: var(--ink);
    opacity: 1;
  }
}

/* scene counter, bottom right */
.mf-count {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 200;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  opacity: 0.55;
  transition: color 0.5s var(--ease);
}
.mf-count i {
  font-style: normal;
  opacity: 0.5;
}
.mf-body.on-dark .mf-count {
  color: #fff;
}

/* =====================================================================
   Scenes
   ===================================================================== */

.mf-deck {
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}
.mf-deck::-webkit-scrollbar {
  display: none;
}

.scene {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  padding: calc(var(--nav-h) + 20px) clamp(24px, 8vw, 130px)
    clamp(60px, 10vh, 110px);
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.scene.dark {
  background: #0e0f12;
  color: #fff;
}
/* the flip from noise to calm is the argument, so give it a beat */
.scene.turn {
  background: linear-gradient(180deg, #fffdf8 0%, #fff8e8 100%);
}
.scene.end {
  background:
    radial-gradient(70% 55% at 80% 8%, #fbe3a6 0%, rgba(251, 227, 166, 0) 62%),
    linear-gradient(150deg, #fffdf8 0%, #fdf0cd 100%);
}

.scene-in {
  width: min(1000px, 100%);
  margin: 0 auto;
}

.kicker {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: clamp(20px, 3vh, 34px);
}

/* the type is the design: as big as it can be without breaking.
   colour must follow the scene, so it inherits rather than sets its own
   (the shared h1 rule in site.css would otherwise pin it to ink) */
.huge {
  color: inherit;
  font-size: clamp(38px, 7.4vw, 108px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.line {
  margin-top: clamp(22px, 3.4vh, 40px);
  max-width: 30ch;
  font-family: var(--f-ui);
  font-size: clamp(17px, 1.9vw, 27px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--ink-2);
}
.scene.dark .line {
  color: rgba(255, 255, 255, 0.66);
}

.end-mark {
  width: clamp(44px, 4vw, 60px);
  height: auto;
  margin-bottom: clamp(20px, 3vh, 32px);
}
.scene.end .line {
  max-width: 26ch;
}
.scene.end .hero-actions {
  margin-top: clamp(30px, 4.5vh, 46px);
}

/* small tick under the first scene, the only "keep going" hint */
.scroll-tick {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 6vh, 60px);
  width: 1px;
  height: 44px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  animation: tick 2.4s var(--ease) infinite;
}
@keyframes tick {
  0%,
  100% {
    opacity: 0.25;
    transform: scaleY(0.6);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* =====================================================================
   The noise wall — the one scene that shows instead of tells
   ===================================================================== */

.noisy .noise {
  position: absolute;
  inset: -4% -2%;
  z-index: 0;
  font-family: var(--f-ui);
  font-size: 13px;
  line-height: 2.05;
  color: rgba(255, 255, 255, 0.13);
  letter-spacing: 0.01em;
  column-count: 3;
  column-gap: 34px;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  /* clear a hole where the headline sits, so the wall stays background */
  -webkit-mask-image: radial-gradient(
    70% 62% at 36% 52%,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.35) 46%,
    #000 82%
  );
  mask-image: radial-gradient(
    70% 62% at 36% 52%,
    rgba(0, 0, 0, 0.03) 0%,
    rgba(0, 0, 0, 0.35) 46%,
    #000 82%
  );
}
/* the one line in the wall that actually needs you */
.noisy .noise b {
  font-weight: 500;
  color: var(--amber);
}
.noisy .scene-in {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   Reveal
   ===================================================================== */

.scene-in > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s var(--ease), transform 0.85s var(--ease);
}
.scene.live .scene-in > * {
  opacity: 1;
  transform: none;
}
.scene.live .scene-in > *:nth-child(2) {
  transition-delay: 0.08s;
}
.scene.live .scene-in > *:nth-child(3) {
  transition-delay: 0.16s;
}
.scene.live .scene-in > *:nth-child(4) {
  transition-delay: 0.24s;
}
.noise {
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.scene.live .noise {
  opacity: 1;
}

/* =====================================================================
   Responsive + motion
   ===================================================================== */

@media (max-width: 700px) {
  .line {
    max-width: 26ch;
    font-size: 17px;
  }
  /* a radial hole is too small to work on a narrow screen, so clear a
     horizontal band across the middle instead */
  .noisy .noise {
    column-count: 2;
    font-size: 11.5px;
    line-height: 2.1;
    color: rgba(255, 255, 255, 0.1);
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      rgba(0, 0, 0, 0.05) 32%,
      rgba(0, 0, 0, 0.05) 68%,
      #000 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      rgba(0, 0, 0, 0.05) 32%,
      rgba(0, 0, 0, 0.05) 68%,
      #000 100%
    );
  }
  .mf-count {
    bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-in > *,
  .noise {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-tick {
    animation: none;
  }
  .mf-deck {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}