/* ==========================================================================
   "From complexity to clarity" — the signature homepage animation.

   Light throughout: off-white and cool grey, the register of the rest of the
   site. The previous cut opened on dark graphite; this one stays calm and
   premium from the first frame.

   Scene state is one class on .sg-stage; every layer reacts to it.

     (none)          1 fragment   twelve systems on a grid
     .is-connect     2 connect    everything flows into the mark
     .is-software    3 the real product screenshot
     .is-zoom        4 camera into the Ask panel
     .is-questions   5 what can be asked
     .is-thinking    6 context being read
     .is-answer      7 the reply
     .is-close       8 the closing frame
   ========================================================================== */

.sg-stage {
  position: relative;
  height: 600px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, #FFFFFF 0%, transparent 60%),
    linear-gradient(180deg, #FDFDFE 0%, #F7F9FB 52%, #F1F4F8 100%);
  border: 1px solid rgba(16, 24, 40, 0.09);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 30px 64px -38px rgba(16,24,40,0.30);
}

/* A drawing grid, far back, on the same 46px pitch as the page motif. */
.sg-stage::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(16,24,40,0.035) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(to bottom, rgba(16,24,40,0.035) 1px, transparent 1px) 0 0 / 46px 46px;
  -webkit-mask-image: radial-gradient(76% 72% at 50% 44%, #000 22%, transparent 100%);
  mask-image: radial-gradient(76% 72% at 50% 44%, #000 22%, transparent 100%);
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.sg-stage.is-software::before { opacity: 0; }

/* ---------------------------------------------------------- SceneTitle ---- */

.sg-title {
  position: absolute;
  top: 38px; left: 50%;
  z-index: 9;
  width: min(860px, 88%);
  transform: translateX(-50%) translateY(8px);
  text-align: center;
  opacity: 0;
  transition: opacity .7s ease, transform .9s cubic-bezier(.22,.9,.3,1);
  pointer-events: none;
}
.sg-title.is-in { opacity: 1; transform: translateX(-50%); }

.sg-title-t {
  font: 700 clamp(21px, 2.5vw, 33px)/1.24 Poppins, Inter, sans-serif;
  letter-spacing: -0.028em;
  color: #101828;
  text-wrap: balance;
}
.sg-title-s {
  margin: 10px auto 0;
  max-width: 620px;
  font: 300 13.5px/1.65 Inter, system-ui, sans-serif;
  color: #667085;
}

.sg-sample {
  position: absolute; right: 16px; bottom: 12px; z-index: 9;
  font: 400 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: #98A2B3;
}

/* --------------------------------------------------------------- world ---- */

.sg-world {
  position: absolute; inset: 0; z-index: 1;
  transition: opacity 1.1s ease;
}
/* Once the product arrives the sources are gone: that contrast is the relief
   the whole first half is building toward. */
.sg-stage.is-software .sg-world { opacity: 0; }

/* Twelve sources, six across and two deep. Structured, not scattered —
   disconnected is the point, not chaotic.

   Two rows at every breakpoint, never three: the brand mark lands dead centre
   in scene 2, and the row gap is the clearance it lands into. A third row
   would put tiles underneath it. The count drops with the viewport instead
   (see `tierLimit` in signature.js), and the tiles flow rather than being
   placed by hand, so dropping four of them closes the gaps by itself. */
.sg-grid {
  position: absolute;
  left: 50%; top: 54%;
  transform: translate(-50%, -50%);
  width: min(1040px, 94%);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 44px 18px;
  /* Room for the per-tile lift below without the set drifting off centre. */
  align-items: center;
  transition: opacity .9s ease;
}

/* ---------------------------------------------------------- SourceTile ---- */

.sg-src {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(16,24,40,0.09);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 12px 28px -20px rgba(16,24,40,0.28);
  /* Alternating tiles sit high and low, so twelve cards read as scattered
     rather than tabulated. A margin, not a transform: the transform is
     already carrying the entry and the pull to centre. `--lift` is set from
     the tile's visible position in measure(), so the alternation survives
     four of them being dropped on a smaller viewport. */
  margin-top: calc(var(--lift, 0) * 16px);
  min-width: 0;
  opacity: 0;
  transform: translateY(10px) scale(.97);
  /* Slow and eased: the brief asked for deliberate, not brisk. */
  transition: opacity 1.1s ease,
              transform 1.3s cubic-bezier(.22,.9,.3,1);
}
.sg-src.is-in { opacity: 1; transform: none; }
.sg-src.is-out { display: none; }

/* Scene 2: drawn toward the centre and absorbed. The vector is measured in
   px from where the tile actually landed and written on by measure(), so it
   points at the mark whatever the grid flowed into. */
.sg-src.is-pulled {
  opacity: 0;
  transform: translate(var(--pull-x, 0px), var(--pull-y, 0px)) scale(.62);
}

/* The logo is the dominant element of the card; the wrapper is a neutral
   container, not a badge, so a mark with its own colour is not boxed in. */
.sg-src-mark {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: #FFFFFF;
  overflow: hidden;
}
/* `contain` keeps every aspect ratio: a wide wordmark and a square app icon
   both fit the same box without being stretched to fill it. */
.sg-src-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
/* No logo file: the vendor's own colour, as a monogram. */
.sg-src-mark.is-mono {
  background: color-mix(in srgb, var(--tone) 10%, #FFFFFF);
  color: color-mix(in srgb, var(--tone) 82%, #101828);
  border: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
  font: 700 11px/1 Inter, sans-serif;
  letter-spacing: -0.02em;
}

.sg-src-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sg-src-name {
  font: 600 11.5px/1.2 Inter, sans-serif; color: #101828;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------ KnowledgeSignal --- */


/* ------------------------------------------------------------- BrandMark -- */

.sg-n {
  position: absolute;
  left: 50%; top: 54%;
  width: 92px; height: 92px;
  transform: translate(-50%, -50%) scale(.82);
  opacity: 0;
  z-index: 3;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.22,.9,.3,1);
}
.sg-n.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sg-n img { width: 100%; height: 100%; display: block; }
.sg-n.is-charged { transform: translate(-50%, -50%) scale(1.12); }

/* One ring, once, when the last source lands. */
.sg-n-ring {
  position: absolute; inset: -22%;
  border-radius: 50%;
  border: 1px solid rgba(252,5,124,0.30);
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}
.sg-n.is-charged .sg-n-ring { animation: sg-ring 1.4s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes sg-ring {
  0%   { opacity: .8; transform: scale(.7); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* -------------------------------------------------------- ConnectionLayer - */

.sg-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.sg-line {
  fill: none;
  stroke: rgba(16,24,40,0.16);
  stroke-width: 1;
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1);
}
.sg-line.is-drawn { stroke-dashoffset: 0; }

/* The packet running the rail — what reads as information moving. */
.sg-flow {
  fill: none;
  stroke: #2563EB;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 22 calc(var(--len) - 22);
  stroke-dashoffset: var(--len);
  opacity: 0;
}
.sg-flow.is-flowing {
  opacity: 1;
  animation: sg-flow 1.6s cubic-bezier(.45,0,.35,1) forwards;
}
@keyframes sg-flow {
  0%   { stroke-dashoffset: var(--len); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ------------------------------------------------------------- Workspace -- */

/* The real product. Arrives scaled slightly up and settles, then the camera
   pushes across it toward the Ask panel on its right. */
.sg-shot {
  position: absolute;
  left: 50%; top: 58%;
  z-index: 4;
  /* Sized by HEIGHT, not width: the screenshot is 1.46:1, so at 92% of the
     stage's width it stood taller than the stage itself, overflowed, and ran
     under the scene title. Height-first keeps it whole and leaves the title
     band clear. */
  height: 70%;
  width: auto;
  max-width: 94%;
  transform: translate(-50%, -50%) scale(1.04);
  opacity: 0;
  visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,0.10);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 28px 60px -30px rgba(16,24,40,0.34);
  transform-origin: 88% 46%;
  transition: opacity 1.1s ease, visibility 1.1s,
              transform 1.6s cubic-bezier(.33,.1,.25,1);
}
.sg-shot picture { display: block; height: 100%; }
.sg-shot img { height: 100%; width: auto; display: block; }

.sg-stage.is-software .sg-shot {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* The camera move: push in on the Ask panel's corner of the screenshot. */
.sg-stage.is-zoom .sg-shot {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1.9);
}
.sg-stage.is-questions .sg-shot,
.sg-stage.is-thinking .sg-shot,
.sg-stage.is-answer .sg-shot {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(2.1);
}
.sg-stage.is-close .sg-shot {
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -50%) scale(2.2);
}

/* Once the camera is in, everything but the Ask column reads back. */
.sg-shot-veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(250,251,252,0.86) 0%, rgba(250,251,252,0.80) 62%, rgba(250,251,252,0) 88%);
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.sg-stage.is-zoom .sg-shot-veil,
.sg-stage.is-questions .sg-shot-veil,
.sg-stage.is-thinking .sg-shot-veil,
.sg-stage.is-answer .sg-shot-veil { opacity: 1; }

/* ------------------------------------------------------------- AskPanel --- */

.sg-ask {
  position: absolute;
  left: 50%; top: 56%;
  z-index: 6;
  width: min(680px, 90%);
  transform: translate(-50%, -50%) translateY(18px);
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid rgba(16,24,40,0.11);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 26px 58px -28px rgba(16,24,40,0.34);
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s, transform 1.1s cubic-bezier(.22,.9,.3,1);
}
.sg-stage.is-questions .sg-ask,
.sg-stage.is-thinking .sg-ask,
.sg-stage.is-answer .sg-ask {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%);
}
.sg-stage.is-close .sg-ask {
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -50%) translateY(-16px);
}

.sg-ask-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sg-ask-mark { width: 14px; height: 14px; color: #2563EB; }
.sg-ask-mark svg { width: 100%; height: 100%; display: block; }
.sg-ask-name {
  font: 600 11.5px/1 Inter, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #475569;
}

.sg-ask-bar {
  display: flex; align-items: center; gap: 2px;
  min-height: 46px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #F7F9FB;
  border: 1px solid rgba(16,24,40,0.09);
}
.sg-ask-q {
  font: 400 14.5px/1.4 Inter, sans-serif;
  color: #101828;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .35s ease, transform .35s ease;
}
.sg-ask-q.is-in { opacity: 1; transform: none; }
.sg-ask-caret {
  width: 1.5px; height: 17px;
  background: #2563EB;
  margin-left: 3px;
  animation: sg-caret 1.1s steps(1) infinite;
}
@keyframes sg-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.sg-stage.is-answer .sg-ask-caret { display: none; }

/* Thinking: the context being read, named. */
.sg-think {
  margin-top: 14px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .9s cubic-bezier(.22,.9,.3,1), margin-top .6s ease;
}
.sg-stage.is-thinking .sg-think,
.sg-stage.is-answer .sg-think { max-height: 110px; }
.sg-think-label {
  font: 400 10px/1 Inter, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #98A2B3;
  margin-bottom: 9px;
}
.sg-think-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-think-item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #F4F6F8;
  border: 1px solid rgba(16,24,40,0.07);
  font: 400 11px/1 Inter, sans-serif;
  color: #475569;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .4s ease, transform .4s ease;
}
.sg-think-item.is-in { opacity: 1; transform: none; }
.sg-think-item i { width: 11px; height: 11px; display: block; color: #047857; }
.sg-think-item svg { width: 100%; height: 100%; display: block; }

/* The reply. */
.sg-answer {
  margin-top: 14px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.1s cubic-bezier(.22,.9,.3,1);
}
.sg-stage.is-answer .sg-answer { max-height: 260px; }
.sg-answer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(16,24,40,0.08);
}
.sg-answer-title { font: 600 13px/1 Poppins, Inter, sans-serif; color: #101828; }
.sg-answer-ready {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(4,120,87,0.09);
  border: 1px solid rgba(4,120,87,0.22);
  font: 500 10px/1 Inter, sans-serif;
  color: #047857;
  opacity: 0;
  transition: opacity .5s ease;
}
.sg-answer-ready.is-in { opacity: 1; }
.sg-answer-ready i { width: 11px; height: 11px; display: block; }
.sg-answer-ready svg { width: 100%; height: 100%; display: block; }

.sg-answer-rows { display: flex; flex-direction: column; gap: 7px; }
.sg-answer-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1);
}
.sg-answer-row.is-in { opacity: 1; transform: none; }
.sg-answer-t {
  font: 500 10.5px/1.4 Inter, sans-serif;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: #98A2B3;
}
.sg-answer-b { font: 300 12.5px/1.55 Inter, sans-serif; color: #344054; }

/* ------------------------------------------------------ FinalClarityState - */

.sg-final {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 7;
  width: min(720px, 90%);
  transform: translate(-50%, -50%) translateY(12px);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 1s, transform 1.1s cubic-bezier(.22,.9,.3,1);
}
.sg-stage.is-close .sg-final { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.sg-final-title {
  font: 700 clamp(25px, 3vw, 38px)/1.2 Poppins, Inter, sans-serif;
  color: #101828; letter-spacing: -0.03em; margin-bottom: 10px;
}
.sg-final-sub { font: 300 15px/1.6 Inter, sans-serif; color: #475569; }

/* ------------------------------------------------------- in the hero ------ */

/* The stage replaces the product screenshot under the CTA, so it inherits
   .hero-shot's width and reveal slot and drops that rule's card chrome. */
.sg-hero {
  background: none; border: 0; box-shadow: none;
  border-radius: 0; overflow: visible; padding: 0;
}
.sg-hero .sg-stage { height: 560px; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1100px) {
  .sg-hero .sg-stage { height: 530px; }
  /* Eight tiles, four across, still two deep. */
  .sg-grid { width: 92%; grid-template-columns: repeat(4, 1fr); gap: 40px 16px; }
  .sg-src { padding: 9px 10px; gap: 8px; }
  .sg-n { width: 78px; height: 78px; }
  .sg-answer-row { grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 760px) {
  .sg-hero .sg-stage { height: 500px; }
  .sg-title { top: 22px; width: 92%; }
  .sg-title-s { display: none; }

  /* The stack becomes a single column: four tiles, legible, not twelve tiny
     ones. The story survives; the decoration does not. */
  .sg-grid {
    width: 84%;
    grid-template-columns: 1fr;
    gap: 10px;
    top: 58%;
  }
  /* Stacked, so the lift would only misalign the column. */
  .sg-src { margin-top: 0; padding: 10px 12px; gap: 10px; }
  .sg-src.is-pulled { transform: translate(0, var(--pull-y, 0px)) scale(.7); }
  /* Still the dominant element of the card on a phone: a real logo shrunk to
     26px stops being recognisable, which defeats the whole point of scene 1. */
  .sg-src-mark { width: 34px; height: 34px; }
  .sg-src-name { font-size: 12px; }
  .sg-n { width: 66px; height: 66px; }

  /* The screenshot cannot carry legible UI at this width, so the Ask panel
     is the product here — which is what the brief asked to prioritise. */
  .sg-shot { display: none; }

  /* Hiding it left the two scenes built around it — the product arriving and
     the camera pushing into Ask — with nothing to show: a headline over an
     empty 500px stage for 7.5s of the 31s cycle, which reads as a failed
     load. The Ask panel comes in with those scenes instead, so the stage
     always carries the product at this width. */
  .sg-stage.is-software .sg-ask,
  .sg-stage.is-zoom .sg-ask {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }
  .sg-ask { width: 92%; padding: 15px 16px 17px; }
  .sg-ask-q { font-size: 12.5px; }
  .sg-answer-row { grid-template-columns: 1fr; gap: 2px; }
  .sg-answer-b { font-size: 11.5px; }
  .sg-stage.is-answer .sg-answer { max-height: 320px; }
}

@media (max-width: 420px) {
  .sg-answer-row:nth-child(n + 4) { display: none; }
  .sg-think-item:nth-child(n + 5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-stage, .sg-stage::before, .sg-world, .sg-src, .sg-n, .sg-line,
  .sg-flow, .sg-shot, .sg-shot-veil, .sg-ask, .sg-ask-q, .sg-think,
  .sg-think-item, .sg-answer, .sg-answer-row, .sg-answer-ready, .sg-final,
  .sg-title {
    transition: none !important;
  }
  .sg-n-ring, .sg-flow, .sg-ask-caret { animation: none !important; }
  .sg-line { stroke-dashoffset: 0; }
}