/* AI Week: página Inscrição, só o que é dela (a disposição e a credencial). As peças comuns estão em
   paginas.css; os campos do formulário, em formulario.css. A credencial segue a do manual (Identidade Visual
   V2, p. 11): fundo preto, símbolo oficial, a categoria em Barlow, o nome em laranja e o Pulso recortado da
   biblioteca do kit embaixo, sem filtros. Sem logo completa: abaixo de 240px o kit pede só o símbolo. */
.ins{padding-block:clamp(40px,calc(4*var(--vw)),64px) clamp(64px,calc(6.5*var(--vw)),104px);background:#000}
.ins-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,calc(5*var(--vw)),80px);align-items:start}
.ins-lado{align-self:stretch}
/* à direita, o título em cima do formulário; à esquerda, a credencial logo no alto, inteira na primeira tela
   (é onde o canhoto do ingresso da home pousa, ver o fim deste arquivo) */
.ins-col > .pg-rotulo{margin-top:0}
.ins-col .pg-lede{max-width:44ch}
.ins-col .fm,.ins-col .ins-ok{margin-top:36px}
/* a credencial acompanha a rolagem enquanto a pessoa preenche */
.ins-presa{position:sticky;top:calc(var(--nav,72px) + 32px);margin-top:28px}
.ins-hack{margin-top:20px;max-width:34ch;font-size:15px;line-height:1.5;color:#B3B3B3}
.ins-hack a{color:#fff;text-underline-offset:.2em}
.ins-hack a:hover{color:var(--laranja)}

.cred{position:relative;isolation:isolate;overflow:hidden;width:min(100%,340px);aspect-ratio:17/24;padding:40px 28px 0;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#080808;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cred-furo{position:absolute;top:16px;left:50%;width:56px;height:8px;margin-left:-28px;border-radius:4px;background:#000;box-shadow:inset 0 1px 2px rgba(255,255,255,.14)}
.cred-simbolo{display:block;width:64px;height:auto}
.cred-cat{margin-top:14px;font-family:var(--f-titulo);font-weight:800;font-size:46px;line-height:.95;text-transform:uppercase;color:#fff}
.cred-nome{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:10px;font-family:var(--f-titulo);font-weight:800;font-size:26px;line-height:1.05;text-transform:uppercase;color:var(--laranja);overflow-wrap:anywhere}
.cred-nome.vazio{color:#666}
.cred-local{margin-top:12px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.cred-arte{position:absolute;z-index:-1;left:-6%;top:54%;width:118%;max-width:none;height:auto;pointer-events:none}
/* inscrição feita: selo no canto (texto e ícone, não só cor) */
.cred-ok{position:absolute;top:36px;right:24px;display:none;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:999px;background:var(--laranja);color:#000;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.cred--ok .cred-ok{display:inline-flex}

/* tela de sucesso, no lugar do formulário */
.ins-ok{padding:clamp(24px,calc(3*var(--vw)),44px);background:#141414;border:1px solid rgba(255,255,255,.08)}
.ins-ok .pg-rotulo{margin-top:0}
.ins-ok .pg-h2{margin-top:16px}
.ins-ok-txt{margin-top:20px;max-width:46ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.86)}
.ins-ok .fm-pendente{margin-top:20px}

/* telas estreitas: só encaminhado (a adaptação mobile vem depois) */
@media (max-width:1000px){
  .ins-in{grid-template-columns:1fr}
  .ins-presa{position:static}
}

/* ============ a passagem: o canhoto do ingresso da home vira a credencial (30/09) ============
   Sai pelo "Quero participar" do ingresso: o canhoto rasga, sobe e, na troca de página (view transition entre
   documentos, Chrome e Edge), voa até a credencial e vira ela; depois o formulário sobe. Quem liga os nomes é o
   assets/passe.js, só nessa navegação. Sem o recurso, a classe passe-chegou faz uma entrada simples. */
@view-transition{navigation:auto}
::view-transition-group(passe){animation-duration:.8s;animation-timing-function:cubic-bezier(.2,0,0,1)}
::view-transition-old(passe){animation:.4s cubic-bezier(.2,0,0,1) both passe-some}
::view-transition-new(passe){animation:.5s .12s cubic-bezier(.2,0,0,1) both passe-surge}
::view-transition-new(passe-form){animation:.6s .45s cubic-bezier(.2,0,0,1) both passe-form-entra}
::view-transition-old(root){animation:.35s ease both passe-some}
::view-transition-new(root){animation:.45s .1s ease both passe-surge}
@keyframes passe-some{to{opacity:0}}
@keyframes passe-surge{from{opacity:0}}
@keyframes passe-form-entra{from{opacity:0;transform:translateY(40px)}}
@keyframes passe-cred-chega{from{opacity:0;transform:translate(90px,-24px) rotate(5deg) scale(.96)}}
@media (prefers-reduced-motion:no-preference){
  .passe-chegou .cred{animation:passe-cred-chega .7s cubic-bezier(.2,0,0,1) both}
  .passe-chegou #formulario{animation:passe-form-entra .6s .3s cubic-bezier(.2,0,0,1) both}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}