* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* ===== BASE (SEU BACKGROUND) ===== */
body {
    font-family: 'Oxanium', sans-serif;

    /* cores “terminal” herdadas do template */
    color: rgba(175, 211, 61, 0.92);

    background-color: #1b401e;
    background-image: radial-gradient(circle at center, #1f5a25 0%, #0b1f0e 70%);
    overflow: hidden;
    position: relative;

    text-shadow:
        0 0 1ex rgba(51, 255, 51, 0.55),
        0 0 2px rgba(255, 255, 255, 0.25);
}

/* Noise (SEU) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif");
    background-size: cover;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

/* Scanlines (SEU) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(0,0,0,0) 0px,
            rgba(0,0,0,0.25) 2px,
            rgba(0,0,0,0) 4px
        );
    background-size: auto 4px;
    pointer-events: none;
    z-index: 1;
}

/* ===== CONTEÚDO (SEU LAYOUT) ===== */
.container {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    position: relative;
    z-index: 2;
}

/* Wrapper do 404 com vídeo atrás */
.hero404 {
    position: relative;
    display: inline-block;
    padding: 12px 18px;
}

/* vídeo só atrás do 404 */
.hero404__video {
    position: absolute;
    inset: -18%;
    width: 136%;
    height: 136%;
    object-fit: cover;

    /* “estética template”: grays + luminosity e verde */
    filter:
    grayscale(1)
    sepia(1)
    hue-rotate(70deg)
    saturate(4)
    brightness(0.7)
    contrast(1.3);

    mix-blend-mode: luminosity;
    opacity: 0.60;

    z-index: 0;
    pointer-events: none;

    
}

/* 404 (SEU TAMANHO) + visual template */
h1 {
    font-size: 8rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    transform: scaleX(1.08);
    opacity: 0.98;
}

/* título/subtítulo (SEU) */
.title {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.subtitle {
    margin-top: 12px;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

/* ===== GLITCH (SÓ NO 404, CSS PURO) ===== */
.glitch {
    position: relative;
    z-index: 1; /* acima do vídeo */
    color: rgba(175, 211, 61, 0.95);

    text-shadow:
        0 0 0.07em rgba(175, 211, 61, 1),
        -0.2em 0 2em rgba(175, 211, 61, 0.25),
         0.2em 0 2em rgba(175, 211, 61, 0.25);

    user-select: none;
    animation: shake 700ms ease-in-out infinite alternate;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    opacity: 0.75;
    pointer-events: none;
}

.glitch::before {
    transform: translate(2px, 0);
    text-shadow: -2px 0 rgba(255, 103, 120, 0.65);
    animation: glitchTop 900ms steps(2, end) infinite;
}

.glitch::after {
    transform: translate(-2px, 0);
    text-shadow: 2px 0 rgba(17, 34, 255, 0.55);
    animation: glitchBottom 1050ms steps(2, end) infinite;
}

/* Recortes “hard-coded” (substitui o random() do SCSS) */
@keyframes glitchTop {
    0%   { clip-path: inset(0 0 78% 0); }
    10%  { clip-path: inset(0 0 60% 0); transform: translate(3px, -1px); }
    20%  { clip-path: inset(0 0 72% 0); transform: translate(1px, 0); }
    30%  { clip-path: inset(0 0 55% 0); transform: translate(4px, -2px); }
    40%  { clip-path: inset(0 0 80% 0); transform: translate(2px, 1px); }
    50%  { clip-path: inset(0 0 62% 0); transform: translate(5px, -1px); }
    60%  { clip-path: inset(0 0 75% 0); transform: translate(2px, 0); }
    70%  { clip-path: inset(0 0 58% 0); transform: translate(4px, 1px); }
    80%  { clip-path: inset(0 0 82% 0); transform: translate(1px, -1px); }
    90%  { clip-path: inset(0 0 66% 0); transform: translate(3px, 0); }
    100% { clip-path: inset(0 0 78% 0); }
}

@keyframes glitchBottom {
    0%   { clip-path: inset(62% 0 0 0); }
    10%  { clip-path: inset(48% 0 0 0); transform: translate(-3px, 1px); }
    20%  { clip-path: inset(70% 0 0 0); transform: translate(-1px, 0); }
    30%  { clip-path: inset(52% 0 0 0); transform: translate(-4px, 2px); }
    40%  { clip-path: inset(76% 0 0 0); transform: translate(-2px, -1px); }
    50%  { clip-path: inset(58% 0 0 0); transform: translate(-5px, 1px); }
    60%  { clip-path: inset(72% 0 0 0); transform: translate(-2px, 0); }
    70%  { clip-path: inset(50% 0 0 0); transform: translate(-4px, -2px); }
    80%  { clip-path: inset(78% 0 0 0); transform: translate(-1px, 1px); }
    90%  { clip-path: inset(56% 0 0 0); transform: translate(-3px, 0); }
    100% { clip-path: inset(62% 0 0 0); }
}

@keyframes shake {
    0%, 100% { transform: translate(-1px, 0) scaleX(1.08); }
    10%      { transform: translate(2px, 1px) scaleX(1.08); }
    30%      { transform: translate(-3px, 2px) scaleX(1.08); }
    35%      { transform: translate(2px, -3px) scaleX(1.08); filter: blur(2px); }
    45%      { transform: translate(2px, 2px) skewY(-6deg) scale(0.98, 1) scaleX(1.08); filter: blur(0); }
    50%      { transform: translate(-3px, 1px) scaleX(1.08); }
}

/* ===== FOOTER / STATUS (SEU, INTACTO) ===== */
.footer {
    position: fixed;
    bottom: 22px;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    opacity: 0;
    animation: footerFade 1.2s ease forwards;
    animation-delay: 0.6s;
    pointer-events: none;
    z-index: 2;
}

@keyframes footerFade {
    to { opacity: 0.45; }
}

.status::after {
    content: 'processando';
    animation: statusCycle 18.5s linear infinite;
}

@keyframes statusCycle {
    0%, 16%   { content: 'processando'; }
    17%, 30%  { content: 'tentando'; }
    31%, 49%  { content: 'falhando'; }
    50%, 71%  { content: 'Aqui a conexão não CarreGo'; }
    72%, 88%  { content: 'Iniciando protocolo CarreGo v2...'; }
    89%, 100% { content: 'tentando'; }
}

.dots::after {
    content: '';
    animation: dots 2.6s steps(4, end) infinite;
}

@keyframes dots {
    0%   { content: ''; }
    20%  { content: '.'; }
    40%  { content: '..'; }
    60%  { content: '...'; }
    80%  { content: '...'; }
    100% { content: ''; }
}

/* Responsivo (SEU) */
@media (max-width: 600px) {
    h1 { font-size: 5rem; }
    .title { font-size: 1.2rem; }
}

/* ===== OVERLAY + SCAN FINO (SEU, PERFEITO) ===== */
.overlay {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 1;
}

.overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        0deg,
        transparent 0%,
        rgba(120, 255, 150, 0.15) 42%,
        rgba(180, 255, 210, 0.55) 50%,
        rgba(120, 255, 150, 0.15) 58%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 3%;
    animation: overlayScan 3.5s linear infinite;
}

@keyframes overlayScan {
    0%   { background-position: 0 -120%; }
    100% { background-position: 0 120%; }
}

/* scan-bar mantido no HTML, mas não precisa (não interfere) */
.scan-bar {
    display: none;
}

/* Vídeo GLOBAL: “pinta” a tela toda com a mesma tonalidade do vídeo */
.bg-video-global {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Mesmo grading do vídeo do 404 (pra ficar 100% igual) */
    filter:
        grayscale(1)
        sepia(1)
        hue-rotate(70deg)
        saturate(4)
        brightness(0.7)
        contrast(1.3);

    /* Aqui é o truque: ele só dá a “tonalidade” */
    opacity: 0.4;
    mix-blend-mode: multiply;

    pointer-events: none;
    z-index: 0;
}



/* =========================
   CRT LOADER (FIXED SPIN + FAST GLITCH)
   ========================= */

.crt-loader{
  position: fixed;
  inset: 0;
  background: #020603;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;

  /* mais tempo na tela */
  animation: loaderFade 0.6s ease forwards;
  animation-delay: 2.8s;
}

/* scan por cima */
.crt-loader::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image: linear-gradient(
    0deg,
    transparent 0%,
    rgba(120, 255, 150, 0.12) 42%,
    rgba(180, 255, 210, 0.38) 50%,
    rgba(120, 255, 150, 0.12) 58%,
    transparent 100%
  );
  background-repeat:no-repeat;
  background-size: 100% 3%;
  opacity: .65;

  animation: loaderScan 2.2s linear infinite;
}

/* scanlines do loader */
.crt-loader::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 2px,
      transparent 4px
    );
  opacity:.22;
}

