/* cohere2-fixes.css — repairs for stripped-JS GSAP/scroll artifacts in the
   static clone. Imported last so it wins the cascade. Loaded after the scoped
   layout/color sheets. Content is untouched; this only restores visibility and
   normal flow that the source's (removed) scroll-driven JS used to provide. */

/* 1. The emit referenced `animation: fadeInUp ... forwards` on ~30 reveal
      elements (motion-safe:opacity-0 → fade up) but never bundled the keyframe,
      so every one stayed at opacity:0 forever. Define it; `forwards` then holds
      the visible end state. */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Belt-and-suspenders: if a no-preference client somehow skips the animation,
   keep the reveal elements visible rather than blank. */
@media (prefers-reduced-motion: no-preference) {
  .cohere2-clone .motion-safe\:opacity-0 { animation-fill-mode: forwards; }
}

/* 2. The word-by-word heading reveal ("Empower your workforce…") froze each word
      at inline opacity:0.4 (a GSAP scroll target). Restore full opacity. */
.cohere2-clone .bottom-words [aria-hidden="true"] { opacity: 1 !important; }

/* 3. GSAP pin-spacers carried frozen inline width/height from the capture
      moment, forcing oversized boxes once the pin JS is gone. Let content size
      them so pinned/stacked sections flow normally. */
.cohere2-clone [class*="pin-spacer-"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

/* 3b. Card-stack scroll effect (Discover / Create / Automate). The source used a
       GSAP "stacking" pin; the JS is stripped, so the three cards were just
       static vertical tiles. Re-create the effect with pure CSS sticky: each
       card sticks under the header with a small incremental top offset, so as
       you scroll the later cards slide up and stack over the earlier ones. The
       cards are opaque (dark green) so each fully covers the one beneath. */
.cohere2-clone [class*="pin-spacer-stacking-"] {
  position: sticky !important;
  align-self: start;
  inset: auto !important;          /* clear the captured inline inset shorthand */
}
/* top must be !important to beat the GSAP-captured inline `inset:auto`. */
.cohere2-clone [class*="-card-0"] { top: 96px !important; }
.cohere2-clone [class*="-card-1"] { top: 120px !important; }
.cohere2-clone [class*="-card-2"] { top: 144px !important; }
/* Extend the cards' shared container so the last card reaches its sticky point
   and all three dwell stacked before they scroll away together. A sticky box is
   confined to its containing block's CONTENT box, so padding does not extend the
   range — an in-flow ::after spacer does. */
.cohere2-clone div:has(> [class*="pin-spacer-stacking-"]) { position: relative; }
.cohere2-clone div:has(> [class*="pin-spacer-stacking-"])::after {
  content: "";
  display: block;
  height: 90vh;
}

/* 4. Light-background sections are marked `text-black`, but the app shell runs
      under data-theme="dark", which remaps the --black token to near-white. The
      host rule `.text-black{color:var(--black)!important}` then paints "black
      text" near-white — invisible on these cream sections. Every text-black
      section in this clone is verified light-bg, so re-pin --black to a real
      dark value within those subtrees. We re-pin the token (not a literal
      inherited color) so inner dark cards that opt into text-pureWhite stay
      white; only var(--black) consumers (the text-black element + h1–h6) go
      dark. */
.cohere2-clone .text-black { --black: #1d1d1d; }

/* 4b. Some light (text-black) sections embed dark cards (the Discover/Create/
       Automate tiles use bg-pureWhite, which the dark theme renders as the dark
       green surface). Their headings rely on var(--black) being light. Re-pin
       --black back to light inside those dark surfaces so their text stays
       white. */
.cohere2-clone .bg-pureWhite,
.cohere2-clone .bg-surface-inverse,
.cohere2-clone .bg-pureBlack { --black: #f5f5f7; }

/* 5. The three stacked cards (Discover / Create / Automate) each carry the
      `border` utility (border-width:1px) plus an inline border-color
      (rgb(0,160,77)), but this app's globals omit Tailwind's preflight — which
      normally sets `border-style:solid` on every element — so border-style stays
      `none` and the green hairline never paints. The source site renders it (its
      own CSS ships preflight). Re-assert solid so the cards show their border. */
.cohere2-clone [class*="pin-spacer-stacking-"] > .border {
  border-style: solid !important;
}

/* 6. A two-column section's right image card (`relative overflow-hidden
      rounded-lg h-64 md:h-[560px]`) is laid out at full viewport width but
      positioned to the right of the text column, so it overflows ~880px past
      the viewport. The source's JS constrained the grid; stripped here, it
      leaves a horizontal scrollbar pinned along the bottom of the page (plus a
      dark void on the right). Clip horizontal overflow at the clone root to
      remove the scrollbar. Use `clip` (not `hidden`) so the root does NOT
      become a scroll container — `hidden` would break the sticky card-stack. */
.cohere2-clone {
  overflow-x: clip;
}