/*
 * NexusOT — nova animação: logo → monograma NOT → emblema aberto.
 * Espaço de desenho fixo de 1600×1000 px, escalado por JS (.nx-space).
 * Laço de 11 s; todas as fases ficam em porcentagens do mesmo laço.
 *
 *  0.0–1.7 s  logo original e reflexo no metal
 *  1.7–3.0 s  partículas douradas; N e OT se aproximam e diminuem
 *  3.0–4.9 s  giro completo e formação da moldura
 *  4.9–8.4 s  emblema com reflexos discretos
 *  8.4–10.8 s giro de retorno e recomposição do logo
 */

.nx-brand--animated .nx-anim {
  --nx-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --nx-ease-in-out: cubic-bezier(0.65, 0, 0.22, 1);
  --nx-loop: 11s;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
}

.nx-brand--animated .nx-space {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 1000px;
  transform-origin: 0 0;
  transform: scale(var(--nx-fit, 0.5)) translate(-50%, -50%);
  perspective: 2400px;
  perspective-origin: 800px 470px;
}

.nx-brand--animated .nx-space > *,
.nx-brand--animated .nx-rig > *,
.nx-brand--animated .nx-letters > * {
  position: absolute;
}

.nx-brand--animated .nx-space *,
.nx-brand--animated .nx-space *::before,
.nx-brand--animated .nx-space *::after {
  animation-duration: var(--nx-loop);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

/* ---------- fundo do brasão: raios, brilho, clarão, onda ---------- */

.nx-brand--animated .nx-rays {
  left: 100px;
  top: -230px;
  width: 1400px;
  height: 1400px;
  animation-name: nx-emblem-light;
}

.nx-brand--animated .nx-rays > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 214, 120, 0.22) 0deg 2.2deg,
    rgba(255, 214, 120, 0) 2.2deg 12deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle, #000 18%, transparent 62%);
  animation: nx-turn 70s linear infinite;
  opacity: 0.18;
}

.nx-brand--animated .nx-glow {
  left: 300px;
  top: -30px;
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(70, 150, 255, 0.24) 0%,
    rgba(40, 100, 255, 0.10) 32%,
    rgba(255, 190, 80, 0.035) 52%,
    transparent 68%
  );
  animation-name: nx-emblem-light;
}

.nx-brand--animated .nx-flash {
  left: 400px;
  top: 70px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 252, 235, 0.95) 0%,
    rgba(255, 214, 120, 0.55) 22%,
    rgba(80, 160, 255, 0.18) 45%,
    transparent 66%
  );
  animation-name: nx-flash;
}

.nx-brand--animated .nx-ring {
  left: 360px;
  top: 200px;
  width: 880px;
  height: 540px;
  border-radius: 50%;
  border: 2px solid rgba(255, 220, 140, 0.6);
  box-shadow: 0 0 18px rgba(255, 200, 90, 0.25), inset 0 0 18px rgba(110, 190, 255, 0.2);
  animation-name: nx-ring;
}

/* EXUS e a fita viram brasa antes de sumir */
.nx-brand--animated .nx-burn {
  left: 380px;
  top: 330px;
  width: 720px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 236, 170, 0.75) 0%,
    rgba(255, 180, 60, 0.35) 45%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation-name: nx-burn;
}

/* ---------- logo original ---------- */

.nx-brand--animated .nx-logo {
  left: 50px;
  top: 250px;
  width: 1500px;
  height: 500px;
  animation-name: nx-logo;
}

.nx-brand--animated .nx-logo > img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

/* brilho que atravessa o metal, recortado pelo próprio desenho */
.nx-brand--animated .nx-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: overlay;
}

.nx-brand--animated .nx-logo .nx-sheen {
  -webkit-mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/logo_nexusot.webp");
  mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/logo_nexusot.webp");
}

.nx-brand--animated .nx-sheen > i {
  position: absolute;
  top: -10%;
  left: 0;
  width: 22%;
  height: 120%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%
  );
}

.nx-brand--animated .nx-logo .nx-sheen > i {
  animation-name: nx-sheen-logo;
}

/* ---------- conjunto 3D: moldura + letras ---------- */

.nx-brand--animated .nx-float,
.nx-brand--animated .nx-rig,
.nx-brand--animated .nx-letters,
.nx-brand--animated .nx-letter {
  transform-style: preserve-3d;
}

