/* V39 — frameless cinematic automatic logo showcase */
.logo-pack-page .logo-pack-visual.logo-carousel{
  display:block;
  position:relative;
  margin:0;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
  animation:logoShowcaseFloat 10s ease-in-out infinite;
}
.logo-pack-page .logo-carousel__viewport{
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:4 / 3;
  min-height:0;
  overflow:hidden;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  perspective:1400px;
}
.logo-pack-page .logo-carousel__viewport::before{
  content:"";
  position:absolute;
  z-index:8;
  inset:-24% -62%;
  pointer-events:none;
  border:0!important;
  background:linear-gradient(107deg,transparent 38%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.62) 50%,rgba(115,192,255,.14) 56%,transparent 63%);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-56%) skewX(-11deg);
}
.logo-pack-page .logo-carousel__viewport.is-transitioning::before{
  animation:logoCinematicSweep 1.95s cubic-bezier(.18,.72,.2,1) both;
}
.logo-pack-page .logo-carousel__viewport::after{
  content:"";
  position:absolute;
  z-index:7;
  inset:0;
  pointer-events:none;
  border:0!important;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.14),transparent 34%),
    radial-gradient(circle at 84% 76%,rgba(39,139,255,.11),transparent 40%);
  mix-blend-mode:screen;
  opacity:.14;
  animation:logoAmbientLight 9s ease-in-out infinite alternate;
}
.logo-pack-page .logo-carousel__slide{
  position:absolute;
  z-index:1;
  inset:0;
  margin:0;
  padding:0;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  opacity:0;
  visibility:hidden;
  transform:translate3d(2.2%,1.2%,0) scale(1.075) rotateY(-1.2deg);
  filter:brightness(.62) saturate(.72) blur(9px);
  clip-path:inset(0 100% 0 0);
  transition:
    opacity 1.7s cubic-bezier(.2,.7,.2,1),
    visibility 1.7s linear,
    filter 1.9s ease,
    transform 2.05s cubic-bezier(.16,1,.3,1),
    clip-path 1.95s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform,filter,clip-path;
}
.logo-pack-page .logo-carousel__slide.is-active{
  z-index:3;
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1) rotateY(0);
  filter:brightness(1) saturate(1.045) blur(0);
  clip-path:inset(0 0 0 0);
}
.logo-pack-page .logo-carousel__slide.is-leaving{
  z-index:2;
  opacity:0;
  visibility:visible;
  transform:translate3d(-2.1%,-.8%,0) scale(1.045) rotateY(1deg);
  filter:brightness(.7) saturate(.78) blur(7px);
  clip-path:inset(0 0 0 100%);
}
.logo-pack-page .logo-carousel__slide picture,
.logo-pack-page .logo-carousel__slide img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.logo-pack-page .logo-carousel__slide img{
  object-fit:contain;
  object-position:center;
  transform:scale(1.045);
  will-change:transform,filter;
}
.logo-pack-page .logo-carousel__slide:nth-child(1).is-active img{
  animation:logoKenBurnsLeft 6.15s cubic-bezier(.2,.65,.25,1) both;
}
.logo-pack-page .logo-carousel__slide:nth-child(2).is-active img{
  animation:logoKenBurnsRight 6.15s cubic-bezier(.2,.65,.25,1) both;
}
.logo-pack-page .logo-carousel__slide:nth-child(3).is-active img{
  animation:logoKenBurnsCentre 6.15s cubic-bezier(.2,.65,.25,1) both;
}
@keyframes logoKenBurnsLeft{
  0%{transform:scale(1.075) translate3d(-1.1%,.6%,0)}
  100%{transform:scale(1.008) translate3d(.35%,-.25%,0)}
}
@keyframes logoKenBurnsRight{
  0%{transform:scale(1.08) translate3d(1.2%,.45%,0)}
  100%{transform:scale(1.01) translate3d(-.35%,-.25%,0)}
}
@keyframes logoKenBurnsCentre{
  0%{transform:scale(1.085) translate3d(0,.8%,0)}
  100%{transform:scale(1.012) translate3d(0,-.35%,0)}
}
@keyframes logoCinematicSweep{
  0%{opacity:0;transform:translateX(-56%) skewX(-11deg)}
  18%{opacity:.64}
  62%{opacity:.3}
  100%{opacity:0;transform:translateX(56%) skewX(-11deg)}
}
@keyframes logoAmbientLight{
  0%{opacity:.08;transform:scale(1) translate3d(-1.2%,0,0)}
  100%{opacity:.25;transform:scale(1.045) translate3d(1.2%,-1%,0)}
}
@keyframes logoShowcaseFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-4px,0)}
}
@media(max-width:980px){
  .logo-pack-page .logo-carousel__viewport{aspect-ratio:4 / 3;}
}
@media(prefers-reduced-motion:reduce){
  .logo-pack-page .logo-carousel,
  .logo-pack-page .logo-carousel__viewport::after,
  .logo-pack-page .logo-carousel__slide.is-active img{
    animation:none!important;
  }
  .logo-pack-page .logo-carousel__slide{
    transition:opacity .4s ease,visibility .4s linear;
    transform:none;
    filter:none;
    clip-path:none;
  }
  .logo-pack-page .logo-carousel__viewport::before{display:none;}
}