/* ============================================================
   DARTHA — camada de efeitos do hero (dfx)
   ------------------------------------------------------------
   O brasao e o objeto principal da cena. Ele reage ao ponteiro de
   tres formas, escritas por hero-fx.js em variaveis CSS:

     mouse tracking  o brilho especular e o rim percorrem a
                     superficie acompanhando o ponteiro (--e-sx/sy)
     tilt on hover   inclinacao 3D real, com as camadas separadas
                     em translateZ (--e-rx/ry, --e-sc)
     magnetic        o escudo e puxado na direcao do cursor dentro
                     do campo, e volta por mola ao sair (--e-tx/ty)

   Variaveis da cena (fundo):
     --dfx-px / --dfx-py   ponteiro normalizado (-1 .. 1)
     --dfx-mx / --dfx-my   ponteiro em px dentro do hero
     --dfx-on              0 = ponteiro fora, 1 = dentro
     --dfx-spin            giro dos aneis de mira

   Variaveis do escudo:
     --e-tx / --e-ty   deslocamento magnetico, em px
     --e-rx / --e-ry   inclinacao, em graus
     --e-sc            escala
     --e-hot           0 = em repouso, 1 = ponteiro sobre o escudo
     --e-sx / --e-sy   ponteiro em px dentro da caixa do escudo

   Todas tem valor padrao: sem JavaScript a cena continua montada,
   apenas estatica.
   ============================================================ */

[class*="__hero"][id="top"]{
  --dfx-px:0;--dfx-py:0;
  --dfx-mx:50%;--dfx-my:42%;
  --dfx-on:0;--dfx-spin:0deg;
  --e-tx:0px;--e-ty:0px;
  --e-rx:0deg;--e-ry:0deg;
  --e-sc:1;--e-hot:0;
  --e-sx:50%;--e-sy:45%;
}

/* o brasao agora e um objeto em camadas (.dfx-emblem); a
   marca-d'agua em ::before do dartha-brand.css sairia duplicada
   atras dele */
[class*="__hero"][id="top"]::before{content:none}

/* ---------- container ---------- */
.dfx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}

/* ---------- 1. malha hexagonal que acende sob o cursor ---------- */
/* mesma textura do body, porem em outra escala e revelada so num
   raio ao redor do ponteiro: da a sensacao de um sonar varrendo a
   superficie sem poluir o resto do hero */
