@import url("./fonts/Kinetika/Kinetika-Medium.css");
html {
  height: 100% !important; }

body {
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: "Kinetika", sans-serif;
  background-color: #000000;
  position: relative;
  overflow: hidden; }
  body::before {
    content: "";
    position: fixed;
    inset: -3%;
    background-image: url(../img/fundo.jpg?v=1);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: -1;
    animation: fundo 18s ease-in-out infinite alternate;
    transform-origin: center center; }
  @media (max-width: 992px) {
    body::before {
      background-position: bottom left;
      animation-duration: 15s; } }

main {
  margin: auto;
  width: 100%;
  min-height: 100%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: top;
  color: #ffffff; }
  main .logotipo {
    margin-top: 30px;
    width: 300px;
    opacity: 0;
    position: relative;
    animation: aparecer 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; }
    main .logotipo img {
      width: 100%;
      display: block; }
    main .logotipo::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.15) 46%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.15) 54%, transparent 58%, transparent 100%);
      background-size: 250% 100%;
      background-position: 100% 0;
      /* Recorta o brilho pela forma do PNG */
      -webkit-mask-image: url("../img/logotipo.png?v=1");
      -webkit-mask-size: 100% 100%;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-image: url("../img/logotipo.png?v=1");
      mask-size: 100% 100%;
      mask-position: center;
      mask-repeat: no-repeat;
      pointer-events: none;
      animation: brilhoLogo 7s ease-in-out 0.8s infinite; }
    @media (max-width: 992px) {
      main .logotipo {
        margin-top: 15px;
        width: 150px; } }
  main .titulo {
    margin-top: 100px;
    font-size: 145px;
    color: #f9b233;
    line-height: 1;
    opacity: 0;
    position: relative;
    animation: aparecer 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; }
    main .titulo::after {
      content: "Driving\A Circularity";
      white-space: pre;
      position: absolute;
      inset: 0;
      color: transparent;
      background: linear-gradient(110deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.85) 49%, rgba(255, 255, 255, 0) 54%, transparent 56%, transparent 100%);
      background-size: 250% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      pointer-events: none;
      animation: brilhoTitulo 8s ease-in-out 3.5s infinite; }
    @media (max-width: 992px) {
      main .titulo {
        margin-top: 50px;
        font-size: 60px; } }
  main .texto {
    font-size: 22px;
    max-width: 680px;
    margin-top: 30px;
    margin-bottom: 30px;
    opacity: 0;
    animation: aparecer 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards; }
  main .nota {
    margin-top: auto;
    margin-bottom: 30px;
    max-width: 680px;
    opacity: 0;
    animation: aparecer 1.3s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; }
    @media (max-width: 992px) {
      main .nota {
        margin-bottom: 15px; } }
    main .nota a {
      color: #ffffff;
      text-decoration: none; }
    main .nota a:hover {
      text-decoration: underline; }

/* ==========================================
   MOVIMENTO DO FUNDO
   ========================================== */
@keyframes fundo {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(1.06); } }
/* ==========================================
   ENTRADA DOS ELEMENTOS
   ========================================== */
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(25px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/* ==========================================
   BRILHO DO LOGOTIPO
   ========================================== */
@keyframes brilhoLogo {
  0%, 40% {
    background-position: 100% 0;
    opacity: 0; }
  45% {
    opacity: 1; }
  65% {
    background-position: 0% 0;
    opacity: 1; }
  70%, 100% {
    background-position: 0% 0;
    opacity: 0; } }
@keyframes brilhoTitulo {
  0%, 35% {
    background-position: 100% 0;
    opacity: 0; }
  42% {
    opacity: 1; }
  82% {
    background-position: 0% 0;
    opacity: 1; }
  88%, 100% {
    background-position: 0% 0;
    opacity: 0; } }

/*# sourceMappingURL=layout.css.map */