/*
 * Service Scroll: the homepage's "Our SaaS product design services" block as one
 * scroll-pinned card. The section is tall (one screen of scroll per service); its
 * panel sticks to the top of the screen and shows one Figma card, in which the five
 * services take turns while the services scene (lottie/dist/services/services.json)
 * builds the stack of cubes one service at a time. Sizes, type and colours are the
 * Figma cards' (Eleken Site 2026: desktop 375:531…, tablet 380:8521…, mobile 401:6318…).
 *
 * This CSS lives inside the component's Shadow DOM: site classes never reach it,
 * but site variables (var(--…)) and the site's @font-face fonts do.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 *
 * Two modes (data-mode, set by useServiceScroll.ts):
 *   pin  — the tall track with the sticky panel (default, server render);
 *   list — the five Figma cards one under another, each with its own still scene:
 *          when the pinned card doesn't fit the screen, and in the Designer.
 * Nothing under .ss-content may depend on the mode: the fit check measures the text
 * in either mode and expects the same heights (same column widths in both).
 */

:host {
  display: block;
}

.ss,
.ss *,
.ss *::before,
.ss *::after {
  box-sizing: border-box;
}

.ss {
  /* Read by useServiceScroll.ts — keep them plain px (or plain numbers). */
  --ss-navbar: 66px; /* the site's fixed navbar (75px at ≤991): a list card scrolls in under it */
  --ss-pad-top: 8px; /* room the pinned card keeps free above it… */
  --ss-pad-bottom: 8px; /* …and below it: pins from 600 + 16 = 616px of window height */
  --ss-card-h: 600px; /* the Figma card */
  --ss-chrome: 50px; /* the card around its text: 24px above and below, two 1px lines */
  --ss-stacked: 0;
  --ss-scene-h: 0px; /* stacked only: the scene's height at its Figma size */
  --ss-min-scale: 1; /* stacked only: the smallest share of that size that still pins */
  /* Scroll per service while pinned. */
  --ss-vh: 100vh;
  --ss-step: var(--ss-vh);
  --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  /* --ss-panel-h: the pinned card's height, measured by useServiceScroll.ts */
  height: calc(var(--ss-panel-h, var(--ss-vh)) + var(--ss-count, 5) * var(--ss-step));
  color: #1d1e22;
  font-family: "Inter Variable Local", Inter, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: normal;
  text-align: left;
  overflow-wrap: break-word;
}

/* Small viewport height: on phones the card fits the screen with the URL bar shown */
@supports (height: 100svh) {
  .ss {
    --ss-vh: 100svh;
  }
}

.ss-probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: var(--ss-vh);
  visibility: hidden;
  pointer-events: none;
}

/* ---- Pinned panel ----------------------------------------------------------------
 * The pin is position: sticky and nothing else; useServiceScroll.ts reads progress
 * from the track's own position, not from the pin. Sticky works on the live homepage
 * (checked inside a Shadow DOM in .service-wrap). Never fall back to position: fixed:
 * div.wrapper has contain: paint there, which makes it the containing block of fixed
 * descendants. Every box here keeps overflow visible: the scene must never be clipped.
 * The panel is just the card, so the section starts right with it (no empty screen
 * above the first service). It sticks in the middle of the screen, never closer to
 * the top than --ss-pad-top (--ss-pin-top, set by useServiceScroll.ts); the site's
 * fixed navbar (66px), when it slides back in, only covers the card's empty top. */
.ss-panel {
  position: sticky;
  top: var(--ss-pin-top, 0px);
  display: flex;
  flex-direction: column;
}

/* The card (Figma "Container / Product redesign"): text on the left, the image frame
   on the right. Figma's dashed lines above and below are left out on purpose; their
   1px stays as a transparent border, so everything keeps its Figma position. */
.ss-stage {
  display: flex;
  flex: none;
  gap: 24px;
  min-height: var(--ss-card-h);
  padding-left: 24px;
  border: solid transparent;
  border-width: 1px 0;
}

/* All services share one grid cell: the card never changes height. Each one sits in
   the middle of the card on its own, as every Figma card centres its text. */
.ss-services {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  padding: 24px 0;
}

