/* CLAUDE 10-18 (design polish B4 v2): the pinned Find, Edit, Post, Track story (landing-story.js). A tall track, a sticky
   stage, and one number: --p, the scroll progress through the track (0..1). Everything below is a calc() of --p: the rail's
   active word, the waveform and its scan, the clip that travels (position, size, captions), the calendar and its posts, the
   counters and the line. Chrome, Edge and Safari 26 animate --p on the section's own view timeline; other browsers get it
   from a small loop in the script, and both give the same frames. Each act owns a quarter of the track; the clip moves
   between acts over the eight hundredths either side of the boundaries (.22, .47, .72). */

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --v1 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}
@property --v2 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}
@property --v3 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}
@property --w1 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}
@property --w2 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}
@property --d1 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}
@property --d2 {
  syntax: '<integer>';
  inherits: true; /* the counters are on the children of the element that computes them */
  initial-value: 0;
}

/* the four original cards stay in the page for screen readers and for no-script, but are not drawn */
#lp-how.sy-on .steps {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sy {
  position: relative;
  height: 440vh;
  margin: 8px 0 24px;
}
.sy-sd {
  view-timeline: --sy block;
}
.sy-sd .sy-stage {
  animation: sy-p linear both;
  animation-timeline: --sy;
  animation-range: contain 0% contain 100%;
}
@keyframes sy-p {
  to {
    --p: 1;
  }
}
.sy-stage {
  --t1: clamp(0, calc((var(--p) - 0.22) / 0.08), 1);
  --t2: clamp(0, calc((var(--p) - 0.47) / 0.08), 1);
  --t3: clamp(0, calc((var(--p) - 0.72) / 0.08), 1);
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: 80px 36px;
}

/* the rail: four words, the active one lit, a line that fills */
.sy-rail {
  position: relative;
  display: grid;
  gap: clamp(14px, 2.6vh, 26px);
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
}
.sy-it {
  --a: calc(clamp(0, (var(--p) - var(--s) + 0.04) * 25, 1) * clamp(0, (var(--s) + 0.29 - var(--p)) * 25, 1));
  display: grid;
  gap: 4px;
  opacity: calc(0.3 + 0.7 * var(--a));
}
.sy-it b {
  font-size: clamp(2.2rem, 4.4vw, 4.2rem);
  font-weight: 850;
  font-stretch: 125%;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.sy-it span {
  color: var(--soft);
  font-size: 1.05rem;
}
.sy-it p {
  margin: 4px 0 0;
  max-width: 38ch;
  color: var(--soft);
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: var(--a);
}
.sy-bar {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--hair2);
  border-radius: 2px;
}
.sy-bar i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 2px;
  transform-origin: top;
  transform: scaleY(var(--p));
}

/* the stage: one machined panel, every act drawn into it; sizes are the panel's own (container units) */
.sy-view {
  width: 100%;
}
.sy-view .core {
  aspect-ratio: 16 / 10;
  width: 100%;
  container-type: size;
  background:
    radial-gradient(60% 55% at 12% 0%, rgba(118, 150, 196, 0.12), transparent 70%),
    radial-gradient(44% 50% at 92% 100%, rgba(83, 252, 24, 0.05), transparent 72%), var(--panel);
}
.sy-view .core > * {
  position: absolute;
}