.nx-brand--animated .nx-float,
.nx-brand--animated .nx-rig,
.nx-brand--animated .nx-letters {
  left: 0;
  top: 0;
  width: 1600px;
  height: 1000px;
}

.nx-brand--animated .nx-float {
  animation-name: nx-float;
}

.nx-brand--animated .nx-rig {
  transform-origin: 800px 470px;
  animation-name: nx-spin, nx-pull;
  animation-timing-function: cubic-bezier(0.65, 0, 0.22, 1);
}

/* Moldura horizontal aberta, centrada no NOT em (800, 470). */
.nx-brand--animated .nx-crest {
  left: 200px;
  top: 105.9px;
  width: 1200px;
  height: 728.2px;
  transform-origin: 600px 364.1px;
  animation-name: nx-crest;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.nx-brand--animated .nx-crest,
.nx-brand--animated .nx-letter > *,
.nx-brand--animated .nx-letter .nx-sheen > i {
  backface-visibility: hidden;
}

.nx-brand--animated .nx-crest--face { translate: 0 0 -2px; }
.nx-brand--animated .nx-crest--sheen { translate: 0 0 -1px; }
.nx-brand--animated .nx-crest--back { translate: 0 0 -27px; transform: rotateY(180deg); }

.nx-brand--animated .nx-crest--d1,
.nx-brand--animated .nx-crest--d2,
.nx-brand--animated .nx-crest--d3 {
  filter: brightness(0.5) saturate(1.2);
}

.nx-brand--animated .nx-crest--d1 { translate: 0 0 -9px; }
.nx-brand--animated .nx-crest--d2 { translate: 0 0 -16px; }
.nx-brand--animated .nx-crest--d3 { translate: 0 0 -23px; }

.nx-brand--animated .nx-crest--sheen {
  -webkit-mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/frame-emblema.webp");
  mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/frame-emblema.webp");
}

.nx-brand--animated .nx-crest--sheen > i {
  width: 9%;
  animation-name: nx-sheen-crest;
}

.nx-brand--animated .nx-rig .nx-crest--sheen {
  opacity: 0.32;
}

/* dentro do conjunto 3D o brilho usa mistura normal: overlay depende do que está atrás */
.nx-brand--animated .nx-rig .nx-sheen {
  mix-blend-mode: normal;
  opacity: 0.55;
}

.nx-brand--animated .nx-letters {
  transform-origin: 800px 470px;
  transform: translateZ(10px);
}

.nx-brand--animated .nx-letters--back {
  transform: translateZ(-37px) rotateY(180deg);
}

.nx-brand--animated .nx-letter {
  transform-origin: 0 0;
  animation-timing-function: cubic-bezier(0.65, 0, 0.22, 1);
}

/* A faixa passa por trás; só a dobra da ponta fica à frente do pé do T. */
.nx-brand--animated .nx-banner {
  position: absolute;
  left: 240px;
  top: 350px;
  width: 1000px;
  height: auto;
  backface-visibility: hidden;
  pointer-events: none;
}

.nx-brand--animated .nx-banner--back {
  translate: 0 0 5px;
  animation-name: nx-banner-reveal;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.nx-brand--animated .nx-banner--front {
  clip-path: polygon(86% 48%, 100% 48%, 100% 100%, 82% 100%, 82% 68%);
  transform-origin: 86% 48%;
  animation-name: nx-banner-tip;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.nx-brand--animated .nx-letter > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.nx-brand--animated .nx-letter--n {
  left: 143.2px;
  top: 312.2px;
  width: 355px;
  height: 371.5px;
  animation-name: nx-move-n;
}

.nx-brand--animated .nx-letter--ot {
  left: 999.6px;
  top: 323.2px;
  width: 510.4px;
  height: 360.5px;
  animation-name: nx-move-ot;
}

.nx-brand--animated .nx-letter .nx-face {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  animation-name: nx-letter-swap;
}

.nx-brand--animated .nx-letter .nx-depth {
  filter: brightness(0.42) saturate(1.3);
  animation-name: nx-letter-swap;
}

.nx-brand--animated .nx-letter .nx-depth:nth-of-type(2) { translate: 0 0 -3px; }
.nx-brand--animated .nx-letter .nx-depth:nth-of-type(3) { translate: 0 0 -6px; }
.nx-brand--animated .nx-letter .nx-depth:nth-of-type(4) { translate: 0 0 -9px; }

.nx-brand--animated .nx-letter .nx-sheen {
  translate: 0 0 1px;
}

.nx-brand--animated .nx-letter--n .nx-sheen {
  -webkit-mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/letter-N.webp");
  mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/letter-N.webp");
}

.nx-brand--animated .nx-letter--ot .nx-sheen {
  -webkit-mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/letter-OT.webp");
  mask-image: url("/layouts/nexusot/assets/brand/emblema-20261013/letter-OT.webp");
}

.nx-brand--animated .nx-letter--n .nx-sheen > i {
  animation-name: nx-sheen-n;
}

.nx-brand--animated .nx-letter--ot .nx-sheen > i {
  animation-name: nx-sheen-ot;
}

/* ---------- partículas e reflexos ---------- */

.nx-brand--animated .nx-glint {
  position: absolute;
  width: 90px;
  height: 90px;
  margin: -45px 0 0 -45px;
  animation-name: nx-glint;
}

.nx-brand--animated .nx-glint::before,
.nx-brand--animated .nx-glint::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nx-brand--animated .nx-glint::before {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 235, 255, 0.85) 0%, rgba(120, 190, 255, 0.25) 30%, transparent 62%);
}

.nx-brand--animated .nx-glint::after {
  background: radial-gradient(circle, #fff 0%, #eaf7ff 35%, #9fd8ff 100%);
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
}

.nx-brand--animated .nx-letter .nx-glint {
  translate: 0 0 2px;
}

.nx-brand--animated .nx-dust,
.nx-brand--animated .nx-spark {
  left: 0;
  top: 0;
  border-radius: 50%;
}

.nx-brand--animated .nx-dust {
  width: var(--s, 10px);
  height: var(--s, 10px);
  translate: var(--x) var(--y);
  background: radial-gradient(circle, #fffbe6 0%, #ffd768 40%, rgba(255, 170, 40, 0) 72%);
  animation-name: nx-dust;
}

.nx-brand--animated .nx-spark {
  width: var(--s, 28px);
  height: var(--s, 28px);
  translate: 786px 456px;
  border-radius: 0;
  background: radial-gradient(circle, #fff 0%, var(--c, #ffe08a) 45%, transparent 100%);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  animation-name: nx-spark;
}

/* ---------- keyframes ---------- */

@keyframes nx-turn {
  to { rotate: 360deg; }
}

@keyframes nx-logo {
  0%, 15.8% {
    opacity: 1;
    scale: 1;
    animation-timing-function: var(--nx-ease-out);
  }
  23.6%, 92.7% {
    opacity: 0;
    scale: 0.98;
    animation-timing-function: var(--nx-ease-out);
  }
  98.2%, 100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes nx-burn {
  0%, 15.8% { opacity: 0; scale: 0.7 1; animation-timing-function: var(--nx-ease-out); }
  17.8% { opacity: 0.58; scale: 1; animation-timing-function: var(--nx-ease-out); }
  27%, 100% { opacity: 0; scale: 1.18 0.75; }
}

@keyframes nx-sheen-logo {
  0%, 4.5% { translate: -110% 0; opacity: 0; }
  5% { opacity: 1; }
  13%, 13.6% { opacity: 1; }
  13.7%, 100% { translate: 480% 0; opacity: 0; }
}

/* cópias recortadas de N e OT assumem no lugar do logo enquanto ele some */
@keyframes nx-letter-swap {
  0%, 15.7% { opacity: 0; }
  15.8%, 94.5% { opacity: 1; }
  98.2%, 100% { opacity: 0; }
}

/* Monograma com escala de 78%; as letras se alinham pela base. */
@keyframes nx-move-n {
  0%, 17.3% {
    translate: 0 0;
    scale: 1;
    animation-timing-function: var(--nx-ease-in-out);
  }
  27.3%, 81.8% {
    translate: 312.3px 12.9px;
    scale: 0.78;
    animation-timing-function: var(--nx-ease-in-out);
  }
  94.5%, 100% { translate: 0 0; scale: 1; }
}

@keyframes nx-move-ot {
  0%, 17.3% {
    translate: 0 0;
    scale: 1;
    animation-timing-function: var(--nx-ease-in-out);
  }
  27.3%, 81.8% {
    translate: -253.2px 10.5px;
    scale: 0.78;
    animation-timing-function: var(--nx-ease-in-out);
  }
  94.5%, 100% { translate: 0 0; scale: 1; }
}

@keyframes nx-spin {
  0%, 27.3% {
    rotate: y 0deg;
    animation-timing-function: var(--nx-ease-in-out);
  }
  44.5%, 76.4% {
    rotate: y 360deg;
    animation-timing-function: var(--nx-ease-in-out);
  }
  91.8%, 100% { rotate: y 720deg; }
}

@keyframes nx-pull {
  0%, 27.3% { scale: 1; animation-timing-function: var(--nx-ease-in-out); }
  36% { scale: 0.9; animation-timing-function: var(--nx-ease-in-out); }
  44.5%, 76.4% { scale: 1; animation-timing-function: var(--nx-ease-in-out); }
  84% { scale: 0.9; animation-timing-function: var(--nx-ease-in-out); }
  91.8%, 100% { scale: 1; }
}

@keyframes nx-crest {
  0%, 34.5% {
    opacity: 0;
    scale: 0.94;
    animation-timing-function: var(--nx-ease-out);
  }
  43.8%, 76.4% {
    opacity: 1;
    scale: 1;
    animation-timing-function: var(--nx-ease-out);
  }
  86%, 100% {
    opacity: 0;
    scale: 0.94;
  }
}

@keyframes nx-sheen-crest {
  0%, 47% { translate: -110% 0; opacity: 0; }
  47.4%, 60.8% { opacity: 1; }
  61%, 100% { translate: 1150% 0; opacity: 0; }
}

@keyframes nx-sheen-n {
  0%, 46% { translate: -110% 0; opacity: 0; }
  46.4%, 51.8% { opacity: 1; }
  52%, 100% { translate: 480% 0; opacity: 0; }
}

@keyframes nx-sheen-ot {
  0%, 49% { translate: -110% 0; opacity: 0; }
  49.4%, 55.8% { opacity: 1; }
  56%, 100% { translate: 480% 0; opacity: 0; }
}

@keyframes nx-float {
  0%, 44.5% { translate: 0 0; animation-timing-function: ease-in-out; }
  60% { translate: 0 -5px; animation-timing-function: ease-in-out; }
  76.4%, 100% { translate: 0 0; }
}

@keyframes nx-emblem-light {
  0%, 40% { opacity: 0; animation-timing-function: var(--nx-ease-out); }
  46%, 76.4% { opacity: 1; animation-timing-function: var(--nx-ease-out); }
  86%, 100% { opacity: 0; }
}

@keyframes nx-flash {
  0%, 42% { opacity: 0; scale: 0.8; animation-timing-function: var(--nx-ease-out); }
  44.5% { opacity: 0.32; scale: 1; animation-timing-function: var(--nx-ease-out); }
  52%, 100% { opacity: 0; scale: 1.12; }
}

@keyframes nx-ring {
  0%, 43.8% { opacity: 0; scale: 0.86; animation-timing-function: var(--nx-ease-out); }
  44.5% { opacity: 0.7; scale: 0.9; animation-timing-function: var(--nx-ease-out); }
  55%, 100% { opacity: 0; scale: 1.34; }
}

@keyframes nx-spark {
  0%, 44% {
    opacity: 0;
    translate: 786px 456px;
    scale: 0.5;
    animation-timing-function: var(--nx-ease-out);
  }
  44.8% { opacity: 0.8; scale: 1; animation-timing-function: var(--nx-ease-out); }
  56%, 100% {
    opacity: 0;
    translate: calc(786px + var(--tx)) calc(456px + var(--ty));
    scale: 0.2;
    rotate: var(--r, 90deg);
  }
}

@keyframes nx-dust {
  0%, 15.8% { opacity: 0; scale: 0.4; animation-timing-function: var(--nx-ease-out); }
  17.8% { opacity: 1; scale: 1; animation-timing-function: var(--nx-ease-out); }
  29%, 100% {
    opacity: 0;
    scale: 0.3;
    translate: calc(var(--x) + var(--dx)) calc(var(--y) + var(--dy));
  }
}

@keyframes nx-glint {
  0% { opacity: 0; scale: 0.2; rotate: 0deg; animation-timing-function: var(--nx-ease-out); }
  1.6% { opacity: 1; scale: 1; rotate: 45deg; }
  5%, 100% { opacity: 0; scale: 0.2; rotate: 90deg; }
}

@keyframes nx-banner-reveal {
  0%, 44.5% { opacity: 0; clip-path: inset(0 100% 0 0); }
  46.5% { opacity: 1; clip-path: inset(0 78% 0 0); }
  53.8%, 76.4% { opacity: 1; clip-path: inset(0 0 0 0); }
  86%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes nx-banner-tip {
  0%, 50.9% { opacity: 0; translate: 0 -20px 18px; rotate: -9deg; }
  57.3%, 76.4% { opacity: 1; translate: 0 0 18px; rotate: 0deg; }
  86%, 100% { opacity: 0; translate: 0 0 18px; rotate: 0deg; }
}

/* menos movimento: sem giro, deslize ou partículas; só o logo com um brilho suave */
@media (prefers-reduced-motion: reduce) {
  .nx-brand--animated .nx-space *,
  .nx-brand--animated .nx-space *::before,
  .nx-brand--animated .nx-space *::after {
    animation-name: none !important;
  }

  .nx-brand--animated .nx-rays,
  .nx-brand--animated .nx-glow,
  .nx-brand--animated .nx-burn,
  .nx-brand--animated .nx-flash,
  .nx-brand--animated .nx-ring,
  .nx-brand--animated .nx-crest,
  .nx-brand--animated .nx-banner,
  .nx-brand--animated .nx-dust,
  .nx-brand--animated .nx-spark,
  .nx-brand--animated .nx-sheen,
  .nx-brand--animated .nx-glint,
  .nx-brand--animated .nx-letter > img {
    opacity: 0;
  }

  /* só as gemas do logo cintilam, em opacidade */
  .nx-brand--animated .nx-space > .nx-glint {
    scale: 0.6;
    animation: nx-glint-soft 4s ease infinite !important;
  }
}

@keyframes nx-glint-soft {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.8; }
}

/* A caixa da marca limita tamanho, layout e pintura de todas as camadas 3D. */
.nx-brand.nx-brand--animated {
  position: relative;
  width: min(336px, 75vw);
  aspect-ratio: 40 / 17;
  overflow: hidden;
  overflow: clip;
  contain: strict;
  isolation: isolate;
  z-index: 0;
  filter: none;
}

.nx-brand--animated > .nx-brand-fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 93.75%;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 16px #000b);
}

.nx-brand--animated .nx-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: clip;
  contain: strict;
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: none;
  visibility: hidden;
}

.nx-brand--animated.is-ready > .nx-brand-fallback {
  visibility: hidden;
}

.nx-brand--animated.is-ready .nx-anim {
  visibility: visible;
}

.nx-brand--animated:not(.is-ready) .nx-space *,
.nx-brand--animated:not(.is-ready) .nx-space *::before,
.nx-brand--animated:not(.is-ready) .nx-space *::after,
.nx-brand--animated.is-paused .nx-space *,
.nx-brand--animated.is-paused .nx-space *::before,
.nx-brand--animated.is-paused .nx-space *::after {
  animation-play-state: paused;
}

.nx-brand--animated.is-ready:not(.is-paused) .nx-space *,
.nx-brand--animated.is-ready:not(.is-paused) .nx-space *::before,
.nx-brand--animated.is-ready:not(.is-paused) .nx-space *::after {
  animation-play-state: running;
}

.nx-brand--animated:focus-visible {
  outline: 2px solid #f2c971;
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 720px), (min-width: 721px) and (max-height: 540px) {
  .nx-brand.nx-brand--animated {
    width: min(278px, 80vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-brand--animated .nx-anim {
    display: none;
  }

  .nx-brand--animated.is-ready > .nx-brand-fallback {
    visibility: visible;
  }
}

/* Desktop e mobile compartilham o giro 3D, a faixa, os reflexos e as partículas. */

/* Pausa temporária enquanto a versão em uma única imagem é preparada. */
.nx-brand--animated .nx-anim { display: none !important; }
.nx-brand--animated .nx-space *,
.nx-brand--animated .nx-space *::before,
.nx-brand--animated .nx-space *::after { animation: none !important; }
.nx-brand--animated.is-ready > .nx-brand-fallback { visibility: visible !important; }