.lens-card{
  position:relative;
  width:100%;
  margin:0;
  border:1px solid var(--line);
  color:var(--white);
  font:inherit;
  text-align:left;
  cursor:pointer;
  appearance:none;
  overflow:hidden;
  isolation:isolate;
  transition:transform .28s cubic-bezier(.2,.8,.25,1),border-color .28s,box-shadow .28s;
  background:linear-gradient(135deg,rgba(8,43,84,.55),rgba(5,20,42,.2));
  animation:lensCardGlow 5.4s ease-in-out infinite
}
.lens-card:nth-child(2){animation-delay:-1.8s}
.lens-card:nth-child(3){animation-delay:-3.6s}
.lens-card::before{
  content:"";
  position:absolute;
  inset:-60% 35% -60% -35%;
  z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(99,215,255,.18),transparent);
  transform:translateX(-80%) rotate(12deg);
  animation:lensCardSheen 5.4s ease-in-out infinite;
  pointer-events:none
}
.lens-card::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.34;
  transform:scaleX(.3);
  transform-origin:center;
  animation:lensCardLine 3.8s ease-in-out infinite;
  pointer-events:none
}
.lens-card:nth-child(2)::before{animation-delay:-1.8s}
.lens-card:nth-child(3)::before{animation-delay:-3.6s}
.lens-card:nth-child(2)::after{animation-delay:-1.25s}
.lens-card:nth-child(3)::after{animation-delay:-2.5s}
.lens-card:hover,
.lens-card:focus-visible,
.lens-card.is-selected{
  z-index:3;
  border-color:rgba(99,215,255,.92);
  transform:translateY(-14px) scale(1.2);
  box-shadow:0 24px 44px rgba(0,0,0,.32),0 0 34px rgba(0,178,255,.24);
  animation:lensCardActive 1.6s ease-in-out infinite
}
.lens-card:focus-visible{outline:2px solid var(--cyan2);outline-offset:4px}
.lens-card:hover::before,
.lens-card:focus-visible::before,
.lens-card.is-selected::before{
  animation:lensCardActiveSheen 1.6s ease-in-out infinite;
  transform:translateX(80%) rotate(12deg);
  opacity:.9
}
.lens-card:hover::after,
.lens-card:focus-visible::after,
.lens-card.is-selected::after{
  opacity:1;
  transform:scaleX(1);
  animation:lensCardActiveLine 1.6s ease-in-out infinite
}
.lens-card-arrow{
  position:absolute;
  right:16px;
  top:14px;
  color:var(--cyan);
  font-style:normal;
  font-size:20px;
  opacity:0;
  transform:translate(-8px,8px);
  transition:opacity .22s,transform .22s
}
.lens-card:hover .lens-card-arrow,
.lens-card:focus-visible .lens-card-arrow,
.lens-card.is-selected .lens-card-arrow{
  opacity:1;
  transform:none
}
@keyframes lensCardGlow{
  0%,100%{box-shadow:0 0 0 rgba(0,178,255,0);border-color:var(--line)}
  50%{box-shadow:0 7px 22px rgba(0,178,255,.08);border-color:rgba(99,215,255,.38)}
}
@keyframes lensCardActive{
  0%,100%{box-shadow:0 24px 44px rgba(0,0,0,.32),0 0 34px rgba(0,178,255,.24);border-color:rgba(99,215,255,.92)}
  50%{box-shadow:0 32px 68px rgba(0,0,0,.38),0 0 46px rgba(0,178,255,.48);border-color:var(--cyan2)}
}
@keyframes lensCardActiveSheen{
  0%{transform:translateX(-80%) rotate(12deg);opacity:0}
  38%{opacity:1}
  70%,100%{transform:translateX(80%) rotate(12deg);opacity:0}
}
@keyframes lensCardActiveLine{
  0%,100%{transform:scaleX(.82);opacity:.76}
  50%{transform:scaleX(1);opacity:1}
}
@keyframes lensCardSheen{
  0%,100%{transform:translateX(-80%) rotate(12deg);opacity:0}
  38%{opacity:.8}
  62%{transform:translateX(80%) rotate(12deg);opacity:0}
}
@keyframes lensCardLine{
  0%,100%{transform:scaleX(.25);opacity:.22}
  50%{transform:scaleX(1);opacity:.72}
}
@media(prefers-reduced-motion:reduce){
  .lens-card,.lens-card::before,.lens-card::after{animation:none!important}
  .lens-card:hover,.lens-card:focus-visible,.lens-card.is-selected{transform:translateY(-7px) scale(1.08)}
}