html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body { transition: background-color 1s ease; background-color: #e8e4dc; }

h1, h2, h3 { font-family: "bodoni-moda-variable",sans-serif; font-variation-settings: 'wght' 400, 'opsz' 11; }
h1 { font-size: 90px; font-weight: 600; }
h1, h3, p { color: #221e1f; }
h2 { font-size: 150px; color: #ffffff; line-height: 85px; }
p { font-family: Arial, Helvetica, sans-serif; font-size: 30px; line-height: 59px; max-width: 830px; text-align: left; font-weight: 200; margin: 0 auto; }
.span-gold { color: #906c18; }

#segment4 { opacity: 0; }
.soul { opacity: 0; transition: opacity 2s ease-out; transition-delay: 1s; }
.left-middle { opacity: 0; transition: opacity 2s ease-out; transition-delay: 1s; }

.fade-in { opacity: 0; transition: opacity 2s ease-in; }
.no-opacity { opacity: 0; transition: opacity 0.3s ease; }
.header-animation {
    line-height: 100px;
    transition: line-height 0.3s ease;
}

.segment {
    width: 100%;
    height: 230vh;
    position: relative;
}
#last-segment { height: 100vh; }

.content-centered {
    width: fit-content;
    height: fit-content;
    position: sticky;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
    opacity: 1;
    transition: opacity 1.5s ease-out;
}
.content-centered.visible { opacity: 1; }

.image-view { 
    position: relative;
    display: flex;
    justify-content: space-between;
    max-width: 70%;
    max-height: 90vh;
    margin: 0 auto;
    gap: 110px;
    opacity: 0;
    overflow: hidden;
    transition: opacity 1s ease-out;
    transition-delay: 1s;
}

img {
    height: 100%;
    flex: 1;
}

#img-1 { opacity: 1; transition: opacity 1s ease-out, margin-top 0.5s ease-out; transition-delay: 1.6s; max-width: 35%; }
#img-2 { opacity: 0; transition: opacity 1s ease-out; margin-top: 90px; width: 80%; }

.upwards {
    position: absolute;
    bottom: 50px;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 1s ease-out, transform 0.3s;
    transition-delay: 1s;
    width: 45px;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('go-up.svg');
    cursor: pointer;
    z-index: 100;
}