/* =============================================================================
   TO PRO JOGO - assets/css/home-ia.css
   =============================================================================
   So da pagina inicial aberta (index.html), carregada depois do home.css.
   Todo seletor mora dentro de .hp (a vitrine), entao nada aqui chega ao app.

     1. O aparelho dobravel do heroi (desenho proprio, sem marca nenhuma):
        aberto em toda largura (girado, em pe: o lance do FeedPlay em cima e
        a conversa com a IA embaixo), escalando junto com a largura da
        coluna para nunca sair da tela.
     2. A secao da IA.
     3. Os escudos da secao Times: composicao e sombra.
     4. Movimento (so com prefers-reduced-motion: no-preference, e so
        transform e opacity): o aparelho abre e as mensagens chegam.
   ========================================================================== */

/* ---- 1. O aparelho dobravel ------------------------------------------------ */

/* Um so estado, em toda largura: aberto, girado e segurado em pe. Uma tela
   unica, mais alta que larga (0,72), o lance em cima e a conversa embaixo;
   o vinco e horizontal, no meio, quase invisivel. Moldura escura fina.

   O desenho e feito para 400 px de largura e escala junto com o aparelho:
   o aparelho e um container de tamanho e tudo dentro dele mede em --u
   (1/400 da largura dele, em cqw). No celular ele ocupa a largura da
   coluna (a janela menos 16 px de cada lado) e nunca passa dela. Sem
   suporte a cqw, --u vale 1px e o desenho fica no tamanho de 400. */
.hp #hpHeroiTela{ position:relative; isolation:isolate; padding-bottom:26px; }
.hp #hpHeroiTela::after{ content:""; position:absolute; z-index:-1; left:50%; bottom:2px; width:min(330px, 74%); height:28px;
  transform:translateX(-50%); pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,.16) 55%, rgba(0,0,0,0)); }
[data-tema="claro"] .hp #hpHeroiTela::after{ background:radial-gradient(closest-side, rgba(40,25,10,.26), rgba(40,25,10,.08) 55%, rgba(40,25,10,0)); }

.hp .hp-celular.hp-dobra{ --hp-raio:34px; --u:1px; position:relative; display:grid; width:min(400px, 100%); aspect-ratio:72 / 100;
  border-radius:34px; padding:6px; border:2px solid transparent; container-type:inline-size;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  background:linear-gradient(#050506, #050506) padding-box,
    linear-gradient(160deg, #55555B 0%, #2A2A2E 30%, #18181B 55%, #2E2E33 80%, #5C5C62 100%) border-box;
  box-shadow:0 44px 70px -46px rgba(var(--brand-rgb,255,122,46),.45), 0 26px 44px -30px rgba(0,0,0,.55); }
@supports (width:1cqw){ .hp .hp-celular.hp-dobra{ --u:calc(100cqw / 400); } }
.hp .hp-dobra > #hpHeroiMidia{ grid-area:1 / 1; width:auto; height:auto; min-width:0; min-height:0; border-radius:26px 26px 0 0; }
/* A metade de cima e fixa: o espaco "Seu lance aqui" (o .hp-celular-vazio
   do home.css), na escala do aparelho, e um selo discreto do FeedPlay. */
.hp .hp-dobra .hp-celular-vazio{ gap:calc(var(--u) * 10); padding:calc(var(--u) * 18); }
.hp .hp-dobra .hp-brasao{ width:calc(var(--u) * 64); height:calc(var(--u) * 64); }
.hp .hp-dobra .hp-celular-vazio b{ font-size:max(14px, calc(var(--u) * 18)); }
.hp .hp-dobra .hp-celular-vazio small{ font-size:max(10px, calc(var(--u) * 12)); }
.hp-dobra-selo{ position:absolute; z-index:2; top:calc(var(--u) * 14); left:calc(var(--u) * 16); padding:calc(var(--u) * 4) calc(var(--u) * 9);
  border-radius:999px; font-size:max(8.5px, calc(var(--u) * 10)); font-weight:700; letter-spacing:.02em; line-height:1.2; color:#F5F5F7;
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); pointer-events:none; }
/* a camera: um furo pequeno no canto de cima, a direita (sem ilha) */
.hp .hp-celular.hp-dobra::before{ top:17px; left:auto; right:19px; transform:none; width:8px; max-width:none; aspect-ratio:1;
  border-radius:50%; box-shadow:inset 0 0 0 1.5px #1A1A1E, 0 0 0 1px rgba(255,255,255,.05); }
/* o vinco: so um reflexo, de leve */
.hp .hp-celular.hp-dobra::after{ content:""; position:absolute; z-index:5; left:8px; right:8px; top:50%; height:6px;
  transform:translateY(-50%); pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.07) 45%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0)); }

