body:has(.ending-cinematic) .modal { width:1120px; max-width:calc(100vw - 32px); }.modal-body:has(.ending-cinematic) { padding-top:0; }.ending-cinematic { margin:0 -24px 25px; --ending-accent:#a9c2c4; }.ending-cinematic[data-ending-tone=gold] { --ending-accent:#e1c580; }.ending-cinematic[data-ending-tone=embers],.ending-cinematic[data-ending-tone=heat] { --ending-accent:#d79263; }.ending-cinematic[data-ending-tone=ash] { --ending-accent:#b5aea6; }.ending-hero { position:relative; min-height:380px; height:min(57vh,560px); overflow:hidden; background:#162820; }.ending-hero>img { position:absolute; width:100%; height:100%; object-fit:cover; animation:ending-image-arrive 1.9s ease-out both; }.ending-hero:after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 30%,#071611b8 72%,#071611f2); pointer-events:none; }.ending-hero-copy { position:absolute; left:6%; right:6%; bottom:7%; z-index:2; color:#faf3da; animation:ending-title-arrive 1.25s .35s ease-out both; }.ending-seal { display:inline-block; padding:6px 12px; border:1px solid var(--ending-accent); color:var(--ending-accent); font-family:var(--mono,monospace); letter-spacing:3px; font-size:11px; }.ending-hero-copy h2 { color:#fff6df; font-family:var(--serif,serif); font-size:clamp(27px,4.3vw,52px); line-height:1.3; margin:16px 0 11px; text-shadow:0 3px 12px #04120d; }.ending-hero-copy p { max-width:700px; font-size:14px; line-height:1.85; color:#ece6d0; }.ending-hero-copy small { display:block; margin-top:18px; font-size:11px; color:var(--ending-accent); letter-spacing:1px; }.ending-atmosphere { position:absolute; inset:0; z-index:1; pointer-events:none; }.ending-atmosphere i { position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:var(--ending-accent); box-shadow:0 0 8px var(--ending-accent); opacity:0; animation:ending-particle var(--duration) var(--delay) 3 ease-in-out; }.ending-cinematic[data-ending-tone=ash] .ending-atmosphere i,.ending-cinematic[data-ending-tone=winter] .ending-atmosphere i { width:2px; height:5px; border-radius:0; box-shadow:none; animation-name:ending-ash; }.ending-cinematic[data-ending-tone=heat] .ending-hero>img { filter:sepia(.15); }.ending-result-title { font-size:17px; margin:22px 0 14px; }.ending-credits { --credits-window:390px; position:relative; height:var(--credits-window); overflow:auto; text-align:center; color:#f4edd7; background:#15291f; border:1px solid #899178; margin:15px 0; }.ending-credit-roll { padding:60px 24px; animation:ending-credit-scroll 32s linear both; }.ending-credits:hover .ending-credit-roll,.ending-credits:focus-within .ending-credit-roll { animation-play-state:paused; }.ending-credit-roll h2 { color:#e2ce94; font-size:30px; margin:35px 0 20px; }.ending-credit-roll h3 { color:#c9b77f; font-size:12px; margin:50px 0 12px; letter-spacing:1px; }.ending-credit-roll p { color:#e2e4d3; font-size:13px; line-height:2; }.ending-credit-roll strong { font-size:20px; font-weight:500; }
@keyframes ending-image-arrive { from { opacity:0; transform:scale(1.055); } to { opacity:1; transform:scale(1); } }@keyframes ending-title-arrive { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }@keyframes ending-particle { 0%,100% { opacity:0; transform:translate(0,8px); } 35%,65% { opacity:.55; } 90% { transform:translate(12px,-26px); } }@keyframes ending-ash { 0%,100% { opacity:0; transform:translate(0,-10px); } 30%,70% { opacity:.45; } 90% { transform:translate(18px,35px); } }@keyframes ending-credit-scroll { from { transform:translateY(0); } to { transform:translateY(calc(-100% + var(--credits-window))); } }
html[data-motion=reduced] .ending-cinematic *,html[data-motion=reduced] .ending-credit-roll { animation:none !important; }html[data-motion=reduced] .ending-atmosphere { display:none; }@media(prefers-reduced-motion:reduce) { .ending-cinematic *,.ending-credit-roll { animation:none !important; }.ending-atmosphere { display:none; } }
@media(max-width:580px) { body:has(.ending-cinematic) .modal { max-width:calc(100vw - 20px); }.ending-cinematic { margin:0 -19px 18px; }.ending-hero { min-height:310px; height:49vh; }.ending-hero-copy { left:7%; right:7%; }.ending-hero-copy h2 { font-size:28px; }.ending-hero-copy p { font-size:12px; line-height:1.8; }.ending-credits { --credits-window:340px; } }
.milestone-illustration{position:relative;margin:0 0 22px;background:#14251f;overflow:hidden;border:1px solid #5b6d51;border-radius:7px;aspect-ratio:16/9}.milestone-illustration img{width:100%;height:100%;object-fit:cover;display:block;animation:milestone-arrival 12s ease-out both}.milestone-illustration figcaption{position:absolute;inset:auto 0 0;padding:32px 24px 20px;background:linear-gradient(transparent,#091812e6);display:grid;gap:8px;color:#f2ead1}.milestone-illustration figcaption span{font-size:10px;letter-spacing:.16em;color:#d9c28b}.milestone-illustration figcaption strong{font-size:clamp(21px,3vw,34px);font-family:Georgia,serif;font-weight:500;line-height:1.25}.tech-milestone .milestone-illustration{margin:-12px -12px 12px;width:calc(100% + 24px);border-radius:4px 4px 0 0;border:0;aspect-ratio:16/8}.tech-milestone{overflow:hidden}.milestone-illustration.compact img{animation:none}.milestone-illustration.compact{pointer-events:none}@keyframes milestone-arrival{from{transform:scale(1.035);filter:brightness(.85)}to{transform:scale(1);filter:brightness(1)}}@media(prefers-reduced-motion:reduce){.milestone-illustration img{animation:none}}@media(max-width:600px){.milestone-illustration figcaption{padding:24px 14px 12px}.milestone-illustration figcaption span{font-size:10px}.milestone-illustration figcaption strong{font-size:21px}}