/* Home page tile scenes (HOME-01, 26 October 2026). Generated by
   Claude outputs/tile-animation-build/live_build.py from tiles_build.py; edit the
   generator, not this file. Nine spotlight tiles carry a small animated scene over or
   in place of their image. Only transform and opacity animate (plus a static
   mix-blend-mode on the light overlays). The markup is cloned in by
   assets/js/home-tiles.js; without script nothing here matches anything. */

/* The scene sits inside the tile's image link, under the template's purple veil
   (.image:before), so an inactive tile still looks inactive. isolation keeps the two
   z-indexes local to the link; the chips of the two assessment tiles (.image-tools,
   z-index 2 on the section) stay above both. */
#one.spotlights > section > .image { overflow: hidden; isolation: isolate; }
#one.spotlights > section > .image:before { z-index: 1; }
.tl-scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; pointer-events: none; }
.tl-scene > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.tl-scene svg * { transform-box: fill-box; transform-origin: center; }
/* speed: every scene derives its durations from --tl-k; 1 is the speed the preview
   calls normal */
.tl-scene { --tl-k: 1; }
/* reduced motion: every animation jumps to its end state, so entries show their final
   frame, transient overlays stay invisible and loops stand still; the script starts no
   play cycle either */
@media (prefers-reduced-motion: reduce) {
	.tl-scene, .tl-scene * { animation-duration: 0s !important; animation-delay: 0s !important; }
}

/* ---- tile:scn  Scanner (overlay) ---- */
.tl-scene[data-key="scn"] { --tl-t: calc(2.8s * var(--tl-k)); }
.tl-scene[data-key="scn"] .scn-band, .tl-scene[data-key="scn"] .scn-br, .tl-scene[data-key="scn"] .scn-badge, .tl-scene[data-key="scn"] .scn-tick, .tl-scene[data-key="scn"] .scn-exp { opacity: 0; }
.tl-scene[data-key="scn"] .scn-br { transform-box: view-box; transform-origin: 480px 585px; }
#one .tl-scene[data-key="scn"].tl-play .scn-band { animation: scn-band var(--tl-t) linear both; }
#one .tl-scene[data-key="scn"].tl-play .scn-br { animation: scn-br var(--tl-t) cubic-bezier(.2,.8,.2,1) both; }
#one .tl-scene[data-key="scn"].tl-play .scn-badge { animation: scn-badge var(--tl-t) ease-out both; }
#one .tl-scene[data-key="scn"].tl-play .scn-tick { animation: scn-tick var(--tl-t) ease-out both; animation-delay: calc(var(--i) * var(--tl-t) * 0.045); }
#one .tl-scene[data-key="scn"].tl-play .scn-exp { animation: scn-exp var(--tl-t) ease-out both; }
@keyframes scn-band { 0% { opacity: 0; transform: none; } 6% { opacity: 1; } 34% { opacity: 1; transform: translateY(395px); } 40%, 100% { opacity: 0; transform: translateY(395px); } }
@keyframes scn-br { 0%, 30% { opacity: 0; transform: scale(1.3); } 42% { opacity: 1; transform: none; } 56% { opacity: 0.9; } 70%, 100% { opacity: 0; transform: none; } }
@keyframes scn-badge { 0%, 40% { opacity: 0; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.06); } 58% { transform: none; } 78%, 100% { opacity: 0; transform: none; } }
@keyframes scn-tick { 0%, 54% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.15); } 64% { opacity: 0.9; transform: none; } 78%, 100% { opacity: 0; transform: scale(2); } }
@keyframes scn-exp { 0%, 76% { opacity: 0; transform: scale(0.8); } 84% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.9); } }
/* ---- /tile:scn ---- */