.hp-dobra-ia{ grid-area:2 / 1; position:relative; min-width:0; min-height:0; overflow:hidden; border-radius:0 0 26px 26px;
  background:var(--ink-900); padding:calc(var(--u) * 12) calc(var(--u) * 13) calc(var(--u) * 56); }

/* A conversa */
.hp-ia-cab{ display:flex; align-items:center; gap:calc(var(--u) * 8); padding-bottom:calc(var(--u) * 9); border-bottom:1px solid var(--line); }
.hp-ia-selo{ flex:none; width:calc(var(--u) * 24); height:calc(var(--u) * 24); border-radius:calc(var(--u) * 8); display:grid; place-items:center;
  background:rgba(var(--brand-rgb,255,122,46),.16); color:var(--brand-txt,var(--brand)); }
.hp-ia-selo svg{ width:calc(var(--u) * 14); height:calc(var(--u) * 14); }
.hp-ia-nome{ min-width:0; display:flex; align-items:baseline; gap:calc(var(--u) * 6); line-height:1.2; }
.hp-ia-nome b{ font-size:max(10px, calc(var(--u) * 12)); font-weight:800; letter-spacing:-.01em; color:var(--txt); }
.hp-ia-nome small{ font-size:max(8.5px, calc(var(--u) * 10)); font-weight:600; color:var(--dim); }
.hp-ia-conversa{ display:flex; flex-direction:column; gap:calc(var(--u) * 7); padding-top:calc(var(--u) * 10); }
.hp-ia-msg{ max-width:88%; font-size:max(9.5px, calc(var(--u) * 11.5)); line-height:1.4; letter-spacing:-.005em;
  border-radius:calc(var(--u) * 16); padding:calc(var(--u) * 7) calc(var(--u) * 11); }
