:root { --orange: #ff481d; --ink: #171b18; --paper: #d8d5c8; --light: #f0ecdf; --ease: cubic-bezier(.22,.75,.25,1); }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'TikTok Sans', sans-serif; font-weight: 400; font-stretch: 100%; letter-spacing: 0em; line-height: 1.45; }
.slide { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
.orange { background: var(--orange); color: #552a1b; }
.dark { background: #101513; color: var(--light); }
.cream { background: var(--paper); color: var(--ink); }
.display { font-family: 'Vaibik Lanze', sans-serif; font-variation-settings: 'opsz' 1000; font-weight: 800; letter-spacing: 0em; line-height: .95; margin: 0; }
p { font-size: 32px; margin: 0; }
.lead { font-size: 38px; }
h3:not(.display) { font-family: 'TikTok Sans', sans-serif; font-weight: 500; font-stretch: 100%; letter-spacing: -.02em; line-height: 1.1; font-size: 40px; margin: 0 0 18px; }
figure { margin: 0; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figcaption { font-size: 24px; line-height: 1.45; }
.utility { position: absolute; top: 0; left: 0; width: 100%; height: 64px; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid currentColor; font-size: 22px; background: inherit; view-transition-name: deck-header; z-index: 10; }
.dark .utility { color: #b6baae; border-color: #495046; }
.shot { position: relative; background: #192323; overflow: hidden; }
.main-title { position: absolute; left: 80px; top: 91px; font-size: 388px; color: #a22e13; }
.opening-copy { position: absolute; left: 80px; top: 496px; width: 740px; }
.opening-copy h2 { font-size: 142px; color: #4d271b; }
.opening-copy p { margin-top: 38px; font-size: 33px; }
.opening-world { position: absolute; left: 880px; top: 470px; width: 960px; height: 530px; }
.opening-world img { object-position: center; }
.opening-world figcaption { position: absolute; bottom: 22px; left: 28px; color: #d9dfca; }
.intro-copy { position: absolute; left: 80px; top: 130px; width: 610px; }
.intro-copy h2 { font-size: 157px; }
.intro-copy .lead { margin-top: 48px; }
.intro-copy > p:not(.lead) { margin-top: 32px; max-width: 535px; }
.intro-copy .developer { font-size: 27px; }
.intro-world { position: absolute; top: 64px; right: 0; width: 1190px; height: 1016px; }
.intro-world img { object-fit: cover; }
.block-study { position: absolute; left: 685px; bottom: 70px; width: 485px; height: 226px; background: #eeeadd; display: flex; align-items: center; box-shadow: 0 8px 30px #0003; }
.block-study img { width: 208px; height: 208px; margin: 9px; }
.block-study figcaption { padding: 0 10px; font-size: 25px; }
.modes-title { position: absolute; left: 80px; top: 110px; font-size: 118px; }
.mode { position: absolute; top: 263px; width: 850px; }
.mode h3 { font-size: 142px; margin-bottom: 22px; }
.survival { left: 80px; }
.creative { left: 990px; }
.survival h3 { color: #ff6941; }
.creative h3 { color: #dcdcc9; }
.mode .shot { height: 397px; }
.mode p { margin-top: 28px; font-size: 34px; }
.mode-note { position: absolute; left: 80px; bottom: 65px; font-size: 27px; color: #aeb5a7; }
.first-day > h2 { position: absolute; left: 80px; top: 128px; font-size: 193px; color: #9f2d13; }
.day-intro { position: absolute; left: 80px; top: 341px; font-size: 35px; }
.day-flow { position: absolute; left: 80px; top: 443px; display: grid; grid-template-columns: 397px 57px 397px 57px 397px 57px 397px; align-items: start; }
.step .shot { width: 397px; height: 335px; }
.step .shot img { object-fit: cover; }
.step h3 { margin-top: 27px; font-size: 38px; }
.step p { font-size: 29px; }
.flow-arrow { align-self: center; margin-top: -125px; text-align: center; font-size: 46px; }
.day-tip { position: absolute; left: 80px; bottom: 44px; font-size: 26px; }
.dimensions > h2 { position: absolute; left: 80px; top: 133px; font-size: 149px; }
.dimension-grid { position: absolute; left: 80px; top: 345px; display: grid; grid-template-columns: repeat(3, 553px); gap: 50px; }
.dimension .shot { height: 358px; }
.dimension h3 { font-size: 91px; margin: 31px 0 21px; }
.dimension p { font-size: 29px; }
.overworld h3 { color: #b7c293; }
.nether h3 { color: #ff8054; }
.end h3 { color: #bc9aca; }
.dimension-line { position: absolute; left: 350px; top: 521px; width: 1200px; height: 1px; background: #b1b89b; }
.dimension-note { position: absolute; left: 80px; bottom: 72px; font-size: 28px; color: #b1b9a9; }
.making > h2 { position: absolute; top: 137px; left: 80px; font-size: 181px; }
.making-grid { position: absolute; left: 80px; top: 365px; display: grid; grid-template-columns: repeat(3, 560px); gap: 40px; }
.making-item .shot { width: 560px; height: 373px; }
.making-item h3 { font-size: 94px; margin: 29px 0 18px; }
.making-item p { font-size: 29px; }
.making-note { position: absolute; left: 80px; bottom: 46px; font-size: 27px; }
.together > h2 { position: absolute; left: 80px; top: 109px; font-size: 204px; color: #d5d8c3; }
.team-landscape { position: absolute; left: 80px; top: 357px; width: 1025px; height: 464px; }
.team-landscape img { object-position: center 65%; }
.team-players { position: absolute; left: 790px; top: 638px; width: 325px; height: 217px; border: 8px solid #101513; }
.together-copy { position: absolute; left: 1210px; top: 371px; width: 595px; }
.together-copy .lead { font-size: 40px; }
.together-copy > p + p { margin-top: 48px; font-size: 32px; color: #bbc4b2; }
.edition-note { position: absolute; left: 80px; top: 900px; width: 1650px; padding-top: 23px; border-top: 1px solid #606957; display: grid; grid-template-columns: 670px 1fr; gap: 50px; }
.edition-note h3 { font-size: 31px; }
.edition-note p { font-size: 26px; color: #bbc4b2; }
.ending > h2 { position: absolute; left: 80px; top: 125px; font-size: 246px; color: #a22e13; }
.reasons { position: absolute; left: 86px; top: 677px; width: 650px; }
.reasons p { font-size: 34px; padding: 15px 0; border-top: 1px solid #9c3e26; }
.end-world { position: absolute; left: 820px; top: 638px; width: 810px; height: 340px; }
.end-world img { object-position: center 64%; }
.end-creeper { position: absolute; left: 1680px; top: 710px; width: 160px; height: 180px; }
.closing { position: absolute; left: 85px; bottom: 55px; font-size: 37px; }
@keyframes type-reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(34px); } to { clip-path: inset(0); transform: translateY(0); } }
@keyframes scene-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes flow-reveal { from { clip-path: inset(0 100% 0 0); transform: translateX(-24px); } to { clip-path: inset(0); transform: translateX(0); } }
section[data-vx-active] .reveal { animation: type-reveal 650ms var(--ease) both; }
section[data-vx-active] .build { animation: scene-reveal 700ms var(--ease) both; }
section[data-vx-active] .delay-1 { animation-delay: 130ms; }
section[data-vx-active] .delay-2 { animation-delay: 260ms; }
section[data-vx-active] .flow-build { animation: flow-reveal 520ms var(--ease) both; }
section[data-vx-active] .step-2 { animation-delay: 130ms; }
section[data-vx-active] .step-3 { animation-delay: 260ms; }
section[data-vx-active] .step-4 { animation-delay: 390ms; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: slide-in 380ms var(--ease) both; }
::view-transition-old(deck-header), ::view-transition-new(deck-header) { animation: none; }
@keyframes slide-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
html[data-vx-direction='backward']::view-transition-new(root) { animation-name: slide-back; }
@keyframes slide-back { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
section[data-vx-active] .reveal, section[data-vx-active] .build, section[data-vx-active] .flow-build { animation: none; }
::view-transition-new(root) { animation: none; }
}
@media print {
.reveal, .build, .flow-build { animation: none !important; clip-path: none !important; transform: none !important; }
}