@property --scroll-y{syntax: "<number>"; inherits: true; initial-value: 0;}@keyframes move-bg{0%{--scroll-y: 0}to{--scroll-y: 100}}header{--header-height: 90vh !important;--scroll-y: 0;background-image:url("./ontmoeting-v1.1.webp");background-position:center;background-size:cover;background-repeat:no-repeat;background-position-y:calc(var(--scroll-y) * 4px);display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:32px;box-shadow:0 0 #0000;+.wave{--header-height: 90vh !important}.wave.left{position:sticky;left:0;top:0;width:100%;z-index:1;&:after{background-size:200% 100%;height:56px;opacity:0}h1{margin:0;font-size:2rem;position:absolute;align-items:center;top:0;z-index:2;left:16px;transform:translate(0);height:56px;color:inherit}}&:after{--scroll-y: 0;content:"";position:absolute;inset:0;overflow:hidden;z-index:-4;pointer-events:none;background-color:var(--color-bg);background:radial-gradient(circle at 50% 50%,var(--color-secundary),var(--color-soft) 30%,transparent);opacity:calc(.2 + var(--scroll-y) / 25 * .8)}img,.cta-region{border-radius:100vw;backdrop-filter:blur(4px);box-shadow:0 4px 8px #0003;padding:16px}img{margin-top:48px;background-color:var(--color-bg)}>div{justify-content:center;align-items:center;display:flex;gap:16px;a{max-width:48px!important;overflow:hidden;transition:max-width .1s;width:fit-content;padding-right:12px!important;justify-content:flex-end;border-radius:100vw;>span:not(.icon){flex:0 1 auto;text-overflow:ellipsis;overflow:hidden}&:focus-visible,&:hover{max-width:400px!important}}}}@supports (animation-timeline: scroll()){header{box-shadow:0 0 #0000;animation:menu-shadow .2s linear forwards,move-bg linear both;animation-timeline:scroll(),scroll();animation-range-start:calc(90vh - 48px),0;animation-range-end:calc(90vh - 32px),100vh;.wave.left{&:after{background-size:100% 100%;height:60px;opacity:1;animation:wave-left .2s linear forwards;animation-timeline:scroll();animation-range-start:0;animation-range-end:100vh}h1{left:50%;transform:translate(-50%);height:60px;color:var(--color-fg);animation:title-left .2s linear forwards;animation-timeline:scroll();animation-range-start:0;animation-range-end:85vh}}&:after{--scroll-y: 0;animation:move-bg linear both;animation-timeline:scroll()}}}main{margin-bottom:64px;h3{font-size:28px}section:first-child,section:last-of-type{.actions{display:flex;gap:16px;flex-wrap:wrap}}section:first-child{margin-top:96px}section.features{align-items:center;text-align:center;+section{z-index:99;padding:0;article{transition:display .2s allow-discrete;display:none;position:fixed;border-radius:8px;background-color:hsl(from var(--color-bg) h s l / 80%);backdrop-filter:blur(15px);border:1px solid hsl(from var(--color-fg) h s l / 40%);top:50%;left:50%;max-width:502px;flex-direction:column;max-height:94dvh;overflow-y:auto;text-wrap:auto;text-align:left;translate:-50% 50%;box-shadow:0 4px 16px #0006,0 0 0 500vw #0003;animation:slide-in .3s ease-in forwards,fade-out .3s ease-in forwards;z-index:99;img{max-width:90vw;aspect-ratio:1;height:auto;padding:0;border-radius:100%;object-fit:cover;width:200px;margin-left:auto;margin-right:32px;margin-top:-32px;z-index:2;position:relative;border:4px solid var(--color-soft)}.wave:after{height:24px}h3{color:var(--color-primary)}p{margin:0}>p,.header,.outro{padding:32px}>p:not(.outro){margin-bottom:32px}.header{display:flex;flex-direction:column;gap:8px;background-color:var(--color-soft);p{font-size:14px;color:#666}}.outro{font-weight:700;font-size:110%;background-color:var(--color-primary);color:var(--color-bg);text-align:right}@starting-style{display:none}}}&:has(li:nth-child(1) button:focus)+section article:nth-child(1),&:has(li:nth-child(2) button:focus)+section article:nth-child(2),&:has(li:nth-child(3) button:focus)+section article:nth-child(3),&:has(li:nth-child(4) button:focus)+section article:nth-child(4){opacity:1;display:flex;animation:slide-out .3s ease-in forwards,fade-in .3s ease-in forwards}}section.panorama{position:relative;img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}&:before{content:"";inset:0;opacity:0;position:absolute;z-index:1;background-color:#0006;animation:reveal 2s linear forwards;animation-timeline:view(70% 20%)}aside{border:1px solid var(--color-bg);margin-left:auto;max-width:502px;color:var(--color-fg);padding:32px;border-radius:8px;display:flex;flex-direction:column;text-wrap:balance;z-index:1;position:relative;box-shadow:0 0 16px #0006;opacity:0;overflow:hidden;backdrop-filter:blur(16px);&.left{margin-left:0;margin-right:auto}h3{margin:0}>*{position:relative}&:before{content:"";position:absolute;inset:0;opacity:.6;z-index:0;background-color:var(--color-bg)}}}ul{gap:64px;text-align:center;justify-content:center;margin:0 auto;position:relative;li{display:contents;button{scale:1;transition:.2s;flex:1 1 100%;padding:16px;border-radius:8px;box-shadow:0 4px 8px #0003;overflow:hidden;position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;background-color:var(--color-primary);gap:12px;border:1px solid var(--color-secundary);color:var(--color-bg);cursor:pointer;user-select:none;aspect-ratio:1;&:hover,&:focus{scale:1.1}}&:nth-child(1) button{--reveal-delay: 15%}&:nth-child(2) button{--reveal-delay: 30%}&:nth-child(3) button{--reveal-delay: 15%}&:nth-child(4) button{--reveal-delay: 0%}.icon{--icon-size: 64px;color:var(--color-bg);text-shadow:0 0 4px rgba(0,0,0,.4)}h3{text-shadow:0 0 4px rgba(0,0,0,.4);font-size:16px;+div{color:hsl(from var(--color-bg) h s l / 80%);opacity:0}}&:hover{div{opacity:1}}}}section.stats{text-align:center;align-items:center;position:relative;gap:64px;max-width:100%;margin:32px 0 0;>p{font-size:18px;opacity:.8;max-width:720px}.background{background-image:url("./bos-2-v1.1.webp");position:absolute;inset:-35px 0 40%;background-color:var(--color-soft);background-size:cover;background-position:bottom;background-attachment:fixed;display:flex;flex-direction:column;justify-content:space-between;max-width:unset;z-index:-1;pointer-events:none}h3{color:#fff;text-shadow:0 0 8px rgba(0,0,0,.8);font-size:36px}*{position:relative}>p:has(em){opacity:.8;font-style:italic}>*{max-width:1200px}ul.options{flex-direction:row;gap:48px;margin:0 auto;li{display:flex;flex:1 1 100%;&:nth-child(1){--reveal-delay: 15%}&:nth-child(2){--reveal-delay: 30%}&:nth-child(3){--reveal-delay: 15%}article{flex:1 1 100%;padding:32px 24px;border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 4px 8px #0003;overflow:hidden;position:relative;display:flex;text-align:center;align-items:center;flex-direction:column;max-width:300px;gap:24px;color:#fff;border:1px solid var(--color-primary);background-color:hsl(from var(--color-primary) h s calc(l/2) / 80%);transition-duration:.2s;&:hover{background-color:hsl(from var(--color-primary) h s l / 90%)}p{margin:0}h4+p{opacity:.8;font-size:140%;+p{flex:1 0 auto;opacity:1}}}h4{text-shadow:0 0 4px rgba(0,0,0,.2);font-size:48px}}}}section.contact{align-items:flex-start;backdrop-filter:blur(15px);background-color:hsl(from var(--color-bg) h s calc(l + .2) / 60%);border:1px solid #dddddd;box-shadow:0 4px 16px #0006;flex-direction:row;gap:32px 64px;margin:0 auto 64px;max-width:750px;padding:32px;position:relative;text-align:left;border-radius:8px;overflow:hidden;text-wrap:auto;&:before{content:"";position:absolute;left:0;top:0;bottom:0;width:264px;background-color:var(--color-fg);opacity:.1}>div{gap:32px;display:flex;flex-direction:column;*{margin:0}&:has(img){align-items:center}}img{border-radius:100%;border:12px solid var(--color-primary);position:relative}}}@media screen and (max-width: 1100px){main ul{gap:16px}}@keyframes wave-left{0%{background-size:100% 100%;height:60px;opacity:1}to{background-size:200% 100%;height:56px;opacity:0}}@keyframes title-left{0%{left:50%;transform:translate(-50%);height:60px;color:var(--color-fg)}to{left:16px;transform:translate(0);height:56px;color:inherit}}@keyframes wave-left-mobile{0%{background-size:100% 100%;height:70px;opacity:1}to{background-size:150% 100%;height:54px;opacity:.8}}@keyframes title-left-mobile{0%{left:50%;transform:translate(-50%,-8px);height:70px}to{left:32px;transform:translateY(-4px);height:60px}}@media screen and (max-width: 800px){header{--header-height: 70vh !important;background-image:url("./ontmoeting.mobile-v1.1.webp");flex-direction:column;gap:16px;.wave.left{&:after{height:60px;background-size:100% 100%;animation:wave-left-mobile .2s linear forwards;animation-timeline:scroll();animation-range-start:0;animation-range-end:100vh}h1{font-size:1.5em;height:60px;animation:title-left-mobile .2s linear forwards;animation-timeline:scroll();animation-range-start:0;animation-range-end:100vh}}background-position-y:calc(var(--scroll-y) * 2px);animation:menu-shadow .2s linear forwards,move-bg linear both;animation-timeline:scroll(),scroll();animation-range-start:calc(70vh - 60px),0;animation-range-end:calc(70vh - 44px),100vh;img{margin-top:36px;margin-bottom:auto;width:140px;height:140px}.cta-region{padding:8px;margin-bottom:70px}}main{section:first-child{margin-top:0}section.stats{margin-top:0;gap:32px;padding-block:64px;h3{font-size:24px;color:var(--color-fg);text-shadow:none}&:before{display:none}ul{flex-direction:column}.background{position:absolute;inset:0;background-color:var(--color-secundary);background-image:none!important}ul.options{display:flex;flex-direction:column;gap:32px;li{article{border-radius:8px;backdrop-filter:none;box-shadow:none;border:none;max-width:400px;data{font-size:24px}}}}}section.panorama{padding:0;&:before,img{display:none}aside{max-width:100vw;border-radius:0;border:none;background-color:var(--color-ternary);color:var(--color-bg);animation:none;box-shadow:none;backdrop-filter:none;overflow:unset;opacity:1;animation:none!important;transform:translateY(0)!important;padding-top:96px;padding-bottom:96px;&:before{display:none}}section:has(ul) img{position:relative;transform:none;right:auto;margin:0 auto}}ul{flex-direction:column;gap:32px;li h3+div{opacity:1}}section.features ul li{&:nth-child(odd) button{translate:-56px 0}&:nth-child(2n) button{translate:56px 0}+li{button{margin-top:-56px}}}section.features+section article{top:100%;translate:-50% -10vw;text-align:center;width:90dvw}section.contact{max-width:100dvw;border:none;box-shadow:none;flex-direction:column;gap:64px;border-radius:0;&:before{right:0;bottom:auto;width:auto;height:228px}>div:has(img){flex-direction:row;gap:16px;align-items:flex-end;img{max-width:168px;max-height:168px}}}}}