.spinner-wrap{
  position: relative;
  width: 50px;
  height: 50px;
  z-index: 2;
}

/* ✅ GLITCH AQUI (wrapper), não interfere no spin */
.spinner-wrap.glitch{
  animation: spinnerGlitch 0.9s steps(1,end) infinite;
}

/* ✅ SPIN AQUI (inner), sempre gira */
.spin{
  position:absolute;
  inset:0;
  animation: spinCRT 0.85s linear infinite;
}

/* pulse CRT separado */
.spin{
  filter: brightness(1.1) saturate(1.4);
}
.spin::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(120,255,150,0.35);
  opacity: .55;
  animation: crtPulse 1.25s ease-in-out infinite;
  pointer-events:none;
}

/* rings */
.ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border: 3px solid rgba(120,255,150,0.12);
  border-top: 3px solid #78ff96;

  box-shadow:
    0 0 14px rgba(120,255,150,0.95),
    0 0 38px rgba(120,255,150,0.55),
    inset 0 0 18px rgba(120,255,150,0.45);
}

/* fantasmas RGB (aparecem só no glitch) */
.ghost{
  opacity: 0;
  filter: blur(0.25px);
}

.ring-r{
  border-top-color: rgba(255, 90, 120, 0.95);
  box-shadow:
    0 0 10px rgba(255, 90, 120, 0.65),
    0 0 26px rgba(255, 90, 120, 0.35);
}

