/* Original brand marks, suspended around a quiet typographic centre. */
.hero{overflow:hidden}
.sky-scene{position:absolute;inset:0;pointer-events:none;z-index:0;mix-blend-mode:multiply}
.hero-glass{position:relative;z-index:1}
.sky-object{position:absolute;left:var(--left);top:var(--top);width:var(--size);aspect-ratio:1;opacity:var(--opacity,1);will-change:transform;transform:translate(-50%,-50%) rotate(var(--angle));filter:blur(var(--blur,0px))}
.sky-object img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.sky-object:nth-child(1){--left:10%;--top:28%;--size:clamp(100px,13vw,190px);--angle:-13deg;--opacity:.88}
.sky-object:nth-child(2){--left:89%;--top:73%;--size:clamp(110px,14vw,205px);--angle:12deg;--opacity:.94}
.sky-object:nth-child(3){--left:84%;--top:20%;--size:100px;--angle:18deg;--opacity:.65;--blur:.2px}
.sky-object:nth-child(4){--left:18%;--top:82%;--size:90px;--angle:-20deg;--opacity:.6;--blur:.4px}


@media(max-width:900px){.sky-object:nth-child(1){--left:9%;--top:24%;--size:105px}.sky-object:nth-child(2){--left:91%;--top:80%;--size:115px}.sky-object:nth-child(3){--left:87%;--top:22%;--size:50px}.sky-object:nth-child(4){--left:13%;--top:85%;--size:45px}}
@media(max-width:600px){.sky-object:nth-child(1){--left:15%;--top:18%;--size:86px}.sky-object:nth-child(2){--left:85%;--top:85%;--size:92px}.sky-object:nth-child(n+3){display:none}}
@media(prefers-reduced-motion:reduce){.sky-object{will-change:auto}}

.sky-object:nth-child(5){--left:7%;--top:62%;--size:clamp(75px,8vw,110px);--angle:10deg;--opacity:.75}
@media(max-width:900px){.sky-object:nth-child(5){--left:7%;--top:62%;--size:75px}}
@media(max-width:600px){.sky-object:nth-child(n+3){display:block}.sky-object:nth-child(1){--left:12%;--top:15%;--size:65px}.sky-object:nth-child(2){--left:87%;--top:88%;--size:80px}.sky-object:nth-child(3){--left:88%;--top:16%;--size:60px}.sky-object:nth-child(4){--left:14%;--top:88%;--size:60px}.sky-object:nth-child(5){--left:50%;--top:11%;--size:48px;--opacity:.55}}

/* Match the canvas exposed by browser rubber-band scrolling to the hero sky. */
html.home-page{background:#96bbc9 url('./assets/clouds.jpg') center top/cover no-repeat fixed;overscroll-behavior-y:none}
html.home-page body{overscroll-behavior-y:none}