/* act 1, Find: the stream's energy, a scan line, three windows lighting as it passes */
.sy-find {
  inset: 8% 5% 8%;
  opacity: calc(clamp(0, (0.27 - var(--p)) * 22, 1));
  translate: 0 calc(var(--t1) * -3cqh);
}
.sy-find svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 26%;
  width: 100%;
  height: 40%;
  fill: rgba(243, 242, 238, 0.22);
}
.sy-find small {
  position: absolute;
  left: 0;
  bottom: 12%;
  color: var(--dim);
  font:
    400 1.7cqw/1.2 'RipClip Mono',
    ui-monospace,
    monospace;
}
.sy-wins {
  position: absolute;
  inset: 20% 0 20%;
}
.sy-win {
  --k: clamp(0, calc((var(--p) * 4.2 - var(--a)) * 30), 1); /* 1 once the scan has passed the window */
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 1.2cqw;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16);
  background: rgba(83, 252, 24, calc(var(--k) * 0.09));
  outline: 1.5px solid rgba(83, 252, 24, var(--k));
  outline-offset: -1.5px;
}
.sy-win b {
  position: absolute;
  left: 0.8cqw;
  top: 0.6cqw;
  display: grid;
  gap: 1px;
  font-size: 1.6cqw;
  font-weight: 650;
  font-style: normal;
  color: color-mix(in srgb, var(--sig) calc(var(--k) * 100%), var(--soft));
  white-space: nowrap;
}
.sy-win b small {
  position: static;
  font:
    400 1.4cqw/1 'RipClip Mono',
    ui-monospace,
    monospace;
  color: inherit;
}
.sy-scan {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: 0;
  width: 2px;
  translate: calc(clamp(0, var(--p) * 4.2, 1) * 90cqw); /* across the stream (90 % of the panel) as p goes 0 to 0.238 */
  background: linear-gradient(to bottom, transparent, var(--sig) 20%, var(--sig) 80%, transparent);
  box-shadow: 0 0 2.4cqw 0.2cqw rgba(83, 252, 24, 0.28);
  opacity: calc(clamp(0, (0.24 - var(--p)) * 60, 1) * clamp(0, var(--p) * 60, 1));
}

/* the clip: one element for the whole story; its pose is a blend of the four acts' poses */
.sy-phone {
  inset: 0;
  margin: auto;
  width: 28cqw;
  height: 49.8cqw;
  /* poses: Find in the first window of the waveform (small), Edit large left of centre, Post in the Wednesday 6 PM slot,
     Track small at the left of the numbers */
  translate: calc((-37.5 + 21.5 * var(--t1) + 3.3 * var(--t2) - 17.3 * var(--t3)) * 1cqw)
    calc((-3.4 + 3.4 * var(--t1) + 2.4 * var(--t2) - 6.4 * var(--t3)) * 1cqh);
  scale: calc(0.09 + 0.91 * var(--t1) - 0.71 * var(--t2) - 0.02 * var(--t3));
  opacity: clamp(0, calc((var(--p) - 0.14) * 16), 1);
}
.sy-ph-in {
  position: absolute;
  inset: 0;
  padding: 0.5cqw;
  border-radius: 3.2cqw;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 3.5cqw 7cqw -2cqw rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
.sy-ph-in img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2.7cqw;
  object-fit: cover;
  background: black;
}
.sy-cap {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 60%;
  text-align: center;
  font-size: 2.3cqw;
  font-weight: 900;
  font-stretch: 116%;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow:
    0 0 2px black,
    0.15cqw 0.15cqw 0 black,
    -0.15cqw 0.15cqw 0 black,
    0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.6);
  opacity: calc(clamp(0, (var(--p) - var(--s)) * 70, 1) * clamp(0, (var(--s) + 0.034 - var(--p)) * 70 + 0.001, 1));
}
.sy-cap:last-of-type {
  color: var(--sig);
  opacity: clamp(0, calc((var(--p) - var(--s)) * 70), 1);
}

/* act 2, Edit: what was done to it */
.sy-edit {
  right: 6%;
  top: 30%;
  display: grid;
  gap: 1.6cqw;
  opacity: calc(clamp(0, (var(--p) - 0.3) * 24, 1) * clamp(0, (0.52 - var(--p)) * 24, 1));
  translate: calc((1 - clamp(0, (var(--p) - 0.3) * 12, 1)) * 3cqw) 0;
}
.sy-edit span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
  min-width: 22cqw;
  padding: 1.5cqw 2cqw;
  border-radius: 1.6cqw;
  background: rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 2.1cqw;
  font-weight: 650;
}
.sy-edit small {
  color: var(--soft);
  font:
    400 1.7cqw/1 'RipClip Mono',
    ui-monospace,
    monospace;
}

