/* =====================================================================
   TITANS — FAIXA DA SUPREMA (10/10)
   Montada por COL_TITANS_FX.faixa (src/visual/efeitos-codigo/titans-suprema.js)
   dentro da camada que o jogo põe por cima da arena (absolute, inset 0).
   Faixa diagonal de jogo de luta: escurece a arena, a faixa entra pela
   esquerda, a arte do Titan entra deslizando, nome + suprema, e sai pela
   direita. Tudo em transform/opacity (compositor). O JS passa:
     --tf-cor / --tf-cor2 / --tf-escuro  cores do Titan
     --tf-dur   duração total (1100 ms; 700 ms com movimento reduzido)
     --tf-k     altura da faixa em alturas da arena (0,32..0,50, cresce com a forma)
     --tf-arte  altura da arte em alturas da faixa (0,7..1,5, pelo `altura` do TITANS_ARTE)
   Tamanhos em unidades da própria arena (cqw/cqh), com vw/vh de reserva:
   cabe no celular em pé e deitado e no PC até 4K.
   ===================================================================== */
.titan-faixa{position:absolute;inset:0;z-index:90;pointer-events:none;overflow:hidden;container-type:size;contain:layout paint style;
  --tf-cor:#ff5a1f;--tf-cor2:#ffc46b;--tf-escuro:#2a0905;--tf-dur:1100ms;--tf-k:.4;--tf-arte:1;
  --tf-w:1vw;--tf-hh:1vh;
  font-family:"Cinzel",Georgia,serif;-webkit-user-select:none;user-select:none}
.titan-faixa *{box-sizing:border-box}

