/* Accenture IA v3: telas no layout mobile (largura de projeto 390; 1 unidade = var(--m)).
   As mesmas telas no modo PC (canvas 1920x1080) são redefinidas em pc.css, na mesma ordem. */

.screen { position: relative; min-height: 100vh; min-height: 100dvh; padding-bottom: calc(44 * var(--m)); }
.screen-title {
  font-weight: 700; font-size: max(24px, calc(30 * var(--m))); line-height: 1.2; text-transform: uppercase; text-align: center; letter-spacing: var(--tr-title);
}
.screen-body-text { font-weight: 400; font-size: max(14px, calc(14 * var(--m))); line-height: 1.36; text-align: center; color: #fff; letter-spacing: var(--tr-body); }
.screen-body-text strong { font-weight: 500; }
.quota-hint { font-size: max(13px, calc(13 * var(--m))); color: rgba(255, 255, 255, 0.78); text-align: center; }

/* ---------- login / intro ---------- */
.screen--login { padding-top: calc(76 * var(--m)); }
.login-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(24 * var(--m)); }
.login-logo { width: calc(100 * var(--m)); height: auto; }
.login-title { margin-top: calc(47 * var(--m)); }
.title-img { width: calc(326 * var(--m)); height: auto; }
.title-img { animation: rgb-split 0.36s steps(1) 0.6s 1 both; }
.login-lead { margin-top: calc(20 * var(--m)); font-weight: 500; font-size: max(14px, calc(14 * var(--m))); line-height: 1.3; letter-spacing: var(--tr-lead); }
.login-body { margin-top: calc(4 * var(--m)); max-width: calc(336 * var(--m)); font-size: max(14px, calc(14 * var(--m))); line-height: 1.3; letter-spacing: var(--tr-body); }
.login-form { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: calc(18 * var(--m)); }
.field { width: min(100%, max(calc(274 * var(--m)), 260px)); }
.field + .field { margin-top: calc(10 * var(--m)); }
.field-error { padding: 4px 4px 0; text-align: left; }
.cities { width: 100%; margin-top: calc(14 * var(--m)); }
.city-list { display: flex; flex-wrap: wrap; justify-content: center; column-gap: calc(14 * var(--m)); }
.city { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-width: 44px; min-height: 44px; padding: 2px 4px; cursor: pointer; }
.city-name { font-size: max(12px, calc(12 * var(--m))); line-height: 1.2; color: #fff; white-space: nowrap; letter-spacing: var(--tr-body); }
.city-input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.city-dot { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; transition: transform 0.2s var(--ease-out); }
.city-dot::after { content: ''; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.2s var(--ease-out); }
.city-input:checked + .city-dot::after { transform: scale(1); }
.city-input:checked + .city-dot { transform: scale(1.08); }
.city-input:focus-visible + .city-dot { outline: 2px solid #fff; outline-offset: 3px; }
.city-error { width: 100%; text-align: center; padding-top: 2px; }
.consents { width: min(100%, calc(340 * var(--m))); margin-top: calc(12 * var(--m)); padding: 4px 6px; border-radius: calc(12 * var(--m)); background: rgba(24, 4, 70, 0.42); }
.banner-box { width: min(100%, calc(340 * var(--m))); margin-top: calc(12 * var(--m)); }
.login-actions { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--m)); margin-top: calc(18 * var(--m)); }
.login-submit { min-width: calc(220 * var(--m)); }

@media (max-width: 359px) { .city { flex: 0 0 42%; } }

@keyframes rgb-split {
  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; }
}