/* ---- tile:pp  Privacy card (overlay) ---- */
.tl-scene[data-key="pp"] { --tl-t: calc(2.4s * var(--tl-k)); --tl-e: calc(1.4s * var(--tl-k)); --tl-loop: calc(6s * var(--tl-k)); }
.tl-scene[data-key="pp"] .pp-in { opacity: 0; }
section.tl-in .tl-scene[data-key="pp"] .pp-in { animation: pp-rise var(--tl-e) cubic-bezier(.2,.8,.2,1) both; }
.tl-scene[data-key="pp"] .pp-float { animation: pp-float calc(6s * var(--tl-k)) ease-in-out infinite; }
@keyframes pp-rise { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes pp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* the stack blinks gently, one card after another from the front card to the back, then rests */
.tl-scene[data-key="pp"] .pp-blinks { mix-blend-mode: screen; }
.tl-scene[data-key="pp"] .pp-blink { opacity: 0; animation: pp-blink var(--tl-loop) ease-in-out infinite; animation-delay: calc(var(--i) * var(--tl-loop) * 0.025); }
@keyframes pp-blink { 0% { opacity: 0; } 4.5% { opacity: 0.75; } 10%, 100% { opacity: 0; } }
/* hover: the lifted card rises a little further and settles */
#one .tl-scene[data-key="pp"].tl-play .pp-lift { animation: pp-lift var(--tl-t) ease-in-out both; }
@keyframes pp-lift { 0% { transform: none; } 30%, 60% { transform: translateY(-12px); } 100% { transform: none; } }
/* ---- /tile:pp ---- */

/* ---- tile:aia  AI Act (overlay) ---- */
.tl-scene[data-key="aia"] { --tl-t: calc(2.8s * var(--tl-k)); }
.tl-scene[data-key="aia"] .aia-edge, .tl-scene[data-key="aia"] .aia-blob, .tl-scene[data-key="aia"] .aia-flare { opacity: 0; }
/* the energy ball runs down the beam; each plate's edges light as it passes, the circuitry flares at the bottom */
#one .tl-scene[data-key="aia"].tl-play .aia-blob { animation: aia-blob var(--tl-t) linear both; }
#one .tl-scene[data-key="aia"].tl-play .aia-edge { animation: aia-edge var(--tl-t) ease-in-out both; animation-delay: calc(var(--i) * var(--tl-t) * 0.14); }
#one .tl-scene[data-key="aia"].tl-play .aia-flare { animation: aia-flare var(--tl-t) ease-in-out both; }
@keyframes aia-blob { 0% { opacity: 0; transform: none; } 6% { opacity: 1; } 62% { opacity: 1; transform: translateY(700px); } 68%, 100% { opacity: 0; transform: translateY(700px); } }
@keyframes aia-edge { 0%, 20% { opacity: 0; } 30% { opacity: 0.9; } 44%, 100% { opacity: 0; } }
@keyframes aia-flare { 0%, 56% { opacity: 0; transform: scale(0.8); } 66% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(1.05); } }
/* ---- /tile:aia ---- */

