/* ============================================================
   FLOWSPARK HERO — optical sequence
   Scroll-driven sticky hero ported from the Weekone studio site
   and re-skinned onto the Flowspark premium system: ink ground,
   one electric indigo accent, hairline rules, mono micro-labels,
   flush full-bleed frame (no card chrome, no shadows).
   Loaded after premium.css so the tokens in :root are available.
   ============================================================ */

.fs-hero {
  --fsh-ground: #0b0b0f;
  --fsh-accent: var(--p-accent, #4b5df5);
  --fsh-accent-deep: var(--p-accent-deep, #3a4be0);
  --fsh-accent-soft: var(--p-accent-soft, #a5b0ff);
  --fsh-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  height: 360svh;
  padding: 0;
  background: var(--fsh-ground);
}

.fs-hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}

.fs-hero-frame {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: var(--fsh-ground);
  border-radius: 0;
}

/* No border box and no base hairline: the frame is pinned for the whole
   scroll, so any edge on it reads as a stray line across the viewport
   rather than a section boundary. The dark-to-light handoff is the edge. */

/* ---------- the sequence artwork ---------- */
.fs-hero-art {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 27%;
  display: block;
  overflow: hidden;
}

.fs-hero-art img,
.fs-hero-art canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  /* cooler and quieter than the source grade so the warm bench light
     reads as ink-neutral next to the indigo accent */
  filter: saturate(0.82) brightness(0.84) contrast(1.05);
  transition: filter 0.35s ease;
}

.fs-hero-art .fs-sequence-poster {
  opacity: 1;
}

.fs-hero-art .fs-sequence-canvas {
  opacity: 0;
  transition: opacity 0.12s ease, filter 0.35s ease;
}

.fs-hero-art .fs-sequence-canvas.is-ready {
  opacity: 1;
}

.fs-hero-art .fs-mobile-frame {
  display: none;
}

/* indigo bloom on the focal point — ties the render to the brand accent */
.fs-hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background: radial-gradient(
      58% 46% at 76% 52%,
      rgba(75, 93, 245, 0.34),
      transparent 68%
    ),
    linear-gradient(90deg, transparent 52%, rgba(75, 93, 245, 0.12));
  transition: opacity 0.5s ease;
}

/* ink veil: dissolves the render into the copy column and the page ground */
.fs-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      #0b0b0f 0%,
      rgba(11, 11, 15, 0.9) 9%,
      rgba(11, 11, 15, 0.2) 35%,
      transparent 58%
    ),
    /* bottom resolves all the way to the ground so the frame's lower edge
       hands off seamlessly into the ink proof band below the hero */
    linear-gradient(0deg, #0b0b0f 0%, rgba(11, 11, 15, 0.74) 11%, transparent 42%),
    radial-gradient(circle at 72% 51%, transparent 0 28%, rgba(11, 11, 15, 0.2) 72%);
}

/* stage grade: the bench warms and resolves as the story advances */
.fs-hero-frame.stage-0 .fs-hero-art img,
.fs-hero-frame.stage-0 .fs-hero-art canvas {
  filter: saturate(0.6) brightness(0.8) contrast(1.05);
}

.fs-hero-frame.stage-1 .fs-hero-art img,
.fs-hero-frame.stage-1 .fs-hero-art canvas {
  filter: saturate(0.7) brightness(0.84) contrast(1.05);
}

.fs-hero-frame.stage-2 .fs-hero-art img,
.fs-hero-frame.stage-2 .fs-hero-art canvas {
  filter: saturate(0.8) brightness(0.88) contrast(1.06);
}

.fs-hero-frame.stage-3 .fs-hero-art img,
.fs-hero-frame.stage-3 .fs-hero-art canvas {
  filter: saturate(0.92) brightness(0.92) contrast(1.07);
}

.fs-hero-frame.stage-2 .fs-hero-art::before {
  opacity: 0.55;
}

.fs-hero-frame.stage-3 .fs-hero-art::before {
  opacity: 1;
}

.fs-scan-line {
  position: absolute;
  z-index: 3;
  top: 10%;
  bottom: 10%;
  left: 51%;
  width: 1px;
  background: linear-gradient(transparent, var(--fsh-accent-soft), transparent);
  box-shadow: 0 0 22px rgba(165, 176, 255, 0.75);
  opacity: 0;
  transform: translateX(-10vw);
  transition: opacity 0.25s ease;
}

.fs-hero-frame.stage-1 .fs-scan-line {
  opacity: 0.8;
}

/* ---------- copy column: aligned to the page container ---------- */
.fs-hero-copy {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.fs-hero-copy .padding-global,
.fs-hero-copy .container-large {
  width: 100%;
}

.fs-hero-copy-inner {
  width: min(47vw, 40rem);
  pointer-events: auto;
}

.fs-hero .fs-hero-title {
  max-width: none;
  margin: 0;
  color: #fff;
  font-family: var(--p-sans, "Instrument Sans", sans-serif);
  font-size: clamp(2.9rem, 5vw, 4.5rem);
  font-weight: 550;
  letter-spacing: -0.034em;
  line-height: 1.02;
}

.fs-hero-title span {
  display: block;
  white-space: nowrap;
}

.fs-hero-title .accent {
  color: #fff;
}

.fs-hero-title .accent::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 1.35rem;
  background: var(--fsh-accent);
}