.ring-b{
  border-top-color: rgba(70, 120, 255, 0.85);
  box-shadow:
    0 0 10px rgba(70, 120, 255, 0.55),
    0 0 26px rgba(70, 120, 255, 0.30);
}

/* quando o wrapper entra no "pico" do glitch, mostra ghosts */
.spinner-wrap.glitch .ghost{
  animation: ghostPop 0.9s steps(1,end) infinite;
}

/* ===== ANIMAÇÕES ===== */

@keyframes spinCRT{
  100%{ transform: rotate(360deg); }
}

@keyframes crtPulse{
  0%,100%{ opacity:.45; transform: scale(1); }
  50%    { opacity:.75; transform: scale(1.06); }
}

/* glitch MAIS rápido e MAIS forte */
@keyframes spinnerGlitch{
  0%, 62%, 100% { transform: translate(0,0) skewX(0deg); }
  64% { transform: translate(6px,-3px) skewX(10deg); }
  66% { transform: translate(-7px,4px) skewX(-14deg); }
  68% { transform: translate(5px,2px) skewX(12deg); }
  70% { transform: translate(-3px,-6px) skewX(-9deg); }
  72% { transform: translate(0,0) skewX(0deg); }
}

/* ghosts sincronizados com os picos */
@keyframes ghostPop{
  0%, 62%, 100% { opacity: 0; transform: translate(0,0); }
  64% { opacity: .95; transform: translate(8px,-2px); }
  66% { opacity: .75; transform: translate(-8px,3px); }
  68% { opacity: .95; transform: translate(7px,2px); }
  70% { opacity: .45; transform: translate(-4px,-5px); }
}

