/* REVIG v22 — animações premium dos cards da página de Lentes. */
.lens-brand-card,
.lens-line{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

/* Reflexo discreto que atravessa o card sem alterar a identidade visual. */
.lens-brand-card::before{
  content:"";
  position:absolute;
  inset:-35% -55%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 39%,rgba(255,255,255,.025) 47%,rgba(224,181,93,.11) 50%,rgba(255,255,255,.02) 53%,transparent 61%);
  transform:translateX(-58%) rotate(2deg);
  opacity:0;
  transition:transform .85s cubic-bezier(.2,.75,.2,1),opacity .35s ease;
}
.lens-brand-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at 78% 14%,rgba(224,181,93,.09),transparent 34%);
  opacity:0;
  transition:opacity .4s ease;
}

.lens-brand-number,
.lens-brand-card h3,
.lens-brand-card p,
.lens-brand-card .text-link,
.lens-line .lens-step,
.lens-line h3,
.lens-line p,
.lens-line>a{
  transition:transform .38s var(--ease),color .3s ease,opacity .3s ease,background .3s ease,border-color .3s ease,box-shadow .35s ease;
}

/* Mantém a inclinação 3D compartilhada pelo projeto e acrescenta profundidade. */
.lens-brand-card[data-card-motion]{
  box-shadow:0 8px 24px rgba(0,20,14,.055);
}
.lens-line[data-card-motion]{
  transform-origin:center;
}

@media (hover:hover) and (pointer:fine){
  .lens-brand-card:hover{
    border-color:rgba(224,181,93,.78);
    box-shadow:0 22px 48px rgba(0,18,13,.20),inset 0 1px 0 rgba(255,255,255,.035);
  }
  .lens-brand-card:hover::before{
    transform:translateX(58%) rotate(2deg);
    opacity:1;
  }
  .lens-brand-card:hover::after{opacity:1}
  .lens-brand-card:hover .lens-brand-number{transform:translateY(-2px);color:var(--gold)}
  .lens-brand-card:hover h3{transform:translateY(-3px)}
  .lens-brand-card:hover p{transform:translateY(-1px)}
  .lens-brand-card:hover .text-link{transform:translateX(3px)}
  .lens-brand-card:hover .text-link .icon{transform:translate(4px,-2px)}

  .lens-line::before{
    content:"";
    position:absolute;
    inset:6px 0;
    z-index:-1;
    border-radius:14px;
    background:linear-gradient(90deg,rgba(198,142,5,.055),rgba(198,142,5,.012) 48%,transparent 82%);
    opacity:0;
    transform:scaleX(.975);
    transition:opacity .3s ease,transform .38s var(--ease);
  }
  .lens-line:hover::before{opacity:1;transform:scaleX(1)}
  .lens-line:hover .lens-step{transform:translateX(4px);color:var(--gold-brand)}
  .lens-line:hover h3{transform:translateX(5px)}
  .lens-line:hover p{transform:translateX(3px)}
  .lens-line:hover>a{
    transform:translateX(-4px) rotate(-3deg);
    border-color:var(--gold-brand);
    box-shadow:0 8px 20px rgba(0,30,20,.08);
  }
  .lens-line:hover>a .icon{transform:translate(2px,-2px)}
}

/* Pressão tátil leve em mobile sem depender de hover. */
.lens-brand-card.is-pressed,
.lens-line.is-pressed{scale:.992}

/* Entrada em cascata: o JS já define --reveal-delay por card. */
.js-reveal .lens-brand-card[data-reveal],
.js-reveal .lens-line[data-reveal]{
  transition-duration:.72s,.72s,.38s,.25s,.3s,.25s,.4s;
}

@media (max-width:699px){
  .lens-brand-card{box-shadow:0 8px 22px rgba(0,20,14,.055)}
  .lens-line{overflow:visible}
}

@media (prefers-reduced-motion:reduce){
  .lens-brand-card::before,
  .lens-brand-card::after,
  .lens-brand-number,
  .lens-brand-card h3,
  .lens-brand-card p,
  .lens-brand-card .text-link,
  .lens-line .lens-step,
  .lens-line h3,
  .lens-line p,
  .lens-line>a{
    transition:none!important;
    animation:none!important;
    transform:none!important;
  }
}