/* ==========================================================================
   TEOTONIO — INTRO ANIMADA
   Isolada do restante do site
   ========================================================================== */

#tt-intro {
  --tt-navy: #0f1123;
  --tt-white: #ffffff;

  --intro-size:
    clamp(205px, 24vw, 320px);

  --bar-size:
    clamp(56px, 10vh, 96px);


  position: fixed;

  inset: 0;

  z-index: 2147483000;

  overflow: hidden;

  background:
    var(--tt-white);

  opacity: 1;

  visibility: visible;

  transition:
    opacity .58s
    cubic-bezier(.22,.61,.36,1),
    visibility .58s linear;

  contain:
    layout paint style;
}


/* ==========================================================================
   BLOQUEIO TEMPORÁRIO DA PÁGINA
   ========================================================================== */

html:has(body.intro-lock),
body.intro-lock {
  overflow: hidden;
}


/* ==========================================================================
   INTRO FINALIZADA
   ========================================================================== */

#tt-intro.is-done {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


/* ==========================================================================
   STAGE
   ========================================================================== */

#tt-intro .tt-intro__stage {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  background:
    var(--tt-white);
}


/* ==========================================================================
   BARRAS
   ========================================================================== */

#tt-intro .tt-intro__bar {
  position: absolute;

  left: 0;

  width: 100%;

  height:
    var(--bar-size);

  background:
    var(--tt-navy);

  z-index: 2;

  will-change:
    transform,
    opacity;
}


#tt-intro .tt-intro__bar--top {
  top: 0;

  transform:
    translate3d(0, -105%, 0);
}


#tt-intro .tt-intro__bar--bottom {
  bottom: 0;

  transform:
    translate3d(0, 105%, 0);
}


#tt-intro .tt-intro__bar.is-in {
  transform:
    translate3d(0, 0, 0);

  transition:
    transform .72s
    cubic-bezier(.22,.61,.36,1);
}


#tt-intro .tt-intro__bar.is-out {
  opacity: 0;

  transform:
    translate3d(0, 0, 0);

  transition:
    opacity .48s
    cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   CONSTRUÇÃO DA MARCA
   ========================================================================== */

#tt-intro .tt-intro__build {
  position: relative;

  width:
    var(--intro-size);

  aspect-ratio: 1;

  opacity: 0;

  transform:
    translate3d(0, 5px, 0)
    scale(.995);

  will-change:
    opacity,
    transform;
}


#tt-intro .tt-intro__build.is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    opacity .42s ease-out,
    transform .62s
    cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   ELEMENTOS DA MARCA
   ========================================================================== */

#tt-intro .tt-intro__piece,
#tt-intro .tt-intro__brand-final {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  user-select: none;

  pointer-events: none;

  transform-origin: center;

  will-change:
    opacity,
    transform;
}


#tt-intro .tt-intro__piece {
  opacity: 0;
}


#tt-intro .tt-intro__piece--square {
  transform:
    scale(.982);
}


#tt-intro .tt-intro__piece--left {
  transform:
    translate3d(-6px, 0, 0)
    scale(.996);
}


#tt-intro .tt-intro__piece--right {
  transform:
    translate3d(6px, 0, 0)
    scale(.996);
}


#tt-intro .tt-intro__piece--top {
  transform:
    translate3d(0, -6px, 0)
    scale(.996);
}


#tt-intro .tt-intro__piece--bottom {
  transform:
    translate3d(0, 6px, 0)
    scale(.996);
}


#tt-intro .tt-intro__piece--t {
  transform:
    scale(.982);
}


/* ==========================================================================
   ENTRADA DAS PEÇAS
   ========================================================================== */

#tt-intro .tt-intro__piece.is-in {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    opacity .52s ease-out,
    transform .78s
    cubic-bezier(.22,.61,.36,1);
}


#tt-intro .tt-intro__piece.is-soft-out {
  opacity: 0;

  transition:
    opacity .34s ease-out;
}


/* ==========================================================================
   MARCA FINAL
   ========================================================================== */

#tt-intro .tt-intro__brand-final {
  opacity: 0;

  transform:
    translate3d(0, 1px, 0)
    scale(1);
}


#tt-intro .tt-intro__brand-final.is-in {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transition:
    opacity .48s ease-out,
    transform .58s ease-out;
}


/* ==========================================================================
   SAÍDA
   ========================================================================== */

#tt-intro .tt-intro__build.is-exit {
  opacity: 0;

  transform:
    translate3d(0, -12px, 0)
    scale(.998);

  transition:
    opacity .62s
    cubic-bezier(.22,.61,.36,1),
    transform .72s
    cubic-bezier(.22,.61,.36,1);
}


/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 600px) {

  #tt-intro {
    --intro-size:
      clamp(205px, 58vw, 260px);

    --bar-size:
      clamp(44px, 8vh, 68px);
  }

}


@media (min-width: 1600px) {

  #tt-intro {
    --intro-size: 300px;
    --bar-size: 84px;
  }

}


/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  #tt-intro {
    display: none !important;
  }


  body.intro-lock {
    overflow: auto;
  }

}