/* Altura case animations: hero (src/anim/altura-hero.html) and website (src/anim/altura-web.html) */
.alt-anim{--b:#3F54D1;--b2:#5468E4;position:relative;overflow:hidden;background:var(--b);container-type:inline-size;isolation:isolate}
.alt-anim *{box-sizing:border-box}
.alt-strip{position:absolute;top:0;bottom:0;width:7cqw;background:repeating-linear-gradient(-140deg,var(--b2) 0 2.2cqw,transparent 2.2cqw 4.4cqw);background-size:100% 400%;opacity:0}
.alt-strip.r{right:0}.alt-strip.l{left:0;transform:scaleX(-1)}
.alt-route{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.alt-route .dash{fill:none;stroke:rgba(255,255,255,.28);stroke-width:2;stroke-dasharray:6 10;vector-effect:non-scaling-stroke}
.alt-hero .alt-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4cqw}
.alt-iso{position:relative;width:15cqw;aspect-ratio:1}
.alt-iso svg{position:absolute;inset:0;width:100%;height:100%}
.alt-spin{position:absolute;inset:0}
.alt-word{width:38cqw;overflow:visible}
.alt-word path{fill:#fff;opacity:0;transform-box:fill-box}
.alt-ring,.alt-a{opacity:0}
.alt-anim.play .alt-ring{animation:altRing 1.3s cubic-bezier(.2,.8,.2,1) forwards}
.alt-anim.play .alt-a{animation:altRise .9s cubic-bezier(.2,.8,.2,1) .45s forwards}
.alt-anim.play .alt-word path{animation:altRise .8s cubic-bezier(.2,.8,.2,1) calc(.85s + var(--i)*.08s) forwards}
.alt-anim.play .alt-strip{animation:altFade .8s ease 1.4s forwards,altSlide 14s linear 1.4s infinite}
.alt-anim.play .alt-route{animation:altFade 1s ease 1.8s forwards}
@keyframes altRing{from{opacity:0;transform:rotate(-160deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes altRise{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes altFade{to{opacity:1}}
@keyframes altSlide{to{background-position:0 -100%}}
@media(max-width:620px){
  .alt-hero.hero-image{aspect-ratio:1}
  .alt-hero .alt-logo{flex-direction:column;gap:6cqw}
  .alt-hero .alt-iso{width:34cqw}
  .alt-hero .alt-word{width:64cqw}
  .alt-strip{width:12cqw;background-image:repeating-linear-gradient(-140deg,var(--b2) 0 3.6cqw,transparent 3.6cqw 7.2cqw)}
  .alt-strip.l{display:none}
}
@media(prefers-reduced-motion:reduce){.alt-anim *{animation:none!important;opacity:1!important}}
.alt-web{aspect-ratio:16/9;border-radius:24px}
.alt-anim.alt-web .alt-strip{width:6cqw}
.alt-anim.alt-web img{position:absolute;display:block;max-width:none;height:auto;opacity:0;border-radius:.9cqw;box-shadow:0 1.6cqw 4cqw rgba(10,20,80,.35)}
.alt-anim.alt-web .site{left:5%;top:11%;width:64%;border-radius:1.1cqw}
.alt-anim.alt-web .routes{right:9%;top:7%;width:24%}
.alt-anim.alt-web .med{right:11%;top:56%;width:22%}
.alt-anim.alt-web .ifr{right:6%;top:69%;width:22%}
.alt-anim.alt-web .leg{left:2.5%;bottom:6%;width:56%;border-radius:.6cqw}
.alt-anim.alt-web.play .site{animation:altUp 1s cubic-bezier(.2,.8,.2,1) .1s forwards}
.alt-anim.alt-web.play .routes{animation:altIn .9s cubic-bezier(.2,.8,.2,1) .8s forwards,altFloat 6s ease-in-out 1.7s infinite}
.alt-anim.alt-web.play .med{animation:altIn .9s cubic-bezier(.2,.8,.2,1) 1.4s forwards,altFloat 5.5s ease-in-out 2.3s infinite}
.alt-anim.alt-web.play .ifr{animation:altIn .9s cubic-bezier(.2,.8,.2,1) 1.6s forwards,altFloat 6.5s ease-in-out 2.5s infinite reverse}
.alt-anim.alt-web.play .leg{animation:altIn .9s cubic-bezier(.2,.8,.2,1) 1.9s forwards,altFloat 8s ease-in-out 2.8s infinite}
.alt-anim.alt-web.play .alt-strip{animation:altFade .8s ease .4s forwards,altSlide 14s linear .4s infinite}
@keyframes altUp{from{opacity:0;transform:translateY(12%)}to{opacity:1;transform:none}}
@keyframes altIn{from{opacity:0;transform:translateY(18%) scale(.92)}to{opacity:1;transform:none}}
@keyframes altFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2cqw)}}
@media(max-width:620px){
  .alt-web{aspect-ratio:4/5;border-radius:16px}
  .alt-anim.alt-web .alt-strip{width:10cqw}
  .alt-anim.alt-web .site{left:5%;top:7%;width:90%}
  .alt-anim.alt-web .routes{right:4%;top:45%;width:50%}
  .alt-anim.alt-web .med{left:4%;top:47%;width:40%}
  .alt-anim.alt-web .ifr{left:7%;top:60%;width:40%}
  .alt-anim.alt-web .leg{left:3%;bottom:6%;width:94%}
}