/* act 3, Post: the week, three posts dropping in */
.sy-cal {
  inset: 12% 6% 12%;
  opacity: calc(clamp(0, (var(--p) - 0.5) * 24, 1) * clamp(0, (0.77 - var(--p)) * 24, 1));
}
.sy-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1cqw;
  margin-bottom: 1cqw;
  color: var(--dim);
  font:
    400 1.7cqw/1.2 'RipClip Mono',
    ui-monospace,
    monospace;
}
.sy-days i {
  font-style: normal;
  text-align: center;
}
.sy-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1cqw;
  height: calc(100% - 3cqw);
}
.sy-grid u {
  border-radius: 1.2cqw;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.sy-post {
  --on: clamp(0, calc((var(--p) - var(--at)) * 30), 1);
  position: absolute;
  display: grid;
  gap: 1px;
  width: calc((100% - 6cqw) / 7);
  padding: 0.9cqw 1.1cqw;
  border-radius: 1.2cqw;
  background: color-mix(in srgb, var(--c) 18%, var(--panel2));
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent),
    0 1.4cqw 2.6cqw -1cqw rgba(0, 0, 0, 0.7);
  font-size: 1.7cqw;
  font-weight: 650;
  opacity: var(--on);
  translate: 0 calc((1 - var(--on)) * -2cqw);
}
.sy-post small {
  color: var(--soft);
  font:
    400 1.4cqw/1.1 'RipClip Mono',
    ui-monospace,
    monospace;
}
.sy-post.a {
  --c: var(--ink);
  --at: 0.55;
  left: calc((100% - 6cqw) / 7 * 1 + 1cqw * 1);
  top: calc(3cqw + (100% - 5cqw) / 3 * 0 + 0.4cqw);
}
.sy-post.b {
  --c: var(--live);
  --at: 0.59;
  left: calc((100% - 6cqw) / 7 * 2 + 1cqw * 2);
  top: calc(3cqw + (100% - 5cqw) / 3 * 1 + 0.4cqw);
}
.sy-post.c {
  --c: var(--sun);
  --at: 0.63;
  left: calc((100% - 6cqw) / 7 * 4 + 1cqw * 4);
  top: calc(3cqw + (100% - 5cqw) / 3 * 0 + 0.4cqw);
}

/* act 4, Track: the post's numbers, counting up, and the line drawing */
.sy-stats {
  inset: 12% 6% 12% 34%;
  opacity: clamp(0, calc((var(--p) - 0.76) * 24), 1);
  --v1: calc(clamp(0, (var(--p) - 0.8) * 5.5, 1) * 482);
  --v2: calc(clamp(0, (var(--p) - 0.8) * 5.5, 1) * 39);
  --v3: calc(clamp(0, (var(--p) - 0.8) * 5.5, 1) * 612);
  --w1: round(down, calc(var(--v1) / 10), 1);
  --d1: calc(var(--v1) - var(--w1) * 10);
  --w2: round(down, calc(var(--v2) / 10), 1);
  --d2: calc(var(--v2) - var(--w2) * 10);
}
.sy-num {
  position: absolute;
  top: 0;
  display: grid;
  gap: 0.4cqw;
}
.sy-num.n1 {
  left: 0;
}
.sy-num.n2 {
  left: 40%;
}
.sy-num.n3 {
  left: 72%;
}
.sy-num i {
  font-style: normal;
  font-size: 5.6cqw;
  font-weight: 850;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sy-num.n1 i {
  counter-reset: a var(--w1) b var(--d1);
}
.sy-num.n1 i::after {
  content: counter(a) '.' counter(b) 'K';
}
.sy-num.n2 i {
  counter-reset: a var(--w2) b var(--d2);
}
.sy-num.n2 i::after {
  content: counter(a) '.' counter(b) 'K';
}
.sy-num.n3 i {
  counter-reset: a var(--v3);
}
.sy-num.n3 i::after {
  content: counter(a);
}
.sy-num small {
  color: var(--soft);
  font-size: 1.9cqw;
}
.sy-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  width: 100%;
  height: 52%;
  overflow: visible;
}
.sy-line path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p) - 0.78) * 4.5, 1));
}
.sy-ex {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--dim);
  font-size: 1.7cqw;
}

@media (prefers-reduced-motion: reduce) {
  .sy {
    display: none; /* the original cards are the page then (landing-story.js does not build this either) */
  }
}