/* Component 03 · Statement + Solutions
   One off-white block directly under the hero (Palantir's color for the section under its hero).
   - The statement copies Palantir's "Our software powers real-time, AI-driven decisions…" callout:
     68px centered text that rises, brightens and tightens its line spacing in step with your scroll,
     with one phrase in gray that types on letter by letter when it reaches the 90% line.
   - "Solutions" is styled like Palantir's "Our Software" heading.
   - The carousel copies Palantir's partner-reviews carousel (a slow, endless loop of 300×400 cards
     with a folded top-right corner), with the colors swapped: white cards on off-white. */

.intro {
  --intro-bg: #efefef;       /* Palantir's off-white */
  --intro-text: #1e1f2b;     /* Palantir's text color on light sections */
  --intro-text-light: #666;

  /* Covers the hero's pinned frame as it scrolls up */
  position: relative;
  z-index: 5;
  background: var(--intro-bg);
  color: var(--intro-text);
}


/* ---------- Statement ---------- */

.callout-container {
  display: flex;
  justify-content: center;
  padding: 64px 12px;
}
@media (min-width: 560px) { .callout-container { padding: 162px 0 72px; } }

.callout {
  max-width: 1500px;
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  /* Evens out the line lengths so no word is left alone on the last line */
  text-wrap: balance;
}
/* Palantir's 68px. On mid-size screens (560px to ~1000px wide) it scales down with the window so the
   statement stays short enough (6 lines or fewer) for browsers to balance it. */
@media (min-width: 560px) {
  .callout {
    margin: 0 64px;
    font-size: min(68px, calc((100vw - 128px) * 0.079));
    letter-spacing: -0.04em;
  }
}
.callout > span { color: var(--intro-text-light); }

/* Scroll animation (only when JavaScript is running, so the text is never stuck faded).
   These are the starting values; js/reveal.js moves them toward full opacity, no offset and
   line spacing 1 in step with your scroll, the way Palantir's statement does. */
.js .callout {
  opacity: 0.4;
  transform: translateY(80px);
  line-height: 1.2;
  will-change: transform, opacity;
}

/* The gray phrase types on letter by letter (data-typeon, see base.css) the first time the
   statement appears, the same way Palantir's gray "AI-driven" does */


/* ---------- Solutions ---------- */

/* Container and heading styles are shared: .section-inner and .section-heading in base.css */

/* Carousel (run by js/carousel.js; Palantir's partner carousel with controls added).
   - Wider screens: the row drifts left at Palantir's pace (12 seconds per card). It pauses while the
     mouse is over it, and it can be dragged or scrolled sideways with a trackpad.
   - Phones: each card rests for a few seconds, then the row glides to the next one. Swiping moves it
     as far as the swipe carries it, and it always settles with a card lined up on the left.
   - The script adds two hidden copies of the row so it can loop forever in both directions.
   - Without JavaScript, or with "reduce motion" turned on, it's a plain row you can scroll. */
.solutions-cards {
  overflow-x: auto;
  scrollbar-width: none;           /* no visible scrollbar (Firefox) */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;  /* sideways swipes never trigger the browser's back/forward gesture */
}
.solutions-cards::-webkit-scrollbar { display: none; }   /* no visible scrollbar (Chrome, Safari) */
.solutions-cards:focus-visible { outline-offset: 6px; }

.solutions-rail {
  display: flex;
  width: max-content;
}

.solutions-track {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Drifting (wider screens): the script moves the rail itself, so the row doesn't scroll natively.
   "pan-y" keeps up-and-down page scrolling working for touch screens on top of the row. */
.solutions-cards.is-drift {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.solutions-cards.is-drift .solutions-rail { will-change: transform; }
.solutions-cards.is-dragging { cursor: grabbing; }

/* Gliding (phones): a real scrolling row that always comes to rest with a card at the left edge */
.solutions-cards.is-glide { scroll-snap-type: x mandatory; }

.solution-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 300px;
  height: 400px;
  margin-right: 20px;
  padding: 20px;
  background: #fff;
  scroll-snap-align: start;
}

/* Folded corner: a triangle in the card color over one in the page color */
.solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  border-left: 45px solid #fff;
  border-top: 45px solid var(--intro-bg);
}

/* Card text: a small label at the top; the title and sentence sit together at the bottom
   (Palantir's partner cards put their label at the top and the text lower down) */
.solution-label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--intro-text-light);
}
.solution-title {
  margin: auto 0 12px;       /* "auto" pushes the title and sentence to the bottom of the card */
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.solution-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--intro-text-light);
}

/* The line under the "Solutions" heading that says these are examples */
.solutions .section-heading { margin-bottom: 10px; }
.solutions-note {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--intro-text-light);
}
@media (min-width: 1500px) {
  .solutions .section-heading { margin-bottom: 16px; }
  .solutions-note { margin-bottom: 70px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .callout { opacity: 1; transform: none; line-height: 1; }
}