/* Painel do login ("vitrine", inc/templates/loginBanner.php), dividido em dois:
   - coluna azul à esquerda (52%) com o conteúdo do canvas "Login OptiPet v2" do PO: a frase, o card
     da OptIA e os quatro destaques (mesmo desenho dos antigos módulos, com título e descrição);
   - foto à direita, ancorada à direita e no topo (atendente e cachorro inteiros), com a borda
     esquerda dissolvida no azul por máscara e um zoom lento de ida e volta (Ken Burns, 28 s);
   Ao abrir, os textos entram uma vez, em sequência (fim deste arquivo).
   Com "reduzir movimento" nada se mexe: foto parada e textos já no lugar. */

.kcx-painel{--painel-azul:oklch(27% .08 259.865);--painel-col:52%;background:var(--painel-azul)}

/* Foto */
.kcx-painel-foto{position:absolute;top:0;right:0;bottom:0;left:calc(var(--painel-col) - 72px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120px);mask-image:linear-gradient(90deg,transparent 0,#000 120px)}
.kcx-banner .kcx-painel-img{object-position:100% 0%;transform-origin:80% 0%;will-change:transform;
  animation:kcxPainelFoto 28s ease-in-out infinite alternate}
@keyframes kcxPainelFoto{from{transform:scale(1.01)}to{transform:scale(1.06) translate3d(-1%,0,0)}}
.kcx-painel-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(0 0 0/.22),transparent 35%)}

/* Coluna azul (com pegadas bem apagadas ao fundo). Fica no fluxo: se o conteúdo passar da altura do
   cartão, o painel cresce em vez de cortar. */
.kcx-painel-col{position:relative;z-index:1;width:var(--painel-col);min-width:320px;min-height:100%;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;gap:16px;padding:24px 12px 24px 26px;text-align:left}
.kcx-painel::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--painel-col);opacity:.06;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='%23fff'%3E%3Cellipse cx='48' cy='58' rx='13' ry='11'/%3E%3Ccircle cx='31' cy='42' r='6'/%3E%3Ccircle cx='41' cy='33' r='6'/%3E%3Ccircle cx='55' cy='33' r='6'/%3E%3Ccircle cx='65' cy='42' r='6'/%3E%3C/svg%3E") 0 0/96px 96px}
.kcx-banner .kcx-painel-col h2{margin:0;font-size:clamp(21px,1.9vw,25px);line-height:1.16;letter-spacing:-.03em;text-wrap:balance;
  text-align:left;width:auto;max-width:100%;padding:0;background:none;display:block}
.kcx-painel-col h2 em{display:inline;font-style:normal;color:#F6B37A}

.kcx-banner ul.kcx-painel-modulos{margin:0;gap:10px}
.kcx-banner .kcx-painel-modulos li{align-items:flex-start;gap:12px}
.kcx-banner .kcx-painel-modulos li svg{margin:0;width:16px;height:16px}
.kcx-painel-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgb(255 255 255/.1);color:#FFFFFF}
.kcx-painel-modulos li > span:last-child{font-size:12px;line-height:1.4;color:rgb(255 255 255/.7)}
.kcx-painel-modulos strong{display:block;font-size:13px;line-height:1.3;font-weight:600;color:#FFFFFF}
.kcx-painel-ico{color:#F6B37A}

/* Card da OptIA: vidro sobre o azul, símbolo num círculo branco */
.kcx-painel-optia{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid rgb(255 255 255/.12);border-radius:12px;background:rgb(255 255 255/.07)}
.kcx-painel-optia-simbolo{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:#FFFFFF}
.kcx-painel-optia-simbolo img{width:34px;height:34px;display:block}
.kcx-banner .kcx-painel-optia h3{margin:0;padding:0;width:auto;background:none;font-size:14px;line-height:1.3;font-weight:600;color:#FFFFFF;text-align:left}
.kcx-banner .kcx-painel-optia p{margin:3px 0 0;font-size:12px;line-height:1.45;color:rgb(255 255 255/.72);text-align:left}

@media (prefers-reduced-motion:reduce){
  .kcx-banner .kcx-painel-img{animation:none;transform:none}
}

/* Entrada dos textos (uma vez, ao abrir): o título sobe, a segunda parte dele ganha o laranja depois,
   o card da OptIA e os destaques entram um a um. A foto
   surge junto, só com opacidade (o transform dela é do zoom lento). Tudo com "both", então nada
   pisca antes de começar. Fica dentro de no-preference: com "reduzir movimento" não há entrada. */
@media (prefers-reduced-motion:no-preference){
  .kcx-painel-foto{animation:kcxPainelFade 1.1s ease-out both}
  .kcx-painel-col h2{animation:kcxPainelSobe .7s .28s cubic-bezier(.2,.8,.2,1) both}
  .kcx-painel-col h2 em{animation:kcxPainelDestaque .8s .85s ease-out both}
  .kcx-painel-optia{animation:kcxPainelSobe .6s .5s cubic-bezier(.2,.8,.2,1) both}
  .kcx-painel-modulos li{animation:kcxPainelSobe .55s cubic-bezier(.2,.8,.2,1) both}
  .kcx-painel-modulos li:nth-child(1){animation-delay:.65s}
  .kcx-painel-modulos li:nth-child(2){animation-delay:.77s}
  .kcx-painel-modulos li:nth-child(3){animation-delay:.89s}
  .kcx-painel-modulos li:nth-child(4){animation-delay:1.01s}
}
@keyframes kcxPainelFade{from{opacity:0}to{opacity:1}}
@keyframes kcxPainelSobe{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kcxPainelDestaque{from{color:#FFFFFF}to{color:#F6B37A}}