:root{
    --ts-green: #0B5A3C; /* ajuste pro verde da marca */
    --ts-dur: 900ms;
    --ts-ease: cubic-bezier(.2,.9,.2,1);
  }

  #ts-loader{
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
  }

  /* "site por baixo" (é literalmente a página) -> usamos mix-blend? não. */
  #ts-loader .ts-site-under{
    position:absolute;
    inset:0;
    background: transparent;
    pointer-events:none;
  }

  /* verde por cima (vira máscara no passo 3) */
  #ts-loader .ts-green{
    position:absolute;
    inset:0;
    background: var(--ts-green);
    pointer-events:none;
    opacity: 1;
    transition: opacity 500ms var(--ts-ease);
  }

  /* central */
  #ts-loader .ts-center{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    pointer-events:none;
  }

  /* logos */
  .ts-wordmark, .ts-tmark{
    position:absolute;
    width: min(420px, 76vw);
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity var(--ts-dur) var(--ts-ease),
      transform var(--ts-dur) var(--ts-ease);
  }

  .ts-tmark{
    width: min(180px, 36vw);
  }

  .ts-wordmark svg, .ts-tmark svg{
    width:100%;
    height:auto;
    display:block;
  }

  /* estados */
  #ts-loader[data-step="1"] .ts-wordmark{
    opacity:1;
    transform: translateY(0);
  }

  #ts-loader[data-step="2"] .ts-tmark{
    opacity:1;
    transform: translateY(0);
  }
  .ts-tmark { transform-origin: center center; }

  /* PASSO 3: T cresce infinito e vira máscara */
/* overlay SVG do passo 3 */
.ts-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* verde do overlay */
.ts-overlay-green{
  fill: var(--ts-green);
}
#ts-loader .ts-green { z-index: 1; }
#ts-loader .ts-center { z-index: 2; }
#ts-loader .ts-overlay { z-index: 3; }

/* Fade-out do loader inteiro */
#ts-loader{
  transition: opacity 700ms var(--ts-ease);
  opacity: 1;
}

#ts-loader[data-step="out"]{
  opacity: 0;
}