/* escurece a arena enquanto a faixa passa */
.titan-faixa__veu{position:absolute;inset:0;background:#000;opacity:0;animation:tf-veu var(--tf-dur) linear both}
@keyframes tf-veu{0%{opacity:0}14%{opacity:.55}82%{opacity:.55}100%{opacity:0}}
/* clarão curto na entrada (só no normal) */
.titan-faixa__flash{position:absolute;inset:0;background:var(--tf-cor2);opacity:0;animation:tf-flash var(--tf-dur) ease-out both}
@keyframes tf-flash{0%{opacity:.35}12%{opacity:0}100%{opacity:0}}

/* a faixa: 160% da largura, inclinada; a parte visível é o __palco */
.titan-faixa__banda{
  --tf-bh:min(calc(var(--tf-k) * 100 * var(--tf-hh)),calc(44 * var(--tf-w)));
  position:absolute;left:-30%;width:160%;top:44%;height:var(--tf-bh);margin-top:calc(var(--tf-bh) / -2);
  overflow:hidden;will-change:transform;
  background:linear-gradient(180deg,var(--tf-cor) 0,var(--tf-escuro) 6%,var(--tf-escuro) 94%,var(--tf-cor) 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.55),0 0 calc(var(--tf-bh) * .18) rgba(0,0,0,.6);
  transform:rotate(-7deg);animation:tf-banda var(--tf-dur) both}
@supports (width:1cqw){.titan-faixa{--tf-w:1cqw;--tf-hh:1cqh}}
@keyframes tf-banda{
  0%{transform:rotate(-7deg) translateX(-85%);animation-timing-function:cubic-bezier(.15,.75,.3,1)}
  18%{transform:rotate(-7deg) translateX(0);animation-timing-function:linear}
  82%{transform:rotate(-7deg) translateX(1.5%);animation-timing-function:cubic-bezier(.6,0,.9,.6)}
  100%{transform:rotate(-7deg) translateX(85%)}}
.titan-faixa__palco{position:absolute;top:0;bottom:0;left:18.75%;width:62.5%}

/* linhas de velocidade (spans criados pelo JS, posições fixas por Titan) */
.titan-faixa__linhas{position:absolute;top:4px;bottom:4px;left:0;width:200%;animation:tf-linhas var(--tf-dur) linear both;mix-blend-mode:screen}
.titan-faixa__linhas i{position:absolute;display:block;background:var(--tf-cor);border-radius:2px}
@keyframes tf-linhas{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* brilho atrás da criatura */
.titan-faixa__brilho{position:absolute;left:72%;top:50%;width:calc(var(--tf-bh) * 1.9);height:calc(var(--tf-bh) * 1.9);
  transform:translate(-50%,-50%);border-radius:50%;opacity:.7;
  background:radial-gradient(closest-side,var(--tf-cor),transparent)}

/* arte do Titan: caixa desfaz a inclinação; a imagem entra deslizando e deriva */
.titan-faixa__arte-caixa{position:absolute;left:72%;top:50%;width:0;height:0;transform:rotate(7deg)}
.titan-faixa__arte{position:absolute;left:0;top:0;display:block;height:calc(var(--tf-bh) * var(--tf-arte));width:auto;max-width:none;
  margin-top:calc(var(--tf-bh) * var(--tf-arte) * -.52);
  transform:translateX(-50%);animation:tf-arte var(--tf-dur) both;
  filter:drop-shadow(0 0 calc(var(--tf-bh) * .05) var(--tf-cor))}
@keyframes tf-arte{
  0%{transform:translateX(-10%);opacity:0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
  24%{transform:translateX(-50%);opacity:1;animation-timing-function:linear}
  100%{transform:translateX(-44%);opacity:1}}
/* formas 1-2 (ovo): balança e pulsa */
.titan-faixa--ovo .titan-faixa__arte-caixa{animation:tf-ovo calc(var(--tf-dur) / 7) ease-in-out infinite alternate}
@keyframes tf-ovo{from{transform:rotate(4deg)}to{transform:rotate(10deg)}}
.titan-faixa--ovo .titan-faixa__brilho{animation:tf-pulso calc(var(--tf-dur) / 5) ease-in-out infinite alternate}
@keyframes tf-pulso{from{opacity:.45}to{opacity:.95}}

/* textos: menos inclinados que a faixa, entram logo depois dela */
.titan-faixa__textos{position:absolute;left:7%;top:50%;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--tf-bh) * .02);
  transform:translateY(-50%) rotate(4deg);animation:tf-texto var(--tf-dur) both;line-height:1;white-space:nowrap}
@keyframes tf-texto{
  0%,8%{opacity:0;translate:-8% 0}
  26%{opacity:1;translate:0 0}
  100%{opacity:1;translate:2% 0}}
.titan-faixa__forma{font:700 max(10px,min(calc(var(--tf-bh) * .085),calc(2.4 * var(--tf-w)))) system-ui,"Segoe UI",sans-serif;
  letter-spacing:.08em;color:var(--tf-cor2);opacity:.9;text-shadow:0 1px 0 #000,0 0 2px #000}
.titan-faixa__nome{font-weight:900;font-size:min(calc(var(--tf-bh) * .3),calc(8 * var(--tf-w)));letter-spacing:.02em;color:#fff;text-transform:uppercase;
  text-shadow:0 .045em 0 #000,.035em 0 0 #000,-.035em 0 0 #000,0 -.035em 0 #000,0 0 .3em var(--tf-cor)}
.titan-faixa__suprema{font-weight:800;font-size:max(11px,min(calc(var(--tf-bh) * .13),calc(3.6 * var(--tf-w))));letter-spacing:.03em;color:var(--tf-cor2);text-transform:uppercase;
  text-shadow:0 .06em 0 #000,.05em 0 0 #000,-.05em 0 0 #000,0 -.05em 0 #000}

/* LITE (aparelho fraco): sem filtro, sem brilho com desfoque, sem mistura */
.titan-faixa--lite .titan-faixa__arte{filter:none}
.titan-faixa--lite .titan-faixa__linhas{mix-blend-mode:normal}
.titan-faixa--lite .titan-faixa__banda{box-shadow:0 0 0 2px rgba(0,0,0,.55)}
.titan-faixa--lite .titan-faixa__nome{text-shadow:0 .045em 0 #000,.035em 0 0 #000,-.035em 0 0 #000,0 -.035em 0 #000}

/* MOVIMENTO REDUZIDO: a faixa só aparece e some, parada */
.titan-faixa--reduz .titan-faixa__banda{animation:tf-some var(--tf-dur) linear both;transform:rotate(-7deg)}
.titan-faixa--reduz .titan-faixa__arte{animation:none;transform:translateX(-50%)}
.titan-faixa--reduz .titan-faixa__textos{animation:none}
.titan-faixa--reduz .titan-faixa__arte-caixa,.titan-faixa--reduz .titan-faixa__brilho{animation:none}
@keyframes tf-some{0%{opacity:0}18%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .titan-faixa__banda{animation-name:tf-some!important;transform:rotate(-7deg)!important}
  .titan-faixa__arte,.titan-faixa__textos,.titan-faixa__linhas,.titan-faixa__arte-caixa,.titan-faixa__brilho{animation:none!important}
  .titan-faixa__flash{display:none}}
/* A camada da faixa na arena da horda (game.js, camadaDaFaixaDoTitan): a mesma caixa do canvas de FX. */
.titan-faixa-camada{position:absolute;inset:0;z-index:90;pointer-events:none;overflow:hidden}