/* ---- tile:dig  Digests (overlay) ---- */
.tl-scene[data-key="dig"] { --tl-t: calc(2.6s * var(--tl-k)); --tl-loop: calc(14s * var(--tl-k)); }
.tl-scene[data-key="dig"] .dig-light { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: dig-orbit var(--tl-loop) linear infinite; }
@keyframes dig-orbit { 0.0% { transform: translate(387px, 301px); opacity: 1; } 1.1% { transform: translate(364px, 318px); opacity: 1; } 2.2% { transform: translate(340px, 334px); opacity: 1; } 3.2% { transform: translate(324px, 358px); opacity: 1; } 4.3% { transform: translate(328px, 385px); opacity: 1; } 5.4% { transform: translate(350px, 404px); opacity: 1; } 6.5% { transform: translate(374px, 412px); opacity: 0; } 7.6% { transform: translate(403px, 416px); opacity: 0; } 8.6% { transform: translate(432px, 419px); opacity: 0; } 9.7% { transform: translate(460px, 422px); opacity: 0; } 10.8% { transform: translate(489px, 425px); opacity: 0; } 11.9% { transform: translate(518px, 428px); opacity: 0; } 12.9% { transform: translate(547px, 430px); opacity: 0; } 14.0% { transform: translate(576px, 432px); opacity: 0; } 15.1% { transform: translate(605px, 434px); opacity: 0; } 16.2% { transform: translate(633px, 436px); opacity: 0; } 17.3% { transform: translate(662px, 438px); opacity: 0; } 18.3% { transform: translate(691px, 439px); opacity: 0; } 19.4% { transform: translate(720px, 441px); opacity: 0; } 20.5% { transform: translate(749px, 443px); opacity: 0; } 21.6% { transform: translate(778px, 445px); opacity: 0; } 22.7% { transform: translate(807px, 447px); opacity: 0; } 23.7% { transform: translate(836px, 448px); opacity: 0; } 24.8% { transform: translate(864px, 451px); opacity: 0; } 25.9% { transform: translate(884px, 461px); opacity: 1; } 27.0% { transform: translate(909px, 476px); opacity: 1; } 28.0% { transform: translate(929px, 496px); opacity: 1; } 29.1% { transform: translate(926px, 525px); opacity: 1; } 30.2% { transform: translate(905px, 541px); opacity: 0; } 31.3% { transform: translate(878px, 551px); opacity: 0; } 32.4% { transform: translate(851px, 561px); opacity: 0; } 33.4% { transform: translate(824px, 570px); opacity: 0; } 34.5% { transform: translate(796px, 580px); opacity: 0; } 35.6% { transform: translate(769px, 589px); opacity: 0; } 36.7% { transform: translate(741px, 597px); opacity: 0; } 37.8% { transform: translate(713px, 605px); opacity: 0; } 38.8% { transform: translate(685px, 614px); opacity: 0; } 39.9% { transform: translate(658px, 622px); opacity: 0; } 41.0% { transform: translate(630px, 630px); opacity: 0; } 42.1% { transform: translate(603px, 639px); opacity: 0; } 43.1% { transform: translate(575px, 649px); opacity: 0; } 44.2% { transform: translate(548px, 659px); opacity: 0; } 45.3% { transform: translate(522px, 670px); opacity: 0; } 46.4% { transform: translate(495px, 681px); opacity: 0; } 47.5% { transform: translate(467px, 691px); opacity: 0; } 48.5% { transform: translate(439px, 698px); opacity: 0; } 49.6% { transform: translate(411px, 703px); opacity: 0; } 50.7% { transform: translate(383px, 709px); opacity: 1; } 51.8% { transform: translate(357px, 722px); opacity: 1; } 52.9% { transform: translate(333px, 738px); opacity: 1; } 53.9% { transform: translate(310px, 756px); opacity: 1; } 55.0% { transform: translate(294px, 779px); opacity: 1; } 56.1% { transform: translate(294px, 807px); opacity: 1; } 57.2% { transform: translate(313px, 829px); opacity: 1; } 58.2% { transform: translate(333px, 846px); opacity: 1; } 59.3% { transform: translate(362px, 851px); opacity: 0; } 60.4% { transform: translate(390px, 855px); opacity: 0; } 61.5% { transform: translate(419px, 859px); opacity: 0; } 62.6% { transform: translate(448px, 863px); opacity: 0; } 63.6% { transform: translate(476px, 866px); opacity: 0; } 64.7% { transform: translate(505px, 868px); opacity: 0; } 65.8% { transform: translate(534px, 870px); opacity: 0; } 66.9% { transform: translate(563px, 872px); opacity: 0; } 68.0% { transform: translate(592px, 874px); opacity: 0; } 69.0% { transform: translate(621px, 876px); opacity: 0; } 70.1% { transform: translate(650px, 877px); opacity: 0; } 71.2% { transform: translate(679px, 879px); opacity: 0; } 72.3% { transform: translate(707px, 880px); opacity: 0; } 73.3% { transform: translate(736px, 882px); opacity: 0; } 74.4% { transform: translate(765px, 883px); opacity: 0; } 75.5% { transform: translate(794px, 885px); opacity: 0; } 76.6% { transform: translate(823px, 886px); opacity: 0; } 77.7% { transform: translate(852px, 888px); opacity: 0; } 78.7% { transform: translate(881px, 890px); opacity: 1; } 79.8% { transform: translate(898px, 903px); opacity: 1; } 80.9% { transform: translate(924px, 915px); opacity: 1; } 82.0% { transform: translate(948px, 931px); opacity: 1; } 83.1% { transform: translate(966px, 953px); opacity: 1; } 84.1% { transform: translate(963px, 981px); opacity: 1; } 85.2% { transform: translate(946px, 1004px); opacity: 1; } 86.3% { transform: translate(923px, 1021px); opacity: 1; } 87.4% { transform: translate(897px, 1032px); opacity: 0; } 88.4% { transform: translate(869px, 1038px); opacity: 0; } 89.5% { transform: translate(841px, 1044px); opacity: 0; } 90.6% { transform: translate(812px, 1050px); opacity: 0; } 91.7% { transform: translate(784px, 1054px); opacity: 0; } 92.8% { transform: translate(755px, 1058px); opacity: 0; } 93.8% { transform: translate(726px, 1062px); opacity: 0; } 94.9% { transform: translate(698px, 1065px); opacity: 0; } 96.0% { transform: translate(669px, 1067px); opacity: 0; } 100% { transform: translate(387px, 301px); opacity: 0; } }
.tl-scene[data-key="dig"] .dig-glow, .tl-scene[data-key="dig"] .dig-mag { opacity: 0; }
#one .tl-scene[data-key="dig"].tl-play .dig-glow { animation: dig-glow var(--tl-t) ease-in-out both; animation-delay: calc(var(--i) * var(--tl-t) * 0.14); }
#one .tl-scene[data-key="dig"].tl-play .dig-mag { animation: dig-mag var(--tl-t) ease-out both; }
@keyframes dig-glow { 0% { opacity: 0; transform: scale(0.96); } 28% { opacity: 0.3; transform: none; } 60%, 100% { opacity: 0; transform: none; } }
@keyframes dig-mag { 0%, 50% { opacity: 0; transform: none; } 58% { opacity: 0.9; transform: scale(1.05); } 82%, 100% { opacity: 0; transform: scale(1.45); } }
/* ---- /tile:dig ---- */

