/* ------------------------------------------------------------------
   swipe.fun overrides.
   The captured template ships its Webflow runtime and GSAP, but not the
   site's custom animation code. Anything that was meant to be revealed or
   removed by that code is stuck in its "before" state: the intro curtain
   never lifts, the scroll canvas never paints, and scroll-triggered
   sections never fade in. These rules put the page in its finished state.
   ------------------------------------------------------------------ */

/* 1. Intro / loader curtain: without the JS it covers the hero forever. */
.intro_holder,
.background_intro,
.canvas-wrapper,
.canvas_sequence { display: none !important; }

/* 2. The hero video overlay is stacked above the hero text (the intro JS
      re-ordered it). Put the video behind and make the panels above it
      transparent, or the section's own white background hides it. */
.hero_overlay { background-color: transparent !important; z-index: 0 !important; }
.hero-section.custom_hero { z-index: 2 !important; background-color: transparent !important; }
.hero_first_section { z-index: 2 !important; background-color: transparent !important; }
.gradient_background { background-color: #06060a !important; }

/* Hero CTA buttons start hidden, ready to be faded in. */
.cta-wrapper { opacity: 1 !important; }
.seqtrigger { background-color: #06060a !important; }

/* 3. Reveal everything the scroll animations would have faded in. */
.nb_chip,
.reveal-box,
.cover_grid,
.intro_visual,
.h144-em.is--original,
.h64-em.is--original,
.h114.is--original { opacity: 1 !important; }
.visual_wrapper { visibility: visible !important; }

/* 4. The nav is parked off-screen until the intro finishes; bring it back. */
.navbar { transform: none !important; }

/* 5. The promo card's stage held a video we removed; give it the poster so it
      is not an empty black box on desktop. */
.nb_stage {
  background-image: url("../cdn.prod.website-files.com/68e8e0120513ba12c5cd12e0/6a694848c595469e6d4f954f_nb-teaser-mobile-poster-p-1600.png");
  background-size: cover;
  background-position: 50% 50%;
  min-height: 26rem;
}
.nb_m_media { display: none !important; }

/* 6. The stack timeline was laid out for a pinned scroll animation: ~59em
      between cards and a 248em progress rail, with a Rive canvas in each card
      that the missing JS never paints. Compact it into a readable grid. */
.timeline_colum_left,
.timeline_colum_left.right {
  grid-row-gap: 1.25rem !important;
  row-gap: 1.25rem !important;
  padding-top: 0 !important;
  max-width: none !important;
}
.timeline_progress_main { display: none !important; }
.timeline_card_anim     { display: none !important; }  /* blank Rive canvas */
.timeline_connector     { display: none !important; }

/* Give each step a real card surface instead of floating in black. */
.colum_card_main {
  background: #0f1116 !important;
  border: 1px solid #23262e !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.timeline_colum_card        { border: 0 !important; padding: 1rem 1.15rem !important; }
.timeline_colum_card.bottom { border-top: 1px solid #23262e !important; padding-left: 1.15rem !important; }

/* 7. Brand mark sizing for the ghost wordmark. */
.navbar-brand img, img.sui-logo { height: 34px !important; width: auto !important; }
.footer_content img[alt="swipe.fun"] { height: 40px !important; width: auto !important; }

/* 8. Wrappers the missing code was meant to fade in. Visible by default so the
      page reads with JS off; swipe-motion.js animates them from hidden. */
.timeline_heading,
.home-benefits_cta,
.custom-h2_block,
.sui_is_wrapper { opacity: 1 !important; }

/* 9. Motion support. Lines produced by SplitText need their own box so the
      "rise in" clip works, and the header condenses once you scroll. */
.swipe-line { display: block; will-change: transform; }
.navbar { transition: padding .3s ease, background-color .3s ease; }
.navbar.is-scrolled { background-color: rgba(6,6,10,.86) !important; backdrop-filter: blur(14px); }

/* 10. The "Swipe is" block reserved a tall panel for a hover visual that the
       missing code drove. Collapse it to its real content height. */
.home-background,
.home-tabs_layout { height: auto !important; min-height: 0 !important; }
.home-selection   { padding-bottom: 5rem !important; }
.sui_is_wrapper   { padding-bottom: 1.5rem !important; }