.hp-ia-eu{ align-self:flex-end; background:#C2410C; color:#FFFFFF; border-bottom-right-radius:calc(var(--u) * 5); font-weight:600; }
.hp-ia-ela{ align-self:flex-start; background:var(--ink-800); color:var(--txt); border-bottom-left-radius:calc(var(--u) * 5);
  box-shadow:0 0 0 1px var(--line), 0 6px 14px -10px rgba(0,0,0,.4); }
.hp-ia-ela p b{ font-weight:800; }
.hp-ia-ela small{ display:block; margin-top:calc(var(--u) * 6); font-size:max(8.5px, calc(var(--u) * 10)); line-height:1.35; color:var(--dim); }
.hp-ia-chips{ display:flex; flex-wrap:wrap; gap:calc(var(--u) * 5); margin-top:calc(var(--u) * 7); }
.hp-ia-chip{ display:inline-block; font-size:max(9px, calc(var(--u) * 10.5)); font-weight:700; line-height:1.2;
  padding:calc(var(--u) * 5) calc(var(--u) * 10); border-radius:999px; background:var(--ink-700); color:var(--txt); }
.hp-ia-chip.hp-ia-principal{ background:#C2410C; color:#FFFFFF; box-shadow:0 6px 14px -8px rgba(194,65,12,.9); }

/* A barra da IA: uma linha so, como no app (atalhos, campo, microfone) */
.hp-iabar{ position:absolute; left:calc(var(--u) * 9); right:calc(var(--u) * 9); bottom:calc(var(--u) * 9); z-index:2;
  display:flex; align-items:center; gap:calc(var(--u) * 3); padding:calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4);
  border-radius:calc(var(--u) * 21); background:var(--ink-800);
  box-shadow:0 0 0 1px var(--line), 0 10px 22px -12px rgba(0,0,0,.5); }
.hp-iabar-at{ flex:none; width:calc(var(--u) * 31); display:flex; flex-direction:column; align-items:center; gap:1px; color:var(--dim); }
.hp-iabar-at svg{ width:calc(var(--u) * 15); height:calc(var(--u) * 15); display:block; }
.hp-iabar-at i{ font-style:normal; font-size:max(7px, calc(var(--u) * 7.5)); font-weight:700; line-height:1.1; letter-spacing:0; }
.hp-iabar-at.hp-iabar-on{ color:var(--brand-txt,var(--brand)); }
.hp-iabar-campo{ flex:1 1 auto; min-width:0; display:block; height:calc(var(--u) * 28); line-height:calc(var(--u) * 28);
  padding:0 calc(var(--u) * 10); border-radius:999px; background:var(--ink-700); color:var(--dim);
  font-size:max(8.5px, calc(var(--u) * 10)); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hp-iabar-mic{ flex:none; width:calc(var(--u) * 28); height:calc(var(--u) * 28); border-radius:50%; display:grid; place-items:center;
  background:#C2410C; color:#FFFFFF; }
.hp-iabar-mic svg{ width:calc(var(--u) * 14); height:calc(var(--u) * 14); display:block; }

/* ---- 2. A secao da IA ------------------------------------------------------- */

.hp-ia-grade{ list-style:none; padding:0; margin:28px 0 0; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
@media (min-width:640px){ .hp-ia-grade{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; } }
@media (min-width:1020px){ .hp-ia-grade{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.hp-ia-bloco{ background:var(--ink-900); border-radius:var(--raio,22px); padding:22px 20px 20px; box-shadow:var(--sombra-leve,none); }
.hp-ia-bloco h3{ font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--txt); margin-bottom:6px; }
.hp-ia-bloco p{ font-size:14px; line-height:1.55; color:var(--dim); }
.hp-ia-exemplos{ margin-top:30px; }
.hp-ia-ex-t{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.hp-ia-frases{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.hp-ia-frases li{ display:inline-flex; align-items:center; gap:9px; max-width:100%; padding:10px 16px 10px 14px; border-radius:18px;
  background:var(--ink-900); color:var(--txt); font-size:14px; font-weight:600; line-height:1.35; letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px var(--line); }
.hp-ia-frases li::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 8px rgba(var(--brand-rgb,255,122,46),.8); }
.hp-ia-nota{ font-size:13px; line-height:1.55; color:var(--dim); margin-top:16px; max-width:640px; }

/* ---- 3. Escudos da secao Times ---------------------------------------------- */

.hp .hp-escudo-svg{ display:block; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.42)) drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
[data-tema="claro"] .hp .hp-escudo-svg{ filter:drop-shadow(0 12px 16px rgba(70,40,15,.22)) drop-shadow(0 2px 3px rgba(70,40,15,.18)); }
@media (min-width:560px){
  .hp .hp-escudos{ max-width:400px; gap:20px 22px; padding-bottom:24px; }
  /* a coluna do meio desce um pouco: um ritmo, e nao uma tabela */
  .hp .hp-escudo:nth-child(3n+2){ translate:0 24px; }
}
@media (max-width:559px){
  .hp .hp-escudos .hp-escudo{ width:38px; }
}

/* ---- 4. Movimento ------------------------------------------------------------ */

/* A metade de baixo abre a partir do vinco e as mensagens chegam em
   sequencia. Comeca so quando a vitrine aparece (sem hp-checando). */
@media (prefers-reduced-motion:no-preference){
  html:not(.hp-checando) .hp-dobra .hp-dobra-ia{ transform-origin:50% 0;
    animation:hpAbrir 1.1s cubic-bezier(.2,.8,.25,1) .2s both; }
  html:not(.hp-checando) .hp-dobra .hp-ia-eu{ animation:hpMsg .55s cubic-bezier(.2,.8,.25,1) 1.2s both; }
  html:not(.hp-checando) .hp-dobra .hp-ia-ela{ animation:hpMsg .55s cubic-bezier(.2,.8,.25,1) 2s both; }
  html:not(.hp-checando) .hp-dobra .hp-ia-chip{ animation:hpMsg .45s cubic-bezier(.2,.8,.25,1) 2.5s both; }
  html:not(.hp-checando) .hp-dobra .hp-ia-chip:nth-child(2){ animation-delay:2.62s; }
  html:not(.hp-checando) .hp-dobra .hp-ia-chip:nth-child(3){ animation-delay:2.74s; }
  @keyframes hpAbrir{ from{ opacity:.2; transform:perspective(1100px) rotateX(70deg); } to{ opacity:1; transform:none; } }
  @keyframes hpMsg{ from{ opacity:0; transform:translate3d(0, 8px, 0) scale(.98); } to{ opacity:1; transform:none; } }
}