/* scan */
@keyframes loaderScan{
  0%   { background-position: 0 -120%; }
  100% { background-position: 0 120%; }
}

/* fade automático */
@keyframes loaderFade{
  to{
    opacity: 0;
    visibility: hidden;
  }
}
















/* =========================
   CTA COMPRAR DOMÍNIO
   - sem borda fixa
   - borda aparece só quando o scan passa
   - glitch forte mantido
   ========================= */

.cta-buy{
    margin-top: 18px;
    display: inline-block;
    padding: 12px 30px;

    color: rgba(175, 211, 61, 0.95);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    position: relative;
    overflow: hidden;

    /* Glow CRT */
    text-shadow: 0 0 10px rgba(175, 211, 61, 0.55);
    background: rgba(0,0,0,0.12);

    /* SEM BORDA FIXA */
    border: none;
    outline: none;

    /* aparece após 10s */
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;

    animation:
        ctaReveal 0.9s ease forwards 10s,
        ctaGlitch 0.7s steps(1,end) infinite 10s;
}

/* REVEAL */
@keyframes ctaReveal{
    to{
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* GLITCH FORTE */
@keyframes ctaGlitch{
    0%, 58%, 100% { filter: none; transform: translate(0,0); }
    60% {
        filter:
            drop-shadow(3px 0 rgba(255, 103, 120, 0.80))
            drop-shadow(-3px 0 rgba(17, 34, 255, 0.70));
        transform: translate(1px,-1px);
    }
    62% {
        filter:
            drop-shadow(-5px 0 rgba(255, 103, 120, 0.80))
            drop-shadow(5px 0 rgba(17, 34, 255, 0.70));
        transform: translate(-2px,1px);
    }
    64% { filter: none; transform: translate(0,0); }
}

/* =========================
   BORDA “SCAN REVEAL”
   - borda não existe até o scan passar
   ========================= */

.cta-buy::before{
    content:"";
    position:absolute;
    inset: 0;
    border-radius: 0; /* se quiser arredondar, muda aqui */
    pointer-events:none;

    /* A “borda” é desenhada via background, não via border */
    background:
  /* topo */
  linear-gradient(90deg, transparent 0%, #afd33deb 50%, transparent 100%) top/220% 2px no-repeat,

  /* base */
  linear-gradient(90deg, transparent 0%, #afd33deb 50%, transparent 100%) bottom/220% 2px no-repeat,

  /* esquerda */
  linear-gradient(180deg, transparent 0%, #afd33deb 50%, transparent 100%) left/2px 220% no-repeat,

  /* direita */
  linear-gradient(180deg, transparent 0%, #afd33deb 50%, transparent 100%) right/2px 220% no-repeat;


    opacity: 0; /* fica invisível até o scan ativar */
    animation: borderReveal 1.9s linear infinite 10s;
}

/* faz as bordas “aparecerem” só durante um trecho do ciclo */
@keyframes borderReveal{
    0%{
        opacity: 0;
        background-position:
          -250% 0,
           250% 100%,
          0 -250%,
          100% 250%;
    }
    12%{
        opacity: 1;
    }
    55%{
        opacity: 1;
        background-position:
          250% 0,
         -250% 100%,
          0 250%,
          100% -250%;
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 0;
        background-position:
          250% 0,
         -250% 100%,
          0 250%,
          100% -250%;
    }
}

/* Hover estilo template (sem borda fixa, mas com preenchimento) */
.cta-buy:hover{
    cursor: crosshair;
    box-shadow: inset 0 -2.4em 0 0 rgba(175, 211, 61, 0.18);
}

.cta-buy:active{
    box-shadow: inset 0 -2.4em 0 0 rgba(175, 211, 61, 0.35);
}