:root{
    --offset:0px;
    --fotoScale:1;
    --fotoBrightness:1;
    --foto1Scale:1.3;
    --foto1Brightness:0.6;

    --heroScale:1;
    --heroRotate:0deg;
    --heroSaturate:1;

    --endScale:1;
    --endOpacity:0;

    --finalScale:1;
    --finalRotate:0deg;
    --finalContrast:1;
    --finalOpacity:0;
}

body{
    margin:0;
    background:#111;
    font-family:"Bebas Neue",sans-serif;
    overflow-x:hidden;
}

.title{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    font-size:80px;
    letter-spacing:4px;
    line-height:0.9;
    color:white;
    text-transform:uppercase;
    text-shadow:0 0 20px rgba(0,0,0,0.7),0 0 40px rgba(0,0,0,0.8);
}

.hero{
    height:100vh;
    position:relative;
    overflow:hidden;
}

.hero video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(var(--heroScale)) rotate(var(--heroRotate));
    filter:saturate(var(--heroSaturate));
}

.intro-text,.energy-text,.laptop-text{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px;
    background:#111;
}

.intro-text p,
.energy-text p,
.laptop-text p{
    font-size:40px;
    color:white;
    max-width:900px;
    line-height:1.1;
    transform:scale(.6);
    opacity:.2;
}

.chaos-text{
    height:120vh;
    position:relative;
    background:#111;
    overflow:hidden;
}

.chaos{
    position:absolute;
    width:100%;
    text-align:center;
    color:white;
    font-size: 60px;
    opacity:0;
    transform:translateY(200px) rotate(0deg) scale(.8);
    transition:all .8s cubic-bezier(.22,1,.36,1);
}

.c1{top:30%;}
.c2{top:42%;}
.c3{top:60%;}
.c4{top:78%;}

.chaos.show{
    opacity:1;
    transform:translateY(0) rotate(-2deg) scale(1);
}

.scene{height:100vh;position:relative;overflow:hidden;background:#000;}

.parallax{
    position:absolute;
    inset:0;
    background-image:url("billeder/energidrik.JPG");
    background-size:cover;
    background-position:center;
    transform:translateY(var(--offset)) scale(var(--fotoScale));
    filter:brightness(var(--fotoBrightness));
}

.section-gap{height:30vh;background:#111;}

.scene2{height:100vh;overflow:hidden;position:relative;}

.foto1{
    position:absolute;
    inset:0;
    background-image:url("billeder/open-laptop.JPG");
    background-size:cover;
    background-position:center;
    transform:scale(var(--foto1Scale));
    filter:brightness(var(--foto1Brightness));
}

.tasks{
    min-height:200vh;
    background:#111;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:120px;
    gap:90px;
}

.note{
    width:320px;
    background:#f4e99b;
    padding:28px;
    border-radius:6px;
    font-family:system-ui,Arial;
    font-weight:600;
    color:#222;
    box-shadow:0 20px 40px rgba(0,0,0,0.45);
    opacity:0;
    transform:translateY(120px) scale(.9);
    transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s ease;
}

.note.active{
    opacity:1;
    transform:translateY(0) scale(1);
}

.notes-gap{height:50vh;background:#111;}

.scene3{height:100vh;position:relative;overflow:hidden;background:#000;}

.foto2{
    position:absolute;
    inset:0;
    background-image:url("billeder/opvask.JPG");
    background-size:cover;
    background-position:center;
    transform:scale(var(--endScale));
}

.scene3 .title{
    opacity:var(--endOpacity);
}

.final-gap{height:40vh;background:#111;}

.scene4{height:100vh;position:relative;overflow:hidden;background:#000;}

.foto5{
    position:absolute;
    inset:0;
    background-image:url("billeder/closed-laptop.JPG");
    background-size:cover;
    background-position:center;
    transform:scale(var(--finalScale)) rotate(var(--finalRotate));
    filter:contrast(var(--finalContrast));
}

.scene4 .title{opacity:var(--finalOpacity);}

.video-end{
    height:100vh;
    position:relative;
    overflow:hidden;
    background:#000;
}

.video-end video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}