/* Microanimações dos elementos (pílulas, títulos, campos, cartões de valor, contador), alinhadas ao KV. */
/* Só movimento: nada aqui muda posição, tamanho, cor ou tipografia em repouso. Anima apenas transform e opacity
   (exceções curtas e pontuais, disparadas por fx.js: o split RGB do título e o brilho mascarado nas letras). Tudo some com movimento reduzido.
   Mobile recebe a versão leve (efeitos pontuais); o modo PC soma os ciclos contínuos no fim do arquivo. */

:root { --fx-u: var(--m); --fx-card-r: calc(5 * var(--m)); }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  :root { --fx-u: var(--u); --fx-card-r: calc(12 * var(--u)); }
}

/* Âncora dos ecos/brilhos no layout de celular (no PC esses blocos já são absolutos em pc.css). */
@media not all and (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .res-hashtag, .final-headline { position: relative; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- pílulas: reflexo de luz atravessando e brilho neon ao toque ---------- */
  .pill { overflow: hidden; isolation: isolate; }
  .pill::before {
    content: ''; position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 55%; pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0) 85%);
    transform: translateX(-120%); animation: pill-sheen 8s cubic-bezier(0.45, 0, 0.25, 1) 1.6s 3;
  }
  .pill--soft::before { display: none; }
  .pill:not(.is-busy)::after {
    content: ''; position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(70% 110% at 50% 135%, rgba(255, 43, 214, 0.8), rgba(255, 43, 214, 0) 72%),
      radial-gradient(45% 80% at 10% -25%, rgba(63, 208, 255, 0.5), rgba(63, 208, 255, 0) 72%);
    opacity: 0; transition: opacity 0.12s;
  }
  .pill:not(.is-busy):active::after { opacity: 1; }
  .pill[aria-disabled='true']::before, .pill.is-busy::before { animation: none; opacity: 0; }

  /* ---------- títulos (ISSO É MUITO ACCENTURE): brilho que corre só sobre as letras ---------- */
  .login-title { position: relative; }
  .login-title::after, .final-headline::after {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 56%) no-repeat;
    background-size: 300% 100%; background-position: 100% 0;
    -webkit-mask: url('../../img/v3/title-login.png') center / 100% 100% no-repeat; mask: url('../../img/v3/title-login.png') center / 100% 100% no-repeat;
    animation: title-glint 2.6s ease-in-out 1.3s both;
  }
  .final-headline::after {
    -webkit-mask-image: url('../../img/v3/headline.png'); mask-image: url('../../img/v3/headline.png');
    animation-delay: 1.1s;
  }

  /* ---------- campos: o degradê do KV acende como halo atrás do campo em foco ---------- */
  .field-box::after {
    content: ''; position: absolute; z-index: -1; left: -2px; top: -2px; right: -2px; bottom: -2px; border-radius: inherit; pointer-events: none;
    background: var(--input-stroke); filter: blur(calc(12 * var(--fx-u))); opacity: 0; transform: scaleX(0.9);
    transition: opacity 0.8s ease-in-out, transform 1.2s ease-in-out;
  }
  .field-box:focus-within::after { opacity: 0.34; transform: none; }

  /* ---------- cidade, consentimentos e radio do valor: anel neon ao marcar ---------- */
  .city-dot::before, .check-box::before, .value-radio::before {
    content: ''; position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; border-radius: inherit; pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 8px rgba(255, 43, 214, 0.85), inset 0 0 6px rgba(63, 208, 255, 0.7);
    opacity: 0;
  }
  .city-input:checked + .city-dot::before, .value-card.is-selected .value-radio::before { animation: neon-ring 1.4s ease-in-out both; }
  .check-wrap input:checked + .check-box::before { animation: neon-ring-sq 1.2s ease-in-out both; }

  /* ---------- cartões de valor: eco de luz na cor do valor e reflexo ao escolher ---------- */
  .value-card { isolation: isolate; }
  .value-card::before, .value-card::after {
    content: ''; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 245 / 346; border-radius: var(--fx-card-r); pointer-events: none;
  }
  .value-card::before { z-index: -1; border: 2px solid var(--sw); box-shadow: 0 0 calc(16 * var(--fx-u)) var(--sw); opacity: 0; }
  .value-card.is-selected::before { animation: card-echo 1.8s ease-in-out 2 both; }
  .value-card::after {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 58%) no-repeat;
    background-size: 300% 100%; background-position: 100% 0;
  }
  .value-card.is-selected::after { animation: card-sweep 1.8s ease-in-out both; }
  @media (hover: hover) { .value-card:hover::after { animation: card-sweep 1.8s ease-in-out both; } }

  /* ---------- botão TIRAR FOTO: pulso de sonar convidando ao toque ---------- */
  .shutter-disc { position: relative; }
  .shutter:not([disabled]) .shutter-disc::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 12px rgba(161, 0, 255, 0.8);
    opacity: 0; animation: shutter-ring 5.2s ease-in-out 1s infinite;
  }

  /* ---------- resultado: reflexo sobre a foto, eco na hashtag e QR que se revela ---------- */
  .result-frame { position: relative; }
  .result-frame::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0) 90%);
    transform: translateX(-120%);
  }
  .result-frame.is-in::after { animation: frame-sweep 3.2s cubic-bezier(0.45, 0, 0.25, 1) 0.8s both; }
  .res-hashtag { isolation: isolate; }
  .res-hashtag::before, .res-hashtag::after {
    content: attr(data-echo) / ''; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; pointer-events: none; opacity: 0;
  }
  .res-hashtag::before { color: #ff2bd6; animation: tag-echo 2.2s ease-in-out 1.55s both; }
  .res-hashtag::after { --fx-d: -1.1em; color: #3fd0ff; animation: tag-echo 2.2s ease-in-out 1.68s both; }

  /* ---------- casca: contador n/6 entra com split RGB a cada etapa; chevron desliza ao aparecer ---------- */
  /* Trocar o nome da animação reinicia a entrada; por isso etapas vizinhas alternam a, b e c (contagem). */
  .app[data-screen='camera'] .counter, .app[data-screen='values'] .counter, .app[data-screen='final'] .counter { animation: counter-in-a 0.6s var(--ease-out) both; }
  .app[data-screen='confirm'] .counter, .app[data-screen='result'] .counter { animation: counter-in-b 0.6s var(--ease-out) both; }
  .app[data-screen='camera']:has(.is-countdown) .counter { animation-name: counter-in-c; }
  .logo { animation: logo-in 0.7s var(--ease-out) 0.1s both; }
}

/* ---------- modo PC (totem/telão): ciclos lentos e contínuos ---------- */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) and (prefers-reduced-motion: no-preference) {
  .pill::before { animation-duration: 6s; }
  .pill:not(.is-busy):active::after { opacity: 1; }
  .pill[aria-disabled='true']::after { opacity: 0; }
  /* Rajadas curtas: fx.js reaplica .is-glint a cada 9 s. As entradas de screens.css seguem na lista (mesmo nome não reinicia). */
  .title-img.is-glint { animation: rgb-split 0.36s steps(1) 0.6s 1 both, rgb-burst 0.36s steps(1); }
  .final-headline.is-glint { animation: rise 0.42s var(--ease-out) backwards, rgb-split 0.36s steps(1) 0.5s 1 both, rgb-burst 0.36s steps(1); }
  .login-title.is-glint::after { animation: title-glint 2.6s ease-in-out 1.3s both, title-glint-burst 2.7s ease-in-out 0.7s; }
  .final-headline.is-glint::after { animation: title-glint 2.6s ease-in-out 1.1s both, title-glint-burst 2.7s ease-in-out 0.7s; }
  .field-box:focus-within::after { animation: field-flow 8s ease-in-out 0.6s infinite alternate; }
  .logo { animation: logo-in 0.7s var(--ease-out) 0.1s both, logo-nudge 9s ease-in-out 4s 2; }
}

