body,html{margin:0;height:100%;width:100;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{background-color:#000;position:relative}#bg{position:fixed;inset:0}.bg-img{position:fixed;height:100vh;width:auto;top:50%;left:50%;max-width:none;max-height:none;transform:translate(-50%,-50%);opacity:0;transition:transform .8s ease,opacity 1s ease-out;aspect-ratio:1/1;object-fit:cover}.bg-img.is-visible{opacity:1}.click-zone{position:absolute;cursor:pointer}.click-zone.corner{top:0;right:0;width:clamp(40px,8vw,100px);height:clamp(40px,8vw,100px)}.click-zone.center{top:50%;left:50%;transform:translate(-50%,-50%);width:calc(clamp(40px,8vw,100px) * 2);height:calc(clamp(40px,8vw,100px) * 2);border-radius:50%}.text-box{position:absolute;color:#83a9af;opacity:0;transition:opacity 1s ease-in}.text-box.show{opacity:1}@media (min-aspect-ratio:800/800){body.large.show-text .bg-img{transform:translate(-50%,-50%) translateX(-50vw)}body.large.show-text .text-box{top:50%;left:50%;transform:translateY(-50%);width:40%;font-size:clamp(2rem,4vmin,5rem);color:#83a9af;opacity:1}}@media (max-aspect-ratio:800/800) and (min-aspect-ratio:550/800){#bg img.bg-img{width:100vw;height:auto}body.medium.show-text .bg-img{transform:translate(-50%,-50%) translateX(-70vw)}body.medium.show-text .text-box{top:25%;left:25%;transform:translateY(-50%);width:65%;font-size:clamp(2rem,2vmin,4rem);color:#83a9af;opacity:1}}@media (max-aspect-ratio:550/800){#bg img.bg-img{width:100vw;height:auto}body.small.show-text .bg-img{transform:translate(-50%,calc(-50% + 50vh))}body.small.show-text .text-box{top:10vh;left:5%;width:90%;font-size:clamp(1rem,5vmin,3.5rem);color:#83a9af;opacity:1}}