function titleScreen(){
clearScene();

sceneDiv.style.opacity="0";
sceneDiv.style.transition="opacity 3s ease";

let title=document.createElement("div");
title.innerText="entry four";
title.style.fontSize="34px";
title.style.letterSpacing="3px";
title.style.marginBottom="6px";

let artist=document.createElement("div");
artist.innerText="by Jaydes";
artist.style.opacity="0.7";
artist.style.marginBottom="40px";

let start=document.createElement("button");
start.innerText="START";
start.style.padding="12px 30px";
start.style.border="2px solid white";
start.style.background="black";
start.style.color="white";

sceneDiv.appendChild(title);
sceneDiv.appendChild(artist);
sceneDiv.appendChild(start);

setTimeout(()=>sceneDiv.style.opacity="1",100);

start.onclick=()=>{
sceneDiv.style.opacity="0";
setTimeout(scene1,1500);
};
}function scene1(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="falling in love is tricky";
lyric.style.position="absolute";
lyric.style.top="10%";
sceneDiv.appendChild(lyric);

let heart=document.createElement("div");
heart.style.position="absolute";
heart.style.top="0px";
heart.style.left="50%";
heart.style.transform="translateX(-50%)";
sceneDiv.appendChild(heart);

/* larger detailed heart */
const pattern=[
[0,1,1,0,0,1,1,0],
[1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1],
[0,1,1,1,1,1,1,0],
[0,0,1,1,1,1,0,0],
[0,0,0,1,1,0,0,0]
];

pattern.forEach((row,y)=>{
row.forEach((cell,x)=>{
if(cell){
let p=document.createElement("div");
p.className="pixel";
p.style.left=(x*10)+"px";
p.style.top=(y*10)+"px";
heart.appendChild(p);
}
});
});

heart.style.transition="top 2s linear";
setTimeout(()=>heart.style.top="40vh",50);

/* zigzag split */
setTimeout(()=>{
heart.style.transition="none";
heart.innerHTML="";

const left=[
[0,1,1,0],
[1,1,1,1],
[1,1,1,1],
[0,1,1,1],
[0,0,1,1],
[0,0,0,1]
];

const right=[
[0,1,1,0],
[1,1,1,1],
[1,1,1,1],
[1,1,1,0],
[1,1,0,0],
[1,0,0,0]
];

left.forEach((r,y)=>{
r.forEach((c,x)=>{
if(c){
let p=document.createElement("div");
p.className="pixel";
p.style.left=(x*10)+"px";
p.style.top=(y*10)+"px";
heart.appendChild(p);
}
});
});

right.forEach((r,y)=>{
r.forEach((c,x)=>{
if(c){
let p=document.createElement("div");
p.className="pixel";
p.style.left=(60+x*10)+"px";
p.style.top=(y*10)+"px";
heart.appendChild(p);
}
});
});

heart.style.transition="top 2s linear";
heart.style.top="100vh";

},2000);

setTimeout(scene2,4000);
}function scene2(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="might trust you but don't wanna get hurt";
lyric.style.position="absolute";
lyric.style.top="10%";
sceneDiv.appendChild(lyric);

let left=document.createElement("div");
let right=document.createElement("div");

left.style.position="absolute";
right.style.position="absolute";
left.style.top="50%";
right.style.top="50%";
left.style.left="-200px";
right.style.right="-200px";

sceneDiv.appendChild(left);
sceneDiv.appendChild(right);

/* more detailed 8x8 hand */
const hand=[
[0,0,1,1,0,0,0,0],
[0,1,1,1,1,0,0,0],
[1,1,1,1,1,1,0,0],
[1,1,1,1,1,1,1,0],
[1,1,1,1,1,1,1,0],
[0,1,1,1,1,1,0,0],
[0,0,1,1,1,0,0,0],
[0,0,0,1,0,0,0,0]
];

function build(container,flip=false){
hand.forEach((r,y)=>{
r.forEach((c,x)=>{
if(c){
let p=document.createElement("div");
p.className="pixel";
p.style.left=(flip?(80-x*10):(x*10))+"px";
p.style.top=(y*10)+"px";
container.appendChild(p);
}
});
});
}

build(left,false);
build(right,true);

left.style.transition="left 2s";
right.style.transition="right 2s";

setTimeout(()=>{
left.style.left="35%";
right.style.right="35%";
},100);

setTimeout(scene3,3500);
}function scene3(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="you heard all my secrets";
lyric.style.position="absolute";
lyric.style.top="8%";
sceneDiv.appendChild(lyric);

let phone=document.createElement("div");
phone.style.width="200px";
phone.style.height="350px";
phone.style.border="4px solid white";
phone.style.display="flex";
phone.style.flexDirection="column";
phone.style.alignItems="center";
phone.style.paddingTop="10px";
sceneDiv.appendChild(phone);

let screen=document.createElement("div");
screen.style.width="160px";
screen.style.height="270px";
screen.style.border="2px solid white";
screen.style.display="flex";
screen.style.flexDirection="column";
screen.style.gap="10px";
screen.style.padding="10px";
phone.appendChild(screen);

function bubble(text,color,right=false){
let b=document.createElement("div");
b.innerText=text;
b.style.background=color;
b.style.padding="8px";
b.style.maxWidth="120px";
b.style.alignSelf=right?"flex-end":"flex-start";
b.style.boxShadow="0 0 0 2px white inset";
return b;
}

setTimeout(()=>{
screen.appendChild(bubble("you heard all my secrets","#777"));
},800);

setTimeout(()=>{
screen.appendChild(bubble("i like your responses","#3a6df0",true));
},1600);

let typing;
let dots=1;
let interval;

setTimeout(()=>{
typing=document.createElement("div");
typing.innerText=".";
screen.appendChild(typing);
interval=setInterval(()=>{
dots=dots%3+1;
typing.innerText=".".repeat(dots);
},400);
},2400);

setTimeout(()=>{
clearInterval(interval);
sceneDiv.style.opacity="0";
},4200);

setTimeout(scene4,4800);
}function scene4(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="the pressure feels awful";
lyric.style.position="absolute";
lyric.style.top="45%";
lyric.style.fontSize="22px";
lyric.style.transition="transform 2s ease";
sceneDiv.appendChild(lyric);

/* black squeeze bars */
let topBar=document.createElement("div");
let bottomBar=document.createElement("div");

[topBar,bottomBar].forEach(bar=>{
bar.style.position="absolute";
bar.style.left="0";
bar.style.width="100%";
bar.style.height="0";
bar.style.background="black";
bar.style.transition="height 2s ease";
sceneDiv.appendChild(bar);
});

topBar.style.top="0";
bottomBar.style.bottom="0";

/* squeeze + zoom */
setTimeout(()=>{
topBar.style.height="45%";
bottomBar.style.height="45%";
lyric.style.transform="scale(1.2)";
},200);

/* subtle shake */
let shake=setInterval(()=>{
sceneDiv.style.transform="translateX(3px)";
setTimeout(()=>sceneDiv.style.transform="translateX(-3px)",50);
},120);

setTimeout(()=>{
clearInterval(shake);
sceneDiv.style.opacity="0";
},2600);

setTimeout(scene5,3200);
}function scene5(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="i like you";
lyric.style.position="absolute";
lyric.style.top="35%";
lyric.style.fontSize="24px";
sceneDiv.appendChild(lyric);

/* heavier pixel rain */
let rain=setInterval(()=>{
let drop=document.createElement("div");
drop.className="pixel";
drop.style.width="6px";
drop.style.height="12px";
drop.style.left=Math.random()*window.innerWidth+"px";
drop.style.top="-20px";
sceneDiv.appendChild(drop);

drop.style.transition="top 1s linear";
setTimeout(()=>drop.style.top="100vh",20);
setTimeout(()=>drop.remove(),1000);
},40);

/* screen shut off */
setTimeout(()=>{
clearInterval(rain);
sceneDiv.style.transition="opacity 1.5s ease";
sceneDiv.style.opacity="0";
},3200);

setTimeout(scene6,4000);
}function scene6(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="gave you my jacket in case you needed it";
lyric.style.position="absolute";
lyric.style.top="12%";
sceneDiv.appendChild(lyric);

/* person body */
let body=document.createElement("div");
body.style.position="absolute";
body.style.top="45%";
body.style.left="48%";
body.style.width="40px";
body.style.height="100px";
body.style.border="3px solid white";
sceneDiv.appendChild(body);

/* jacket shape */
let jacket=document.createElement("div");
jacket.style.position="absolute";
jacket.style.top="48%";
jacket.style.left="-120px";
jacket.style.width="80px";
jacket.style.height="90px";
jacket.style.border="3px solid white";
jacket.style.transition="left 2s ease";
sceneDiv.appendChild(jacket);

/* move jacket onto person */
setTimeout(()=>{
jacket.style.left="45%";
},200);

setTimeout(()=>{
sceneDiv.style.opacity="0";
},3200);

setTimeout(scene7,3800);
}function scene7(){
clearScene();

let lyric=document.createElement("div");
lyric.innerText="she won't hear this";
lyric.style.position="absolute";
lyric.style.top="15%";
sceneDiv.appendChild(lyric);

/* diary page */
let page=document.createElement("div");
page.style.position="absolute";
page.style.top="35%";
page.style.width="320px";
page.style.height="200px";
page.style.border="3px solid white";
page.style.padding="20px";
page.style.fontSize="18px";
page.style.lineHeight="28px";
sceneDiv.appendChild(page);

let text="she won't hear this";
let i=0;