.dfx-mesh{
  position:absolute;inset:-10%;
  background-image:url("../brand/hexgrid.svg");
  background-size:88px 101px;
  opacity:.85;
  -webkit-mask-image:radial-gradient(420px circle at var(--dfx-mx) var(--dfx-my),#000 0%,#0009 38%,transparent 72%);
  mask-image:radial-gradient(420px circle at var(--dfx-mx) var(--dfx-my),#000 0%,#0009 38%,transparent 72%);
  transform:translate3d(calc(var(--dfx-px) * -14px),calc(var(--dfx-py) * -12px),0);
}

/* halo frio acompanhando o ponteiro, logo abaixo da malha */
.dfx-glow{
  position:absolute;inset:0;
  background:radial-gradient(300px circle at var(--dfx-mx) var(--dfx-my),#0ca0e41f,transparent 70%);
  opacity:var(--dfx-on);
  transition:opacity .5s var(--d-ease);
}

/* ============================================================
   2. o escudo
   ============================================================ */

/* Caixa magnetica. O translate(-50%,-50%) faz o centro visual do
   escudo cair exatamente em (offsetLeft, offsetTop) — e desse par
   que hero-fx.js tira o centro do campo, sem ler layout
   transformado. */
.dfx-emblem{
  position:absolute;top:46%;left:50%;
  width:min(52vw,620px);aspect-ratio:454/548;
  perspective:900px;
  transform:translate3d(calc(-50% + var(--e-tx)),calc(-50% + var(--e-ty)),0);
  will-change:transform;
}

/* Caixa de inclinacao. preserve-3d e o que faz as camadas
   internas se deslocarem uma em relacao a outra quando o escudo
   gira — e o que separa um tilt real de um "cartao de papel". */
.dfx-emblem-3d{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--e-rx)) rotateY(var(--e-ry)) scale(var(--e-sc));
  will-change:transform;
}

.dfx-emblem-3d span{
  position:absolute;inset:0;display:block;
  -webkit-mask:url("../brand/dartha-mark-mask.png") center/contain no-repeat;
  mask:url("../brand/dartha-mark-mask.png") center/contain no-repeat;
}

/* bloom atras do escudo — nao mascarado, so um halo que cresce
   quando o ponteiro entra no campo.
   O seletor repete .dfx-emblem-3d de proposito: a regra generica
   ".dfx-emblem-3d span" acima usa o atalho `mask`, que tem
   especificidade (0,1,1) e reescreveria as mascaras desta camada e
   as do rim. Prefixar sobe para (0,2,0) e devolve a precedencia. */
.dfx-emblem-3d .dfx-e-bloom{
  -webkit-mask:none;mask:none;
  background:radial-gradient(ellipse 52% 48% at 50% 50%,#d6a04938,#0ca0e41a 55%,transparent 74%);
  opacity:calc(var(--e-hot) * .75);
  transform:translateZ(-90px);
}

/* franja ciano deslocada no sentido contrario a inclinacao:
   aberracao cromatica que so aparece quando o escudo gira */
.dfx-e-fringe{
  background:var(--d-cyan-bright);
  opacity:calc(.035 + var(--e-hot) * .06);
  transform:translateZ(-26px);
}

/* corpo dourado */
.dfx-e-base{
  background:linear-gradient(168deg,var(--d-gold-light),var(--d-gold) 46%,var(--d-gold-deep));
  opacity:calc(.05 + var(--e-hot) * .075);
  animation:dfx-breathe 9s ease-in-out infinite;
}

/* brilho especular percorrendo a face sob o ponteiro */
.dfx-e-spec{
  background:radial-gradient(240px circle at var(--e-sx) var(--e-sy),
    #fcd076a6 0%,#d6a04959 30%,#0ca0e42e 58%,transparent 78%);
  opacity:calc(var(--e-hot) * .7);
  transform:translateZ(30px);
}

/* Contorno fino: o mesmo brasao subtraido de uma copia 97,5% menor
   (mask-composite) devolve so a borda. E o detalhe que faz o
   escudo ter aresta em vez de ser uma mancha — e ele acende onde o
   ponteiro esta. Sem suporte a composicao, a camada some: um
   escudo cheio e opaco no lugar da borda estragaria a cena. */
.dfx-emblem-3d .dfx-e-rim{opacity:0}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .dfx-emblem-3d .dfx-e-rim{
    -webkit-mask-image:url("../brand/dartha-mark-mask.png"),url("../brand/dartha-mark-mask.png");
    mask-image:url("../brand/dartha-mark-mask.png"),url("../brand/dartha-mark-mask.png");
    -webkit-mask-size:contain,98.6%;mask-size:contain,98.6%;
    -webkit-mask-position:center,center;mask-position:center,center;
    -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
    -webkit-mask-composite:xor;mask-composite:exclude;
    background:radial-gradient(320px circle at var(--e-sx) var(--e-sy),
      #f9ee8a 0%,var(--d-gold-light) 22%,var(--d-gold) 44%,var(--d-cyan) 70%,#0ca0e400 88%);
    opacity:calc(.1 + var(--e-hot) * .5);
    transform:translateZ(44px);
  }
}

/* varredura diagonal continua sobre a face */
.dfx-e-sweep{
  background:linear-gradient(104deg,
    transparent 42%,#fcd07600 45%,#fcd07659 50%,#fcd07600 55%,transparent 58%);
  background-size:280% 100%;
  opacity:.45;
  transform:translateZ(52px);
  animation:dfx-sweep 7.5s var(--d-ease) infinite;
}

/* aneis de mira: instrumento preso ao escudo, mais ao fundo no 3D */
.dfx-reticle{
  position:absolute;inset:-15%;
  transform:translateZ(-140px) rotate(var(--dfx-spin));
  opacity:calc(.2 + var(--e-hot) * .3);
}
.dfx-reticle svg{width:100%;height:100%;display:block}
.dfx-ret-ring{fill:none;stroke:var(--d-gold);stroke-opacity:.16;stroke-width:1}
.dfx-ret-tick{stroke:var(--d-cyan-bright);stroke-opacity:.34;stroke-width:1.4}

/* ---------- 3. trilhas de dados ---------- */
/* filetes verticais que descem em loop, como um barramento */
.dfx-rails{position:absolute;inset:0;overflow:hidden}
.dfx-rails i{
  position:absolute;top:-30%;width:1px;height:30%;
  background:linear-gradient(180deg,transparent,#0ca0e400 8%,#3ab8e1a6 50%,#0ca0e400 92%,transparent);
  opacity:.5;
  animation:dfx-rail 9s linear infinite;
}
.dfx-rails i:nth-child(1){left:14%;animation-duration:11s;animation-delay:-2s}
.dfx-rails i:nth-child(2){left:31%;animation-duration:8.5s;animation-delay:-6s;background:linear-gradient(180deg,transparent,#d6a04900 8%,#fcd07685 50%,#d6a04900 92%,transparent)}
.dfx-rails i:nth-child(3){left:68%;animation-duration:13s;animation-delay:-4s}
.dfx-rails i:nth-child(4){left:86%;animation-duration:10s;animation-delay:-8s;background:linear-gradient(180deg,transparent,#d6a04900 8%,#fcd07670 50%,#d6a04900 92%,transparent)}

/* ---------- 4. HUD acima da vinheta ---------- */
.dfx-hud{
  position:absolute;inset:0;z-index:15;pointer-events:none;
  font-family:"JetBrains Mono",SF Mono,Consolas,monospace;
}
.dfx-hud b{
  position:absolute;width:22px;height:22px;
  border-color:var(--d-gold);opacity:.3;
  transform:translate3d(calc(var(--dfx-px) * 5px),calc(var(--dfx-py) * 5px),0);
}
.dfx-hud b:nth-child(1){top:88px;left:34px;border-top:1px solid;border-left:1px solid}
.dfx-hud b:nth-child(2){top:88px;right:34px;border-top:1px solid;border-right:1px solid}
.dfx-hud b:nth-child(3){bottom:34px;left:34px;border-bottom:1px solid;border-left:1px solid}
.dfx-hud b:nth-child(4){bottom:34px;right:34px;border-bottom:1px solid;border-right:1px solid}

/* leitura do ponteiro e do estado do campo magnetico */
.dfx-readout{
  position:absolute;bottom:34px;left:70px;
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:#eaf2fb;opacity:calc(.1 + var(--dfx-on) * .2);
  transition:opacity .5s var(--d-ease);white-space:nowrap;
}
.dfx-readout em{font-style:normal;color:var(--d-cyan-bright);opacity:.85}
.dfx-readout em[data-dfx-st]{color:var(--d-gold-light);opacity:calc(.35 + var(--e-hot) * .65)}

/* ---------- 5. animacoes ---------- */
@keyframes dfx-breathe{
  0%,100%{opacity:calc(.042 + var(--e-hot) * .075)}
  50%{opacity:calc(.078 + var(--e-hot) * .075)}
}
@keyframes dfx-sweep{
  0%{background-position:180% 0;opacity:0}
  12%{opacity:.45}
  58%{opacity:.45}
  70%,100%{background-position:-80% 0;opacity:0}
}
@keyframes dfx-rail{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.5}
  85%{opacity:.5}
  100%{transform:translateY(440%);opacity:0}
}

/* ---------- 6. acessibilidade de movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .dfx-e-base{animation:none;opacity:.06}
  .dfx-e-sweep,.dfx-rails{display:none}
  .dfx-mesh{transform:none}
  .dfx-hud b{transform:none}
  .dfx-reticle{transform:none}
}

/* ---------- 7. telas pequenas ---------- */
/* sem ponteiro nao ha campo magnetico: fica so o brasao e a malha,
   sem HUD nem trilhas, para nao competir com o texto */
@media (max-width:900px){
  .dfx-hud b,.dfx-readout,.dfx-rails,.dfx-reticle{display:none}
  .dfx-emblem{width:78vw}
  .dfx-mesh{
    -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 34%,#000,transparent 75%);
    mask-image:radial-gradient(ellipse 90% 60% at 50% 34%,#000,transparent 75%);
    opacity:.5;
  }
}