.fs-hero-body {
  position: relative;
  min-height: 5.75rem;
  margin-top: 1.75rem;
}

.fs-hero-body p {
  position: absolute;
  inset: 0;
  max-width: 38ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  opacity: 0;
  transform: translateY(10px);
  /* outgoing line clears fast so the two never read as one muddy block */
  transition: opacity 0.18s ease, transform 0.4s var(--fsh-ease);
}

.fs-hero-body p.is-active {
  opacity: 1;
  transform: none;
  /* incoming line waits for that clear, then rises */
  transition: opacity 0.42s ease 0.1s, transform 0.55s var(--fsh-ease) 0.1s;
}

.fs-hero-body strong {
  color: #fff;
  font-weight: 550;
}

.fs-hero .fs-hero-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  width: auto;
  margin-top: 1.5rem;
}

/* dark-band button convention: white primary, hairline ghost secondary */
.fs-hero .hero-button-wrapper .button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #fff;
  border-color: #fff;
  color: var(--p-ink, #0e0e12);
}

.fs-hero .hero-button-wrapper .button:hover {
  background-color: #e8e8ee;
  border-color: #e8e8ee;
  color: var(--p-ink, #0e0e12);
}

.fs-hero .hero-button-wrapper .button.is-ghost-on-dark {
  background-color: transparent;
  border-color: var(--p-line-on-dark, rgba(255, 255, 255, 0.14));
  color: #fff;
}

.fs-hero .hero-button-wrapper .button.is-ghost-on-dark:hover {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

.fs-hero .hero-button-wrapper .button .fs-arrow {
  transition: transform 0.2s var(--fsh-ease);
}

.fs-hero .hero-button-wrapper .button:hover .fs-arrow {
  transform: translateX(4px);
}

/* ---------- chapter rail, scene notes, result card ---------- */
.fs-chapters {
  opacity: 1;
  transition: opacity 0.3s ease;
  position: absolute;
  z-index: 6;
  right: 2.5rem;
  bottom: 1.9rem;
  display: flex;
  gap: 1.25rem;
}

.fs-chapter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.34);
  font-family: var(--p-mono, "Geist Mono", monospace);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.fs-chapter::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.fs-chapter.is-active {
  color: #fff;
}

.fs-chapter.is-active::before {
  background: var(--fsh-accent-soft);
  border-color: var(--fsh-accent-soft);
  box-shadow: 0 0 13px var(--fsh-accent-soft);
}

/* the chapter rail belongs to the pinned stage; retire it on release so it
   doesn't ride up into the nav on its way out (see js/hero-sequence.js) */
.fs-hero-frame.is-releasing .fs-chapters {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fs-scene-note {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--p-mono, "Geist Mono", monospace);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.42s var(--fsh-ease);
  pointer-events: none;
}

.fs-scene-note.is-visible {
  opacity: 1;
  transform: none;
}

.fs-scene-note::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--fsh-accent-soft);
}

.fs-scene-note::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fsh-accent-soft);
  box-shadow: 0 0 10px rgba(165, 176, 255, 0.8);
}

.fs-scene-note[data-note="proof"] {
  transition-delay: 0.1s;
}

.fs-scene-note[data-note="action"] {
  transition-delay: 0.2s;
}

.fs-scene-note[data-note="message"] {
  left: 49%;
  top: 35%;
}

.fs-scene-note[data-note="proof"] {
  left: 61%;
  top: 43%;
}

.fs-scene-note[data-note="action"] {
  left: 72%;
  top: 56%;
}

.fs-result-card {
  position: absolute;
  z-index: 6;
  right: 7%;
  top: 18%;
  width: 15rem;
  padding: 1.2rem 1.35rem;
  color: #fff;
  background: rgba(11, 11, 15, 0.78);
  border: 1px solid rgba(165, 176, 255, 0.32);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s ease, transform 0.55s var(--fsh-ease);
}

.fs-result-card.is-visible {
  opacity: 1;
  transform: none;
}

