/* Efeitos extras (proposta): brilho nos botoes, borda viva no card de login,
   holofote nas telas dos produtos e elevacao nos blocos "O que a Hubyn faz". */
@media (prefers-reduced-motion:no-preference){
  /* 1. Brilho que atravessa o botao laranja ao passar o mouse */
  .btn-orange{position:relative;overflow:hidden;isolation:isolate}
  .btn-orange::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
  .btn-orange:hover::after{transform:translateX(120%)}

  /* 2. Borda em movimento no card "Entrar" do hero */
  @property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
  .hero-card.login::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--ang),transparent 0 70%,var(--or) 85%,var(--g4) 95%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fx-spin 6s linear infinite;pointer-events:none}
  @keyframes fx-spin{to{--ang:360deg}}

  /* 3. Holofote que segue o cursor sobre as telas dos produtos */
  .prod-art .frame{position:relative}
  .prod-art .frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(62,193,143,.22),transparent 65%)}
  .prod-art .frame:hover::after{opacity:1}

  /* 4. Elevacao suave nos blocos da introducao */
  .does li{transition:transform .35s var(--ease)}
  .does li:hover{transform:translateY(-6px)}
  .does li .blk{transition:transform .35s var(--ease),box-shadow .35s}
  .does li:hover .blk{transform:scale(1.08) rotate(-3deg);box-shadow:0 14px 28px -10px rgba(4,38,31,.5)}
}