/* The image frame (494 × 598 desktop, 210 × 598 tablet). The scene is drawn into it
   at a fixed scale with the cube block's bottom-left corner on its Figma place
   (useServiceScroll.ts → sceneViewBox): --ss-anchor-x from the frame's left,
   --ss-anchor-bottom above its bottom, --ss-cubes the block's width, all at the
   frame's Figma size --ss-frame-w (a narrower frame scales the lot). The svg keeps
   overflow visible, so the ball and cubes are never cut at the frame's edge, yet
   only the frame takes up room on the page. */
.ss-scene,
.ss-mini {
  --ss-frame-w: 494px;
  --ss-anchor-x: 158px;
  --ss-anchor-bottom: 90.5px;
  --ss-cubes: 201.86px;

  position: relative;
  flex: none;
  width: var(--ss-frame-w);
  pointer-events: none;
}

.ss-scene > svg,
.ss-mini > svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
}

/* Swapping services: the old text fades out as one block, then the new one comes in
   piece by piece (title, description, button, details), each rising into place. It
   comes from below when scrolling on and from above when scrolling back. */
.ss-service {
  grid-area: 1 / 1;
  align-self: center;
  min-width: 0;
  transition: opacity 0.3s ease;
}

.ss-service[data-state="active"] {
  transition-duration: 0s;
}

.ss-service[data-state="before"],
.ss-service[data-state="after"] {
  opacity: 0;
  pointer-events: none;
}

.ss-title { --ss-i: 0; }
.ss-description { --ss-i: 1; }
.ss-btn-wrap { --ss-i: 2; }
.ss-details { --ss-i: 3; }

.ss-service :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ss-service[data-state="active"] :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  transition:
    opacity 0.7s var(--ss-ease) calc(0.15s + var(--ss-i) * 0.08s),
    transform 0.9s var(--ss-ease) calc(0.15s + var(--ss-i) * 0.08s);
}

.ss-service[data-state="before"] :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  opacity: 0;
  transform: translateY(-12px);
}

.ss-service[data-state="after"] :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  opacity: 0;
  transform: translateY(20px);
}

/* The entrance (data-waiting, useEntrance.ts): until the text scrolls into view the
   first service waits below its place, then rises in like a swap, as the live cards
   fade up. */
.ss[data-mode="pin"][data-waiting] .ss-service[data-state="active"] :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

/* No fade before the first scroll reading (data-ready): opened mid-section, the
   right service is simply there. Also off for a jump past the next service. */
.ss:not([data-ready]) .ss-service,
.ss:not([data-ready]) .ss-service :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  transition: none;
}

.ss-mini {
  display: none;
}

/* ---- Service text (mode-independent) ------------------------------------------- */
.ss-content {
  display: flex;
  flex-direction: column;
  gap: 72px;
  min-width: 0;
}

.ss-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* H2: Regola Pro Medium 32/40, −2%.
   The site's Regolapro webfont has a taller ascender (hhea 1000/−200, no line gap)
   than the Regola Pro OTF Figma sets (800/−200), so in the same line box its glyphs
   sit 0.1em lower than in Figma; `top` lifts them back without moving the box. */
.ss-title {
  position: relative;
  top: -0.1em;
  margin: 0;
  color: #1d1e22;
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.64px;
}

.ss-description {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-text {
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
}

.ss-btn-wrap {
  display: flex;
  align-items: flex-start;
}

/* Button: #1D1E22, 8px 16px, radius 10, Inter Medium 13/20, 16px CTA Icon after an 8px gap */
.ss-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 8px 16px;
  border-radius: 10px;
  background-color: #1d1e22;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
}

.ss-btn:hover {
  background-color: #393a3f;
}

.ss-btn:focus-visible {
  outline: 2px solid #1d1e22;
  outline-offset: 3px;
}

.ss-btn-icon {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  max-width: none;
  border: 0;
}

/* Details: "Outcomes" first, then What we do / What you get / What we build; two
   205px columns 20px apart (narrower when the text column is). */
.ss-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 205px));
  column-gap: 20px;
  row-gap: 20px;
}

.ss-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Subheaders: Regola Pro Medium 18/24, −1%, black 80% (lifted like .ss-title) */
.ss-label {
  position: relative;
  top: -0.1em;
  margin: 0;
  color: rgba(29, 30, 34, 0.8);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
}

/* Mini body: Inter 13/20, black 60% */
.ss-detail-text {
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 13px;
  line-height: 20px;
}

/* ---- List (fallback, Designer) ---------------------------------------------------
 * The five Figma cards one under another, as the Figma section stacks them (without
 * its dashed lines). */
