/* Welcome overlay only. The hero timeline and normal page never move with these clouds. */
.brand-intro.cloud-intro{background:transparent;animation:cloud-intro-safety 3.9s step-end forwards;isolation:isolate}
.cloud-intro .intro-environment{position:absolute;inset:0;overflow:clip;z-index:0;pointer-events:none;animation:cloud-environment-exit 3.35s linear both;background:#360000}
.cloud-intro .intro-canyon{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:center}
.cloud-intro .intro-environment::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#360000a8,transparent 72%),linear-gradient(180deg,#1c0000dc,#36000066 55%,#36000055)}
.cloud-intro .intro-rock{position:absolute;height:auto;max-width:none;z-index:1;pointer-events:none}
.cloud-intro .intro-rock-left{width:27%;left:-20%;top:-15%;animation:cloud-rock-left 3.35s ease-in-out both}
.cloud-intro .intro-rock-right{width:16%;right:1%;top:-2%;animation:cloud-rock-right 3.35s ease-in-out both}
.cloud-intro .intro-centre{animation:cloud-brand-handoff 3.35s linear both}
.cloud-intro .intro-clouds{position:absolute;inset:0;z-index:3;overflow:clip;pointer-events:none}
.cloud-intro .intro-cloud{position:absolute;inset:-24% -35%;max-width:none;mask-image:radial-gradient(ellipse 65% 65% at 50% 55%,#000 30%,transparent 77%);pointer-events:none}
.cloud-intro .intro-cloud img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.cloud-intro .intro-cloud-far{animation:cloud-far 3.35s linear both}
.cloud-intro .intro-cloud-mid{inset:-18% -45%;animation:cloud-mid 3.35s linear both}
.cloud-intro .intro-cloud-near{inset:-30% -40%;animation:cloud-near 3.35s linear both}
.cloud-intro .intro-cloud-volume{position:absolute;inset:-20%;background:radial-gradient(ellipse at 30% 65%,#faf8f7ed,transparent 60%),radial-gradient(ellipse at 75% 45%,#faf8f7e8,transparent 65%);animation:cloud-volume 3.35s linear both;pointer-events:none}
.cloud-intro .intro-skip{z-index:5;background:#360000ce;padding-inline:12px;border:1px solid #ffffff60}
@keyframes cloud-rock-left{from{transform:translate3d(0,0,0)}to{transform:translate3d(-5px,9px,0)}}
@keyframes cloud-rock-right{from{transform:translate3d(0,0,0)}to{transform:translate3d(4px,-7px,0)}}
@keyframes cloud-environment-exit{0%,68%{opacity:1}80%,100%{opacity:0}}
@keyframes cloud-brand-handoff{0%,55%{opacity:1;transform:none}72%,100%{opacity:0;transform:translate3d(0,-18px,0)}}
@keyframes cloud-far{0%{opacity:.10;transform:translate3d(-1%,10%,0) scale(1.04)}45%{opacity:.14;transform:translate3d(0,8%,0) scale(1.05)}67%{opacity:.9;transform:translate3d(1%,-4%,0) scale(1.1)}100%{opacity:0;transform:translate3d(3%,-78%,0) scale(1.13)}}
@keyframes cloud-mid{0%,43%{opacity:.07;transform:translate3d(3%,24%,0) scale(1.04)}68%{opacity:.95;transform:translate3d(0,-4%,0) scale(1.12)}82%{opacity:.8;transform:translate3d(-1%,-30%,0) scale(1.15)}100%{opacity:0;transform:translate3d(-3%,-92%,0) scale(1.18)}}
@keyframes cloud-near{0%,44%{opacity:.08;transform:translate3d(-2%,28%,0) scale(1.05)}67%{opacity:.98;transform:translate3d(0,0,0) scale(1.13)}79%{opacity:1;transform:translate3d(1%,-14%,0) scale(1.17)}100%{opacity:0;transform:translate3d(4%,-108%,0) scale(1.18)}}
@keyframes cloud-volume{0%,49%{opacity:0;transform:translate3d(0,12%,0)}68%{opacity:.92;transform:translate3d(0,0,0)}80%{opacity:.7;transform:translate3d(1%,-20%,0)}100%{opacity:0;transform:translate3d(2%,-80%,0)}}
@keyframes cloud-intro-safety{to{visibility:hidden;pointer-events:none}}
@media(max-width:700px){.cloud-intro .intro-rock-left{width:37%;left:-28%;top:-4%}.cloud-intro .intro-rock-right{width:23%;right:-5%;top:2%}.cloud-intro .intro-cloud{inset:-15% -75%}.cloud-intro .intro-cloud-mid{inset:-18% -90%}.cloud-intro .intro-cloud-near{inset:-24% -80%}}
@media(prefers-reduced-motion:reduce){.brand-intro.cloud-intro{display:none}.cloud-intro *{animation:none!important}}