@keyframes pill-sheen { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(200%); } }
@keyframes title-glint { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes title-glint-burst { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes rgb-burst {
  0% { filter: drop-shadow(3px 0 0 rgba(255, 43, 214, 0.95)) drop-shadow(-3px 0 0 rgba(43, 227, 255, 0.95)); }
  34% { filter: drop-shadow(-3px 0 0 rgba(255, 43, 214, 0.95)) drop-shadow(3px 0 0 rgba(43, 227, 255, 0.95)); }
  67% { filter: drop-shadow(2px 0 0 rgba(255, 43, 214, 0.8)) drop-shadow(-2px 0 0 rgba(43, 227, 255, 0.8)); }
  100% { filter: none; }
}
@keyframes field-flow { from { opacity: 0.34; transform: translateX(0); } to { opacity: 0.2; transform: translateX(1.5%); } }
@keyframes neon-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes neon-ring-sq { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes card-echo { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.09, 1.06); } }
@keyframes card-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes shutter-ring { 0% { opacity: 0.75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes frame-sweep { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(280%) skewX(-12deg); } }
@keyframes tag-echo { 0% { opacity: 0; transform: none; } 20% { opacity: 0.55; } 100% { opacity: 0; transform: translateX(var(--fx-d, -0.55em)); } }
@keyframes counter-in-a {
  0% { opacity: 0; transform: translateY(40%); text-shadow: 2px 0 0 rgba(255, 43, 214, 0.9), -2px 0 0 rgba(63, 208, 255, 0.9); }
  45% { opacity: 1; transform: none; text-shadow: 2px 0 0 rgba(255, 43, 214, 0.9), -2px 0 0 rgba(63, 208, 255, 0.9); }
  70%, 100% { opacity: 1; transform: none; text-shadow: none; }
}
@keyframes counter-in-b {
  0% { opacity: 0; transform: translateY(40%); text-shadow: 2px 0 0 rgba(255, 43, 214, 0.9), -2px 0 0 rgba(63, 208, 255, 0.9); }
  45% { opacity: 1; transform: none; text-shadow: 2px 0 0 rgba(255, 43, 214, 0.9), -2px 0 0 rgba(63, 208, 255, 0.9); }
  70%, 100% { opacity: 1; transform: none; text-shadow: none; }
}
@keyframes counter-in-c {
  0% { opacity: 0; transform: translateY(40%); text-shadow: 2px 0 0 rgba(255, 43, 214, 0.9), -2px 0 0 rgba(63, 208, 255, 0.9); }
  45% { opacity: 1; transform: none; text-shadow: 2px 0 0 rgba(255, 43, 214, 0.9), -2px 0 0 rgba(63, 208, 255, 0.9); }
  70%, 100% { opacity: 1; transform: none; text-shadow: none; }
}
@keyframes logo-in { from { opacity: 0; transform: translateX(-30%); } to { opacity: 1; transform: none; } }
@keyframes logo-nudge { 0%, 90%, 100% { transform: none; } 93% { transform: translateX(10%); } 96% { transform: translateX(-2%); } }