/* ---------------------------------------------------------------------------
   SiteLedger 60-second sequence.

   A 1920x1080 stage that scales to whatever it is opened on, driven by one
   JS timeline. Recorded in a single take rather than exported, because every
   frame is the real product CSS rather than a picture of it.
   --------------------------------------------------------------------------- */
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #000; cursor: none;
}

.stagewrap {
  position: fixed; inset: 0; display: grid; place-items: center; background: #000;
}

/* Everything is authored at 1920x1080 and scaled to fit, so the recording is
   pixel-identical whatever screen it is played back on. */
/* Positioned rather than grid-centred: a transform does not change layout
   size, so a grid would go on centring the unscaled 1920x1080 box and push
   the scaled picture off the top-left of the window. */
#stage {
  width: 1920px; height: 1080px; position: absolute; left: 50%; top: 50%;
  overflow: hidden; transform-origin: center center; background: #050B15;
}

.scene {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scene.is-live { opacity: 1; }

.scene__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 620px at 76% 14%, rgba(74,127,167,0.32), transparent 62%),
    radial-gradient(820px 500px at 8% 88%, rgba(20,48,76,0.75), transparent 60%),
    #050B15;
}
.scene--light .scene__bg {
  background:
    radial-gradient(900px 520px at 50% 34%, rgba(74,127,167,0.12), transparent 70%),
    #E9EFF5;
}
.grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(179,207,229,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(179,207,229,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(1000px 700px at 50% 45%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(1000px 700px at 50% 45%, #000, transparent 78%);
}

.hold { position: relative; z-index: 3; display: grid; place-items: center; }

/* The slow push that makes a still read as a filmed shot. Runs for the whole
   scene, so it never visibly loops. */
.scene.is-live .push { animation: push 14s linear both; }
@keyframes push { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Elements that arrive one after another. */
.rise { opacity: 0; transform: translateY(26px); }
.scene.is-live .rise { animation: rise 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── logo ─────────────────────────────────────────────────────────────── */
.lockup { display: flex; align-items: center; gap: 34px; }
.lockup svg { width: 132px; height: 126px; display: block; }
.lockup .word {
  font-family: 'Inter', sans-serif; font-size: 104px; letter-spacing: -0.035em;
  color: #B3CFE5; font-weight: 400; line-height: 1; white-space: nowrap;
}
.lockup .word b { color: #F6FAFD; font-weight: 650; }
.lockup--sm { transform: scale(0.78); }

/* The three ledger rows wipe in behind the plumb line. */
.scene.is-live .row-a { animation: wipe 620ms cubic-bezier(0.22,1,0.36,1) 300ms both; }
.scene.is-live .row-b { animation: wipe 620ms cubic-bezier(0.22,1,0.36,1) 440ms both; }
.scene.is-live .row-c { animation: wipe 620ms cubic-bezier(0.22,1,0.36,1) 580ms both; }
@keyframes wipe { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.row-a, .row-b, .row-c { transform-origin: left center; }

.kicker {
  margin-top: 40px; text-align: center; font-family: 'Inter', sans-serif;
  font-size: 23px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(179,207,229,0.62);
}
.endline {
  margin-top: 54px; text-align: center; font-family: 'Fraunces', serif;
  font-weight: 400; font-variation-settings: 'opsz' 32; font-size: 58px;
  color: #F6FAFD; letter-spacing: -0.02em;
}
.endurl {
  margin-top: 26px; text-align: center; font-family: 'Inter', sans-serif;
  font-size: 26px; color: rgba(179,207,229,0.72);
}

/* ── the six places ───────────────────────────────────────────────────── */
.scatter { position: relative; width: 1560px; height: 760px; }
.scatter .note {
  position: absolute; left: 50%; top: 50%; width: 300px; padding: 22px 26px;
  border-radius: 20px; background: #fff; border: 1px solid rgba(20,48,76,0.12);
  box-shadow: 0 22px 54px rgba(5,11,21,0.16);
  display: flex; gap: 16px; align-items: flex-start;
  transform: translate(-50%,-50%) translate(var(--x), var(--y)) rotate(var(--r));
  opacity: 0;
}
.scatter .note svg { flex: none; margin-top: 3px; color: #4A7FA7; width: 26px; height: 26px; }
.scatter .note b { display: block; font-size: 20px; font-weight: 700; color: #0A1931; font-family: 'Inter', sans-serif; }
.scatter .note em {
  font-style: normal; display: block; margin-top: 4px; font-size: 17px;
  color: rgba(20,48,76,0.58); line-height: 1.4; font-family: 'Inter', sans-serif;
}
.scene.is-live .scatter .note { animation: noteIn 800ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes noteIn {
  from { opacity: 0; transform: translate(-50%,-50%) translate(calc(var(--x) * 0.55), calc(var(--y) * 0.55)) rotate(0deg) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%,-50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
.scene.is-live .n1 { animation-delay: 150ms; }
.scene.is-live .n2 { animation-delay: 420ms; }
.scene.is-live .n3 { animation-delay: 690ms; }
.scene.is-live .n4 { animation-delay: 960ms; }
.scene.is-live .n5 { animation-delay: 1230ms; }
.scene.is-live .n6 { animation-delay: 1500ms; }

/* ── the one record card ──────────────────────────────────────────────── */
.onecard {
  width: 720px; background: #0A1931; border: 1px solid rgba(179,207,229,0.22);
  border-radius: 26px; padding: 44px 48px; box-shadow: 0 40px 90px rgba(2,8,18,0.5);
}
.onecard h4 { margin: 0; font-family: 'Inter', sans-serif; font-size: 28px; font-weight: 650; color: #F6FAFD; letter-spacing: -0.02em; }
.onecard p { margin: 8px 0 0; font-size: 19px; color: rgba(246,250,253,0.55); font-family: 'Inter', sans-serif; }
.onecard .line {
  display: flex; align-items: center; gap: 16px; font-size: 21px; color: rgba(246,250,253,0.9);
  padding: 16px 20px; border-radius: 14px; background: rgba(179,207,229,0.10);
  margin-top: 12px; font-family: 'Inter', sans-serif; opacity: 0;
}
.onecard .line svg { color: #B3CFE5; flex: none; }
.scene.is-live .onecard .line { animation: rise 700ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .onecard .line:nth-of-type(1) { animation-delay: 500ms; }
.scene.is-live .onecard .line:nth-of-type(2) { animation-delay: 700ms; }
.scene.is-live .onecard .line:nth-of-type(3) { animation-delay: 900ms; }
.scene.is-live .onecard .line:nth-of-type(4) { animation-delay: 1100ms; }

/* ── device mocks, blown up to fill the frame ─────────────────────────── */
.blow { transform-origin: center center; }
.s-win { transform: scale(2.05); }
.s-phone { transform: scale(1.85); }

/* The KPI numbers count up and the bars fill, so the dashboard looks live. */
.scene.is-live .minibar i { animation: fill 1500ms cubic-bezier(0.22,1,0.36,1) 400ms both; transform-origin: left center; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scene.is-live .kpi { animation: rise 700ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .kpi:nth-child(1) { animation-delay: 200ms; }
.scene.is-live .kpi:nth-child(2) { animation-delay: 330ms; }
.scene.is-live .kpi:nth-child(3) { animation-delay: 460ms; }
.scene.is-live .kpi:nth-child(4) { animation-delay: 590ms; }
.scene.is-live .wtable tbody tr { animation: rise 600ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .wtable tbody tr:nth-child(1) { animation-delay: 700ms; }
.scene.is-live .wtable tbody tr:nth-child(2) { animation-delay: 830ms; }
.scene.is-live .wtable tbody tr:nth-child(3) { animation-delay: 960ms; }
.scene.is-live .wtable tbody tr:nth-child(4) { animation-delay: 1090ms; }

.scene.is-live .act { animation: rise 620ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .act:nth-child(1) { animation-delay: 350ms; }
.scene.is-live .act:nth-child(2) { animation-delay: 470ms; }
.scene.is-live .act:nth-child(3) { animation-delay: 590ms; }
.scene.is-live .act:nth-child(4) { animation-delay: 710ms; }
.scene.is-live .card-row { animation: rise 620ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .phone__body .card-row:nth-of-type(1) { animation-delay: 880ms; }
.scene.is-live .phone__body .card-row:nth-of-type(2) { animation-delay: 1000ms; }
.scene.is-live .phone__body .card-row:nth-of-type(3) { animation-delay: 1120ms; }

.scene.is-live .field-row { animation: rise 620ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .field-row:nth-of-type(1) { animation-delay: 300ms; }
.scene.is-live .field-row:nth-of-type(2) { animation-delay: 460ms; }
.scene.is-live .field-row:nth-of-type(3) { animation-delay: 620ms; }
.scene.is-live .field-row:nth-of-type(4) { animation-delay: 780ms; }
.scene.is-live .field-row:nth-of-type(5) { animation-delay: 940ms; }
.scene.is-live .btn-mock { animation: rise 700ms cubic-bezier(0.22,1,0.36,1) 1250ms both; }

/* ── the link scene ───────────────────────────────────────────────────── */
.urlbar {
  width: 1180px; background: #fff; border-radius: 999px; padding: 30px 46px;
  display: flex; align-items: center; gap: 22px;
  box-shadow: 0 30px 70px rgba(2,8,18,0.45);
}
.urlbar svg { flex: none; color: #4A7FA7; }
.urlbar span {
  font-family: 'Inter', sans-serif; font-size: 34px; color: #14304C; letter-spacing: -0.01em;
}
.urlbar .caret {
  width: 3px; height: 38px; background: #4A7FA7; display: inline-block;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }
.nots-row { margin-top: 46px; display: flex; gap: 16px; justify-content: center; }
.nots-row span {
  font-family: 'Inter', sans-serif; font-size: 24px; color: rgba(246,250,253,0.66);
  padding: 16px 30px; border-radius: 999px; border: 1px solid rgba(179,207,229,0.2);
  background: rgba(179,207,229,0.05); opacity: 0;
}
.scene.is-live .nots-row span { animation: rise 700ms cubic-bezier(0.22,1,0.36,1) both; }
.scene.is-live .nots-row span:nth-child(1) { animation-delay: 700ms; }
.scene.is-live .nots-row span:nth-child(2) { animation-delay: 870ms; }
.scene.is-live .nots-row span:nth-child(3) { animation-delay: 1040ms; }

/* ── the in-development scene ─────────────────────────────────────────── */
.statement {
  max-width: 1280px; text-align: center; font-family: 'Fraunces', serif;
  font-weight: 400; font-variation-settings: 'opsz' 32; font-size: 66px;
  line-height: 1.18; color: #F6FAFD; letter-spacing: -0.025em;
}

/* ── captions ─────────────────────────────────────────────────────────── */
.cap {
  position: absolute; left: 96px; bottom: 88px; z-index: 20;
  font-family: 'Inter', sans-serif; font-size: 34px; font-weight: 600;
  letter-spacing: -0.01em; color: #F6FAFD;
  padding: 18px 34px; border-radius: 999px;
  background: rgba(5,11,21,0.55); backdrop-filter: blur(10px);
  border: 1px solid rgba(179,207,229,0.18);
  opacity: 0; transform: translateY(14px);
  transition: opacity 480ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.22,1,0.36,1);
}
.cap.is-live { opacity: 1; transform: none; }
.cap--dark { background: rgba(255,255,255,0.82); color: #0A1931; border-color: rgba(20,48,76,0.12); }

/* ── the start screen, which never appears in the recording ───────────── */
#start {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: #050B15; color: #F6FAFD; cursor: pointer;
  font-family: 'Inter', sans-serif; text-align: center;
}
#start.gone { display: none; }
#start h1 { font-family: 'Fraunces', serif; font-weight: 400; font-variation-settings: 'opsz' 32; font-size: 46px; letter-spacing: -0.02em; }
#start p { margin-top: 18px; color: rgba(246,250,253,0.6); font-size: 17px; line-height: 1.7; }
#start kbd {
  background: rgba(179,207,229,0.14); border: 1px solid rgba(179,207,229,0.24);
  border-radius: 6px; padding: 2px 8px; font-family: inherit; font-size: 15px;
}
#start .go {
  margin-top: 30px; display: inline-block; background: #B3CFE5; color: #0A1931;
  padding: 15px 34px; border-radius: 999px; font-weight: 650; font-size: 16px;
}