.ss[data-mode="list"] {
  height: auto;
}

.ss[data-mode="list"] .ss-panel {
  position: relative;
  top: auto;
  display: block;
  height: auto;
  padding: 0;
}

.ss[data-mode="list"] .ss-stage {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-image: none;
}

.ss[data-mode="list"] .ss-scene {
  display: none;
}

.ss[data-mode="list"] .ss-services {
  display: block;
  padding: 0;
}

.ss[data-mode="list"] .ss-service {
  display: flex;
  gap: 24px;
  min-height: var(--ss-card-h);
  padding: 0 0 0 24px;
  border: solid transparent;
  border-width: 0 0 1px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}

/* Figma's dashed lines between the cards are left out on purpose, like the pinned
   card's: their 1px stays as a transparent border, so the cards keep Figma's sizes */
.ss[data-mode="list"] .ss-service:first-child {
  border-top-width: 1px;
}

.ss[data-mode="list"] .ss-service :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
  opacity: 1;
  transform: none;
  transition: none;
}

.ss[data-mode="list"] .ss-content {
  flex: 1 1 0;
  align-self: center;
  margin: 24px 0;
}

.ss[data-mode="list"] .ss-mini {
  display: block;
}

/* ---- Tablet: the same card, 60px to a 210px image frame, details in equal halves - */
@media screen and (max-width: 991px) {
  .ss {
    --ss-navbar: 75px;
  }

  .ss-stage,
  .ss[data-mode="list"] .ss-service {
    gap: 60px;
  }

  .ss-scene,
  .ss-mini {
    --ss-frame-w: 210px;
    --ss-anchor-x: 4px;
  }

  .ss-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Mobile: the scene above the text --------------------------------------------
 * Pinned, the card stands under the navbar (75px here) and the scene shrinks
 * (--ss-fit, set by useServiceScroll.ts) until text and scene share the screen; below
 * 0.6 of its Figma size the services stand as the Figma mobile cards instead. */
@media screen and (max-width: 767px) {
  .ss {
    --ss-pad-top: 75px;
    --ss-pad-bottom: 0px;
    --ss-chrome: 64px; /* 16px above and below, two transparent 1px borders, 30px scene–text gap */
    --ss-stacked: 1;
    --ss-scene-h: 318px;
    --ss-min-scale: 0.6;
  }

  .ss-stage {
    flex-direction: column;
    gap: 30px;
    align-items: center;
    min-height: 0;
    padding: 16px;
  }

  .ss-services {
    flex: none;
    align-self: stretch;
    padding: 0;
  }

  /* Every title right under the scene, whatever the length of the text */
  .ss-service {
    align-self: start;
  }

  /* Figma: a 148 × 318 frame, the 148px cube block standing on its bottom edge */
  .ss-scene,
  .ss-mini {
    --ss-frame-w: 148px;
    --ss-anchor-x: 0px;
    --ss-anchor-bottom: 0px;
    --ss-cubes: 148px;

    order: -1;
    height: 318px;
  }

  .ss-scene {
    width: calc(148px * var(--ss-fit, 1));
    height: calc(318px * var(--ss-fit, 1));
  }

  .ss-content {
    gap: 36px;
  }

  /* Title, 16px, description, 30px, button */
  .ss-header {
    gap: 16px;
  }

  .ss-btn-wrap {
    padding-top: 14px;
  }

  /* H3: Regola Pro Medium 22/30, −2% */
  .ss-title {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.44px;
  }

  /* One block of text: the second paragraph starts on the next line */
  .ss-description {
    gap: 0;
  }

  .ss-text {
    font-size: 13px;
    line-height: 20px;
  }

  .ss-btn {
    flex: 1 1 auto;
    gap: 10px;
    color: #f9f7f3;
  }

  .ss-details {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The Figma mobile card: 50px above and below (the transparent 1px border inside them,
     so 49px + the border), the image frame, 30px, the text */
  .ss[data-mode="list"] .ss-service {
    flex-direction: column;
    gap: 30px;
    align-items: center;
    min-height: 0;
    padding: 49px 16px;
  }

  .ss[data-mode="list"] .ss-content {
    flex: none;
    align-self: stretch;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-service,
  .ss-service[data-state],
  .ss .ss-service[data-state] :is(.ss-title, .ss-description, .ss-btn-wrap, .ss-details) {
    transform: none;
    transition: none;
  }

  .ss-btn {
    transition: none;
  }
}