/* ---- tile:pbi  Fines dashboard (overlay) ---- */
.tl-scene[data-key="pbi"] { --tl-t: calc(3s * var(--tl-k)); }
.tl-scene[data-key="pbi"] .pbi-mask, .tl-scene[data-key="pbi"] .pbi-bar, .tl-scene[data-key="pbi"] .pbi-ping, .tl-scene[data-key="pbi"] .pbi-kpi { opacity: 0; }
.tl-scene[data-key="pbi"] .pbi-bar { transform-origin: left center; }
#one .tl-scene[data-key="pbi"].tl-play .pbi-mask { animation: pbi-mask var(--tl-t) linear both; }
#one .tl-scene[data-key="pbi"].tl-play .pbi-bar { animation: pbi-bar var(--tl-t) cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d) * var(--tl-t) * 0.3); }
#one .tl-scene[data-key="pbi"].tl-play .pbi-ping { animation: pbi-ping var(--tl-t) ease-out both; animation-delay: calc(var(--i) * var(--tl-t) * 0.02); }
#one .tl-scene[data-key="pbi"].tl-play .pbi-kpi { animation: pbi-kpi var(--tl-t) linear both; }
@keyframes pbi-mask { 0%, 70% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes pbi-bar { 0%, 4% { opacity: 1; transform: scaleX(0); } 26%, 70% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: none; } }
@keyframes pbi-ping { 0%, 20% { opacity: 0; transform: none; } 24% { opacity: 0.9; transform: none; } 50%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes pbi-kpi { 0%, 72% { opacity: 1; } 86%, 100% { opacity: 0; } }
/* ---- /tile:pbi ---- */

/* ---- tile:wav  Wave field (redraw) ---- */
.tl-scene[data-key="wav"] { --tl-t: calc(60s * var(--tl-k)); }
.tl-scene[data-key="wav"] .wav-a { animation: wav-left var(--tl-t) linear infinite; }
.tl-scene[data-key="wav"] .wav-b { animation: wav-right calc(var(--tl-t) * 1.5) linear infinite; }
@keyframes wav-left { from { transform: translateX(0); } to { transform: translateX(-1400px); } }
@keyframes wav-right { from { transform: translateX(-1400px); } to { transform: translateX(0); } }
/* ---- /tile:wav ---- */

/* ---- tile:rdy  Readiness (redraw) ---- */
.tl-scene[data-key="rdy"] { --tl-t: calc(4s * var(--tl-k)); --tl-e: calc(1.5s * var(--tl-k)); }
.tl-scene[data-key="rdy"] .rdy-row { opacity: 0; }
.tl-scene[data-key="rdy"] .rdy-in { transform-origin: left center; }
.tl-scene[data-key="rdy"] .rdy-fill, .tl-scene[data-key="rdy"] .rdy-alt { transform-origin: left center; }
.tl-scene[data-key="rdy"] .rdy-alt { opacity: 0; }
section.tl-in .tl-scene[data-key="rdy"] .rdy-row { animation: rdy-row calc(var(--tl-e) * 0.3) ease-out calc(var(--i) * var(--tl-e) * 0.06) both; }
section.tl-in .tl-scene[data-key="rdy"] .rdy-in { animation: rdy-grow calc(var(--tl-e) * 0.5) cubic-bezier(.2,.7,.2,1) calc(var(--tl-e) * (0.15 + var(--i) * 0.06)) both; }
@keyframes rdy-row { from { opacity: 0; } to { opacity: 1; } }
@keyframes rdy-grow { from { transform: scaleX(0); } to { transform: none; } }
/* hover: three activities re-scored; two improve and change colour, one slips */
#one .tl-scene[data-key="rdy"].tl-play .rdy-a1, #one .tl-scene[data-key="rdy"].tl-play .rdy-a4 { animation: rdy-alt var(--tl-t) ease-in-out both; }
#one .tl-scene[data-key="rdy"].tl-play .rdy-f1, #one .tl-scene[data-key="rdy"].tl-play .rdy-f4 { animation: rdy-base var(--tl-t) ease-in-out both; }
#one .tl-scene[data-key="rdy"].tl-play .rdy-f7 { animation: rdy-shrink var(--tl-t) ease-in-out both; }
@keyframes rdy-alt { 0%, 12% { opacity: 0; transform: scaleX(var(--k)); } 30%, 72% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scaleX(var(--k)); } }
@keyframes rdy-base { 0%, 12% { opacity: 1; } 30%, 72% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes rdy-shrink { 0%, 18% { transform: none; } 36%, 72% { transform: scaleX(0.845); } 90%, 100% { transform: none; } }
/* ---- /tile:rdy ---- */

/* ---- tile:rmx  Risk matrix (redraw) ---- */
.tl-scene[data-key="rmx"] { --tl-t: calc(4s * var(--tl-k)); --tl-e: calc(1.6s * var(--tl-k)); }
.tl-scene[data-key="rmx"] .rmx-t { font-family: "Source Sans Pro", Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 1.6px; text-anchor: middle; fill: #9ea5bb; }
.tl-scene[data-key="rmx"] .rmx-ct { fill: #ece7e4; letter-spacing: 1.2px; }
.tl-scene[data-key="rmx"] .rmx-r { text-anchor: end; }
.tl-scene[data-key="rmx"] .rmx-kt { fill: #0b1f4f; font-size: 12px; font-weight: bold; letter-spacing: 0; }
.tl-scene[data-key="rmx"] .rmx-lab, .tl-scene[data-key="rmx"] .rmx-cell, .tl-scene[data-key="rmx"] .rmx-chip-in { opacity: 0; }
section.tl-in .tl-scene[data-key="rmx"] .rmx-lab { animation: rmx-fade calc(var(--tl-e) * 0.4) ease-out both; }
section.tl-in .tl-scene[data-key="rmx"] .rmx-cell { animation: rmx-cell calc(var(--tl-e) * 0.35) cubic-bezier(.2,.8,.3,1.1) calc(var(--tl-e) * (0.1 + var(--r) * 0.08)) both; }
section.tl-in .tl-scene[data-key="rmx"] .rmx-chip-in { animation: rmx-drop calc(var(--tl-e) * 0.3) cubic-bezier(.2,.8,.3,1.2) calc(var(--tl-e) * (0.5 + var(--i) * 0.035)) both; }
@keyframes rmx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rmx-cell { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes rmx-drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
/* hover: two risks are moved to other cells and the cells they land in pulse, then they return */
#one .tl-scene[data-key="rmx"].tl-play .rmx-k3 { animation: rmx-move3 var(--tl-t) cubic-bezier(.4,0,.2,1) both; }
#one .tl-scene[data-key="rmx"].tl-play .rmx-k4 { animation: rmx-move4 var(--tl-t) cubic-bezier(.4,0,.2,1) both; }
#one .tl-scene[data-key="rmx"].tl-play .rmx-c22, #one .tl-scene[data-key="rmx"].tl-play .rmx-c23 { animation: rmx-pulse var(--tl-t) ease-in-out both; }
@keyframes rmx-move3 { 0%, 12% { transform: none; } 32%, 70% { transform: translate(185px, -6px); } 88%, 100% { transform: none; } }
@keyframes rmx-move4 { 0%, 16% { transform: none; } 36%, 70% { transform: translate(0, -56px); } 90%, 100% { transform: none; } }
@keyframes rmx-pulse { 0%, 28% { transform: none; } 36% { transform: scale(1.05); } 46%, 100% { transform: none; } }
/* ---- /tile:rmx ---- */

/* ---- tile:ast  Asteroids (redraw) ---- */
.tl-scene[data-key="ast"] { --tl-t: calc(5.5s * var(--tl-k)); --tl-e: calc(1.6s * var(--tl-k)); background: #060808; }
.tl-scene[data-key="ast"] .ast circle { transform-box: fill-box; transform-origin: center; }
.tl-scene[data-key="ast"] .ast .ast-ship, .tl-scene[data-key="ast"] .ast .ast-ship-rot { transform-box: view-box; transform-origin: 0 0; }
.tl-scene[data-key="ast"] .ast-ship-rot { transform: rotate(-66.9deg); }
.tl-scene[data-key="ast"] .ast-star { fill: #fff; opacity: 0.75; }
.tl-scene[data-key="ast"] .ast-shot { opacity: 0; }
.tl-scene[data-key="ast"] .ast-hud { position: absolute; left: 5%; top: 4%; display: flex; flex-direction: column; color: #fff;
	font: 12px/1.45 Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; pointer-events: none; }
.tl-scene[data-key="ast"] .ast-hud b { font-weight: normal; display: inline-block; }
/* entry, once */
.tl-scene[data-key="ast"] .ast-rock, .tl-scene[data-key="ast"] .ast-ship, .tl-scene[data-key="ast"] .ast-trail, .tl-scene[data-key="ast"] .ast-hud, .tl-scene[data-key="ast"] .ast-stars { opacity: 0; }
section.tl-in .tl-scene[data-key="ast"] .ast-stars { animation: ast-fade calc(var(--tl-e) * 0.6) ease-out both; }
section.tl-in .tl-scene[data-key="ast"] .ast-rock { animation: ast-rock-in calc(var(--tl-e) * 0.55) cubic-bezier(.2,.8,.3,1.2) calc(var(--e) * var(--tl-e) * 0.07) both; }
section.tl-in .tl-scene[data-key="ast"] .ast-ship { animation: ast-ship-in calc(var(--tl-e) * 0.6) cubic-bezier(.2,.8,.2,1) calc(var(--tl-e) * 0.3) both; }
section.tl-in .tl-scene[data-key="ast"] .ast-trail { animation: ast-fade calc(var(--tl-e) * 0.12) linear calc(var(--tl-e) * (0.72 + var(--e) * 0.07)) both; }
section.tl-in .tl-scene[data-key="ast"] .ast-hud { animation: ast-fade calc(var(--tl-e) * 0.3) ease-out calc(var(--tl-e) * 1.05) both; }
@keyframes ast-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ast-rock-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes ast-ship-in { from { opacity: 0; transform: translate(-70px, 60px); } to { opacity: 1; transform: none; } }
/* after the entry: hold the opening frame, so ending a play cycle does not restart the entry */
#one .tl-scene[data-key="ast"].tl-ready .ast-rock, #one .tl-scene[data-key="ast"].tl-ready .ast-ship, #one .tl-scene[data-key="ast"].tl-ready .ast-trail, #one .tl-scene[data-key="ast"].tl-ready .ast-hud, #one .tl-scene[data-key="ast"].tl-ready .ast-stars { animation: none; opacity: 1; }
/* play cycle: the game's own rules, worked out by the build script */
#one .tl-scene[data-key="ast"].tl-play .ast-ship-rot { animation: ast-aim var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-star:nth-child(3n) { animation: ast-twinkle calc(var(--tl-t) * 0.5) ease-in-out calc(var(--d) * 0.4s) 2 alternate; }
@keyframes ast-twinkle { from { opacity: 0.75; } to { opacity: 0.15; } }
#one .tl-scene[data-key="ast"].tl-play .ast-t0 { animation: ast-b-t0 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-t1 { animation: ast-b-t1 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-t2 { animation: ast-b-t2 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-t3 { animation: ast-b-t3 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-t4 { animation: ast-b-t4 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-s0 { animation: ast-b-s0 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-s1 { animation: ast-b-s1 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-s2 { animation: ast-b-s2 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-r1 { animation: ast-gone-1 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-r3 { animation: ast-gone-3 var(--tl-t) linear both; }
#one .tl-scene[data-key="ast"].tl-play .ast-r2 { animation: ast-gone-2 var(--tl-t) linear both; }
@keyframes ast-b-t0 { 0%, 2.0% { opacity: 1; transform: none; } 15.5% { opacity: 1; transform: translate(27.0px, -159.8px); } 15.6%, 86% { opacity: 0; transform: translate(27.0px, -159.8px); } 87% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ast-b-t1 { 0%, 2.0% { opacity: 1; transform: none; } 17.5% { opacity: 1; transform: translate(41.1px, -181.5px); } 17.6%, 86% { opacity: 0; transform: translate(41.1px, -181.5px); } 87% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ast-b-t2 { 0%, 2.0% { opacity: 1; transform: none; } 19.5% { opacity: 1; transform: translate(57.0px, -202.5px); } 19.6%, 86% { opacity: 0; transform: translate(57.0px, -202.5px); } 87% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ast-b-t3 { 0%, 2.0% { opacity: 1; transform: none; } 21.5% { opacity: 1; transform: translate(73.5px, -222.7px); } 21.6%, 86% { opacity: 0; transform: translate(73.5px, -222.7px); } 87% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ast-b-t4 { 0%, 2.0% { opacity: 1; transform: none; } 15.8% { opacity: 1; transform: translate(57.4px, -155.0px); } 15.9%, 86% { opacity: 0; transform: translate(57.4px, -155.0px); } 87% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes ast-b-s0 { 0%, 26.9% { opacity: 0; transform: none; } 27.0% { opacity: 1; transform: none; } 29.9% { opacity: 1; transform: translate(25.9px, -24.0px); } 30.0%, 100% { opacity: 0; transform: translate(25.9px, -24.0px); } }
@keyframes ast-b-s1 { 0%, 30.9% { opacity: 0; transform: none; } 31.0% { opacity: 1; transform: none; } 38.2% { opacity: 1; transform: translate(63.4px, -58.7px); } 38.3%, 100% { opacity: 0; transform: translate(63.4px, -58.7px); } }
@keyframes ast-b-s2 { 0%, 34.9% { opacity: 0; transform: none; } 35.0% { opacity: 1; transform: none; } 67.9% { opacity: 1; transform: translate(289.7px, -268.5px); } 68.0%, 100% { opacity: 0; transform: translate(289.7px, -268.5px); } }
@keyframes ast-gone-1 { 0%, 15.8% { opacity: 1; transform: none; } 15.9%, 84% { opacity: 0; transform: scale(0.4); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes ast-gone-3 { 0%, 29.9% { opacity: 1; transform: none; } 30.0%, 84% { opacity: 0; transform: scale(0.4); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes ast-gone-2 { 0%, 38.2% { opacity: 1; transform: none; } 38.3%, 84% { opacity: 0; transform: scale(0.4); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes ast-aim { 0%, 22.0% { transform: rotate(-66.9deg); } 25.0%, 84.0% { transform: rotate(-42.8deg); } 88.0%, 100% { transform: rotate(-66.9deg); } }
/* ---- /tile:ast ---- */