.fs-result-card .fs-cap {
  margin: 0;
  color: var(--fsh-accent-soft);
  font-family: var(--p-mono, "Geist Mono", monospace);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fs-result-card .fs-big {
  margin: 0.7rem 0 0;
  /* explicit: a Webflow global `p` rule beats the card's inherited white */
  color: #fff;
  font-size: 1.65rem;
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.fs-result-card .fs-small {
  margin: 0.55rem 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ---------- entrance: reuses the premium hero cadence ----------
   Cadence starts on the headline now that the eyebrow is gone, so every
   beat moves ~0.12s earlier and the hero doesn't sit blank on load. */
.fs-hero-frame.is-entering .fs-hero-title > span {
  opacity: 0;
  transform: translateY(0.45em);
  animation: fsh-line 0.78s var(--fsh-ease) forwards;
}

.fs-hero-frame.is-entering .fs-hero-title > span:nth-child(1) {
  animation-delay: 0.14s;
}

.fs-hero-frame.is-entering .fs-hero-title > span:nth-child(2) {
  animation-delay: 0.28s;
}

.fs-hero-frame.is-entering .fs-hero-title .accent::after {
  transform: scaleX(0);
  transform-origin: left;
  animation: fsh-rule 0.58s var(--fsh-ease) 0.42s forwards;
}

/* scoped to .is-active so a fast scroll during the intro can't leave the
   stage-0 line pinned open on top of the stage it scrolled to */
.fs-hero-frame.is-entering .fs-hero-body p[data-stage="0"].is-active {
  animation: fsh-copy 0.72s var(--fsh-ease) 0.5s both;
}

.fs-hero-frame.is-entering .fs-hero-action {
  opacity: 0;
  transform: translateY(18px);
  animation: fsh-action 0.72s var(--fsh-ease) 0.68s forwards;
}

@keyframes fsh-line {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fsh-rule {
  to {
    transform: scaleX(1);
  }
}

@keyframes fsh-copy {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fsh-action {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  72% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .fs-hero {
    height: auto;
  }

  .fs-hero-stage {
    position: relative;
    height: 900px;
    min-height: 0;
  }

  .fs-hero-copy {
    align-items: flex-start;
    padding-top: 8.5rem;
  }

  .fs-hero-copy-inner {
    width: 100%;
    max-width: 34rem;
  }

  .fs-hero .fs-hero-title {
    font-size: clamp(2.6rem, 8vw, 3.6rem);
  }

  .fs-hero-art {
    inset: 34% -22% 0 -12%;
  }

  .fs-hero-art img {
    object-position: 60% center;
    filter: saturate(0.86) brightness(0.78) contrast(1.05);
  }

  .fs-hero-art .fs-sequence-poster,
  .fs-hero-art .fs-sequence-canvas {
    display: none;
  }

  .fs-hero-art .fs-mobile-frame {
    display: block;
    opacity: 1;
  }

  .fs-hero-art::before {
    opacity: 0.7;
    background: radial-gradient(
      70% 44% at 62% 46%,
      rgba(75, 93, 245, 0.3),
      transparent 70%
    );
  }

  .fs-hero-art::after {
    background: linear-gradient(
        180deg,
        #0b0b0f 0%,
        rgba(11, 11, 15, 0.74) 23%,
        rgba(11, 11, 15, 0.03) 62%
      ),
      linear-gradient(90deg, rgba(11, 11, 15, 0.5), transparent 55%);
  }

  .fs-scan-line,
  .fs-chapters,
  .fs-scene-note {
    display: none;
  }

  .fs-result-card {
    right: 1.25rem;
    top: auto;
    bottom: 2.25rem;
  }
}

@media (max-width: 640px) {
  .fs-hero-stage {
    height: 840px;
  }

  .fs-hero-copy {
    padding-top: 7rem;
  }

  /* mobile only ever shows the resolved stage-3 line, so the box only needs
     to clear two wrapped lines — not the tallest of all four stages */
  .fs-hero-body {
    min-height: 5.25rem;
    margin-top: 1.4rem;
  }

  .fs-hero .fs-hero-title {
    font-size: clamp(2.25rem, 10.5vw, 2.9rem);
  }

  .fs-hero-title .accent::after {
    margin-top: 0.9rem;
  }

  .fs-hero-art {
    inset: 39% -38% 0 -28%;
  }

  .fs-hero-action {
    gap: 0.65rem;
  }

  .fs-result-card {
    left: 1.25rem;
    right: 1.25rem;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fs-hero *,
  .fs-hero *::before,
  .fs-hero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .fs-hero-frame.is-entering .fs-hero-title > span,
  .fs-hero-frame.is-entering .fs-hero-title .accent::after,
  .fs-hero-frame.is-entering .fs-hero-body p[data-stage="0"],
  .fs-hero-frame.is-entering .fs-hero-action {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}

/* ============================================================
   PROOF BAND — the logos strip as the hero's closing row
   Scoped with the adjacent sibling so only the strip directly
   after the hero is affected; the second .section_logos near
   the footer keeps its light treatment.

   This now mirrors the compact Weekone proof strip: paper ground,
   caption rail, small black marks, and a clean dark-to-light handoff.
   ============================================================ */
.fs-hero + .section_logos {
  background-color: #fff;
}

.fs-hero + .section_logos .padding-global {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.fs-hero + .section_logos .padding-global.padding-section-medium {
  padding-top: 1.875rem !important;
  padding-bottom: 2rem !important;
}

/* marks follow Weekone's smaller, quieter black treatment */
.fs-hero + .section_logos .marquee-logo {
  filter: grayscale(1) brightness(0);
  opacity: 0.45;
}

/* restore the paper edge fade from the Weekone strip */
.fs-hero + .section_logos .logos-marquee::before {
  display: block;
  background-image: linear-gradient(
    90deg,
    #fff,
    transparent 12%,
    transparent 88%,
    #fff
  );
}

@media (max-width: 767px) {
  .fs-hero + .section_logos .padding-global.padding-section-medium {
    padding-top: 1.625rem !important;
    padding-bottom: 1.875rem !important;
  }
}