/* Geometric endpoints for 8 archival records across 7 narrative states. */
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--1 { transform: translate(300px, 300px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--2 { transform: translate(302px, 302px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--3 { transform: translate(304px, 304px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--4 { transform: translate(306px, 306px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--5 { transform: translate(308px, 308px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--6 { transform: translate(310px, 310px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--7 { transform: translate(312px, 312px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="closed"] .record--8 { transform: translate(314px, 314px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--1 { transform: translate(300px, 300px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--2 { transform: translate(302px, 302px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--3 { transform: translate(304px, 304px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--4 { transform: translate(306px, 306px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--5 { transform: translate(308px, 308px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--6 { transform: translate(310px, 310px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--7 { transform: translate(312px, 312px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="opening"] .record--8 { transform: translate(314px, 314px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--1 { transform: translate(110px, 125px) rotate(-7deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--2 { transform: translate(315px, 95px) rotate(5deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--3 { transform: translate(480px, 160px) rotate(-6deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--4 { transform: translate(95px, 290px) rotate(8deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--5 { transform: translate(295px, 270px) rotate(-5deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--6 { transform: translate(475px, 350px) rotate(9deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--7 { transform: translate(160px, 465px) rotate(-4deg); }
:is(.spine__stage, .scene__mobile)[data-state="scatter"] .record--8 { transform: translate(370px, 460px) rotate(6deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--1 { transform: translate(130px, 165px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--2 { transform: translate(300px, 165px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--3 { transform: translate(470px, 165px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--4 { transform: translate(130px, 295px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--5 { transform: translate(300px, 295px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--6 { transform: translate(470px, 295px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--7 { transform: translate(130px, 425px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="align"] .record--8 { transform: translate(300px, 425px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--1 { transform: translate(160px, 180px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--2 { transform: translate(300px, 135px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--3 { transform: translate(440px, 185px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--4 { transform: translate(130px, 305px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--5 { transform: translate(300px, 280px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--6 { transform: translate(455px, 330px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--7 { transform: translate(195px, 440px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="constellate"] .record--8 { transform: translate(365px, 435px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--1 { transform: translate(160px, 180px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--2 { transform: translate(300px, 135px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--3 { transform: translate(440px, 185px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--4 { transform: translate(130px, 305px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--5 { transform: translate(300px, 280px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--6 { transform: translate(455px, 330px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--7 { transform: translate(195px, 440px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="bound"] .record--8 { transform: translate(365px, 435px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--1 { transform: translate(160px, 180px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--2 { transform: translate(300px, 135px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--3 { transform: translate(440px, 185px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--4 { transform: translate(130px, 305px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--5 { transform: translate(300px, 280px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--6 { transform: translate(455px, 330px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--7 { transform: translate(195px, 440px) rotate(0deg); }
:is(.spine__stage, .scene__mobile)[data-state="handoff"] .record--8 { transform: translate(365px, 435px) rotate(0deg); }
/* Staggered inertia: records settle with authentic mass rather than uniform pop. */
.record--1 { transition-delay: 0ms; }
.record--2 { transition-delay: 35ms; }
.record--3 { transition-delay: 70ms; }
.record--4 { transition-delay: 105ms; }
.record--5 { transition-delay: 140ms; }
.record--6 { transition-delay: 175ms; }
.record--7 { transition-delay: 210ms; }
.record--8 { transition-delay: 245ms; }