/* anyflo-page.css
 * Where: Page Settings → Inside <head>  (Home)
 * Targets: .home-platform_tab*, .home-platform_image, .home-faq_*
 * Note:  .is-active is toggled by anyflo-page.js (Platform tabs, FAQ)
 */

/* ---- Hero video: fade the frame edges so the rotated rectangle never shows a seam ---- */
.home-hero_video {
  -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 82%, transparent 100%);
}

/* ---- Background color transitions: make overlays independent of the page color ---- */
/* API code window: dissolve the window itself instead of painting a black gradient */
.home-api_visual {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 96%);
}
.home-api_code-fade {
  display: none;
}
/* Leadership portraits are PNGs on white — blend the white into whatever bg is behind */
.home-leadership_image {
  mix-blend-mode: multiply;
}

/* ---- Dark PoC / API: .is-dark is toggled by anyflo-page.js with the black background ---- */
.section_home-poc :is(h2, h3, p, .text-style-tagline),
.section_home-api :is(h2, h3, p, .text-style-tagline),
.home-api_code-window, .home-api_code-window *,
.section_home-api .button.is-grey,
.section_home-leadership :is(h2, .heading-style-h6, p, .text-style-tagline, .home-leadership_role,
  .home-leadership_quote-mark, .home-leadership_social-link, .home-leadership_divider, .home-leadership_separator) {
  /* same timing/easing as the background switch (0.5s power2.inOut) */
  transition: color 0.5s cubic-bezier(0.45, 0, 0.55, 1), background-color 0.5s cubic-bezier(0.45, 0, 0.55, 1), border-color 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.section_home-poc.is-dark h2,
.section_home-poc.is-dark h3,
.section_home-api.is-dark h2 {
  color: var(--base-colors--white);
}
.section_home-poc.is-dark p,
.section_home-api.is-dark p,
.section_home-api.is-dark .text-style-tagline {
  color: rgba(255, 255, 255, 0.6);
}
.section_home-api.is-dark .button.is-grey {
  background-color: #1f1f1f;
  color: var(--base-colors--white);
}
/* Figma 793:4915: dark API illustration, including its faint header divider. */
.section_home-api.is-dark .home-api_code-window {
  background-color: #0a0a0a;
  border-color: transparent;
}
.section_home-api.is-dark .home-api_code-header {
  border-bottom-color: rgb(234 233 229 / 4%);
}
.section_home-api.is-dark .home-api_code-dot {
  background-color: var(--grey--grey-800, #40403d);
}
.section_home-api.is-dark .home-api_code-body {
  color: #dddbd7;
}
.section_home-api.is-dark .home-api_code-label {
  color: rgb(234 233 229 / 50%);
}
.section_home-api.is-dark .code-comment {
  color: rgb(234 233 229 / 40%);
}
.section_home-api.is-dark .code-keyword { color: #c8b8dd; }
.section_home-api.is-dark .code-function { color: #e2b68e; }
.section_home-api.is-dark .code-string { color: #adcea6; }

/* Keep the gradient on the border only; painting a solid gradient over the
   window background would bypass its color interpolation and flash. */
.home-api_code-window::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(162deg, rgb(234 233 229 / 4%), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}
.section_home-api.is-dark .home-api_code-window::before { opacity: 1; }

/* One GSAP progress value drives the illustration and page background together.
   Disable CSS transitions here so they don't trail each animation frame. */
.is-bg-themed .section_home-api .home-api_code-window,
.is-bg-themed .section_home-api .home-api_code-window * { transition: none; }
.is-bg-themed .section_home-api .home-api_code-window {
  --api-dark-weight: calc(var(--anyflo-api-dark, 0) * 100%);
  background-color: color-mix(in srgb, #0a0a0a var(--api-dark-weight), #fff);
  border-color: color-mix(in srgb, transparent var(--api-dark-weight), #dddbd7);
}
.is-bg-themed .section_home-api .home-api_code-window::before { opacity: var(--anyflo-api-dark, 0); }
.is-bg-themed .section_home-api .home-api_code-header {
  border-bottom-color: color-mix(in srgb, rgb(234 233 229 / 4%) var(--api-dark-weight), #dddbd7);
}
.is-bg-themed .section_home-api .home-api_code-dot {
  background-color: color-mix(in srgb, #40403d var(--api-dark-weight), #dddbd7);
}
.is-bg-themed .section_home-api .home-api_code-body {
  color: color-mix(in srgb, #dddbd7 var(--api-dark-weight), #000);
}
.is-bg-themed .section_home-api .home-api_code-label {
  color: color-mix(in srgb, rgb(234 233 229 / 50%) var(--api-dark-weight), #93928d);
}
.is-bg-themed .section_home-api .code-comment {
  color: color-mix(in srgb, rgb(234 233 229 / 40%) var(--api-dark-weight), #93928d);
}
.is-bg-themed .section_home-api .code-keyword {
  color: color-mix(in srgb, #c8b8dd var(--api-dark-weight), #65537e);
}
.is-bg-themed .section_home-api .code-function {
  color: color-mix(in srgb, #e2b68e var(--api-dark-weight), #925d28);
}
.is-bg-themed .section_home-api .code-string {
  color: color-mix(in srgb, #adcea6 var(--api-dark-weight), #326a28);
}

.section_home-leadership.is-dark :is(h2, .heading-style-h6, .text-style-quote, .home-leadership_social-link) {
  color: var(--base-colors--white);
}
.section_home-leadership.is-dark :is(p:not(.text-style-quote), .text-style-tagline, .home-leadership_role, .home-leadership_quote-mark) {
  color: rgba(255, 255, 255, 0.6);
}
.section_home-leadership.is-dark :is(.home-leadership_divider, .home-leadership_separator) {
  background-color: rgba(255, 255, 255, 0.2);
}
/* Section dividers under PoC / API follow the page theme (Figma 793:4389):
   light page → black 5% like the other section dividers; dark page → grey-900 under PoC,
   white 16% under API. .is-bg-themed is set by anyflo-page.js while it drives the bg */
.is-bg-themed :is(.home-poc_layout, .home-api_layout) {
  border-bottom-color: rgba(0, 0, 0, 0.05);
  transition: border-color 0.5s cubic-bezier(0.45, 0, 0.55, 1);
}
.section_home-poc.is-dark .home-poc_layout {
  border-bottom-color: var(--grey--grey-900);
}
.section_home-api.is-dark .home-api_layout {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* ---- Platform tabs: inactive look; .is-active restores the Webflow base ---- */
.home-platform_tab {
  color: var(--grey--grey-600);
  transition: color 0.4s ease;
}
.home-platform_tab.is-active {
  color: var(--base-colors--black);
}
.home-platform_tab-description {
  opacity: 0.6;
  transition: opacity 0.4s ease;
}
.home-platform_tab.is-active .home-platform_tab-description {
  opacity: 1;
}
.home-platform_tab-progress {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
}
.home-platform_tab:hover {
  color: var(--base-colors--black);
}

/* ---- Platform cards: one image per tab, anyflo-page.js marks the current one ---- */
.home-platform_image:not(:first-child) {
  display: none;
}
.home-platform_visual .home-platform_image.is-current {
  display: block;
}
.home-platform_visual:has(.is-current) .home-platform_image:not(.is-current) {
  display: none;
}

/* ---- Platform on mobile (<=479px, Figma 793:5799): swipeable slides + segmented pagination.
        anyflo-page.js adds .home-platform_visual.is-slide into each tab and .home-platform_dots ---- */
.home-platform_visual.is-slide,
.home-platform_dots,
.home-platform_tab.is-clone {
  display: none;
}
@media screen and (max-width: 479px) {
  .home-platform_content > .home-platform_visual { display: none; }
  .home-platform_tabs {
    flex-direction: row;
    column-gap: 0.75rem;
    margin-right: -1rem;
    padding-right: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .home-platform_tab.is-clone { display: flex; }
  .home-platform_tabs::-webkit-scrollbar { display: none; }
  .home-platform_tab {
    flex: 0 0 18.75rem;
    row-gap: 1rem;
    scroll-snap-align: start;
  }
  .home-platform_tab:hover { color: inherit; }
  .home-platform_tab-line { display: none; }
  .home-platform_visual.is-slide {
    display: flex;
    width: 100%;
    height: 25rem;
    opacity: 0.5;
    transition: opacity 0.4s ease;
  }
  .home-platform_tab.is-active .home-platform_visual.is-slide { opacity: 1; }
  .home-platform_tab:not(.is-active) .heading-style-h4 { opacity: 0.2; }
  .home-platform_tab:not(.is-active) .home-platform_tab-description { visibility: hidden; }
  .home-platform_dots {
    display: flex;
    column-gap: 0.625rem;
  }
  .home-platform_dot {
    flex: 0 0 5.5625rem;
    height: 2px;
    overflow: hidden;
    border-radius: 1px;
    background-color: rgba(111, 110, 107, 0.2);
    transition: flex-grow 0.4s ease;
  }
  .home-platform_dot.is-active { flex-grow: 1; }
  .home-platform_dot-progress {
    height: 100%;
    background-color: var(--base-colors--black);
    transform: scaleX(0);
    transform-origin: left center;
  }
}

/* ---- Mobile (<=479px) details from Figma 793:5770 that classes alone can't express ---- */
@media screen and (max-width: 479px) {
  /* hero: two buttons share the row equally, 56px tall */
  .home-hero_content .button-group { flex-wrap: nowrap; }
  .home-hero_content .button-group > .button { flex: 1 1 0; min-width: 0; }
  /* FAQ questions are 17px (Body heading/17), not the 20px subtitle used by Reliable cards */
  .home-faq_item .heading-style-subtitle {
    font-size: 1.0625rem;
    line-height: 1.41;
    letter-spacing: -0.015em;
  }
}

/* ---- Reliable cards stack on mobile (<=479px, Figma 774:3787): sticky header,
        each card sticks 12px below the previous; scale + dim come from anyflo-page.js ---- */
@media screen and (max-width: 479px) {
  .home-reliable_header {
    position: sticky;
    top: 4.5rem;
  }
  .home-reliable_card {
    position: sticky;
    top: 14.5rem;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.1);
  }
  .home-reliable_card:nth-child(2) { top: 15.25rem; }
  .home-reliable_card:nth-child(3) { top: 16rem; }
  .home-reliable_card:nth-child(4) { top: 16.75rem; }
  .home-reliable_card:nth-child(5) { top: 17.5rem; }
  .home-reliable_card:nth-child(6) { top: 18.25rem; }
  .home-reliable_card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #000;
    opacity: var(--stack-dim, 0);
    pointer-events: none;
  }
}

/* ---- FAQ accordion: answers are open in Designer (custom code isn't loaded there),
        closed on the live site; anyflo-page.js opens the first one ---- */
.home-faq_icon {
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.home-faq_item.is-active .home-faq_icon {
  transform: rotate(45deg);
}
.home-faq_answer {
  height: 0;
  overflow: hidden;
}

/* ---- Reduced motion: show everything static ---- */
@media (prefers-reduced-motion: reduce) {
  .home-platform_tab-progress { transform: scaleX(0); }
  .home-platform_tab.is-active .home-platform_tab-progress { transform: scaleX(1); }
}