/* Visual "hub": página escura com brilho vermelho no topo, moldura de cantoneiras,
   linha de terminal e cards com uma cena animada que mostra o que o item faz. */

body {
  background: radial-gradient(70% 45% at 50% -5%, rgba(208, 24, 30, .22), transparent 70%) fixed, var(--fundo);
}
[data-tema="claro"] body { background: radial-gradient(70% 45% at 50% -5%, rgba(208, 24, 30, .12), transparent 70%) fixed, var(--fundo); }
.tela { position: relative; z-index: 1; }

/* Cantoneiras nos quatro cantos da tela */
.moldura { position: fixed; inset: 12px; pointer-events: none; z-index: 30; }
.moldura i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255, 74, 58, .55); }
.moldura i:nth-child(1) { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.moldura i:nth-child(2) { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.moldura i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.moldura i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

.linha-terminal { font: 700 12px var(--mono); letter-spacing: .3em; color: var(--brasa); text-transform: uppercase; }
.titulo-hub, .hub-topo h1 { font-family: var(--titulo); font-weight: 800; margin: 0; line-height: 1.08; text-wrap: balance; }
.titulo-hub em, .hub-topo h1 em {
  font-style: normal; font-weight: 900; color: var(--osso); display: inline-block;
  text-shadow: 0 1px 0 #ffd9d6, 0 2px 0 #f2a8a3, 0 3px 0 #d8565a, 0 4px 0 #a51219, 0 0 24px rgba(255, 60, 60, .5);
}
[data-tema="claro"] .titulo-hub em, [data-tema="claro"] .hub-topo h1 em, [data-tema="claro"] .marca span { color: var(--sangue); text-shadow: 0 1px 0 #fff, 0 2px 0 #f2a8a3, 0 3px 6px rgba(160, 10, 16, .25); }

/* ---------- Topo centralizado ---------- */
.topo { background: color-mix(in srgb, var(--fundo) 70%, transparent); }
.hub-topo { text-align: center; padding: 44px max(16px, env(safe-area-inset-left)) 18px; display: grid; justify-items: center; gap: 10px; }
.hub-logo { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 0 30px rgba(255, 60, 60, .45); }
.hub-topo .linha-terminal { margin-top: 8px; }
.hub-topo h1 { font-size: clamp(30px, 5vw, 44px); }
.hub-topo p { color: var(--texto-2); margin: 0; max-width: 54ch; }
.hub-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.selo-vivo, .efeitos {
  display: inline-flex; align-items: center; gap: 7px; font: 500 12px var(--mono); color: var(--texto-2);
  border: 1px solid var(--vidro-borda); border-radius: 99px; padding: 5px 12px; background: var(--vidro);
}
.selo-vivo i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.efeitos b { color: #4ade80; font-weight: 500; }
.efeitos-leves .efeitos b { color: var(--texto-2); }
.conteudo { padding-top: 10px; }

/* ---------- Login ---------- */
#tela-login { min-height: 100vh; }
.login-caixa { gap: 14px; }
.login-caixa .titulo-hub { font-size: 30px; }
.login-caixa .linha-terminal { margin-top: -2px; }

/* ---------- Cards ---------- */
.grade { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.card {
  position: relative; display: flex; flex-direction: column; padding: 14px; border-radius: 18px; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255, 245, 244, .055), rgba(255, 245, 244, .02)); border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra);
}
[data-tema="claro"] .card { background: #fff; }
.card:hover, .card:focus-within { border-color: rgba(255, 74, 58, .55); box-shadow: var(--sombra), 0 18px 46px rgba(208, 24, 30, .22); }
.card .rotulo { font: 700 11px var(--mono); letter-spacing: .16em; color: var(--brasa); margin: 16px 0 4px; text-transform: uppercase; }
.card h3 { margin: 0; font: 800 20px/1.25 var(--titulo); }
.card-abrir { all: unset; cursor: pointer; }
.card-abrir::after { content: ""; position: absolute; inset: 0; border-radius: 18px; z-index: 1; }
.card-abrir:focus-visible::after { outline: 2px solid var(--brasa); outline-offset: 2px; }
.btn-card, .card .fav-tag { position: relative; z-index: 2; }
.card p { margin: 6px 0 12px; color: var(--texto-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.card .tags span { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--vidro-borda); color: var(--texto-2); }
.card .tags .tag-ok { color: #22c55e; border-color: rgba(74, 222, 128, .35); }
.btn-card {
  margin-top: auto; align-self: flex-start; border: 0; border-radius: 10px; padding: 10px 16px; font: 700 14px var(--corpo); color: #fff;
  background: linear-gradient(180deg, #ff5148, var(--sangue) 60%, #9f1015); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 22px rgba(208, 24, 30, .3);
  transition: transform .15s, box-shadow .25s;
}
.btn-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 28px rgba(208, 24, 30, .5); }
.btn-card:active { transform: scale(.96); }
.btn-card.ok { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.card .fav-tag { position: absolute; right: 22px; top: 20px; }
.posicao { color: var(--osso); }

/* ---------- Cena (a tela animada no alto do card) ---------- */
.cena {
  position: relative; height: 150px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(80% 80% at 50% 50%, rgba(208, 24, 30, .14), transparent 70%), #140a0b; border: 1px solid rgba(255, 220, 216, .07);
  color: var(--osso);
}
.cena .chip {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap; z-index: 2;
  font: 500 11px var(--mono); color: #fff6f5; padding: 3px 10px; border-radius: 99px;
  border: 1px solid rgba(255, 74, 58, .6); background: rgba(12, 7, 8, .82); box-shadow: 0 0 12px rgba(255, 74, 58, .25);
}
.com-capa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.det-cena .cena { height: 220px; border-radius: 0; border: 0; }

/* Vídeo: o prompt é digitado e vira um vídeo 9:16 tocando */
.cena-video .texto-prompt { position: absolute; left: calc(50% - 128px); top: 36px; width: 140px; font: 500 10px/1.55 var(--mono); }
.cena-video .texto-prompt span { display: block; white-space: nowrap; width: max-content; }
.cena-video .seta { position: absolute; left: calc(50% + 14px); top: 52px; color: var(--brasa); font: 700 16px var(--mono); }
.cena-video .celular { position: relative; width: 62px; height: 108px; border-radius: 12px; border: 2px solid rgba(255, 220, 216, .5); overflow: hidden; background: #000; margin: -18px 0 0 140px; }
.cena-video .filme { position: absolute; inset: 0; background: url(img/fundo.jpg) 30% center / auto 140%; }
.cena-video .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 20px; opacity: 0; }
.cena-video .barra { position: absolute; left: 6px; right: 6px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.cena-video .barra::after { content: ""; position: absolute; inset: 0; background: var(--brasa); transform-origin: left; transform: scaleX(.6); }

/* Imagem: quatro variações saindo do borrão */
.cena-imagem .quatro { display: grid; grid-template-columns: repeat(4, 52px); gap: 8px; margin-top: -16px; }
.cena-imagem .quatro i { height: 70px; border-radius: 8px; border: 1px solid rgba(255, 220, 216, .35); background: url(img/fundo.jpg) var(--p) / 420% auto; }
.cena-imagem .quatro i:nth-child(1) { --p: 10% 40%; --d: 0s; }
.cena-imagem .quatro i:nth-child(2) { --p: 40% 30%; --d: .35s; }
.cena-imagem .quatro i:nth-child(3) { --p: 70% 60%; --d: .7s; }
.cena-imagem .quatro i:nth-child(4) { --p: 95% 40%; --d: 1.05s; }
.cena-imagem .brilho-varre { position: absolute; top: 0; bottom: 0; width: 40px; left: -60px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); transform: skewX(-18deg); }

/* Agente: chat respondendo */
.cena-agente .chat { position: relative; width: 236px; height: 92px; margin-top: -26px; }
.cena-agente .bolha { position: absolute; font: 500 10.5px/1.35 var(--mono); padding: 6px 9px; border-radius: 10px; max-width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cena-agente .bolha.eu { right: 0; top: 0; background: linear-gradient(180deg, #ff5148, var(--sangue)); color: #fff; border-bottom-right-radius: 3px; }
.cena-agente .bolha.ia { left: 0; background: rgba(255, 245, 244, .08); border: 1px solid rgba(255, 220, 216, .16); border-bottom-left-radius: 3px; }
.cena-agente .digitando, .cena-agente .r1 { top: 32px; }
.cena-agente .r2 { top: 62px; }
.cena-agente .digitando { opacity: 0; }
.cena-agente .digitando b { display: inline-block; width: 4px; height: 4px; margin: 0 1.5px; border-radius: 50%; background: var(--brasa); }

/* IA: o logo ligado às ferramentas */
.cena-ia .rede { position: relative; width: 220px; height: 120px; margin-top: -16px; }
.cena-ia svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cena-ia path { fill: none; stroke: var(--brasa); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .8; }
.cena-ia .no { position: absolute; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 700 10px var(--mono); background: rgba(12, 7, 8, .9); border: 1px solid rgba(255, 74, 58, .6); transform: translate(-50%, -50%); }
.cena-ia .no.centro { width: 52px; height: 52px; border-radius: 14px; background: url(img/logo.jpg) center/cover; border: 1.5px solid #ff5148; box-shadow: 0 0 26px rgba(255, 60, 60, .55); }
.cena-ia .anel { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid rgba(255, 74, 58, .7); transform: translate(-50%, -50%); opacity: 0; }

/* ---------- Movimento das cenas (desliga com "reduzir movimento" ou "efeitos leves") ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cena-video .texto-prompt span { clip-path: inset(0 100% 0 0); animation: digita 6s steps(18) infinite; }
  .cena-video .texto-prompt span:nth-child(2) { animation-name: digita2; }
  .cena-video .texto-prompt span:nth-child(3) { animation-name: digita3; }
  .cena-video .seta { animation: seta 6s infinite; }
  .cena-video .filme { animation: filme 6s infinite; }
  .cena-video .play { animation: play 6s infinite; }
  .cena-video .barra::after { animation: barra 6s infinite; }
  .cena-imagem .quatro i { animation: revela 6s infinite; animation-delay: var(--d); }
  .cena-imagem .brilho-varre { animation: varre-cena 6s infinite; }
  .cena-agente .bolha.eu { animation: bolha 7s infinite; }
  .cena-agente .digitando { animation: digitando 7s infinite; }
  .cena-agente .digitando b { animation: pontinho .9s infinite; }
  .cena-agente .digitando b:nth-child(2) { animation-delay: .15s; }
  .cena-agente .digitando b:nth-child(3) { animation-delay: .3s; }
  .cena-agente .r1 { animation: bolha-r 7s infinite; }
  .cena-agente .r2 { animation: bolha-r2 7s infinite; }
  .cena-ia path { animation: fluxo 1.2s linear infinite; }
  .cena-ia .no { animation: pisca-no 3s infinite; }
  .cena-ia .no.centro { animation: pulso-no 2.4s infinite; }
  .cena-ia .anel { animation: onda-anel 2.4s infinite; }
  .cena-ia .no:nth-of-type(3) { animation-delay: .4s; }
  .cena-ia .no:nth-of-type(4) { animation-delay: .8s; }
  .cena-ia .no:nth-of-type(5) { animation-delay: 1.2s; }
}
/* Cena fora da tela ou "efeitos leves": tudo parado no quadro em que estava */
.cena.fora *, .cena.fora *::after,
.efeitos-leves .cena *, .efeitos-leves .cena *::after,
.efeitos-leves .hub-topo *, .efeitos-leves .marca img, .efeitos-leves .login-caixa * { animation-play-state: paused !important; }

@keyframes digita  { 0% { clip-path: inset(0 100% 0 0); } 15%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes digita2 { 0%, 15% { clip-path: inset(0 100% 0 0); } 30%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes digita3 { 0%, 30% { clip-path: inset(0 100% 0 0); } 42%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes seta { 0%, 42% { opacity: 0; transform: translateX(-6px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes filme { 0%, 48% { opacity: 0; transform: scale(1.2); } 55% { opacity: 1; } 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes barra { 0%, 55% { transform: scaleX(0); } 92%, 100% { transform: scaleX(1); } }
@keyframes play { 0%, 48% { opacity: 0; transform: scale(.6); } 54% { opacity: 1; transform: scale(1.15); } 62%, 100% { opacity: 0; transform: scale(1); } }
@keyframes revela { 0%, 10% { filter: blur(10px) saturate(0); opacity: .25; transform: scale(.94); } 30%, 88% { filter: none; opacity: 1; transform: none; box-shadow: 0 0 16px rgba(255, 74, 58, .35); } 100% { filter: blur(10px) saturate(0); opacity: .25; } }
@keyframes varre-cena { 0%, 40% { left: -60px; } 60%, 100% { left: 110%; } }
@keyframes bolha { 0% { opacity: 0; transform: translateY(6px); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes digitando { 0%, 10% { opacity: 0; } 14%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes bolha-r { 0%, 32% { opacity: 0; transform: translateY(6px); } 38%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bolha-r2 { 0%, 50% { opacity: 0; transform: translateY(6px); } 56%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pontinho { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes fluxo { to { stroke-dashoffset: -18; } }
@keyframes pisca-no { 0%, 100% { box-shadow: 0 0 0 rgba(255, 74, 58, 0); } 50% { box-shadow: 0 0 14px rgba(255, 74, 58, .6); } }
@keyframes pulso-no { 50% { box-shadow: 0 0 40px rgba(255, 60, 60, .85); } }
@keyframes onda-anel { from { opacity: .9; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.1); } }

@media (max-width: 600px) {
  .hub-topo { padding-top: 30px; }
  .moldura { inset: 8px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Olho GENJUTSU (Mangekyō girando no topo e no fundo) ---------- */
.olho { display: block; width: 100%; height: 100%; overflow: visible; }
.olho-tomoe, .olho-mangekyo { transform-box: fill-box; transform-origin: center; }
.hub-olho { width: 104px; height: 104px; border-radius: 50%; filter: drop-shadow(0 0 24px rgba(255, 40, 40, .55)); }
.olho-fundo {
  position: fixed; left: 50%; top: 58%; width: min(92vmin, 900px); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0; opacity: .07; filter: blur(.5px);
}
[data-tema="claro"] .olho-fundo { opacity: .05; }
@media (prefers-reduced-motion: no-preference) {
  .hub-olho { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) backwards; }
  .hub-olho .olho-mangekyo { animation: gira-olho 6s linear infinite; }
  .olho-fundo .olho-mangekyo { animation: gira-olho 30s linear infinite; }
  .hub-olho:hover .olho-mangekyo { animation-duration: .5s; }
}
.efeitos-leves .hub-olho, .efeitos-leves .hub-olho *, .efeitos-leves .olho-fundo * { animation-play-state: paused !important; }

/* ---------- Abertura: corvos, Sharingan vira Mangekyō, a ilusão racha e quebra ---------- */
.intro-manchas { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    radial-gradient(18% 9% at 22% 30%, rgba(40, 4, 4, .55), transparent 70%),
    radial-gradient(12% 20% at 80% 68%, rgba(40, 4, 4, .5), transparent 70%),
    radial-gradient(9% 14% at 65% 18%, rgba(40, 4, 4, .45), transparent 70%),
    radial-gradient(14% 7% at 35% 82%, rgba(40, 4, 4, .5), transparent 70%); }
.intro-raios { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.intro-raios i { position: absolute; left: 50%; top: 50%; width: calc(70vmax * var(--l)); height: 4px; margin-top: -2px; border-radius: 4px; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 250, 220, 0) 0%, #fff8d8 25%, #ffb347 60%, rgba(255, 90, 30, 0) 100%);
  filter: drop-shadow(0 0 6px #ffb347); transform: rotate(var(--a)) translateX(14vmin) scaleX(0); }
.muda .intro-raios { opacity: 1; }
.muda .intro-raios i { animation: raio .75s cubic-bezier(.2, .8, .3, 1) infinite; animation-delay: var(--d); }
.intro-olho::before { content: ""; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 90, .8), rgba(255, 90, 30, .45) 35%, transparent 70%); opacity: 0; transition: opacity .4s; z-index: -1; }
.muda .intro-olho::before { opacity: 1; }
.com-intro body { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; }
.intro-cacos { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgb(166, 30, 24), rgb(130, 20, 16) 55%, rgb(70, 8, 8) 100%); }
.quebra .intro-cacos { background: none; }
.intro-cacos i { position: absolute; background: radial-gradient(ellipse at 50% 45%, rgb(166, 30, 24), rgb(130, 20, 16) 55%, rgb(70, 8, 8) 100%) no-repeat; background-size: 100vw 100vh; }
.intro-cacos i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--g), transparent 35%, rgba(255, 210, 200, .07) 50%, transparent 58%); opacity: 0; transition: opacity .3s; }
.quebra .intro-cacos i::after { opacity: 1; }

.intro-corvos { position: absolute; inset: 0; pointer-events: none; }
.corvo { position: absolute; left: 0; top: 0; opacity: 0; }
.corvo svg { display: block; width: 100%; overflow: visible; fill: #0a0204; }
.corvo .rastro { opacity: .35; filter: blur(5px); transform: translateX(-14px) scaleX(1.25); transform-box: fill-box; transform-origin: right center; }
.corvo.perto svg { filter: blur(1.5px); }
.corvo .asa { transform-box: fill-box; transform-origin: 50% 100%; animation: bate var(--bate, .22s) ease-in-out infinite alternate; }
.corvo .asa-tras { opacity: .8; animation-delay: calc(var(--bate, .22s) / -3); }
@keyframes bate { from { transform: scaleY(1); } to { transform: scaleY(-.35) skewX(-10deg); } }

.intro-olho { position: relative; width: min(44vmin, 300px); aspect-ratio: 1; opacity: 0; transform: scale(.3) rotate(-90deg); filter: drop-shadow(0 0 40px rgba(255, 30, 30, .7)); transition: opacity .5s, transform .8s cubic-bezier(.2, .9, .3, 1.1); }
.olha .intro-olho { opacity: 1; transform: none; }
.intro-olho .olho-tomoe { transition: opacity .35s, transform .5s; }
.olha .intro-olho .olho-tomoe { animation: acelera 1s cubic-bezier(.6, 0, .9, .6) forwards, gira-olho .3s 1s linear infinite; }
.intro-olho .olho-mangekyo { opacity: 0; transform: scale(.3) rotate(-240deg); transition: opacity .4s, transform .7s cubic-bezier(.2, .9, .3, 1.15); }
.muda .intro-olho .olho-tomoe { opacity: 0; }
.muda .intro-olho .olho-mangekyo { opacity: 1; transform: none; }
.muda .intro-olho { transform: scale(2.3); transition: transform .5s cubic-bezier(.2, .9, .3, 1.1); animation: treme-olho .08s steps(2) 12 .3s; filter: drop-shadow(0 0 50px rgba(255, 140, 40, .8)); }
.racha .intro-olho .olho-mangekyo { animation: gira-olho .6s linear infinite; }

.intro-ondas { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-ondas i { position: absolute; width: 30vmin; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 50, 40, .8); box-shadow: 0 0 24px rgba(255, 30, 30, .6), inset 0 0 24px rgba(255, 30, 30, .4); opacity: 0; }
.muda .intro-ondas i { animation: onda-choque 1.1s cubic-bezier(.1, .7, .3, 1) forwards; }
.muda .intro-ondas i:nth-child(2) { animation-delay: .2s; }
.muda .intro-ondas i:nth-child(3) { animation-delay: .4s; }

.intro-rachas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 90, 70, .7)); }
.intro-rachas path { fill: none; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s cubic-bezier(.1, .6, .2, 1); transition-delay: var(--d); }
.intro-rachas .sombra { stroke: rgba(18, 0, 2, .75); }
.intro-rachas .luz { stroke: rgba(255, 232, 224, .92); }
.racha1 .intro-rachas .e1, .racha2 .intro-rachas .e2, .racha3 .intro-rachas .e3 { stroke-dashoffset: 0; }
.congelado *, .congelado *::before, .congelado *::after { transition: none !important; }
.racha1 .intro-olho { opacity: .7; filter: saturate(.8) drop-shadow(0 0 30px rgba(255, 60, 30, .5)); }
.racha1 .intro-raios { opacity: .35; transition: opacity .3s; }
.racha2 .intro-raios { opacity: 0; }
.intro-clarao { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 230, 225, .9), rgba(255, 40, 40, .4) 30%, transparent 70%); opacity: 0; pointer-events: none; }
.quebra .intro-clarao { animation: clarao-intro .5s ease-out; }
.quebra .intro-olho { opacity: 0; transform: scale(3.2); transition: opacity .3s, transform .4s; }
.quebra .intro-ondas, .quebra .intro-corvos, .quebra .intro-raios, .quebra .intro-manchas { opacity: 0; transition: opacity .2s; }
.intro-pular { position: absolute; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); background: none; border: 1px solid rgba(255, 220, 216, .2); border-radius: 99px; color: #b9a6a3; font: 500 12px var(--mono); padding: 6px 12px; }
.quebra .intro-pular { opacity: 0; }

@keyframes clarao-intro { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes treme-olho { 50% { transform: translate(3px, -2px); } }
@keyframes gira-olho { to { transform: rotate(360deg); } }
@keyframes acelera { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes onda-choque { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(6); } }
@keyframes raio { 0% { transform: rotate(var(--a)) translateX(14vmin) scaleX(0); opacity: 1; } 55% { transform: rotate(var(--a)) translateX(16vmin) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(40vmin) scaleX(1); opacity: 0; } }

/* Link "pular para os itens": aparece só no Tab */
.pular-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 10px; background: var(--sangue); color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s; }
.pular-link:focus { transform: translateY(76px); }
.conteudo:focus { outline: none; }
a.btn-fantasma { text-decoration: none; display: inline-flex; align-items: center; }
.quebra .intro-rachas { opacity: 0; transition: opacity .15s .05s; }