/* ---------- câmera (1/6 e 2/6) ---------- */
.screen--camera, .screen--confirm { display: flex; flex-direction: column; align-items: center; padding-top: calc(150 * var(--m)); }
.screen--camera .cam-copy, .screen--confirm .cam-copy { display: contents; }
.screen--camera .screen-title, .screen--confirm .screen-title { order: 1; max-width: calc(300 * var(--m)); }
.cam-frame, .photo-frame {
  order: 2; position: relative; width: calc(334 * var(--m)); aspect-ratio: 1022 / 814; margin-top: calc(24 * var(--m));
  border-radius: calc(10 * var(--m)); background: #fff; overflow: hidden;
}
.photo-frame { overflow: visible; }
.screen--camera .screen-body-text { order: 3; margin-top: calc(22 * var(--m)); max-width: calc(310 * var(--m)); }
.cam-tips { order: 4; align-self: center; margin-top: calc(16 * var(--m)); display: grid; row-gap: calc(9 * var(--m)); }
.cam-tip { display: flex; align-items: center; gap: calc(10 * var(--m)); min-height: 24px; font-size: max(13px, calc(13 * var(--m))); line-height: 1.25; text-align: left; letter-spacing: var(--tr-tip); }
.tip-icon-box { display: grid; place-items: center; width: calc(22 * var(--m)); min-width: 20px; flex: none; }
.tip-icon { width: calc(18 * var(--m)); min-width: 16px; height: auto; }
.cam-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; opacity: 0; transition: opacity 0.3s; }
.cam-video.is-mirror { transform: scaleX(-1); }
/* Foto congelada sobre o vídeo enquanto a câmera sai (mesmo espelhamento de .photo-still na tela seguinte). */
.cam-freeze { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scaleX(-1); }
.is-live .cam-video, .is-countdown .cam-video { opacity: 1; }
.face-guide { position: absolute; left: 50%; bottom: 0; width: 67.2%; height: auto; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.is-live .face-guide { opacity: 1; }
.cam-state {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; text-align: center; color: #25093f; background: #fff;
}
.cam-msg { font-size: max(14px, calc(14 * var(--m))); font-weight: 500; line-height: 1.25; max-width: 28ch; }
.cam-hint { font-size: max(12px, calc(12 * var(--m))); line-height: 1.3; max-width: 34ch; color: #4a2a74; }
.cam-actions { width: min(100%, calc(300 * var(--m))); gap: calc(8 * var(--m)); margin-top: 2px; }
/* o painel da câmera é branco: botões opacos e sem brilho externo */
.cam-state .pill { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.cam-state .pill--soft { background: #2a0a6a; box-shadow: none; }
.cam-state .pill--small { padding: 0 calc(12 * var(--m)); }
.cam-state-icon { display: block; width: 36px; height: 29px; }
.cam-state-icon .chev-mask-img { width: 36px; height: 29px; visibility: hidden; }
.cam-state-icon { background: var(--brand); -webkit-mask: url('../../img/v3/icon-camera.png') center / contain no-repeat; mask: url('../../img/v3/icon-camera.png') center / contain no-repeat; }
.cam-pulse { width: 40px; height: 43px; animation: pulse 2.4s ease-in-out infinite; }
.cam-note { position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(30, 6, 80, 0.88); color: var(--err); font-size: 13px; text-align: center; }
.cam-note:empty { display: none; }
.cam-flash { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.is-flash { animation: flash 0.26s ease-out; }
.cam-flash.is-fade { animation: flash-soft 0.12s linear; }
@keyframes flash { 0% { opacity: 0; } 30% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes flash-soft { 0% { opacity: 0.5; } 100% { opacity: 0; } }

.shutter {
  order: 5; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--m)); margin-top: calc(28 * var(--m)); padding: 4px 12px;
  background: none; border: 0; color: #fff; transition: opacity 0.2s;
}
.shutter-disc {
  display: grid; place-items: center; width: calc(62 * var(--m)); height: calc(62 * var(--m)); min-width: 56px; min-height: 56px; border-radius: 50%;
  background: var(--brand-2); box-shadow: 0 0 calc(18 * var(--m)) rgba(138, 64, 255, 0.55); transition: transform 0.18s var(--ease-out);
}
.shutter-disc img { width: calc(30 * var(--m)); min-width: 26px; height: auto; }
.shutter:not([disabled]):hover .shutter-disc { transform: scale(1.05); }
.shutter:not([disabled]):active .shutter-disc { transform: scale(0.95); }
.shutter-label { font-size: max(12px, calc(12 * var(--m))); font-weight: 400; text-transform: uppercase; }
.shutter[disabled] { opacity: 0.45; cursor: default; }

.cam-digit {
  position: absolute; left: 0; right: 0; top: calc(620 * var(--m)); margin: 0; text-align: center; font-weight: 700; font-size: calc(120 * var(--m)); line-height: calc(120 * var(--m));
  pointer-events: none; opacity: 0;
}
.cam-digit.is-pop { animation: digit-pop 1s linear both; }
.cam-digit.is-swap { opacity: 1; animation: digit-swap 1s linear both; }
@keyframes digit-pop {
  0% { opacity: 0; transform: scale(0.6); text-shadow: none; }
  12% { opacity: 1; transform: scale(1.04); text-shadow: 4px 0 0 #ff2bd6, -4px 0 0 #2be3ff; }
  22% { opacity: 1; transform: scale(1); text-shadow: 4px 0 0 #ff2bd6, -4px 0 0 #2be3ff; }
  30% { text-shadow: none; }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes digit-swap { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* Celulares com a barra do navegador visível: o TIRAR FOTO (ação principal) precisa caber na primeira tela.
   Só no layout mobile (largura < 1024); o modo PC tem canvas fixo e nunca rola. */
@media (max-height: 820px) and (max-width: 1023px) {
  .screen--camera { padding-top: calc(124 * var(--m)); }
  .screen--camera .cam-frame { margin-top: calc(16 * var(--m)); }
  .screen--camera .screen-body-text { margin-top: calc(14 * var(--m)); }
  .cam-tips { margin-top: calc(10 * var(--m)); row-gap: calc(4 * var(--m)); }
  .cam-tip { min-height: 22px; }
  .shutter { margin-top: calc(12 * var(--m)); }
}
/* Telas curtas (iPhone SE, 360x640): as dicas saem da vista (continuam para leitores de tela). */
@media (max-height: 700px) and (max-width: 1023px) {
  .cam-tips { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

.is-countdown .cam-copy > *, .is-countdown .shutter { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }

/* ---------- confirmar (3/6) ---------- */
.screen--confirm .screen-body-text { order: 3; margin-top: calc(29 * var(--m)); max-width: calc(345 * var(--m)); }
.confirm-actions { order: 4; width: min(100%, calc(334 * var(--m))); margin-top: calc(23 * var(--m)); }
.quota-hint { order: 5; margin-top: calc(12 * var(--m)); }
.photo-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transform: scaleX(-1); }
.photo-frame { animation: settle 0.5s var(--ease-out) backwards; }
.frame-border { position: absolute; left: -1.3%; top: -1.1%; width: 100.98%; height: auto; pointer-events: none; animation: border-draw 0.5s var(--ease-out) backwards; }
@keyframes settle { from { transform: scale(1.02); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes border-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- valores (4/6) ---------- */
.screen--values { display: flex; flex-direction: column; align-items: center; padding-top: calc(158 * var(--m)); }
.values-title { max-width: calc(300 * var(--m)); font-weight: 700; font-size: max(20px, calc(22 * var(--m))); line-height: 1.23; text-transform: uppercase; text-align: center; letter-spacing: var(--tr-title); }
.values { margin-top: calc(38 * var(--m)); }
.values-row { display: grid; grid-template-columns: repeat(3, calc(103 * var(--m))); column-gap: calc(10 * var(--m)); row-gap: calc(22 * var(--m)); justify-content: center; }
.value-card { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.3s var(--ease-out), opacity 0.3s; animation: card-in 0.48s var(--ease-out) backwards; animation-delay: calc(var(--ci, 0) * 80ms); }
.value-input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.value-img { width: calc(103 * var(--m)); height: auto; aspect-ratio: 245 / 346; border-radius: calc(5 * var(--m)); transition: box-shadow 0.6s ease-in-out; }
.value-radio { position: relative; display: block; margin-top: calc(13 * var(--m)); width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff; }
.value-radio::after { content: ''; position: absolute; left: 3px; top: 3px; right: 3px; bottom: 3px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform 0.2s var(--ease-out); }
.value-card.is-selected .value-radio::after { transform: scale(1); }
.values.has-selection .value-card:not(.is-selected) { opacity: 0.7; }
.value-card.is-selected .value-img { box-shadow: 0 0 0 2px #fff; box-shadow: 0 0 0 2px #fff, 0 8px 24px color-mix(in srgb, var(--sw) 60%, transparent); }
.value-input:focus-visible ~ .value-img { outline: 2px solid #fff; outline-offset: 3px; }
.values-hint { min-height: 0; margin-top: calc(12 * var(--m)); color: var(--err); font-size: max(14px, calc(14 * var(--m))); font-weight: 500; text-align: center; }
.values-hint:empty { display: none; }
.values-actions { margin-top: calc(34 * var(--m)); }
.values-go.is-pulse { animation: go-pulse 0.5s var(--ease-out); }
@keyframes card-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes go-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- gerando ---------- */
/* Composição centralizada: anel neon em volta do chevron, título, etapa atual e uma barra de progresso calma.
   Tudo tem altura reservada (nada pula entre as etapas); só transform e opacity animam. */
.screen--generating { display: flex; align-items: center; justify-content: center; padding: 0 calc(24 * var(--m)) calc(36 * var(--m)); overflow-x: hidden; overflow-x: clip; }
.gen-center { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.gen-loader { --size: calc(132 * var(--m)); position: relative; width: var(--size); height: var(--size); margin-bottom: calc(36 * var(--m)); display: grid; place-items: center; }
/* trilho fixo do anel + brilho suave na cor do valor (estático, só a opacidade respira) */
.gen-loader::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14); }
.gen-halo {
  position: absolute; inset: -34%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sw) 52%, transparent), rgba(0, 0, 0, 0) 72%);
  opacity: 0.55; animation: gen-halo 7.2s ease-in-out infinite alternate;
}
.gen-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 43, 214, 0) 0deg, #a100ff 100deg, #ff2bd6 190deg, #3fd0ff 270deg, #f9e912 330deg, rgba(249, 233, 18, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: gen-spin 2.4s linear infinite; will-change: transform;
}
.gen-ring--b { inset: 14%; opacity: 0.4; animation-duration: 4.2s; animation-direction: reverse; will-change: auto; }
.gen-chev { position: relative; width: 38%; height: auto; animation: gen-breathe 7.2s ease-in-out infinite alternate; }
@keyframes gen-spin { to { transform: rotate(360deg); } }
@keyframes gen-halo { from { opacity: 0.35; } to { opacity: 0.7; } }
@keyframes gen-breathe { from { opacity: 0.82; } to { opacity: 1; } }
.gen-title { font-weight: 700; font-size: max(22px, calc(26 * var(--m))); line-height: 1.15; text-transform: uppercase; letter-spacing: var(--tr-title); }
.gen-phrase { margin-top: calc(14 * var(--m)); min-height: 1.5em; font-weight: 500; font-size: max(16px, calc(18 * var(--m))); line-height: 1.5; transition: opacity 0.38s; }
.gen-phrase.is-swap { opacity: 0; }
.gen-progress { position: relative; width: min(100%, calc(240 * var(--m))); height: 4px; margin-top: calc(22 * var(--m)); border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
.gen-progress-fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--input-stroke);
  transform: translateX(calc((var(--p, 0.12) - 1) * 100%)); transition: transform 2.4s cubic-bezier(0.25, 0.7, 0.2, 1);
}
.gen-progress-fill::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: translateX(-100%); animation: gen-sheen 5.6s ease-in-out infinite;
}
@keyframes gen-sheen { to { transform: translateX(300%); } }
.gen-sub { margin-top: calc(14 * var(--m)); min-height: 1.4em; font-size: max(14px, calc(14 * var(--m))); color: var(--text-2); }
/* "Está demorando": aparece abaixo do bloco sem empurrar nada (posição absoluta). */
.gen-slow { position: absolute; left: 0; right: 0; top: 100%; width: min(100%, calc(320 * var(--m))); margin: calc(22 * var(--m)) auto 0; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--m)); }
.gen-slow-text { font-size: max(14px, calc(14 * var(--m))); color: var(--text-2); }
.gen-slow-actions { width: min(100%, calc(300 * var(--m))); }

/* ---------- resultado (5/6) ---------- */
.screen--result { display: flex; flex-direction: column; align-items: center; padding-top: calc(196 * var(--m)); }
.res-title { order: 1; max-width: calc(240 * var(--m)); }
.res-label { order: 2; margin-top: calc(26 * var(--m)); font-size: max(12px, calc(12 * var(--m))); text-transform: uppercase; letter-spacing: 0.02em; text-align: center; }
.res-hashtag { order: 3; margin-top: calc(6 * var(--m)); font-weight: 700; font-size: max(13px, calc(13 * var(--m))); text-align: center; overflow-wrap: anywhere; animation: tag-in 0.9s var(--ease-out) 0.7s backwards; }
.res-image { order: 4; width: calc(334 * var(--m)); aspect-ratio: 16 / 9; margin-top: calc(22 * var(--m)); background: rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; }
.res-body { order: 5; margin-top: calc(22 * var(--m)); max-width: calc(330 * var(--m)); }
/* Baixar ocupa a largura da foto; Compartilhar e Concluir dividem a linha de baixo (sem Compartilhar, Concluir ocupa a linha toda). */
.result-actions { order: 6; display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--m)); width: calc(334 * var(--m)); max-width: 100%; margin-top: calc(24 * var(--m)); }
.result-actions .pill:first-child, .result-actions .pill:last-child:nth-child(2), .result-actions .pill:only-child { grid-column: 1 / -1; }
.result-actions .pill + .pill { padding: 0 calc(10 * var(--m)); }
.result-frame { width: 100%; height: 100%; background: #0d0116; clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); }
.result-frame.is-in { animation: wipe 0.7s var(--ease-out) forwards; }
.result-img { width: 100%; height: 100%; object-fit: cover; }
@keyframes wipe {
  from { clip-path: polygon(0 0, 0% 0, 12% 50%, 0% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
}
@keyframes tag-in { from { opacity: 0; letter-spacing: 0.12em; } to { opacity: 1; letter-spacing: 0; } }

/* ---------- final (6/6) ---------- */
.screen--final { display: flex; flex-direction: column; align-items: center; padding-top: calc(150 * var(--m)); }
.final-title { max-width: calc(340 * var(--m)); }
.final-body { margin-top: calc(18 * var(--m)); max-width: calc(300 * var(--m)); }
.final-actions, .final-links { margin-top: calc(24 * var(--m)); }
.final-headline { margin-top: calc(26 * var(--m)); width: calc(310 * var(--m)); animation: rise 0.42s var(--ease-out) backwards, rgb-split 0.36s steps(1) 0.5s 1 both; }
.headline-img { width: 100%; height: auto; }

/* ---------- mensagens ---------- */
.screen--message { display: flex; flex-direction: column; align-items: center; padding-top: calc(196 * var(--m)); }
.msg-col { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 calc(28 * var(--m)); }
.msg-title { max-width: calc(330 * var(--m)); }
.msg-body { margin-top: calc(18 * var(--m)); max-width: calc(320 * var(--m)); }
.msg-actions { margin-top: calc(26 * var(--m)); }

@media (prefers-reduced-motion: reduce) {
  .title-img, .final-headline, .res-hashtag, .photo-frame, .frame-border, .value-card, .gen-chev, .gen-halo, .gen-ring, .gen-progress-fill::after, .cam-pulse { animation: none !important; }
  .gen-progress-fill { transition: none; }
  .result-frame { clip-path: none; }
  .result-frame.is-in { animation: none; }
  .cam-digit.is-pop, .cam-digit.is-swap { animation: none; opacity: 1; }
  .value-card, .shutter-disc, .city-dot { transition: none; }
}